/* Root Variables - Colors from Figma */
:root {
   --primary1: 3, 41, 67;
  /* #032943 */
  --primary2: 0, 79, 133;
  /* #004F85 */
  --primary3: 33, 33, 33;
  /* #212121 */
  --primary4: 154, 169, 180;
  /* #9AA9B4 */
  --color_base: 103, 103, 103;
  /* #676767 */
  --color_white: 255, 255, 255;
  --color_black: 0, 0, 0;

  --baseFont: "Inter", sans-serif;
  
  --imgPrimary1: invert(8%) sepia(62%) saturate(2955%) hue-rotate(187deg) brightness(98%) contrast(98%);
  --imgPrimary2: invert(13%) sepia(79%) saturate(4955%) hue-rotate(191deg) brightness(90%) contrast(104%);
  --imgPrimary3: invert(0%) sepia(75%) saturate(0%) hue-rotate(201deg) brightness(99%) contrast(74%);
  --imgPrimary4: invert(75%) sepia(13%) saturate(311%) hue-rotate(163deg) brightness(89%) contrast(85%);
  --imgWhite: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);
  --imgBlack: invert(0%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(93%) contrast(103%);

   --padding: clamp(2.625rem, 2.1rem + 2.625vw, 5.25rem);
   --radius: 24px;
   --bs-breadcrumb-divider: '/';
   
}

html {scrollbar-color: rgb(var(--primary2)) #f5f5f5; scrollbar-width: thin;}
::selection {
  color: rgb(var(--color_white));
  background: rgb(var(--primary2));
}
/* Global Styles */
body {
   font-family: var(--baseFont);
   line-height: 1.6;
   background-color: #F0F9FF;
   color: rgb(var(--color_base));
}

#wrapper{
    max-width: 1920px;
    margin: 0 auto;
}
.clr-1{
    color: rgb(var(--primary1));
}
.clr-2{
    color: rgb(var(--primary2));
}
.clr-3{
    color: rgb(var(--primary3));
}
.clr-4{
    color: rgb(var(--primary4));
}
.padding {
   padding: var(--padding) 0;
}
 
/* pic */
.pic {
   overflow: hidden;
}

.pic img {
   transition: 0.4s;
}

.pic:hover img {
   transform: scale(1.08);
}

/* ==========================================================================
   Header Section (Fixed Top Navigation)
   ========================================================================== */
.header-section {
    position: fixed;
    max-width: 1920px;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    transition: all 0.3s ease;    
    border-top: 18px solid rgb(var(--color_white));
    line-height: normal;
}

.navbar-brand-wrapper {position: relative;}
.navbar-brand-wrapper .pneucon-logo {background: rgb(var(--color_white)); padding-bottom: 0.54rem;}
.navbar-brand-wrapper .shape {position: relative;}
.navbar-brand-wrapper:before {content: ''; position: absolute; left: 0; background: rgb(var(--color_white)); width: 220%; height: 100%; transform: translateX(-99.6%);}

.header-section .navbar {
    padding: 0;
}
.header-section .navbar:after{
    opacity: 0;
    visibility: hidden;
    content: "";
    width: 100%;
    height: 99%;
    position: absolute;
    z-index: -1;
    background: linear-gradient(to right, rgba(var(--primary2)), rgb(var(--primary1)));
    transition: 0.3s ease;
}
.header-section.scrolled .navbar:after {
    opacity: 1;
    visibility: visible;    
}

/* main-menu */
#main-menu ul li a {
	position: relative;
    color: rgb(var(--color_white));
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.2px;    
    position: relative;
    transition: color 0.3s ease;
    text-transform: none;

}
#main-menu ul li a{
    padding: 1.4rem 0.85rem;
}

#main-menu ul li ul{
    width: 210px;
}

#main-menu ul li ul li a{
    padding:8px 15px;
    line-height: normal;
    font-weight: 400;
    color: rgb(var(--primary2));

}

#main-menu .sub-menu-toggle {display: none;}


#main-menu ul li ul li a:hover,#main-menu ul li ul li a:focus,#main-menu ul li ul li a:active{
    color: rgb(var(--primary2));
}
#main-menu ul li ul li a::before{
    content: "";
    width: 4px;
    height: 100%;
    background-color: rgb(var(--primary2));
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .3s linear;
}
#main-menu ul li ul li a:hover::before{
    opacity: 1;
}

#main-menu ul li a .bi {
	width: 54px;
	height: 54px;
	position: absolute;
	right: 0;
	top: 0;
	display: none;
}

#main-menu ul li a .bi:before {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#main-menu ul li.active>a>.bi {
	transform: rotate(-180deg);
}
.navbar-toggler-icon{filter: invert(1) grayscale(0);}
/* Position submenus properly */
.menu-main-menu-container {margin-left: auto;}
.menu-item-has-children:hover .dropdown-menu {display: block;}
.dropdown {
	position: relative;
}

.dropdown>.dropdown-menu {
	top: 94%;
	left: 0;
	margin: 0;
	display: none;
	position: absolute;
	border: none;
	padding: 0.5rem 0;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.dropdown .dropdown-menu .dropdown .dropdown-menu {
	left: 100%;
	top: 0;
}

.dropdown-toggle::after {
	display: none;
}




/* ==========================================================================
   Hero Section & Owl Carousel Slider
   ========================================================================== */
.hero-slider-section {
    position: relative;
    border-radius: 0 0 0 calc(var(--radius) * 2.5);
}

.hero-slider {
    position: relative;
    width: 100%;
}

.hero-slide {
    position: relative;
    width: 100%;
    height: calc(100vh - 85px);
    max-height: 1020px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}

.hero-overlay{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-overlay::before,.hero-overlay::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.4;
}
.hero-overlay::before {
    background: linear-gradient(to top, transparent 0%, rgba(var(--color_black), 0.65) 100%);
}
.hero-overlay::after {
    background:linear-gradient(11deg, rgb(0 0 0 / 52%) 15%, rgb(0 0 0 / 40%) 30%, rgb(0 0 0 / 30%) 45%, rgb(0 0 0 / 20%) 55%, rgb(0 0 0 / 10%) 75%);
}

.hero-slide-content {
    z-index: 2;
    width: 100%;
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    align-items: end;
    margin: 0 auto;    
}

.hero-title {
    color: rgb(var(--color_white));
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0;
    padding-bottom: var(--padding);
}

.hero-changing-wrap {
    font-weight: 800;
}

.dynamic-word {
    display: inline-block;
    font-style: italic;
    font-weight: 800;
    color: #ffffff;
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
    transform: translateY(0);
}

.dynamic-word.fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

.hero-subtitle {
    color: rgb(var(--color_white));
    padding-bottom: var(--padding);
}
.hero-subtitle p{
    margin-bottom: 1.5rem;
    font-size: 0.938rem;
}

.btn-custom {
    color: rgba(var(--primary1));
    font-size: 0.938rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: all 0.3s ease;
    text-transform: uppercase;
    background-color: rgb(var(--color_white));
    line-height: normal;
}

.btn-custom .has-arrow {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  margin-left: 0.5rem;
}

.btn-custom .has-arrow::after {
  content: "";
  background-image: url('../images/arrow.png');
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  filter: var(--imgPrimary1);
  background-position: center center;
  background-size: cover;
  position: absolute;
  inset: 0;
  margin: auto;
  display: inline-block;
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
  background: rgb(var(--primary2)) !important;
  color: rgb(var(--color_white)) !important;
}

.btn-custom:hover .has-arrow::after,
.btn-custom:focus .has-arrow::after,
.btn-custom:active .has-arrow::after {
  filter: var(--imgWhite);
}

.btn-custom.style02{
    background-color: rgba(var(--primary1));
    color: rgb(var(--color_white));
}

.btn-custom.style02 .has-arrow::after{
    filter: var(--imgWhite);
}

h2.title{
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
    font-weight: 600;
    color: rgb(var(--primary1));
}

.factory-pic{
    border-radius: 0 0 calc(var(--radius) * 2.5) 0;
}

/* ==========================================================================
   Solutions Section
   ========================================================================== */

.solutions .owl-carousel>div {
    overflow: visible;
}

.solutions-carousel .owl-stage {
    display: flex;
}

.solutions-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
    height: auto;
}

.solution-card {
    background-color: rgb(var(--color_white));
    border-radius: 0 0 0 calc(var(--radius) * 2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.02);
}

.solution-card-body {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.solution-icon {
    margin-bottom: 12px;
}

.solution-icon img {
    filter: var(--imgPrimary1);
}

.solutions-carousel .solution-icon img {
    width: auto;
}

.solution-card-title {
    font-weight: 600;
    color: rgb(var(--primary1));
    margin-bottom: 12px;
}

.solution-card p {
    font-size: 0.875rem;
    color: rgb(var(--color_base)); 
    line-height: 1.5;   
    margin-bottom: 0;
}

.solution-card-img {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 0 0 0 calc(var(--radius) * 2);
}

.solution-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.solution-card:hover .solution-card-img img {
    transform: scale(1.06);
}


.btn-nav {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    background-image: url('../images/arrow.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    width: 32px;
    height: 32px;
    transition: color 0.2s ease, transform 0.2s ease;
    filter: var(--imgPrimary2);
}

.btn-prev{
    transform: rotate(180deg);
}

.btn-nav:hover {
    filter: var(--imgPrimary2);    
}

.btn-nav:focus {
    outline: none;
}

.btn-nav.disabled,
.btn-nav.disable {
    filter: var(--imgPrimary4);
}


/* ==========================================================================
Equipment Section
========================================================================== */
.equipment{
    background-color: rgb(var(--primary1));
    border-radius: 0 0 0 calc(var(--radius) * 2.5);
}

.equipment .owl-carousel>div {
    overflow: visible;
}

.equipment-carousel .owl-stage {
    display: flex;
}

.equipment-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
    height: auto;
}

.equipment-card {
    background-color: #F0F9FF;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 312 / 400;
}

.equipment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.equipment-card-body {
    padding: 1.5rem 1.5rem 2rem 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    z-index: 2;
    position: relative;
}

.equipment-icon img {
    width: auto !important;
    filter: var(--imgPrimary4);
}

.equipment-card-title {
    font-weight: 600;
    color: rgb(var(--primary1));
    margin-top: auto;
    margin-bottom: 0;
}

.equipment-card-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.equipment-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.equipment-card:hover .equipment-card-img {
    opacity: 1;
    visibility: visible;
}

.equipment-card:hover .equipment-icon img {
    filter: var(--imgWhite);
}
.equipment-card:hover .equipment-card-title {
    color: rgb(var(--color_white));
}

.btn-equipment-nav {
    filter: var(--imgWhite);
}

.btn-equipment-prev.disabled,
.btn-equipment-next.disable {
    filter: var(--imgPrimary4) !important;
}

/* statistics */
.statistics .col{
    position: relative;
    padding: 2rem;
}
.statistics .stat-card{
    text-align: center;
}
.statistics .stat-card .number{
    color: rgb(var(--primary1));
    margin-bottom: 2rem;
    line-height: normal;
}
.statistics .stat-card .number::after{
    content: "+";
    margin-left: 0.2rem;    
    line-height: 1.1;
    vertical-align: top;
}

.statistics .stat-card .stat-label{
    color: rgb(var(--color_black));
}

.statistics .col::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #D9D9D9;
    display: block;
    right: 0;
    top: 0;
}

.statistics .col:last-child::after{
    display: none;
}

/* ==========================================================================
   Brochure Section
   ========================================================================== */
.brochure-card {
    border-radius: 0 0 0 calc(var(--radius) * 3.5);
    background-color: rgb(var(--primary2));    
}

.brochure-content-col {
    background-color: rgb(var(--primary2));
    position: relative;
    z-index: 2;
}

.brochure-content {
    padding: calc(var(--padding)/1.4) calc(var(--padding)*1.3);
}

.brochure-content p{
    color: rgb(var(--primary4)) !important;
    margin-bottom: 0;
}


.btn-custom.style03:hover,.btn-custom.style03:focus{
    background-color: rgb(var(--primary1)) !important;
    color: rgb(var(--color_white)) !important;
}
.btn-custom.style04{
    background-color: transparent !important;    
    color: rgb(var(--color_white)) !important;
}
.btn-custom.style04:hover,.btn-custom.style04:focus{
    background-color: rgb(var(--primary1)) !important;
    color: rgb(var(--color_white)) !important;
}

.btn-custom.style05{
    padding: 0;
    background-color: transparent !important;
    color: #9C9C9C;
    text-transform: none;
    font-weight: 600;    
}
.btn-custom.style05 .has-arrow::after{
    filter: invert(60%) sepia(53%) saturate(0%) hue-rotate(202deg) brightness(95%) contrast(81%);
}
.btn-custom.style05:hover .has-arrow::after{
    filter: var(--imgPrimary1);
}
.btn-custom.style05:hover,.btn-custom.style05:focus{
    color: rgb(var(--primary1)) !important;
}

.btn-custom.style05 span{
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.btn-custom.style05:hover span {
    transform: translateX(3px);
}


.brochure-img-wrap {
    min-height: 320px;
}

.brochure-img-wrap img {
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.brochure-card:hover .brochure-img-wrap img {
    transform: scale(1.03);
}

/* ==========================================================================
   News Section
   ========================================================================== */
.news-card {
    border-radius: 0 var(--radius) 0 0;
    background-color: rgb(var(--color_white));
    transition: all 0.35s ease;
    overflow: hidden;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.02);
}

.news-img-wrap {
    border-radius: 0 var(--radius) 0 0;
    overflow: hidden;
}

.news-img-wrap img {
    transition: transform 0.5s ease;
    aspect-ratio: 424 / 177;
    object-fit: cover;
}

.news-card:hover .news-img-wrap img {
    transform: scale(1.06);
}

.news-card .news-card-body{
    aspect-ratio: 424 / 275;
    padding: calc(var(--padding)/2.3);
}

.news-card-title {
    color: rgb(var(--primary1));
    line-height: 1.4;
    transition: color 0.3s ease;
}

.news-card:hover .news-card-title {
    color: rgb(var(--primary2));
}

/* footer-section */
.footer-section{
    background-color: rgb(var(--primary1));
}
.f-logo-wrap{
    display: flex;
    flex-direction: column;
    gap:2rem;
}
.footer-top {
    color: #9AA9B4;
}
.footer-top ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-top ul li{
    margin-bottom: 8px;
}

.footer-top ul li a{
    position: relative;
}

.footer-top a{
    color: #9AA9B4;
    text-decoration: none;
    left: 0;
    transition: all 0.3s ease;
    word-wrap: break-word;
}
.footer-top a:hover{
    left: 5px;
    color: rgb(var(--color_white));
}

.footer-top h3{
    color: rgb(var(--color_white));
}

.social-icons a {
  display: inline-block;
  margin-right: 8px;
  transition: 0.3s;
}

.social-icons a:hover {
  transform: translateY(-3px);
}

.footer-bottom .container{
    border-top: 1px solid #16415F;
    color: #7A8389;
}

.footer-bottom a{
    color: #7A8389;
}
.footer-bottom a:hover{
    color: rgb(var(--color_white));
}

.footer-section .social-icons a img {
    filter: var(--imgWhite);
}

.footer-section .social-icons a.whatsapp img {
    filter: none;
}

.totop {
  bottom: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  position: fixed;
  right: -60px;
  z-index: 10;
  background-color: rgb(var(--primary2));
  text-align: center;
  border-radius: 50%;
  box-shadow: 0px 10px 29.7px 3.3px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}

.totop img {
  transform: rotate(-90deg);
  width: 20px;
  filter: var(--imgWhite);
}

.totop:hover {
  background-color: rgb(var(--primary1));
}

/* Inner page Styles */
.inner-banner {
   position: relative;
   overflow: hidden;  
   aspect-ratio: 1920 / 500;
   width: 100%;
   border-radius: 0 0 0 calc(var(--radius) * 2.5);
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
}
.inner-banner .inner-overlay{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color_black), 0.5);
    z-index: 1;
}

.inner-banner .container {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   height: 100%;
   z-index: 2;
}

.inner-banner h1 {
    margin-bottom: 0;
    padding-top: 0;
    transition: all .3s linear;
    color: rgb(var(--color_white));
}

.sample-card{
    padding: calc(var(--padding) / 1.4);
}

.sample-card .icon{
    margin-bottom: 2rem;
}

.sample-card p{
    margin-bottom: 0;    
}

.content p{
    color: rgb(var(--color_base));
}
.content p:last-child{margin-bottom: 0;}

.video-wrap{
    border-radius: 0 0 0 calc(var(--radius) * 2.5); 
    overflow: hidden;
    padding-top: 56.25%;
}

.video-wrap video{
    display: block;    
}

.hero-video-bg {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  object-fit: cover;
  inset: 0;
}

/* ==========================================================================
   Milestones Section & Owl Carousel Timeline Slider
   ========================================================================== */
.milestones {
    position: relative;
    overflow: hidden;
}
.milestones .bg{
    position: relative;
}
.milestones .bg::before{
    content: "";
    background-color: #F0F9FF;
    position: absolute;    
    width: 200%;
    height: 100%;
    display: block;
    right: 0;
    z-index: 2;
}

/* Continuous Horizontal Timeline Line */
.milestones-slider-wrap::before {
    content: "";
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    height: 1px;
    width: 100vw;
    background-color: rgb(var(--primary4));
    z-index: 1;
}

.milestones-carousel .owl-stage-outer {
    overflow: visible;    
}

.milestone-card {
    position: relative;
    padding-right: 1.5rem;
}

.timeline-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    z-index: 2;
}

.timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #9AA9B4;
    background-color: #F0F9FF;
    flex-shrink: 0;
    position: relative;
    top: 40px;
    transition: all 0.3s ease;
}

.milestone-card:hover .timeline-dot {
    border-color: rgb(var(--primary2));
    background-color: rgb(var(--primary2));
    transform: scale(1.15);
}

.milestone-year {
    color: rgb(var(--primary2));
    margin-bottom: 0;    
}

.milestone-list {
    list-style: none;
    padding: 0 2.3rem;
    margin-bottom: 0;
}

.milestone-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 12px;
    line-height: normal;
}

.milestone-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgb(var(--color_base));
}

.milestone-logo {
    max-height: 32px;
    width: auto !important;
    object-fit: contain;
    filter: grayscale(10%) contrast(90%);
    transition: all 0.3s ease;
}

.milestone-card:hover .milestone-logo {
    filter: none;
}

/* ==========================================================================
   Group Companies Section
   ========================================================================== */
.group-companies {
    background-color: rgb(var(--primary1));
    position: relative;
    border-radius: 0 0 0 calc(var(--radius) * 2.5);
}

.group-companies-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    gap: 3.5rem;
    position: relative;
}
.group-companies-tabs::after{
    content: "";
    background: linear-gradient(to right,  #032943 0%,#004f85 10%,#004f85 90%,#032943 100%);
    width: 100%;
    height: 2px;
    bottom: -4px;
    left: 0;
    right: 0;
    position: absolute;    
}

.group-companies-tabs .nav-link {
    background: transparent;
    border: none;
    color: rgba(var(--primary4));
    font-size: 1.125rem;
    font-weight: 500;
    padding: 1.5rem 0;
    position: relative;
    transition: all 0.3s ease;
}

.group-companies-tabs .nav-link:hover {
    color: rgb(var(--color_white));
}

.group-companies-tabs .nav-link.active {
    background: transparent;
    color: rgb(var(--color_white));    
}

.group-companies-tabs .nav-link::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: rgb(var(--primary2));
    opacity: 0;
    transition: all 0.3s ease;
}

.group-companies-tabs .nav-link.active::after {
    opacity: 1;
}

.company-card {
    background-color: rgb(var(--color_white));
    border-radius: 0 0 calc(var(--radius)*2) 0;
    padding: 2.25rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.company-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.company-name {
    color: rgb(var(--primary1));
    font-weight: 600;
    line-height: normal;
    margin-bottom: 12px;
}

.company-card p{
    font-size: 0.875rem;
    line-height: normal;
    flex-grow: 1;
}

.company-link {
    color: rgb(var(--primary2));
    font-size: 0.875rem;
    text-decoration: underline;
    transition: color 0.3s ease;
    display: inline-block;
    word-break: break-all;
}

.company-link:hover {
    color: rgb(var(--primary1));
}


.policy-card{padding: 2.25rem;
    aspect-ratio: 1/1;
}
.policy-card h3{
    color: rgb(var(--primary1));
    margin-bottom: 12px;
}
.policy-card img{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.product-card {
    border-radius: 0 0 calc(var(--radius)*2) 0;
    background-color: rgb(var(--color_white));
    transition: all 0.35s ease;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.02);
}

.product-img-wrap {
    overflow: hidden;
}

.product-img-wrap img {
    transition: transform 0.5s ease;
    aspect-ratio: 423 / 423;
    object-fit: cover;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.06);
}

.product-card .product-card-body{
    aspect-ratio: 424 / 230;
    padding: calc(var(--padding)/2.3);    
}
.product-card-body p{
    font-size: 0.875rem;
}

.product-card-title {
    color: rgb(var(--primary1));
    line-height: 1.4;
    transition: color 0.3s ease;
    margin-bottom: 12px;
}

.product-card:hover .product-card-title {
    color: rgb(var(--primary2));
}

/* faq-accordion */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-accordion .faq-item {
  background-color: transparent;
  border-radius: 0;
  border: none;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

/* Red / Coral outline box when item is expanded */
.faq-accordion .faq-item:has(.accordion-collapse.show),
.faq-accordion .faq-item.is-open {
  border-color: rgba(var(--primary2));  
}

.faq-accordion .accordion-button {
background-color: transparent;
  box-shadow: none !important;
  padding: 10px 0;
  color: #676767;
  border: none;
  border-radius: 0 !important;
  border-bottom: 1px solid #D9D9D9;
  transition: all 0.2s ease;
}

.faq-accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: rgb(var(--primary2));
  border-color: rgb(var(--primary2));
}

.faq-accordion .accordion-button::after {
  display: none; /* Hide default Bootstrap chevron */
}

/* Plus (+) and Minus (-) toggle icon */
.faq-toggle-icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: "";
  position: absolute;
  background-color: #676767;
  border-radius: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Horizontal line (-) */
.faq-toggle-icon::before {
  width: 12px;
  height: 2px;
  transform: rotate(45deg);
  left: 0px;
}

/* Vertical line (|) for plus (+) */
.faq-toggle-icon::after {
  width: 2px;
  height: 12px;
transform: rotate(45deg);
    right: 9px;
}

/* When expanded, hide vertical line to show minus (-) */
.faq-accordion .accordion-button:not(.collapsed) .faq-toggle-icon::after {
  transform: rotate(135deg);
  background-color: rgb(var(--primary2));
}
.faq-accordion .accordion-button:not(.collapsed) .faq-toggle-icon::before {
    transform: rotate(-45deg);
    background-color: rgb(var(--primary2));
}

.faq-accordion .accordion-body {
    padding: 1.5rem 0;
}

.faq-accordion .accordion-body p {
    color: #676767;
    line-height: 1.65;
}
.faq-accordion .accordion-body ul{
    /* padding: 1.5rem; */
    margin-bottom: 0;
}
.faq-accordion .accordion-body ul li{
    color: #676767;
    margin-bottom: 12px;
    line-height: normal;
}
.faq-accordion .accordion-body ul li:last-child{
    margin-bottom: 0;
}

.faq-accordion .accordion-body .list-item{
    display: flex;
    flex-wrap: wrap;
    padding: 1.5rem;
}
.faq-accordion .accordion-body .list-item .item{
    width: 50%;
    margin-bottom: 1rem;
    gap: 1rem;
    align-items: center;
}
.faq-accordion .accordion-body .guide-block{
    padding: 1.5rem;
    background-color: rgb(var(--color_white));
    border-radius: 0 0 calc(var(--radius) * 2.5) 0;
}
.faq-accordion .accordion-body .guide-block .zoom{
    position: absolute;
    top: -1rem;
    right: -1rem;
}

/* product-slider */
.product-slider .slider .item img{
    border-radius: 0 0 calc(var(--radius) * 3.5) 0;
    aspect-ratio: 1/1;
    height: 100%;
    object-fit: cover;
    object-position: 50% 80%;
}
.product-slider .slider-nav .item img{
    border-radius: 0 0 calc(var(--radius) * 1.5) 0;
    aspect-ratio: 208 / 150;
    object-fit: cover;
}

.application-pic{
    overflow: hidden;
    border-radius: 0 0 calc(var(--radius) * 3.5) 0;
}

.system-block .equipment-card{
    background-color: rgb(var(--color_white));
}

.common-slider .owl-nav,.facility-slider .owl-nav{display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem;}
.common-slider .owl-nav button.owl-prev,.common-slider .owl-nav button.owl-next,.facility-slider .owl-nav button.owl-prev,.facility-slider .owl-nav button.owl-next{ cursor: pointer;
    background-image: url('../images/arrow.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    width: 32px;
    height: 32px;
    transition: color 0.2s ease, transform 0.2s ease;
    filter: var(--imgPrimary2);}
.common-slider .owl-nav  button.owl-prev,.facility-slider .owl-nav  button.owl-prev{transform: rotate(-180deg);}
.common-slider .owl-nav  button.owl-prev.disabled,.common-slider .owl-nav  button.owl-next.disabled,.facility-slider .owl-nav  button.owl-prev.disabled,.facility-slider .owl-nav  button.owl-next.disabled{
    filter: var(--imgPrimary4);
}

.common-slider .pic,.facility-slider .pic{
    border-radius: 0 calc(var(--radius)*2) 0 0;
}

.testing-item .img-wrap{
    overflow: hidden;
    border-radius: 0 calc(var(--radius)*2) 0 0;
    padding-top: 128%;    
}

.testing-item .img-wrap .zoom{
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all .3s linear;
}
.testing-item .img-wrap:hover .zoom{
    transform: scale(3);   
}
.testing-item .img-wrap .zoom img{
    filter: brightness(0) invert(1);
}
.testing-item .img-wrap::before{
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(var(--primary1), 0.7);
    transition: all 0.35s ease;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.testing-item .img-wrap:hover::before{
    opacity: 1;
    visibility: visible;
}

.glightbox-clean .gdesc-inner{
    background-color: rgb(var(--primary1));
}
.glightbox-clean .gslide-title{
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    color: rgb(var(--color_white));
}

.form-control, .form-select {height: 46px; border-radius: 4px; border-color: #E1EEF8;}
.form-label {font-size: 0.875rem; margin-bottom: 0.25rem;}
textarea.form-control {height: auto; min-height: 120px;}
.form-check-input {width: 1.5rem; height: 1.5rem; border-radius: 4px; border-color: #E1EEF8; margin: 0;}
.form-check-input:checked {background-color: rgb(var(--primary2)); border-color: rgb(var(--primary2)); box-shadow: none;}

.office-card {
    background-color: rgb(var(--color_white));
    border-radius: 0 calc(var(--radius) * 2) 0 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: calc(var(--padding)/2.3);
}

.office-card p {
    display: flex;
    align-items: start;
    margin-bottom: 0.5rem;
}

.office-card p i {margin-right: 0.5rem;}
.office-card p a {color: rgba(var(--color_base)); transition: 0.4s;}
.office-card p a:hover {color: rgb(var(--primary2));}

.pic-wrapper [class^="col-"]:last-child img{border-radius: 0 0 calc(var(--radius) * 3.5) 0;}


.csr-card {
    border-radius: 0 var(--radius) 0 0;
    background-color: rgb(var(--color_white));
    transition: all 0.35s ease;
    overflow: hidden;
}

.csr-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.02);
}

.csr-img-wrap {
    border-radius: 0 var(--radius) 0 0;
    overflow: hidden;
}

.csr-img-wrap img {
    transition: transform 0.5s ease;
    aspect-ratio: 424 / 424;
    object-fit: cover;
}

.csr-card:hover .csr-img-wrap img {
    transform: scale(1.06);
}

.csr-card .csr-card-body{
    aspect-ratio: 424 / 275;
    padding: calc(var(--padding)/2.3);
}

.csr-card-title {
    color: rgb(var(--primary1));
    line-height: 1.4;
    transition: color 0.3s ease;
}

.csr-card:hover .csr-card-title {
    color: rgb(var(--primary2));
}

.table th {background: rgba(var(--primary1)); color: rgb(var(--color_white)); font-weight: 600; border-color: rgba(var(--primary2));}
.form-check .form-check-input {width: auto; background: none; border: none;}