body { 
 
  /* Mega Menu Page */
  --tm-mega-color-1: #C41230;
  --tm-mega-color-2: #0A3A45;
  --tm-mega-color-3: #FFCD00;
  --tm-mega-color-4: #000000;  
  --tm-mega-color-6: #7CC1D3;

  --tm-career-auth-color: #AA3035;
  --gap-50:50px;

}
 
/* Mega Menu Styles */
.mega-menu-wrap { display: flex; flex-direction: column; }
.mega-menu-header { padding: 0; border-bottom: 1px solid #E4E3E3; display: flex; justify-content: space-between; }

.mega-blank-left, .mega-blank-right { flex: 1;}
.mega-blank-right { display: flex; justify-content: flex-end; }

.mega-close { width: 100px; height: 100px; background: #807F83; display: flex; align-items: center; justify-content: center; right: 0; cursor: pointer; }
.mega-close span { color: var(--color-white); font-size: 70px; font-weight: var(--fw-extra-bold); font-family: 'Open Sans', sans-serif; transform: rotate(45deg); }
 
/* Mega Menu Logos */
.mega-menu-logos { display: flex; gap: 50px; }
.mega-menu-logo { height: 100%; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.mega-menu-logo::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; transition: all 0.3s ease; opacity: 0; }
.mega-menu-logo img { width: auto; height: 46px; object-fit: contain; filter: grayscale(1); opacity: .4; transition: all 0.3s ease; }

.mega-menu-logo.site-1::after { background: var(--tm-mega-color-1); } 
.mega-menu-logo.site-2::after { background: #00AEEF; } 
.mega-menu-logo.site-3::after { background: var(--tm-mega-color-3); }  
.mega-menu-logo.site-4::after { background: var(--tm-mega-color-4); } 
.mega-menu-logo.site-5::after { background: var(--tm-mega-color-1); } 
.mega-menu-logo.site-6::after { background: var(--tm-mega-color-6); }

.mega-menu-logo:hover img,
.mega-menu-logo.active img { filter: grayscale(0); opacity: 1; }

.mega-menu-logo:hover::after,
.mega-menu-logo.active::after { opacity: 1; }

.mega-menu-wrap { background: #fff; position: fixed; top: 0; height: 100vh; max-height: 729px; z-index: 9; width: 100%; transform: translate(0%, -100%);  transition: all 0.5s ease;}
.mega-menu-wrap.active { transform: translate(0%, 0); }

.mega-menu-content { padding: 50px; height: 100%; overflow: auto; }
.mega-menu-content.active .mega-menu-row { opacity: 1; transform: translate(0, 0); } 

.mega-menu-row { opacity: 0; transform: translate(0, 40px); transition: all 0.6s ease; }
.mega-menu-row .mega-menu-col:not(:last-child) { border-right: 1px solid #DDDDDD; }

.mega-menu-footer { padding: 20px 0; margin: auto 0 0; background: var(--color-gray-light); }
.mega-menu-footer .stock-item { padding: 0; border: none; }

.mega-site-info { min-width: 402px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding-right: 20px; }
.mega-site-info h5 { color: var(--color-black); margin-bottom: 16px; font-size: var(--f-size-18); font-weight: var(--fw-bold); }
.mega-site-info p { font-size: var(--f-size-XS); line-height: 1.5; }

.mega-btn { display: inline-block; background: var(--megamenu-color-var); color: var(--color-white) !important; border: none; border-radius: 7px; padding: 6px 16px; cursor: pointer; transition: var(--common-transition); font-weight: var(--fw-bold); font-size: var(--f-size-XS); }
.mega-btn:hover { background: var(--color-black); }

.nav-menus:not(:last-child) { margin-bottom: 32px; }
.nav-menus { padding: 0 36px; }
.nav-menus > ul { margin: 0; list-style: none; padding: 0; }
.nav-menus > ul > li { position: relative; }
.nav-menus > ul > li > a { display: block; color: var(--color-black); font-weight: var(--fw-bold); font-size: var(--f-size-18);  margin-bottom: 10px; transition: var(--common-transition); line-height: 1.2; }
.nav-menus > ul > li > a:hover { color: var(--megamenu-color-var); }
.mega-menu-col .nav-menus > ul > li > a:hover { color: var(--color-black); }

.nav-menus > ul > li > ul.sub-menu { list-style: none; padding: 0; } 
.nav-menus > ul > li > ul.sub-menu > li { margin-bottom: 4px; }
.nav-menus > ul > li > ul.sub-menu > li > a { color: var(--color-black); font-size: var(--f-size-XS); transition: var(--common-transition); }
.nav-menus > ul > li > ul.sub-menu > li > a:hover { color: var(--megamenu-color-var); }

.contact-info { padding: 0 36px; }
.contact-info h5 { margin-bottom: 10px; font-size: var(--f-size-18); font-weight: var(--fw-bold); color: var(--megamenu-color-var); }
.contact-info p { margin-bottom: 5px; font-size: var(--f-size-XS); }
.contact-info p a { color: var(--color-black); transition: var(--common-transition); }
.contact-info p a:hover { color: var(--megamenu-color-var); }

.social { margin: auto 0 0; }
.social ul { padding: 0; list-style: none; margin: 0; display: flex; align-items: center; gap: 16px; }
.social ul li a { color: var(--color-black); transition: var(--common-transition); font-size: 18px; }
.social ul li a:hover { color: var(--megamenu-color-var); }

.mega-card-inner { padding: 11px; background-color: var(--color-white); border: 1px solid #D7D7D7; height: 100%; display: flex; flex-direction: column; min-width: 348px; }
.mega-card-image { padding: 0 0 75%; position: relative; overflow: hidden; }
.mega-card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 
.mega-card-content { background-color: var(--megamenu-color-var); padding: 14px;}
.mega-card-content * { color: var(--color-white); }
.mega-card-content h5 { margin-bottom: 4px; font-size: var(--f-size-XS); }
.mega-card-content h3 { margin-bottom: 0; font-size: var(--f-size-L); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.mega-card-dec { padding: 10px 14px; }
.mega-card-dec p { margin-bottom: 0; font-size: var(--f-size-18); }
.mega-card-date { font-weight: var(--fw-semi-bold); font-size: var(--f-size-S); display: block; margin-bottom: 10px; }
.mega-card-inner .arrow-btn-2 { margin: 0 0 0 14px; font-size: var(--f-size-XS); }
.mega-card-inner .arrow-btn-2:after { background-image: url(../images/black-arrow.svg); }

.mega-menu-content-1, .mobile-megamenu-1 { --megamenu-color-var: var(--tm-mega-color-1); }
.mega-menu-content-2, .mobile-megamenu-2 { --megamenu-color-var: var(--tm-mega-color-2); }
.mega-menu-content-3, .mobile-megamenu-3 { --megamenu-color-var: var(--tm-mega-color-3); }
.mega-menu-content-4, .mobile-megamenu-4 { --megamenu-color-var: var(--tm-mega-color-4); }
.mega-menu-content-5, .mobile-megamenu-5 { --megamenu-color-var: var(--tm-mega-color-1); }
.mega-menu-content-6, .mobile-megamenu-6 { --megamenu-color-var: var(--tm-mega-color-6); }
 
.mega-menu-content-3 .mega-btn { color: var(--color-black) !important; }
.mega-menu-content-3 .mega-card-content * { color: var(--color-black); }

/* mobile menu css */
.mobile-ham { display: none; }

.mobile-megamenu { display: none; position: fixed; inset: 78px 0 0; border-top: 1px solid var(--color-black); background: #fff; z-index: 9999; transform: translateX(-100%); transition: transform 0.35s ease; flex-direction: column; }
.mobile-megamenu.active { transform: translateX(0); }

.mobile-megamenu .mobile-megamenu-wrap { overflow: auto; padding: 30px 30px 90px; height: 100%; }

.mobile-megamenu-links > ul { padding: 0; margin: 0; list-style: none; }
.mobile-megamenu-links > ul > li { margin-bottom: 15px; position: relative; }
.mobile-megamenu-links > ul > li > a { display: block; color: var(--color-black); font-weight: var(--fw-bold); font-size: var(--f-size-18); margin-bottom: 4px; transition: var(--common-transition); line-height: 1.2; max-width: fit-content; position: relative; }

.mobile-megamenu-links span.dropdown-icon-menu { margin-left: 10px; content: ""; position: absolute; top: 0; box-sizing: border-box; height: 20px; width: 20px; transform: rotate(0deg); transition: border-width 150ms ease-in-out; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; left: unset; right: -25px; margin: 0 auto; z-index: 0; display: flex; justify-content: center; align-items: center; }
.mobile-megamenu-links span.dropdown-icon-menu::before { content: ""; position: absolute; top: 3px; right: calc(50% - 5px); box-sizing: border-box; height: 10px; width: 10px; border-style: solid; border-color: var(--color-black); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: border-width 150ms ease-in-out; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; margin: 0 auto; }
.mobile-megamenu-links span.dropdown-icon-menu.active { transform: rotate(180deg); }

.mobile-megamenu hr { max-width: 64px; border-top: 1px solid #000000; opacity: 1; margin: 20px 0; }
 
.mobile-megamenu-links > ul > li > ul.sub-menu > li { margin-bottom: 4px; }
.mobile-megamenu-links > ul > li > ul.sub-menu > li > a { color: var(--color-black); font-size: var(--f-size-XS); transition: var(--common-transition); }
.mobile-megamenu-links > ul > li > ul.sub-menu > li > a:hover { color: var(--megamenu-color-var); }

.mobile-megamenu-links ul.sub-menu { list-style: none; padding: 0; display: none; position: relative; overflow: hidden; transition: max-height .6s ease-out; max-height: 0; }
.mobile-megamenu-links ul.sub-menu.sub-menu-open { transform: scaleY(1); max-height: 300px; }


.mobile-megamenu-footer { position: absolute; bottom: 0; display: flex; align-items: center; left: 0; background: var(--color-gray-medium); justify-content: space-between; width: 100%;  }
.mobile-megamenu-footer p { margin: 0; padding: 5px 0 5px 20px; font-size: 12px; max-width: 210px; }

.mobile-action { width: 72px; height: 72px; background: var(--megamenu-color-var); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; z-index: 1; cursor: pointer; transition: var(--common-transition); }
.mobile-action span { line-height: 1; color: var(--color-white); font-size: 52px; font-weight: var(--fw-extra-bold); font-family: 'Open Sans', sans-serif; transition: var(--common-transition); }
.mobile-action.active { background: #807F83; }
.mobile-action.active span {  transform: rotate(45deg); }

/* Mobile Menu Company Accordion Css */
.company-accordion { position: absolute; top: -80px; left: 0; right: 0; bottom: 0px; background: var(--color-white); overflow: auto; transform: translateY(100%); transition: var(--common-transition); }
.company-accordion::before { content: ''; position: absolute; border-right: 1px solid #D5D5D5; left: 50px; top: 80px; bottom: 0; }
.company-accordion.open { transform: translateY(0%); }

.company-header { display: flex; align-items: center; cursor: pointer; transition: var(--common-transition); }
.company-header.active .accordion-icon { transform: rotate(45deg); }

.company-item { border-bottom: 1px solid #D5D5D5; }
.company-left { width: 50px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.company-left img { width: 24px; height: 24px; object-fit: contain; }
.company-right { display: flex; align-items: center; gap: 15px; justify-content: space-between; width: 100%; padding: 14px; }
.company-right span { color: var(--color-black); font-weight: 500; }
.accordion-icon { font-size: 26px; line-height: 1; color: #212529; transition: var(--common-transition); }

.company-content { display: none; padding: 16px 12px 30px 12px; width: calc(100%  - 50px); margin: 0 0 0 auto; }
.company-content h3 { margin-bottom: 18px; font-size: 24px; }
.company-content p { margin-bottom: 20px; line-height: 1.6; color: var(--color-black); font-size: 12px; max-width: 270px; }
.company-btn { background: var(--brand-primary); color: var(--color-white) !important; border: none; border-radius: 5px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-weight: 600; transition: var(--common-transition); }
 
.company-accordion-header { height: 80px; background: var(--color-gray-medium); display: flex; align-items: self-end; padding: 15px; }
.company-accordion-header p { font-size: 14px; }


/* need to marge with custom.css */
.main-header .header-action{ flex: 0 0 auto;}
.main-header .header-action span { line-height: 1; padding-bottom: 10px; }
/* need to marge with custom.css */




/*Media Query css*/  
@media only screen and ( max-width:1799px ) { 

  .mega-menu-content { padding: 40px; }
  .nav-menus { padding: 0 25px; }
  .contact-info { padding: 0 25px; }

  .mega-site-info { min-width: 340px; padding-right: 14px; }
  .mega-card-inner { min-width: 330px; }

}

@media only screen and ( max-width:1599px ) {  

  .main-header { padding-left: 2%; }

  .mega-menu-content { padding: 30px; }
  .mega-site-info { min-width: 290px; padding-right: 14px; }
  .mega-card-inner { min-width: 300px; }

  .mega-card-content h3 { margin-bottom: 0; font-size: 20px; }
  .mega-card-date { font-size: 14px; }

  .mega-menu-logos { gap: 40px; }
  .mega-menu-logo img { height: 40px; }

  .nav-menus { padding: 0 15px; }
  .contact-info { padding: 0 15px; }

  .mega-menu-wrap{ max-height: 600px;}

}
 
@media only screen and ( max-width:1399px ) { 

  :root {
    --f-size-40: 35px;
    --f-size-18: 16px;
  }

  .main-header .header-action { width: 80px; height: 80px; }
  .main-header .header-action span { font-size: 60px; }
  
  .mega-close { width: 80px; height: 80px; }
  .mega-close span { font-size: 60px; }

  .main-header .logo { max-width: 186px; } 
  .main-header { padding-left: 15px; }
  .main-header .main-menu ul { margin-right: 20px; } 

  .mega-menu-logo img { height: 40px; max-width: 160px; }
  .mega-menu-wrap{ max-height: 450px;}

  .mega-site-info { min-width: 260px; padding-right: 5px; }
  .nav-menus { padding: 0 5px; }
  .contact-info { padding: 0 5px; }

  .mega-card-inner { min-width: 270px; }
  .mega-card-image { padding: 0px 0 65%; position: relative; overflow: hidden; }

  .mega-menu-footer { padding: 10px 0; }

}

@media only screen and ( max-width: 1199px ) {
  :root {
    --f-size-40: 30px;
    --gap-50:35px;
  }
  body{
    --gap-50:35px;
  }

  .mobile-ham { display: block; }
  .mobile-megamenu { display: block; }

  .main-header { padding: 17.5px 24px; }
  .main-header .logo { max-width: 185px;}
  .main-header .main-menu{ display: none;}
  .main-header .header-action { display: none; }
  .mega-menu-wrap { display: none; }

  .mega-card-inner { padding: 9px; }
  .mega-card-image { padding: 0px 0 42%; }
  .mega-card-content { padding: 6px 14px; }
  .mega-card-content h3 { margin-bottom: 0; font-size: 24px; }
  .mega-card-dec { padding: 10px 14px 0; }

}

 
@media only screen and ( max-width: 767px ) { 
  :root {
    --f-size-40: 24px;
  }

  body { 
    --gap-50: 25px; 
  }
  
  .mega-card-inner { min-width: auto; }
  .mega-card-content h3 { margin-bottom: 0; font-size: 20px; }
  
} 
@media only screen and ( max-width: 575px ){  

  .accordion-button { padding: 20px 0; }
  .accordion-button .icon{ flex-direction: column-reverse; gap: 8px;}
  .accordion-button .icon img { width: 12px; height: 12px; }

}

@media only screen and ( max-width:359px ){

  .mobile-megamenu .mobile-megamenu-wrap { padding: 30px 20px 90px; }
  
}
/*Media Query css*/