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

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

  overscroll-behavior: contain;
}

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

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

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

.form-control,
.form-select{
 -webkit-appearance: none;
   
  padding:0 15px;
 
  font-weight:300; 
  font-family:inherit;  
  font-size: var(--f-16);
  border: 1px solid var(--text-light-grey);

  height:48px;
  line-height:46px;  
  background:#fff; 
  border-radius: 4px;   
 
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
  
.form-control:disabled, 
.form-control[readonly] {
background: #e2e2e2;
border-color: #c7c7c7;
} 
 
.form-select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-size: 18px 15px;
  background-repeat: no-repeat;
 
} 

textarea.form-control{
  height: 150px;
  line-height: normal;
  padding-top: 10px; 
}
 
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:var(--text-light-grey);
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:var(--text-light-grey);
 opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:var(--text-light-grey);
 opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:var(--text-light-grey);
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color:var(--text-light-grey);
}

.form-control::placeholder { /* Most modern browsers support this now. */
  color:var(--text-light-grey);
}

.form-group{
  display: block;
  position: relative;
  margin-bottom: 0;
} 
.form-group h6{
  font-size: var(--f-16);
  font-weight:500;
  padding-bottom: 5px;
}

.form-group .group{
  position: relative;
  display: block;
} 
.form-group .group .icons{
  position: absolute;
  top: 0 !important;
  right: 15px;
  bottom: 0 !important;
  width: 24px;
  height: 100%;
} 
.form-group .group .icons.left{
  left: 10px;
  right: auto;
}
.form-group .group .icons.left + .form-control{
  padding-left: 40px;
}
 
.form-check {
  position: relative;
  padding-left:0;
  display: flex;
  gap: 10px;
}
.form-check .form-check-input{
  width: 18px;
  height: 18px;
  margin-right: 0; 
  border-width: 1px;
  position: relative;
  margin-left:0;
  border-radius: 5px; 
  flex-shrink: 0;
}
.form-check label{
  margin-bottom:0;
  font-weight: 400;
  font-size: inherit;
  padding-top: 3px; 
}
.form-check-input:checked[type=checkbox], 
.form-check-input.rounded:checked[type=radio]{
  background-color:transparent; 
   
}
 
.btn{
  position: relative; 
  padding:0 25px 0;    
  font-weight: 500;   
  height:47px;
  line-height:47px;   
  transition: all 0.25s ease-in-out;   
  font-size: var(--f-18);
  font-weight: 500;   
  --bs-btn-bg: var(--main-yellow);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color:var(--bs-btn-border-color);
  --bs-btn-border-radius:100px;
  --bs-btn-color:#fff; 
  --bs-btn-hover-color:#fff; 
  --bs-btn-active-color:var(--bs-btn-hover-color);
  --bs-btn-hover-bg:var(--main-green);
 
}
.btn > span{
  position: relative;
  z-index: 10;
} 
.btn.disabled, .btn:disabled{  pointer-events: none;}

.btn-secondary{
  --bs-btn-bg: var(--light-green);
  --bs-btn-hover-bg:var(--main-yellow);
  --bs-btn-border-color: transparent;
}

.btn-outline-secondary{
  --bs-btn-color:var(--light-green);
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg:var(--light-green);
  --bs-btn-border-color:var(--light-green);
  --bs-btn-hover-border-color:var(--light-green);
}
.btn-outline-white{
  --bs-btn-color:#ffffff;
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg:var(--main-yellow);
  --bs-btn-border-color:#ffffff;
  --bs-btn-hover-border-color:var(--main-yellow);
}

.btn{
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.btn svg,
.btn img{
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.btn.rounded {border-radius: 50px !important;}

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

.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   outline: none !important;
   box-shadow: none!important;
} 
.buttons{
  display: flex; 
  text-align: center;
  padding-top: 30px; 
  gap: 15px;
  justify-content: center;
} 
  
.buttons.d-flex {
  -ms-flex-pack: center;
justify-content: center;
}

.btn.w-150{width: 150px;}
 
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:1366px) { } 
@media (max-width:991.98px){ } 
@media (max-width:576px){ }
/*==================================================
    Icon Setup
==================================================*/  

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

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

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

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
 
.arrow-left{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

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

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

.container{ 
  max-width:calc(1280px + 200px); 
  padding-left: 100px;
  padding-right: 100px;
  position:relative;
  z-index:9; 
}

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

.section{
  display: block;
  position: relative;
  padding:0;
}
 
.compensate-for-scrollbar{ margin-right: 0 !important } 
.compensate-for-scrollbar .header{ right: 0 } 
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }

.fancybox-button--arrow_left > div,
.fancybox-button--arrow_right > div,
.fancybox-button--zoom,
.fancybox-button--play{opacity: 0 !important; pointer-events: none;} 
 
@media (max-width:1550px) {
  .container{  
    max-width:calc(1130px + 280px); 
  }
} 

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

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

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

  --bs-body-color:var(--light-grey);
  --bs-body-bg:#ffffff;
  --bs-body-text-align:left;
  --bs-body-font-weight:300;
  --bs-body-line-height:1.6;
  --bs-body-font-size:var(--f-18);
  --bs-body-font-family:'Kanit', sans-serif;
    
  --animate-duration-2s: all 0.2s ease-in-out;
  --animate-duration-35s: all 0.35s ease-in-out;
  --animate-duration-40s: all 0.40s ease-in-out;
  --animate-duration-45s: all 0.45s ease-in-out;
  
  --main-green:#006838;
  --main-yellow:#F9A11B;
  --light-green:#9BCF46;
  --dark-grey:#111111; 
  --light-grey:#777777;

  --f-55:55px; 
  --f-45:45px;
  --f-40:40px;
  --f-36:36px; 
  --f-30:30px;
  --f-28:28px;
  --f-24:24px;
  --f-22:22px;
  --f-20:20px;
  --f-18:18px;
  --f-16:16px;
  --f-13:13px;

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


@media (max-width:1750px) {
  :root{  
    --f-55:50px; 
    --f-45:40px;
    --f-40:35px; 
    --f-36:32px;
    --f-30:26px;
    --f-28:24px;
    --f-24:22px;
    --f-22:20px; 
  }
}
 
@media (max-width:1550px) {
  :root{
    --f-20:18px;
    --f-18:17px; 
  }
}
@media (max-width: 1400px) {
  :root{
    --f-55:45px; 
    --f-45:35px;
    --f-40:30px; 
    --f-36:28px;
    --f-30:24px;
    --f-28:22px;
    --f-24:20px;
    --f-22:18px; 
  }
}

@media (max-width: 1280px) {
  :root{
    --f-20:17px;
    --f-18:16px; 
  }
}

@media (max-width: 991.98px) {
  :root{}
}
@media (max-width: 576px) {
  :root{ 
    --f-55:30px; 
    --f-45:24px;
    --f-40:24px; 
    --f-36:22px;
    --f-30:20px;
    --f-28:20px;
    --f-24:20px;
    --f-22:17px;  
    --f-20:16px;
    --f-18:var(--f-16);
    --f-16:15px;
  }
}
.fw-medium{font-weight: 500 !important;}
.fw-semibold{font-weight: 600 !important;}
 
.color-black{color: var(--dark-grey);}
.color-green{color: var(--main-green);}
.fs-22{font-size: var(--f-22);}
.fs-28{font-size: var(--f-28) !important;}
b, strong{
  font-weight: bold; 
  font-family: inherit;
}
.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6{   
  margin:0;  
  color:inherit;  
  font-weight:500;
  font-style: normal; 
  line-height: 1.2;   
  color: var(--dark-grey);
  position: relative;
  text-transform: uppercase;
}   
.nowrap{ white-space: nowrap; }    
 
.h1, h1{
  font-size: var(--f-55); 
}

.h2, h2{
  font-size: var(--f-45); 
}

.h3, h3{
  font-size: var(--f-40); 
}

.h4, h4{
  font-size: var(--f-36); 
  font-weight: 500;
}

.h5, h5{
  font-size: var(--f-30); 
}

.h6, h6{
  font-size: var(--f-24); 
}

.f-500{font-weight: 500}
.f-600{font-weight: 600}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  :root{
    --f-300:300;
    --f-400:400;
    --f-500:500;
    --f-600:600; 
  }

} 
 

 @media (max-width:1380px) {
  :root{}
 }
 
@media (max-width:1280px) {
  :root{ }
  
}
 
 
.header,
.navbar-brand,
.navbar-brand img{
  transition: all 0.3s;
}
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  height: auto;
  z-index: 1047;      
  display: block;   
  /* height: var(--header-height); */ 
} 
 
.header .container,
.header .container-fluid{  
  display: flex;   
  align-items: center; 
  height: 100%;
} 


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

  .navbar-slider{
    display: none;
  }
  .header{
    padding:15px 0;
    background-color: rgba(255,255,255,0.5);
  }
  .navbar-brand{
    width: 100px;
  }

  .nav-main{
    margin-left: auto;
    margin-top: auto;
  }
  .nav-main > li > a{
    display: block;
    position: relative;
    font-size:18px;
    font-weight: 500;
    color: var(--dark-grey);
    padding: 0;
    transition: all 0.3s;
  }
  .nav-main > li:last-child > a{padding-right: 0;}
  .nav-main > li > a span{
    display: block;
    position: relative;
    padding:12px 15px;
  }

  .nav-main > li > a span:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom:4px solid var(--main-green);
    transition: all 0.3s;
    opacity: 0;
  }
  .nav-main > li > a.active{color: var(--main-green);}
  .nav-main > li > a.active span:before{opacity: 1;}
  .pc .nav-main > li:hover > a{color: var(--main-green);}
  .pc .nav-main > li:hover > a span:before{opacity: 0;}

  .scrolling .header{padding: 10px 0; background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}
  .scrolling .navbar-brand{width: 80px;}
}

@media (min-width:1200px) {
  
  .nav-main > li > a span{
    padding-left:25px;
    padding-right:25px; 
  }
  
}

@media (min-width:1281px) {
  
  .nav-main > li > a span{
    padding-left:25px;
    padding-right:25px;
    font-size:18px;
  }
  
}

@media (min-width:1400px) {
  .nav-main > li > a span{
    font-size:20px;
  }
}

@media (min-width:1551px) {
  .navbar-brand{width: 120px;}
 
  .nav-main > li > a span{
    padding-left:30px;
    padding-right: 30px;
  }
  .nav-main > li > a span:before{border-width: 5px;}
}
 
.navbar-sidebar,
.btn.btn-icon{display: none;}
 
/*==================================================
   Mobile
==================================================*/  
@media (max-width:991.98px){
  .header{
    padding:15px 0;
    background-color: rgba(255,255,255,0.5);
  }
  .navbar-brand{
    width: 100px;
  }

  .header .nav-main{display: none;}
  .scrolling .header{background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);}

  .navbar-slider{
    display: block;
    position: fixed;
    z-index: 1200;
  }

  /**/

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

  .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;  
    display: flex;
    margin-left:auto;
  }
  
  .btn.btn-icon{ 
    opacity: 1 !important
  }
  .btn-icon:before{display: none;}
  .btn-icon .group{
    display: block;
    position: relative;
    width:32px;
    height:17px;
    margin: 0 auto 0
  }
  .btn-icon .group span{
    height: 3px;
    background-color:var(--main-green);
    position: absolute;
    left: 0;
    right: 0; 
    -webkit-transform-origin: 25px, 1px;
    -ms-transform-origin: 25px, 1px;
    transform-origin: 25px, 1px
  }
   
  .btn-icon .group span:nth-child(1) {
      top: 0;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }
  
  .btn-icon .group span:nth-child(2) {
      top: 7px; 
      -webkit-transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }
  
  .btn-icon .group span:nth-child(3) {
      top: 14px;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }
   
  
  .nav-opened .btn-icon span:nth-child(1):before { width: 100% !important }
  .nav-opened .btn-icon span:nth-child(2):before { width: 100% !important }
  .nav-opened .btn-icon span:nth-child(3):before { width: 100% !important }
  
  .nav-opened .btn-icon .group span:nth-child(1)  {
      -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)
  }
}

@media (max-width:576px){
  .header{
    padding:10px 0;
    background-color: rgba(255,255,255,0.5);
  }
  .navbar-brand{
    width:70px;
  }

}
/*==================================================
   Section
==================================================*/  
 
.page{
  display: block;
  position: relative;
  overflow: hidden;   
} 
 

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


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

  pointer-events: none;

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

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

.section-title{ 
  display: flex;
  position: relative; 
  padding:0;  
  flex-direction: column; 
}   

.section-title .h1{
  color: var(--main-green);
  font-weight: 600;
}
.section-title .h2{
  color: var(--dark-grey);
  font-weight: 500;
}
.section-title .line-animate{
  position: relative;
  width: 150px;
  height: 5px;
  margin:20px 0 15px;
}

.line-animate{ 
  height: 1px;
  position: relative;
}
.line-animate:before{
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  display: inline-block;
  top: 0;
  background-color: var(--main-yellow);
  transition: all 0.9s;
  transition-delay: 0.4s;
} 
 .line-animate.aos-animate:before{
  width: 100%;
}  
.line-animate:before{
  width: 0%;
} 
.line-animate.center:before{
  left: 50%;
  transform: translateX(-50%);
}
.line-animate.static:before{
  width: 100%;
}
.line-animate.small{
  width: 50px;
  height: 2px;
  margin:12px 0;
}
.card{
  border:0;
  border-radius: 0;
  background-color: transparent;
  position: relative;
}
.card-photo{
  position: relative;
  overflow: hidden;
  display: block; 
 
}

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

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

@media (max-width:1280px) {
  .section-title .line-animate{
    width: 120px;
    height: 4px;
  }
} 

@media (max-width:1366px) {
  .py-100{padding: 80px 0;}
}
 
@media (max-width:991.98px) {
  .py-80{
    padding: 60px 0;
  }
    
}

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

@media (max-width:576px) {
  
  .section-title .line-animate{height:3px; margin: 10px 0; width:70px;}
}
   
/*==================================================
   Banner
==================================================*/  

.textrow {
  position: relative;
  overflow: hidden;
  padding: 5px ;
} 
.textrow > span[data-aos]{
  display: block;
}
.section-banner{
  padding: 0 !important; 
  background-color: #eaeaea; 
  overflow: hidden;
}   

.image-parallax{
  display: block;
  position: relative;
}
.image-parallax img{
  width: 100%;
  top: 0;
  left: 0; 
  position: relative;
}
.image-parallax img.img-1{
 top: 0;
  z-index: 1;
}
.image-parallax img.img-2{ 
  z-index: 4;
  margin-top: 10vw;
}

.image-parallax .hgroup{
  position: absolute;
  top: 13.5vw;
  z-index: 4;
  padding-left:22.8vw;
}

.image-parallax h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 5.5vw;
  font-weight: 600;
  color: var(--main-yellow);
/*  text-shadow: 6px 6px 15px rgba(0,0,0,0.2);*/
  text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  line-height: 0.8;
  position: relative;
  top: 0;
}
.image-parallax h2{ 
  font-family: 'Montserrat', sans-serif;
  font-size: 13.1vw;
  font-weight: 600;
  color: var(--main-green);
/*  text-shadow: 6px 6px 15px rgba(0,0,0,0.2);*/
  text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  line-height:1;
  position: relative;
  top: 0;
}

.image-parallax .layer-1{ 
  position: absolute; 
  z-index:3; 
  left: 0;
  right: 0;
  top: 0;
}
.image-parallax .layer-2{ position: relative; z-index: 5;}

.swiper-button{
  width: 40px;
  height: 40px;
}
.swiper-button .icons{
  width: 100%;
  height: 100%;
}
.swiper-button-prev .icons{ transform: rotate(-180deg);}
.swiper-button .icons:before{background-image: url(../img/icons/icon-slider.svg); opacity: 1;}
.swiper-button .icons:after{background-image: url(../img/icons/icon-slider-active.svg);}

.swiper-button:hover .icons:before{ opacity: 0;}
.swiper-button:hover .icons:after{ opacity: 1;}

@media (max-width:1289px) {
  .image-parallax .hgroup{
    top: 15vw;
  }
}
@media (max-width:1024px) {
  .image-parallax .hgroup{
    top: 20vw;
  }
  .image-parallax img.img-2{
    margin-top: 15vw;
  }
}

@media (max-width:576px) {
  .image-parallax .layer-1{
    left: -8vw;
    right: -8vw;
  }
  .image-parallax img.img-2{
    margin-top: 21vw;
  }
  .image-parallax .hgroup{
    top: 28vw;
    padding-left: 19.8vw;
  }
}

/*==================================================
   Aboutus
==================================================*/ 

.article ul.lists{
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article ul.lists li{
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: relative;
  display: flex;
  gap: 12px; 
}
.article ul.lists li:before{
  content: '';
  position: relative;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--light-green);
}
.section-aboutus{ 
  z-index: 20;
  margin-top: -42vw;
  overflow: hidden;
}
.section-aboutus:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top:  23vw;
  height:200vw;
  background-color: #eaeaea;
}
.section-aboutus .article{
  padding-right: 40px;
  padding-bottom: 9vw;
}
.section-aboutus .section-title .h1,
.section-aboutus .section-title .h2{
  font-style: italic;
}
.section-aboutus .nav-tabs{
  margin:15px 0 50px;
}
.nav-tabs{
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-border-radius:4px;
}
.nav-tabs.small > li{
  position: relative; 
  padding: 0 10px;
}
.nav-tabs.small > li:before{
  content: '';
  position: absolute;
  top: 7px;
  left: -1px;
  bottom: 7px;
  border-left: 1px solid #AFAFAF;
}
.nav-tabs.small > li:first-child{
  padding-left: 0;
}
.nav-tabs.small > li:first-child:before{
  display: none;
}
.nav-tabs.small > li > a{
  display: block;
  font-size: var(--f-22);
  font-weight: 400;
  color: var(--light-grey);
  padding: 2px 12px;
  border-radius: var(--bs-nav-tabs-border-radius);
}
.nav-tabs.small > li > a.active,
.pc .nav-tabs.small > li > a:hover{
  background-color: var(--light-green);
  color: #ffffff;
  
}

.tab-about-content h5{
  font-weight: 500;
  margin-bottom: 10px;
}
.tab-about-content h5 .h4{
  color: var(--main-yellow);
  font-style: italic;
  font-weight: 600;
}

.section-aboutus .tab-photo-content{
  height: 100%;
  display: flex;
}
.section-aboutus .tab-photo-content > .active{display: flex;}
.section-aboutus .tab-photo-content .tab-pane{width: 100%; flex-shrink: 0;}
 

.aboutus-photo{
  display: block;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 1vw;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.aboutus-photo.aboutus{
  margin-top: 0;
  max-width: 90%;
  margin-left:0;
}
.tab-about-content .tababout1_2{
  padding-bottom: 11vw;
}
.tab-about-content .tababout1_3{
  padding-bottom:15vw;
}
.aboutus-photo.vission{
  max-width: 92%;
}

.tab-about-content p.line-infos{
  color: #ADADAD;
  font-weight: 300;
  position: relative;
  padding-left: 30px;
  margin-bottom: 25px;
}
.tab-about-content p.line-infos:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  background-color: var(--main-yellow);
  height: 2px;
}
@media (max-width:1750px) {
  .tab-about-content .col-xxl-11{width:100%;}
  .tab-about-content .col-xxl-4{width:50%;}

  .article ul.lists li:before{
    top: 11px;
    width: 6px;
    height: 6px;
  }
}
@media (max-width:1800px) {
  .section-aboutus .nav-tabs{margin-bottom: 35px;}  
}
@media (max-width:1680px) {
  .aboutus-photo{ padding-right: 20px; padding-left: 20px;}

 
}
@media (max-width:1550px) {
  .section-aboutus .article{ padding-bottom: 8vw;}

  .tab-about-content .tababout1_3{
    padding-bottom:10vw;
  }
}

@media (max-width:1440px) { 
  .aboutus-photo{padding-right: 0; padding-left: 0;}

  .article ul.lists li:before{ top:9px;}
}

@media (max-width:1199px) {
  .aboutus-photo.aboutus{margin-top: auto;}

  .tab-about-content .tababout1_2{padding-bottom: 5vw;}
  .tab-about-content .tababout1_3{padding-bottom: 5vw;}
}

@media (max-width:1024px) {
  .section-aboutus{margin-top: -33vw;}
  .section-aboutus .article{padding-right: 20px;}
 
}

@media (max-width:991.98px) {
  .tab-about-content .tababout1_2{padding-bottom:0;}
  .tab-about-content .tababout1_3{padding-bottom: 0;}

  .aboutus-photo.mission,
  .aboutus-photo.vission{
    margin-bottom:30vw;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .section-aboutus:before{height: 400vw;}
}

@media (max-width:576px) {
  .aboutus-photo.mission,
  .aboutus-photo.vission{
    margin-bottom:35vw;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -5vw;
  }

  .tab-about-content h5.fs-28{font-size:18px !important;}
  .tab-about-content p.line-infos{font-size: 14px; padding-left: 23px;}
  .tab-about-content p.line-infos:before{width: 15px;}
}
/*==================================================
   Service
==================================================*/  

.section-service{
  padding: 0 0 80px;
  background-image: url(../img/thumb/bg-service.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: -18vw;
  z-index: 100;
}

.section-service:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50vw;
  background-color: #006838;
}

.section-service .section-title{
  text-align: center;
  padding:13.5vw 0 50px;
}

.section-service .section-title .h4,
.section-service .section-title .h5{color: #fff; margin-bottom: 10px;}
.section-service .section-title .h1,
.section-service .section-title .h2{color: var(--main-yellow); font-weight:600;}

.buble-lists{
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: absolute;
  left:100px;
  right: 100px;
  top: 0;
  z-index: 1000;
}
.buble-lists li{
  padding: 0;
  position:absolute; 
}
.buble-lists li img{
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
}
 
.buble-lists li:nth-child(1){
  left:2%;
  top: 10vw;
  width:80px;
}
.buble-lists li:nth-child(2){
  left: 11.3%;
  top: 2.4vw;
  width: 106px;
}

.buble-lists li:nth-child(3){
  left: 22%;
  top: 11.8vw;
  width: 101px;
}

.buble-lists li:nth-child(4){
  left: 33%;
  top:5.5vw;
  width:90px;
}

.buble-lists li:nth-child(5){
  right: 32%;
  top: 9vw;
  width: 86px;
}
.buble-lists li:nth-child(6){
  right: 22%;
  top: 5.3vw;
  width: 97px;
}

.buble-lists li:nth-child(7){
  right: 12%;
  top: 11.7vw;
  width: 109px;
}

.buble-lists li:nth-child(8){
  right: 1.4%;
  top: 2.7vw;
  width:102px;
}
@keyframes buble1 {100% {top: 30px;}}
@keyframes buble2 {100% {top: -30px;}}
@keyframes buble3 {100% {top: -50px;}}
@keyframes buble4 {100% {top:20px;}}

@keyframes buble5 {100% {top:30px;}}
@keyframes buble6 {100% {top:-30px;}}
@keyframes buble7 {100% {top:-50px;}}
@keyframes buble8 {100% {top:20px;}}
.buble-lists li:nth-child(1) img{animation: buble1 4s linear infinite alternate;}
.buble-lists li:nth-child(2) img{ animation: buble2 4s linear infinite alternate;}
.buble-lists li:nth-child(3) img{ animation: buble3 4s linear infinite alternate; }
.buble-lists li:nth-child(4) img{ animation: buble4 4s linear infinite alternate; }
.buble-lists li:nth-child(5) img{ animation: buble5 4s linear infinite alternate; }
.buble-lists li:nth-child(6) img{ animation: buble6 4s linear infinite alternate; }
.buble-lists li:nth-child(7) img{ animation: buble7 4s linear infinite alternate; }
.buble-lists li:nth-child(8) img{ animation: buble8 4s linear infinite alternate; }
@media (max-width:1750px) {
  
}

@media (max-width:1700px){
  .buble-lists li:nth-child(1){
    left:2%;
    top:8.5vw;
    width:75px;
  }
  .buble-lists li:nth-child(2){
    left: 10.3%;
    top: 2.4vw;
    width: 98px;
  }
  
  .buble-lists li:nth-child(3){
    left: 21%;
    top: 11.8vw;
    width:95px;
  }
  
  .buble-lists li:nth-child(4){
    left: 33%;
    top:5.5vw;
    width:84px;
  }
  
  .buble-lists li:nth-child(5){
    right: 32%;
    top: 9vw;
    width: 80px;
  }
  .buble-lists li:nth-child(6){
    right: 22%;
    top: 4.1vw;
    width: 92px;
  }
  
  .buble-lists li:nth-child(7){
    right: 12%;
    top: 11.7vw;
    width: 101px;
  }
  
  .buble-lists li:nth-child(8){
    right: 1.4%;
    top: 2.7vw;
    width:96px;
  }
}



@media (max-width:1550px) {
  .section-service{margin-top: -15vw;}
  .aboutus-photo{padding-right: 0; max-width: 100%;}
}

@media (max-width:1440px) {
      
  .buble-lists li:nth-child(1){
    left:2%;
    top:9.5vw;
    width:5.5%;
  }
  .buble-lists li:nth-child(2){
    left: 10%;
    top: 2.4vw;
    width: 6.8%;
  }
  
  .buble-lists li:nth-child(3){
    left: 21%;
    top: 11.8vw;
    width:6.5%;
  }
  
  .buble-lists li:nth-child(4){
    left: 33%;
    top:5.5vw;
    width:5.8%;
  }
  
  .buble-lists li:nth-child(5){
    right: 32%;
    top: 9vw;
    width:5.2%;
  }
  .buble-lists li:nth-child(6){
    right: 21%;
    top: 4.4vw;
    width:5.8%;
  }
  
  .buble-lists li:nth-child(7){
    right: 12%;
    top: 11.7vw;
    width:6.4%;
  }
  
  .buble-lists li:nth-child(8){
    right: 0;
    top: 2.7vw;
    width:6.4%;
  }
}

@media (max-width:1300px) { 

  .section-aboutus .section-title .h1, .section-aboutus .section-title .h2{
    white-space:nowrap;
  }

  .buble-lists{
    left: 50px;
    right: 50px;
  }
}

@media (max-width:1199px) {
  .section-service .section-title{padding-bottom: 35px;}

  .section-service{margin-top: -11vw}
}

@media (max-width:1024px) {
  .buble-lists{
    left: 20px;
    right: 20px;
  }

  .buble-lists li:nth-child(2){left: 13%;}
  .buble-lists li:nth-child(6) {
    right: 23%;
    top: 4vw;
  }
  .buble-lists li:nth-child(8){right: 2%;}
}
@media (max-width:991.98px) {
/*  .section-service{margin-top:-25vw;}*/

  .section-service{margin-top:-20vw;}
  

  .aboutus-photo.aboutus{
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
  .section-aboutus .article{
    padding-bottom:30px;
    padding-right: 0;
  }
  .section-service .section-title{padding-bottom:25px; padding-top: 15vw;}
 

   

   
}
@media (max-width:576px) {
 
  .buble-lists li:nth-child(1){
    left:-2%;
    top:19.5vw;
    width:5.5%;
  }
  .buble-lists li:nth-child(2){
    left:3%;
    top: 2.4vw;
    width:8.8%;
  }
  
  .buble-lists li:nth-child(3){
    left: 15%;
    top: 14.8vw;
    width:7.2%;
  }
  
  .buble-lists li:nth-child(4){
    left: 33%;
    top:4vw;
    width:7%;
  }
  
  .buble-lists li:nth-child(5){
    right:26%;
    top: 10vw;
    width:5.9%;
  }
  .buble-lists li:nth-child(6){
    right:16%;
    top: 4vw;
    width:7.7%;
  }
  
  .buble-lists li:nth-child(7){
    right:6%;
    top: 16.7vw;
    width:8%;
  }
  
  .buble-lists li:nth-child(8){
    right: -1%;
    top: 2.7vw;
    width:7%;
  }

  .section-service .section-title{padding-bottom:10px; padding-top: 18vw;}
  .section-service .section-title .h4,
 .section-service .section-title .h5{ margin-bottom:0;}
}


/*==================================================
   Service
==================================================*/  

.nav-service-tabs{
  display: flex;
  margin: 0 -15px;
  
}
.nav-service-tabs li{
  padding: 0 15px;
  width:12.5% ; 
}
.nav-service-tabs li > a{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding:20px 5px 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  text-align: center;
  background-color: #ffffff;

  font-size: var(--f-18);
  color:rgba(17, 17, 17, 0.6);
  font-weight:500;
  text-align: center;
  line-height: 1.2;
}

.nav-service-tabs li > a.active,
.pc .nav-service-tabs li > a:hover{
  background-color: var(--main-yellow);
  color: var(--dark-grey);
}
.pc .nav-service-tabs li > a:hover{
  background-color:rgba(255, 238, 212, 1);
}
.nav-service-tabs .icons{
  margin:0 auto 10px;
  width:80px;
  height:80px;
}
.nav-service-tabs p{
  margin: 0;
  
}
.nav-service-tabs .icon-electric-box{background-image: url(../img/icons/icon-electric-box.svg);}
.nav-service-tabs .icon-light-sign{background-image: url(../img/icons/icon-light-sign.svg);}
.nav-service-tabs .icon-stadium-light{background-image: url(../img/icons/icon-stadium-light.svg);}
.nav-service-tabs .icon-traffic-light{background-image: url(../img/icons/icon-traffic-light.svg);}
.nav-service-tabs .icon-light-pole{background-image: url(../img/icons/icon-light-pole.svg);}
.nav-service-tabs .icon-signage{background-image: url(../img/icons/icon-signage.svg);}
.nav-service-tabs .icon-smart-device{background-image: url(../img/icons/icon-smart-device.svg);}
.nav-service-tabs .icon-road-line{background-image: url(../img/icons/icon-road-line.svg);} 

.card-service{
  display: flex;
  position: relative;
  margin:70px 0 0;
}
.card-service .card-body{
  padding: 45px 0;
  width: 44%;
  
}
.card-service .card-body .article{
  background-color: #ffffff;
  border-radius: 10px;
  padding: 40px 60px 40px 35px;
  margin-right: -60px;
  height: 100%;
}
.card-service .card-body .scrollbar-inner{
  max-height: 20vw;
  padding-right: 40px;
  margin-right: 0;
}

.card-service .card-photo{
  width: 56%;
  position: relative;
  z-index: 10;
  overflow: visible;
  filter: drop-shadow(-20px 40px 40px rgba(55, 78, 62, 0.4));
}
.card-service .card-photo .square-line{ 
  border:4px solid var(--main-yellow);
  width: 23vw;
  height: 23vw;
  position: absolute;
  top: -35px;
  right: -35px;
}
.card-service .card-photo img{
  position: relative;
  z-index: 10;
}
.card-service h4{
  font-weight: 500;
}
.card-service .line-animate{
  height: 2px;
  width: 50px;
  margin: 15px 0 25px;
}

.card-swiper-button{
  position: absolute;
  left: 30px; 
  bottom: 70px;
  z-index: 30;
  width:calc(50% - 170px);
  height: 40px;
}
.card-swiper-button:before{
  content: '';
  position: absolute;
  left: 138px;
  border-top: 2px solid var(--main-yellow);
  right:0;
  top: 50%;
  margin-top: -1px;
  z-index: 10;
}
.card-swiper-button .swiper-button{
  top: 0;
  margin: 0;
}
.card-swiper-button .swiper-button-prev{
  left: 0;
}
.card-swiper-button .swiper-button-next{
  left: 65px;
}

@media (max-width:1800px) {
 
  .nav-service-tabs{
    display: flex;
    margin: 0 -10px;
    
  }
  .nav-service-tabs li{
    padding: 0 10px; 
  }
  .nav-service-tabs li > a{
    padding:15px 5px 20px;
  }

  .card-service .card-body .article{ 
    padding: 35px 60px 35px 25px;
  }
  
}
@media (max-width:1700px) {
  .nav-service-tabs .icons{ 
    margin-bottom: 5px;
  }

  .card-service .card-body .scrollbar-inner{
    max-height: 18vw;
  }
  .card-service .card-body {
    padding: 35px 0;
  }
  .card-swiper-button {height: 35px; bottom: 56px; width: calc(50% - 150px);}
  .card-swiper-button:before{left: 120px;}
  .card-swiper-button .swiper-button{width: 35px; height: 35px;}
  .card-swiper-button .swiper-button-next{left:55px;}
}
@media (max-width:1550px) {
  .nav-service-tabs li > a{
    font-size:var(--f-16);
    padding:10px 10px 12px;
  }
  .nav-service-tabs li > a br{ display: none;}

  .card-service .card-body .article{
    font-size: var(--f-16);
  }
  .card-service .line-animate{margin: 10px 0 20px;}

  .card-service .card-body {
    padding: 2.3vw 0;
  } 
}
@media (max-width:1440px) {
  .nav-service-tabs .icons{
    width: 60px;
    height: 60px;
  }

  .card-service .card-photo .square-line{
    top: -30px;
    right: -30px;
  }

  .card-service{margin-top: 60px;}

  .card-swiper-button { width: calc(50% - 135px);}
}

@media (max-width:1280px) {
  .card-service {margin-top:50px;} 
  .card-service .card-photo .square-line{
    top: -25px;
    right: -25px;
  }
  .card-service .card-body .article{
    font-size: 14px;
  }

  .nav-service-tabs li > a{
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width:1199px) { 
  .nav-service-tabs li {width: 25%; margin: 10px 0;}

  .card-service .card-body{
    padding: 0;
  }
  .card-service .card-body .article {
    padding: 25px 60px 25px 25px;
  }

  .card-service .card-body .scrollbar-inner{
    padding-right:25px;
  }
  .card-service .card-photo,
  .card-service .card-body{
    width: 50%;
  }

  .card-service .line-animate { 
    width: 45px;
    margin:8px 0 15px;
  }

  .card-swiper-button{bottom: 20px; width: calc(50% - 50px);}
  .card-service .card-body .scrollbar-inner {
    max-height:21vw;
  }
}

@media (max-width:1024px) {
  .card-swiper-button{
    left: 25px;
    height: 30px;
  }
  .card-swiper-button:before {left: 88px;}
  .card-swiper-button .swiper-button {
    width: 30px;
    height: 30px;
  }
  .card-swiper-button .swiper-button-next{left: 40px;}
  
}

@media (max-width:991.98px) {
  .card-service .card-photo{
    margin: auto 0;
  }
  .card-service .card-photo .square-line {
    top: -18px;
    right: -18px;
    width:26vw;
    height: 26vw;
  }
  .card-service .card-body .article{
    margin-right: -40px;
    padding-right: 0;
    padding-bottom:75px;
    height: 45vw;
  }
  .card-service .card-body .scrollbar-inner{
    max-height: 100%;
    padding-right:60px;
  }

  .card-swiper-button{width: 48.5%;}
}

@media (max-width:699px) {
  .nav-service-tabs-scrollbar{
    position: relative; 
    overflow: hidden;
    margin:0 -25px;
   
  }
  .nav-service-tabs {
    flex-wrap: unset;
    margin: 0 0 -8px;
    padding:0 20px 10px;  
    overflow: hidden;
    overflow-x: auto;
  }
  .nav-service-tabs li{
    width: auto; 
    flex-shrink: 0; 
    padding: 0 5px; 
    width: 115px;
  }
  .nav-service-tabs .icons{
    width:40px;
    height:40px;
  }
 
  .nav-service-tabs li > a{
    font-size: 13px;
    border-radius:15px;
  }
}

@media (max-width:576px) {
  .section-service{padding-bottom: 40px;}
  .nav-service-tabs li > a {
    padding-left: 10px;
    padding-right: 10px;
  }
  .card-service{
    flex-direction: column-reverse;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  .card-service .card-photo, 
  .card-service .card-body{
    width: 100%;
  }

  .card-service .card-body .article{
    margin-right: 0;
    border-radius: 0 ;
    font-size: var(--f-16);
    padding:30px 0 35px 20px;
    height: auto;
  }
  .card-service .card-body .scrollbar-inner{
    padding-right: 20px;
    /*max-height: 55vw;*/
    max-height: 80vw;
  }
  .card-service .card-body .article p:last-child{
    margin-bottom: 0;
  }
  .card-service .card-photo .square-line {
    top: -13px;
    right: -13px;
    width: 50vw;
    height: 50vw;
    border-width: 3px;
  }

  .card-service .line-animate{
    margin-top: 10px;
  }
  .card-swiper-button{
    width: auto;
    left: 20px;
    right: 0;
    bottom: auto;
    top: 55vw;
  }
  .card-swiper-button:before{display: none;}
  .card-swiper-button .swiper-button{display: none;}

  .swiper-pagination-bullet{width: 8px;height: 8px;}
}

/*==================================================
   Join us
==================================================*/  

.section-joinus{
  background-color: #222222;
  color: #ffffff;
  padding: 100px 0;
  text-align: center;
  position: relative;
}
.section-joinus .background:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.section-joinus .color-yellow{color: var(--main-yellow); font-style: italic;}
.section-joinus h2,
.section-joinus h3,
.section-joinus h4,
.section-joinus h5,
.section-joinus .h2,
.section-joinus .h3,
.section-joinus .h4,
.section-joinus .h5{color: #ffffff;}

.section-joinus h5,
.section-joinus .h5{
  font-weight: 500;
}

.section-joinus h3,
.section-joinus .h3{
  padding: 40px 0;
}

.section-joinus .mail{
  text-transform: none;
  color: var(--main-yellow);
  text-decoration: underline;
  margin-top:20px;
  display: inline-block;
}

.section-joinus p{margin: 0;}
.section-joinus .fs-28{font-size: var(--f-28);}


@media (max-width:576px) {
  .section-joinus{
    padding: 70px 0;
  }
  .section-joinus h3,
  .section-joinus .h3{
    padding: 20px 0;
  } 
}
/*==================================================
   contact
==================================================*/  

.contact-infos h2{
  color: var(--main-green);
  font-weight: bold;
  margin-bottom:30px;
}
.contact-infos h5{
  font-weight: 500;
  margin-bottom: 5px;
}
.contact-infos p{
  font-weight: 300;
}
.contact-infos p strong{
  font-weight: 500;
}
.contact-infos{
  padding:60px 0;
  color: var(--dark-grey);
}

.card-contact{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.card-contact .card-icon{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--light-green); 
  display: flex;
}
.card-contact .card-icon .icons{
  width: 36px;
  height: 36px;
  margin: auto;
}
.card-contact p{
  font-weight: 500;
  text-align: center;
  margin: 0;
}
.pc .card-contact a.tel:hover{color: var(--main-yellow);}
.card-contact a.mail{
  color: var(--main-yellow);
  text-decoration: underline;
  -ms-word-break: break-all;
     word-break: break-all;
 
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}
.card-contact .icons:before{opacity: 1; top: 0; right: auto; bottom:auto; height: 100%; width: 100%;}
.card-contact .icons:after{opacity: 0; top: 10px; right: auto; bottom:auto; height: 100%; width: 100%;}

.pc .card-contact:hover .icons:before{opacity: 0; top: -20px;}
.pc .card-contact:hover .icons:after{opacity: 1; top: 0px;}

.card-contact .icon-phone:before,
.card-contact .icon-phone:after{background-image: url(../img/icons/icon-phone.svg);}
.card-contact .icon-fax:before,
.card-contact .icon-fax:after{background-image: url(../img/icons/icon-fax.svg);}
.card-contact .icon-email:before,
.card-contact .icon-email:after{background-image: url(../img/icons/icon-email.svg);}

.googlemap{
  display: block;
  position: relative;
  height: 100%;
}
.googlemap iframe{
  width: 100%;
  height: 100%;
}

@media (max-width:1550px) {
  .card-contact .card-icon{
    width:70px;
    height: 70px;
  }
  .card-contact .card-icon .icons{
    width: 28px;
    height: 28px;
  }
  .section-contact .container-fluid{
    padding-left:50px;
    padding-right:50px;
  }
}
@media (max-width:1280px) {
  .contact-infos h2{margin-bottom: 20px;}
}
@media (max-width:991.98px) {
  .contact-infos{
    text-align: center;
  }
  .googlemap {height: 40vw;}
}

@media  (max-width:991.98px){
  .section-contact h2{font-size: var(--f-55);}
}
@media  (max-width:576px){
  .contact-infos{padding: 40px 0;}
  .card-contact{ margin-top: 30px; gap: 10px;}
  .card-contact.first{margin-top: 15px;}
  .section-contact h2{margin-bottom: 10px;}
  .googlemap{height: 65vw;}
}

/*==================================================
   Article
==================================================*/  
.section-article {
  padding: 80px 0;
}
.section-article .section-title{
  text-align: center;
  padding:0 0 25px;
}
.section-article .section-title .h2{
  color: var(--main-green);
  font-weight: 600;
}

.card-news{
  display: flex;
  flex-direction: column;
  position: relative;
}
.card-news .card-body{
  padding:20px 0;
}
.card-news h3{
  font-size: var(--f-20);
  color: var(--main-green);
  margin-bottom: 10px;
  transition: all 0.25s;
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 44px;
}
.pc .card-news:hover h3{color: var(--main-yellow);}
.card-news p{
  color: #777777;
  font-weight: 300;
  margin: 0;
}


.card-news.rows{
  flex-direction: row;
  margin-bottom:25px;
}
.card-news.rows .card-photo{
  width:140px;
  flex-grow: 0;
  flex-shrink: 0;
}
.card-news.rows .card-body{
  padding: 0 0 0 15px;
  font-size: var(--f-16);
}
.card-news.rows h3{
  margin-bottom:3px;
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-news.rows p{
  margin-bottom: 0 ;
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media  (max-width:1440px){
   
}

@media  (max-width:1280px){
  .section-article {
    padding: 60px 0;
  }

  .section-article .buttons{padding-top: 10px;}

  .card-news.rows{margin-bottom: 20px;}
  .card-news.rows .card-photo{
    width:125px;
  }
}

@media (min-width:992px) and (max-width:1199px){
  .card-news.rows .card-photo{
    width:100px;
  }
  .card-news.rows .card-body{
    font-size: 14px;
  }
  .card-news.rows h3{font-size: 14px;}
}

@media  (max-width:991.98px){
  .card-news h3{
    font-size: var(--f-22);
  }
}

@media  (max-width:576px){
  .section-article{
    padding:40px 0;
  }
  .section-article .section-title{
    padding-bottom: 15px;
  }
  .card-news .card-body{
    padding-bottom:5px;
  }
  .section-article .buttons{padding-top:25px;}

  .card-news.rows .card-photo{
    width:105px;
  }
  .card-news.rows .card-body{
    font-size: 14px;
  }
  .card-news.rows h3{font-size: 14px;}
}

/*==================================================
   Inbist
==================================================*/  

.section-inbist{
  padding: 60px 0;
}

.section-inbist .title-img{
  width: 270px;
  margin-bottom:30px;
}
.section-inbist .title-img img{
  width: 100%;
}
.section-inbist h2{
  color: var(--main-green);
  font-weight: 600;
  font-style: italic;
}
.section-inbist .article{
  max-width:750px ;
}
.section-inbist .buttons{
  padding-top: 10px;
  justify-content: start;
}
.section-inbist .card-photo{
  overflow: visible;
  margin-right: 40px;
}
.section-inbist .card-photo img{
  position: relative;
  z-index: 5;
}
.section-inbist .texture > span{
  position: absolute;
  z-index: 1;
}
.section-inbist .texture > span.t1{
  background-color: var(--light-green);
  top: 0;
  right: 12.2vw;
  left: -100vw;
  height: 14vw;
}
.section-inbist .texture > span.t2{
  background-color: var(--main-green);
  bottom: 0;
  right: 0.4vw;
  left: 10.3vw;
  height: 7.2vw;
}
.section-inbist .texture > span.t3{ 
  bottom:3.6vw;
  right: 2.2vw;
  left: 15vw;
  height:11vw;
  border:5px solid var(--main-yellow);
}

@media  (max-width:1550px){
  .section-inbist .title-img{
    width: 230px;
  }
  .section-inbist .card-photo{
    margin-left: -4vw;
  }
}

@media  (max-width:1440px){
  .section-inbist .card-photo{
    margin-right: 20px;
  }
}

@media  (max-width:1280px){
  .section-inbist .title-img{
    width: 200px;
  }
  .section-inbist .card-photo{
    margin-left: 0;
  }
  .section-inbist .texture > span.t3{
    border-width: 4px;
  }
}

@media  (max-width:1199px){
  .section-inbist .title-img{
    width:160px;
    margin-bottom:20px;
  }
}

@media  (max-width:991.98px){
  .section-inbist .article{
    margin-top: 40px;
    max-width: 100%;
  }
  .section-inbist .title-img{
    width:200px;
  }

  .section-inbist .texture > span.t1{
    height: 28vw;
    right: 25.2vw;
  }
  .section-inbist .texture > span.t2{
    height: 15.2vw;
    left: 21vw;
    right: 1vw;
  }
  .section-inbist .texture > span.t3 {
    bottom: 7.6vw;
    right: 6.2vw;
    left: 28vw;
    height: 23vw;
  }
}

@media  (max-width:576px){
  .section-inbist{
    padding: 40px 0;
  }
  .section-inbist .title-img{
    width:120px;
  }
}

/*==================================================
   Control Room
==================================================*/  

.section-control-room{
  background-color: var(--main-green);
  color: #fff;
}
.section-control-room .article{
  padding-top: 60px;
  padding-bottom: 60px;
}
.section-control-room .section-title{
  margin-bottom: 15px;
}
.section-control-room h2{
  color: #ffffff;
  font-style: italic;
  font-weight: 600;
}
.section-control-room p:last-child{
  margin-bottom: 0;
}
.section-control-room .row > div{
  position: relative;
}
.section-control-room .swiper-banner{
  height: 100%;
}
.section-control-room .swiper-banner .swiper-slide img{
  height: 100%;
  object-fit: cover;
}
@media  (max-width:576px){
  .section-control-room .article {
    padding-top:40px;
    padding-bottom: 40px;
  }
}

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

.section-portfolio .article{
  display: block;
  padding:40px 20px 0;
  max-width: 650px;
}
.section-portfolio .article h2{
  font-style: italic;
}
.section-portfolio .article h4{
  padding-bottom: 5px;
}
.section-portfolio .section-title .line-animate{
  margin-top: 15px;
}
.section-portfolio .row >div{position: relative;}

.swiper-portfolio{
  background-color: #fff;
}
.swiper-portfolio .swiper-slide{
  background-color: #fff;
}
.portfolio-infos{
  display: block;
  padding-top:2vw;
}
.portfolio-infos h6{
  font-size: var(--f-22);
  font-weight: 400;
  padding-left:45px;
  position: relative;
  margin: 5px 0;
}
.portfolio-infos h6:before{
  content: '';
  position: absolute;
  top: 13px;
  left: 0;
  height: 2px;
  width: 30px;
  background-color: var(--main-yellow);
}
.portfolio-infos .btn-outline-secondary{
  height: 40px;
  line-height: 38px;
  display: inline-block;
  font-weight: 500;
  margin:20px 0 30px;
  pointer-events: none;
}

.swiper-button.portfolio{
  top: auto;
  margin-top: auto;
  bottom: 0px;
  transition: all 0.25s;
  display: block !important;
}
.swiper-button.portfolio:before{
  content: '';
  position: absolute;
  color: var(--light-grey);
  transition: all 0.25s;
  white-space: nowrap;
  top: 6px;
}
.swiper-button-prev.portfolio{
  left:140px;
}
.swiper-button-next.portfolio{
  left:200px;
}
.swiper-button-prev.portfolio:before{
  content: 'Prev Project';
  left: -105px;

}
.swiper-button-next.portfolio:before{
  content: 'Next Project';
  right: -105px;
}
.pc .swiper-button.portfolio:hover:before{color: var(--light-green);}
.section-portfolio .swiper-button.swiper-button-disabled{opacity: 0.5 !important;}
@media  (max-width:1550px){
  .portfolio-infos{padding-top: 20px;}
}

@media  (max-width:1440px){
  .section-portfolio .article h2{
    font-size:36px;  
  }
  .section-portfolio .article h4{
    font-size:28px;
  }
  
  .portfolio-infos h5{font-size: 24px;}

  .portfolio-infos .btn-outline-secondary{margin:15px 0 20px;}
  
}

@media  (max-width:1366px){
  .portfolio-infos{padding-top: 10px;}
  .section-portfolio .article{
    padding-top: 20px;
  }
}

@media (min-width:1200px) and (max-width:1280px){
  .section-portfolio .article h2{
    font-size:35px;  
  }
  .section-portfolio .article h4{
    font-size:22px;
  }
  .portfolio-infos h5{font-size: 20px;}
}

@media  (max-width:1199px){
  /* .swiper-portfolio .swiper-slide > .row{
    flex-direction: column-reverse;
  } */
 
  .section-portfolio .article{
    padding:20px 50px 50px;
    max-width: 100%; 
  } 
  
  .swiper-portfolio .section-title{
    display:none;
  }

  .section-portfolio .section-title{
    text-align: center;
    padding: 50px 0;
  }
  .section-portfolio .line-animate{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
  }
  .section-portfolio .line-animate:before{
    left: 0;
  }

  .swiper-button.portfolio{bottom: auto;}
  .swiper-button-prev.portfolio {left: 170px;}
  .swiper-button-next.portfolio {left: 230px;}
 
  .section-portfolio,
  .swiper-portfolio .swiper-slide{
    background-color: #f5f5f5;
  }

  .swiper-button-row{
    position: relative;
    height:100px; 
    margin-top: 20px;
  }

}

@media  (max-width:991.98px){
  .section-portfolio .article{
    padding: 20px 30px;
    max-width: 100%;
  }
  .swiper-button.portfolio:before{display: none;}
  .swiper-button-prev.portfolio{left:40px;}
  .swiper-button-next.portfolio{left: 100px;}
}
@media  (max-width:576px){
  .swiper-button-row{margin-top: 0; height: 80px;}

  .section-portfolio .section-title{ 
    padding:35px 25px;
  }
  .section-portfolio .section-title h2{
    padding-top: 5px;
    padding-bottom: 3px;
  }
}

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

.section-banner.medium{ 
  background-color: #000000;
  padding: calc(5vw + 115px) 0 5vw !important;
}
.section-banner.medium h1{
  text-align: center;
  color: #ffffff;
  position: relative;
  z-index: 10;
}
.section-banner.medium .background:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}


.section-banner.medium h1{
  color: #ffffff;
  text-align: center;
  font-size: var(--f-55);
}

.section-news{
  padding: 80px 0;
}

.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:50px 0 0;
}
.pagination ul.nav-page{
  padding: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 15px;
}
.pagination ul.nav-page a{
  display: block;
  width: 28px;
  height: 28px;
  color:var(--light-grey);
  font-weight: 400;
  text-align: center;
  line-height: 28px;
 
  border-radius: 50%;
}
.pagination ul.nav-page li.active a,
.pc .pagination ul.nav-page li a:hover{
  background-color: var(--light-green);
  color: #fff;
}

.pagination ul.nav-page li.prev a,
.pagination ul.nav-page li.next a{
  width: auto;
  height: auto;
  padding: 0 10px;
  font-weight: 300;
  background-color: transparent !important;
  border-radius: 0;
}
.pc .pagination ul.nav-page li.prev a:hover,
.pc .pagination ul.nav-page li.next a:hover{
  color: var(--light-green);
}
.news-header{
  padding-bottom:30px;
}
.news-header h2{
  font-weight: 600;
  font-size: var(--f-36);
  margin-bottom: 10px;
}
.news-header .news-date{
  display: flex;
  gap: 10px;
  align-items: center;
}
.news-header .news-date .icons{
  width: 23px;
  height: 23px;
  background-image: url(../img/icons/icon-clock.svg);
}
.news-details p{
  margin-bottom: 30px;
}

.news-details a{
/*  font-style: italic;*/
  color: var(--main-green);
  font-weight: 500;
}

.news-details a:hover{
  color: var(--main-yellow);
}


.news-details p img{margin-top: 5px; margin-bottom: 5px}

.news-related h5{
  border-bottom: 1px solid #DDDDDD;
  padding: 0 0 15px;
  margin-bottom: 25px;
}

.share-box{
  display: flex;
  gap: 15px; 
  align-items: center;
}
.share-lists{
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
  gap: 8px;
}
.share-box h6{
  color: #000000;
  font-size: var(--f-20);
  text-transform: none;
}
.share-lists .icons{
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.pc .share-lists .icons:hover{opacity: 0.7;}
.share-lists .icon-facebook{background-image: url(../img/icons/icon-facebook.svg);}
.share-lists .icon-twitter{background-image: url(../img/icons/icon-twitter.svg);}
.share-lists .icon-line{background-image: url(../img/icons/icon-line.svg);}
.share-lists .icon-email{background-image: url(../img/icons/icon-email-2.svg);}
.share-lists .icon-link{background-image: url(../img/icons/icon-link.svg);} 


.copylink-done{
  position: absolute;
  top: -5px;
  left:20px; 
  width: 128px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #f1f1f1;
  font-size: 13px;
  transition: all 0.5s;
  opacity: 0;
}
.copylink-done .icons{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-right: 8px;
  background-image: url(../img/icons/icon-true.svg);
}

.copylink-done.show{
  opacity: 1;left: 35px;
}
.fancybox-navigation .fancybox-button{
  width: 50px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0;
  padding: 0;
  background-image: url(../img/icons/icon-slider-white.svg);
}
.fancybox-navigation .fancybox-button.fancybox-button--arrow_left{
  transform: rotate(-180deg);
}
.fancybox-navigation .fancybox-button--arrow_left{left:25px;}
.fancybox-navigation .fancybox-button--arrow_right{right:25px;}
.pc .fancybox-navigation .fancybox-button:hover{opacity: 0.7;}

.fancybox-inner .fancybox-infobar:first-child {opacity: 0 !important;}
@media  (max-width:1280px){
  .section-news{
    padding: 60px 0;
  }
  
}

@media  (max-width:991.98px){
  .section-banner.medium{  
    padding: calc(11vw + 101px) 0 11vw !important;
  }

  .news-related {
    margin-top: 50px;
  }
}

@media  (max-width:576px){
  .section-banner.medium{  
    padding: calc(11vw + 70px) 0 11vw !important;
  }

  .pagination{
    padding-top: 30px;
  }
  .pagination ul.nav-page{
    gap:10px
  }

  .news-details p{margin-bottom: 20px;}

  .news-header .news-date .icons {
    width: 20px;
    height: 20px;
  }

  .section-news{
    padding: 40px 0;
  }

  .fancybox-navigation .fancybox-button{
    width: 30px;
  }
  .fancybox-navigation .fancybox-button--arrow_left{left:10px;}
.fancybox-navigation .fancybox-button--arrow_right{right:10px;}
}

/*==================================================
   footer
==================================================*/  

.footer{
  background-color: var(--main-green);
  color: #ffffff;
  text-align: center;
}

.footer .logo{
  width: 170px;
  margin: 0 auto;
  padding: 50px 0 35px;
}
.footer .hgroup{
  display: flex;
  flex: content; 
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.footer .hgroup h4{
  color: #fff;
  font-weight: 600;
}
.footer .hgroup h4 span{
  font-style: italic;
}
.footer .hgroup h4 .color-yellow{
  color: var(--main-yellow);
}

.nav-footer{
  justify-content:space-between;
  max-width: 1000px;
  margin:0 auto;
  padding:30px 0 25px;
}
.nav-footer li a{
  display: block;
  font-size: var(--f-18);
  padding:15px 10px;
  font-weight: 500;
}
.pc .nav-footer li a:hover{color: var(--main-yellow);}
.footer .copyright{
  font-size: var(--f-16);
  margin: 0;
  padding-bottom: 30px;
}

@media (max-width:1440px) {
  .footer .logo{
    width: 140px;
  }
  .nav-footer{max-width: 850px; padding: 20px 0 15px;}
}
@media (max-width:1280px) {
  .nav-footer{
    max-width: 700px;
  }
  .footer .logo{
    width: 110px;
    padding:40px 0 25px;
  }
  .nav-footer li a{padding: 5px;}

  .footer .copyright{font-size: 14px;}
}
@media (max-width:991.98px) {
  .nav-footer{
    max-width: none;
    justify-content: center;
  }
  .nav-footer li a{padding: 5px 10px;}
}
@media (max-width:576px) {
  .footer .logo{
    width: 90px;
    padding-bottom:15px;
  }
  .footer .hgroup h4 .color-yellow{
    display: block;
  }
}


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

.cookie-policy{
  background-color: rgba(17, 17, 17, 0.8);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding:20px 0 20px 0;
  color: #fff;  
  font-size: 15px;
  z-index: 1000;  

  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.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; 
  text-decoration: underline;
}
.pc .cookie-policy a:hover{
  opacity: 0.8; 
}
.cookie-policy .cols:nth-child(1){ 
  position: relative;
  padding-left: 90px;
}
.cookie-policy .cols:nth-child(1):before{
  content: '';
  position: absolute;
  left: -5px;
  top: 0;
  height: 100%;
  width:100px;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-cookie.svg);
}
.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 h5{
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 5px;
}
.cookie-policy .btn{   
  border-radius:8px;
  height: 45px;
  line-height: 38px; 
  font-weight: 400;
  font-size: var(--f-16);
  flex-shrink: 0;
} 

@media (max-width:1400px){
  .cookie-policy .btn{
    height: 40px;
    padding: 0 15px;
  }

  .cookie-policy .container-fluid{
    padding-left:50px;
    padding-right: 50px;
  }
}
 
@media (max-width:1199px){
  .cookie-policy .container-fluid{
    padding-left:30px;
    padding-right: 30px;
  }
  .cookie-policy .container-fluid .cols:nth-child(1){
    padding-left:65px;
    padding-right: 30px;
  }
  .cookie-policy .cols:nth-child(1):before{width: 59px; background-position: center center;}
  .cookie-policy .container-fluid .cols:nth-child(2){
    flex-shrink: 0;
    
  }
  
  .cookie-policy{font-size: 13px;}
  .cookie-policy h5{font-size: 15px;}
  .cookie-policy .btn{font-size: 13px;height: 37px; line-height: 35px;}
   
}
@media (max-width:576px){
  .cookie-policy{
    padding: 15px 0;
  }
  .cookie-policy .container-fluid {
    flex-direction: column;
    gap:12px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .cookie-policy .btn{
     width: 120px;
  } 
  .cookie-policy .container-fluid .cols:nth-child(2){
    padding: 0px; 
    margin-left: 0;
  }
  .cookie-policy .container-fluid .cols:nth-child(1){padding-left:55px;}
  .cookie-policy .container-fluid .cols:nth-child(1):before{width: 50px;background-position: top center;}
}