:root {
   --pri: #0d47a1;
   --pri-d: #051a3a;
   --pri-l: #1565c0;
   --acc: #ff6f00;
   --acc-h: #e65100;
   --bg: #f8f9fa;
   --tx: #1a1a1a;
   --tx-m: #424242;
   --tx-l: #757575;
   --bd: #bdbdbd;
   --bd-l: #e0e0e0;
   --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15)
 }

 * {
   box-sizing: border-box
 }

 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Roboto', sans-serif;
   font-size: 14px;
   color: var(--tx);
   background: var(--bg);
   line-height: 1.65;
   font-weight: 400
 }

 a {
   color: var(--pri);
   text-decoration: none;
   transition: color .2s
 }

 a:hover {
   color: var(--acc)
 }

 img {
   max-width: 100%;
   height: auto;
   display: block
 }

 /* TOP BAR */
 .top-bar {
   background: var(--pri-d);
   color: #c0d0e0;
   font-size: 11px;
   padding: 5px 0
 }

 .top-bar a {
   color: #c0d0e0
 }

 .top-bar a:hover {
   color: #fff
 }

 .top-bar .contact-info span {
   margin-right: 20px
 }

 .top-bar .contact-info i {
   margin-right: 5px;
   font-size: 10px
 }

 /* LOGO BAR */
 .logo-bar {
   background: #fff;
   border-bottom: 1px solid var(--bd-l);
   padding: 10px 0;
 }

 .logo-wrapper {
   display: flex;
   align-items: center;
   cursor: pointer
 }

 .logo-icon {
   width: 48px;
   height: 48px;
   background: var(--pri);
   color: #fff;
   font-size: 24px;
   font-weight: 900;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 3px;
   letter-spacing: -2px;
   margin-right: 12px
 }

 .logo-icon img,
 .logo-icon .custom-logo-link,
 .logo-icon .custom-logo {
   display: block;
   max-width: 100%;
   max-height: 100%
 }

 .logo-icon .custom-logo-link {
   line-height: 0
 }

 .logo-icon img,
 .logo-icon .custom-logo {
   width: 100%;
   height: 100%;
   object-fit: contain
 }

 .logo-text .main {
   font-size: 20px;
   font-weight: 700;
   color: var(--pri);
   letter-spacing: 1px;
   line-height: 1.2
 }

 .logo-text .sub {
   font-size: 10px;
   color: var(--tx-m);
   letter-spacing: .3px
 }

 .logo-tagline {
   border-left: 3px solid var(--acc);
   padding-left: 10px;
   font-size: 11px;
   color: var(--tx-m)
 }

 .header-banner-wrapper {
   cursor: pointer;
   width: 100%
 }

 .header-banner-wrapper img {
   display: block;
   width: 100%;
   max-height: 110px;
   object-fit: contain
 }

 /* NAV */
 .main-nav {
   background: var(--pri)
 }

 .navbar-nav .nav-link {
   color: #dce8f4 !important;
   font-size: 13px;
   padding: 8px 15px;
   transition: background .15s, color .15s
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-item.active>.nav-link,
 .navbar-nav .dropdown:hover>.nav-link {
   background: var(--acc);
   color: #fff !important
 }

 .navbar-nav .dropdown-menu {
   border: 1px solid var(--bd);
   border-top: 3px solid var(--pri);
   min-width: 200px;
   margin-top: 0;
   position: absolute;
 }

 .navbar-nav .dropdown-item {
   font-size: 12px;
   color: var(--tx);
   padding: 7px 15px;

 }

 .navbar-nav .dropdown-item:hover,
 .navbar-nav .dropdown-item.active {
   background: var(--pri);
   color: #fff
 }

 .dropdown-submenu {
   position: relative
 }

 .dropdown-submenu>.dropdown-menu {
   top: 0;
   left: 100%;
   margin-top: -1px;
   display: none;
   min-width: 220px;
   border-top: 3px solid var(--acc)
 }

 .dropdown-submenu:hover>.dropdown-menu {
   display: block
 }

 .dropdown-submenu>.dropdown-item::after {
   content: "\f105";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   float: right;
   margin-left: 10px;
   font-size: 10px
 }

 /* LAYOUT */
 .page-body {
   padding: 15px 0 30px
 }

 .page-wrapper {
   display: flex;
   gap: 16px;
   align-items: flex-start
 }

 .page-wrapper.no-sidebar .main-content {
   width: 100%
 }

 /* SIDEBAR */
 .sidebar {
   width: 320px;
   flex-shrink: 0;
   background: #fff;
   border: 1px solid var(--bd)
 }

 .sidebar-title {
   background: var(--pri);
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   padding: 10px 12px;
   text-transform: uppercase;
   letter-spacing: .5px
 }

 .sidebar-menu {
   list-style: none;
   margin: 0;
   padding: 0
 }

 .sidebar-menu li {
   border-bottom: 1px solid var(--bd-l);
   position: relative;
 }

 .sidebar-menu a {
   display: block;
   padding: 8px 12px;
   font-size: 12px;
   color: var(--tx);
   transition: background .12s, color .12s
 }

 .sidebar-menu a:hover {
   background: #d6e4f5;
   color: var(--pri)
 }

 .sidebar-menu li.active>a {
   background: var(--acc);
   color: #fff;
   font-weight: 700
 }

 .sidebar-menu li.active-parent>a {
   color: var(--pri);
   font-weight: 700
 }

 .submenu {
   list-style: none;
   padding: 0;
   margin: 0;
   background: #f8f9fc
 }

 .submenu a {
   padding-left: 50px;
   font-size: 11px;
 }

 .sidebar-menu li.has-submenu>.product-sidebar-submenu {
   display: none
 }

 .sidebar-menu li.has-submenu.open>.product-sidebar-submenu,
 .sidebar-menu li.has-submenu.active-parent>.product-sidebar-submenu {
   display: block
 }

 .sidebar-menu li.has-submenu.open>a .sidebar-arrow,
 .sidebar-menu li.has-submenu.active-parent>a .sidebar-arrow {
   transform: none
 }

 .sidebar-arrow {
   display: inline-block;
   margin-right: 5px;
   text-align: center;
   width: 10px;
   font-size: 10px;
   color: var(--acc);
   line-height: 1;
   transition: transform .15s ease
 }

 .sidebar-arrow::before {
   background: #000;
   border-radius: 50%;
   content: "";
   height: 5px;
   left: 18px;
   position: absolute;
   top: 15px;
   width: 5px;
 }

 .submenu a::before {
   background: #000;
   border-radius: 50%;
   content: "";
   height: 5px;
   left: 38px;
   position: absolute;
   top: 15px;
   width: 5px;
 }

 /* .sidebar-menu li.has-submenu.open>a .sidebar-arrow::before,
 .sidebar-menu li.has-submenu.active-parent>a .sidebar-arrow::before {
   content: "\25BE"
 } */

 .product-sidebar-panel {
   border-top: 1px dashed var(--bd);
   color: var(--tx);
   font-size: 11px;
   line-height: 1.75;
   padding: 14px 14px 0
 }

 .product-sidebar-heading,
 .product-sidebar-contact-title {
   background: linear-gradient(135deg, #c8f1ff 0%, #69b5df 100%);
   color: #000;
   font-size: 18px;
   font-weight: 800;
   line-height: 1.2;
   margin: 0 0 12px;
   padding: 16px 8px;
   text-transform: none
 }

 .product-sidebar-subheading {
   color: #000;
   font-size: 12px;
   font-weight: 800;
   line-height: 1.45;
   margin: 0 0 8px
 }

 .product-sidebar-bullets,
 .product-sidebar-numbered,
 .product-sidebar-contact-list {
   margin: 0;
   padding: 0
 }

 .product-sidebar-bullets {
   list-style: none
 }

 .product-sidebar-bullets li {
   margin: 0 0 6px;
   padding-left: 10px;
   position: relative
 }

 .product-sidebar-bullets li::before {
   background: #000;
   border-radius: 50%;
   content: "";
   height: 7px;
   left: 0;
   position: absolute;
   top: 8px;
   width: 7px
 }

 .product-sidebar-numbered {
   list-style: decimal;
   padding-left: 15px
 }

 .product-sidebar-numbered li {
   margin-bottom: 6px
 }

 .product-sidebar-contact-title {
   background: linear-gradient(110deg, var(--acc) 0 28px, #69b5df 28px 100%);
   font-size: 15px;
   margin-top: 10px;
   overflow: hidden;
   padding: 12px 6px;
   white-space: normal
 }

 .product-sidebar-contact-list {
   list-style: none;
   padding: 14px 0 4px 38px
 }

 .product-sidebar-contact-list li {
   margin-bottom: 7px
 }

 .product-sidebar-contact-list span {
   font-weight: 700
 }

 /* MAIN CONTENT */
 .main-content {
   flex: 1;
   min-width: 0;
   background: #fff;
   border: 1px solid var(--bd);
   min-height: 500px
 }

 .page-section {
   display: none
 }

 .page-section.active {
   display: block
 }

 .page-header {
   background: #eef1f5;
   border-bottom: 2px solid var(--pri);
   padding: 10px 15px
 }

 .page-title {
   font-size: 18px;
   font-weight: 700;
   color: var(--pri);
   margin-bottom: 5px
 }

 .breadcrumb-custom {
   font-size: 11px;
   color: var(--tx-l);
   margin-bottom: 0
 }

 .breadcrumb-custom a {
   color: var(--tx-l)
 }

 .breadcrumb-custom a:hover {
   color: var(--pri);
   text-decoration: underline
 }

 .breadcrumb-custom .current {
   color: var(--tx-m)
 }

 .breadcrumb-custom .sep {
   margin: 0 5px
 }

 /* SLIDER */
 .slider-container {
   position: relative;
   height: 360px;
   overflow: hidden;
   background: #0a1a2a;
   box-shadow: var(--shadow-lg)
 }

 .slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity 0.9s cubic-bezier(.25, .46, .45, .94);
   transform: scale(1.02)
 }

 .slide.active {
   opacity: 1;
   transform: scale(1)
 }

 .slide img {
   width: 100%;
   height: 100%;
   object-fit: cover
 }

 .slide-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(13, 71, 161, .92) 0%, rgba(13, 71, 161, .4) 50%, rgba(13, 71, 161, .1) 100%);
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 40px 100px;
   animation: slideIn 0.8s cubic-bezier(.25, .46, .45, .94) both
 }

 @keyframes slideIn {
   from {
     opacity: 0;
     transform: translateX(-40px)
   }

   to {
     opacity: 1;
     transform: translateX(0)
   }
 }

 .slide.active .slide-overlay {
   animation: slideIn 0.8s cubic-bezier(.25, .46, .45, .94) both
 }

 .slide-overlay h2 {
   font-size: 32px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 12px;
   text-shadow: 0 3px 12px rgba(0, 0, 0, .5);
   letter-spacing: -0.5px
 }

 .slide-overlay p {
   font-size: 16px;
   color: #e3f2fd;
   letter-spacing: 0.3px;
   font-weight: 500
 }

 .slider-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, .15);
   border: 2px solid rgba(255, 255, 255, .3);
   color: #fff;
   padding: 14px 18px;
   cursor: pointer;
   z-index: 10;
   transition: all .3s cubic-bezier(.25, .46, .45, .94);
   border-radius: 4px;
   backdrop-filter: blur(4px)
 }

 .slider-btn:hover {
   background: rgba(255, 107, 0, .85);
   border-color: rgba(255, 107, 0, .95);
   transform: translateY(-50%) scale(1.08);
   box-shadow: 0 6px 20px rgba(255, 107, 0, .4)
 }

 .slider-btn.prev {
   left: 16px
 }

 .slider-btn.next {
   right: 16px
 }

 .slider-dots {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 12px;
   z-index: 10
 }

 .slider-dot {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .25);
   border: 2px solid rgba(255, 255, 255, .4);
   cursor: pointer;
   transition: all .3s;
   backdrop-filter: blur(2px)
 }

 .slider-dot:hover {
   background: rgba(255, 255, 255, .4);
   transform: scale(1.15)
 }

 .slider-dot.active {
   background: var(--acc);
   border-color: var(--acc);
   box-shadow: 0 0 12px rgba(255, 107, 0, .6)
 }

 /* HOME */
 .section {
   padding: 28px 24px
 }

 .section-gray {
   background: linear-gradient(135deg, #f5f7fa 0%, #eff5fb 100%)
 }

 .section-title {
   font-size: 18px;
   font-weight: 800;
   color: var(--pri);
   border-bottom: 3px solid var(--acc);
   padding-bottom: 10px;
   margin-bottom: 20px;
   letter-spacing: -0.3px
 }

 .section-title-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   border-bottom: 3px solid var(--acc);
   margin-bottom: 20px
 }

 .section-title-row .section-title {
   border-bottom: 0;
   margin-bottom: 0
 }

 .section-link-btn {
   background: var(--pri);
   border: 0;
   border-radius: 6px;
   color: #fff;
   cursor: pointer;
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
   padding: 10px 16px;
   transition: background .2s ease, transform .2s ease;
   margin-bottom: 5px;
 }

 .section-link-btn:hover {
   background: var(--acc);
   transform: translateY(-1px)
 }

 .home-intro {
   display: flex;
   gap: 32px;
   align-items: flex-start
 }

 .home-intro-text {
   flex: 1
 }

 .home-intro-text p {
   margin-bottom: 14px;
   font-size: 14px;
   color: var(--tx-m);
   line-height: 1.8;
   letter-spacing: 0.2px
 }

 .home-intro-img {
   width: 280px;
   flex-shrink: 0
 }

 .home-intro-img img {
   width: 100%;
   height: 180px;
   object-fit: cover;
   border-radius: 6px;
   box-shadow: var(--shadow-md)
 }

 .about-modern-section {
   background: linear-gradient(180deg, #fff 0%, #f6f9fd 100%)
 }

 .about-modern {
   align-items: stretch;
   gap: 28px
 }

 .about-modern-content {
   display: flex;
   flex-direction: column;
   min-width: 0
 }

 .about-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 18px
 }

 .about-modern-short-content {
   color: var(--tx-m);
   font-size: 14px;
   line-height: 1.85;
   margin-bottom: 18px
 }

 .about-modern-short-content p {
   margin: 0 0 12px
 }

 .about-modern-short-content p:last-child {
   margin-bottom: 0
 }

 .about-tab-btn {
   background: #fff;
   border: 1px solid #cfdbe8;
   border-radius: 6px;
   color: var(--tx-m);
   cursor: pointer;
   font-size: 12px;
   font-weight: 800;
   line-height: 1;
   min-height: 38px;
   padding: 0 14px;
   transition: border-color .2s ease, color .2s ease
 }

 .about-tab-btn:hover,
 .about-tab-btn.active {
   background: #fff;
   border-color: var(--acc);
   color: var(--pri)
 }

 .about-tab-panels {
   background: #fff;
   border: 1px solid #e3ebf4;
   border-radius: 8px;
   box-shadow: 0 12px 34px rgba(13, 71, 161, .08);
   flex: 1;
   padding: 22px
 }

 .about-tab-panel {
   animation: aboutPanelFade .22s ease both
 }

 .about-tab-panel h3 {
   color: var(--pri-d);
   font-size: 17px;
   font-weight: 900;
   line-height: 1.35;
   margin: 0 0 12px
 }

 .about-tab-panel p {
   color: var(--tx-m);
   font-size: 14px;
   line-height: 1.85;
   margin: 0 0 12px
 }

 .about-tab-panel p:last-child {
   margin-bottom: 0
 }

 .about-modern-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 18px
 }

 .btn-sc.btn-sc-outline {
   background: #fff;
   border: 1px solid var(--pri);
   color: var(--pri)
 }

 .btn-sc.btn-sc-outline:hover {
   background: var(--acc);
   border-color: var(--acc);
   color: #fff
 }

 .about-modern-img {
   width: 34%;
   min-width: 290px
 }

 .about-modern-img-wrapper {
   background: #fff;
   border: 1px solid #e0e8f1;
   border-radius: 8px;
   height: 100%;
   min-height: 310px;
   overflow: hidden;
   padding: 8px;
   position: relative;
   box-shadow: 0 16px 38px rgba(13, 71, 161, .14)
 }

 .about-modern-img-wrapper::after {
   background: linear-gradient(180deg, rgba(255, 111, 0, .95), rgba(13, 71, 161, .95));
   content: "";
   height: 70px;
   position: absolute;
   right: 0;
   top: 0;
   width: 5px
 }

 .home-intro-img.about-modern-img img {
   border-radius: 6px;
   box-shadow: none;
   height: 100%;
   min-height: 294px;
   object-fit: cover
 }

 @keyframes aboutPanelFade {
   from {
     opacity: 0;
     transform: translateY(6px)
   }

   to {
     opacity: 1;
     transform: translateY(0)
   }
 }

 .product-grid-home {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
 }

 .product-card-home {
   border: none;
   background: #fff;
   cursor: pointer;
   transition: all .3s cubic-bezier(.25, .46, .45, .94);
   border-radius: 6px;
   overflow: hidden;
   box-shadow: var(--shadow)
 }

 .product-card-home:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-6px)
 }

 .product-card-home img {
   width: 100%;
   height: 185px;
   object-fit: cover
 }

 .product-card-body {
   padding: 14px
 }

 .product-card-body h3 {
   font-size: 13px;
   font-weight: 800;
   color: var(--pri);
   margin-bottom: 5px;
   letter-spacing: -0.2px
 }

 .product-card-body p {
   font-size: 12px;
   color: var(--tx-m);
   margin-bottom: 8px;
   letter-spacing: 0.2px
 }

 .read-more {
   font-size: 12px;
   color: var(--acc);
   font-weight: 700;
   letter-spacing: 0.3px
 }

 .features-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
 }

 .feature-item {
   background: linear-gradient(135deg, #f0f5ff 0%, #eff5fb 100%);
   border: 1px solid #e0e7ff;
   padding: 20px;
   text-align: center;
   border-radius: 6px;
   transition: all .3s;
   box-shadow: 0 1px 3px rgba(13, 71, 161, .08)
 }

 .feature-item:hover {
   border-color: var(--acc);
   box-shadow: 0 4px 12px rgba(13, 71, 161, .12);
   transform: translateY(-2px)
 }

 .feature-icon {
   font-size: 32px;
   margin-bottom: 12px;
   color: var(--acc);
   transition: transform .3s
 }

 .feature-item:hover .feature-icon {
   transform: scale(1.12)
 }

 .feature-item h4 {
   font-size: 14px;
   font-weight: 800;
   color: var(--pri);
   margin-bottom: 6px;
   letter-spacing: -0.2px
 }

 .feature-item p {
   font-size: 12px;
   color: var(--tx-m);
   line-height: 1.6;
   letter-spacing: 0.2px
 }

 /* PRODUCT LIST */
 .product-list {
   padding: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 18px
 }

 .product-list-card {
   display: flex;
   gap: 18px;
   border: none;
   padding: 16px;
   cursor: pointer;
   transition: all .3s cubic-bezier(.25, .46, .45, .94);
   background: #fff;
   border-radius: 6px;
   box-shadow: var(--shadow);
   flex-direction: column;
   width: 32%;
 }

 @media(max-width:1399px) {
   .product-list-card {
     width: 48%;
   }
 }

 @media(max-width:991px) {
   .product-list-card {
     width: 100%;
   }
 }

 .product-list-card:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-4px)
 }

 .product-list-card-hidden {
   display: none
 }

 .product-list-img {
   width: 100%;
   height: 270px;
   flex-shrink: 0;
   object-fit: cover;
 }

 .product-list-img img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   border-radius: 5px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .08)
 }

 .product-list-body {
   flex: 1
 }

 .product-list-name {
   font-size: 16px;
   font-weight: 800;
   color: var(--pri);
   margin-bottom: 7px;
   letter-spacing: -0.2px
 }

 .product-list-desc {
   font-size: 13px;
   color: var(--tx-m);
   margin-bottom: 10px;
   line-height: 1.6;
   letter-spacing: 0.2px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden
 }

 .spec-row {
   display: flex;
   font-size: 12px;
   border-bottom: 1px dotted var(--bd-l);
   padding: 4px 0;
   letter-spacing: 0.1px
 }

 .spec-label {
   color: var(--tx-m);
   width: 160px;
   flex-shrink: 0;
   font-weight: 600
 }

 .spec-value {
   color: var(--tx);
   font-weight: 700
 }

 /* PRODUCT DETAIL */
 .product-detail {
   display: flex;
   gap: 20px;
   padding: 15px;
   border-bottom: 1px solid var(--bd-l)
 }

 .product-detail-img {
   width: 300px;
   flex-shrink: 0
 }

 .product-main-image {
   display: block
 }

 .product-main-image img {
   width: 100%;
   height: 230px;
   object-fit: cover;
   border: 1px solid var(--bd)
 }

 .product-gallery {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
   margin-top: 12px
 }

 .product-gallery-thumb {
   display: block;
   border: 2px solid var(--bd-l);
   border-radius: 3px;
   overflow: hidden;
   transition: border-color .2s, transform .2s
 }

 .product-gallery-thumb:hover {
   border-color: var(--acc);
   transform: translateY(-1px)
 }

 .product-gallery-thumb img {
   display: block;
   width: 100%;
   aspect-ratio: 4 / 3;
   height: auto;
   object-fit: cover
 }

 .product-detail-info {
   flex: 1
 }

 .product-detail-info h2 {
   font-size: 17px;
   font-weight: 700;
   color: var(--pri);
   margin-bottom: 8px
 }

 .product-short-desc {
   font-size: 13px;
   color: var(--tx-m);
   margin-bottom: 12px;
   border-left: 3px solid var(--pri);
   padding-left: 10px
 }

 .product-quick-specs {
   margin-bottom: 15px
 }

 .quick-spec-row {
   display: flex;
   font-size: 12px;
   padding: 3px 0;
   border-bottom: 1px dotted var(--bd-l)
 }

 .quick-spec-label {
   color: var(--tx-m);
   width: 160px;
   flex-shrink: 0
 }

 .quick-spec-value {
   color: var(--tx);
   font-weight: 600
 }

 .product-actions {
   display: flex;
   flex-direction: column;
   gap: 8px
 }

 .contact-direct {
   display: flex;
   flex-direction: column;
   gap: 3px;
   font-size: 12px;
   color: var(--tx-m)
 }

 .contact-direct span {
   display: flex;
   align-items: center;
   gap: 6px
 }

 .contact-direct i {
   color: #fff;
 }

 /* TABS */
 .product-tabs {
   padding: 0 15px 15px
 }

 .tab-nav {
   display: flex;
   border-bottom: 2px solid var(--pri)
 }

 .tab-btn {
   padding: 8px 18px;
   background: #eef1f5;
   border: 1px solid var(--bd);
   border-bottom: none;
   color: var(--tx-m);
   font-size: 12px;
   margin-right: 3px;
   margin-bottom: -2px;
   cursor: pointer;
   transition: background .12s
 }

 .tab-btn.active {
   background: var(--pri);
   color: #fff;
   border-color: var(--pri)
 }

 .tab-btn:hover:not(.active) {
   background: #dce8f5;
   color: var(--pri)
 }

 .tab-pane {
   border: 1px solid var(--bd);
   border-top-color: var(--pri);
   padding: 15px;
   background: #fff;
   display: none
 }

 .tab-pane.active {
   display: block
 }

 .tab-pane h3 {
   font-size: 14px;
   font-weight: 700;
   color: var(--pri);
   margin: 15px 0 8px
 }

 .tab-pane h3:first-child {
   margin-top: 0
 }

 .tab-pane p {
   font-size: 13px;
   color: var(--tx-m);
   margin-bottom: 10px;
   line-height: 1.7
 }

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

 .feature-list li {
   font-size: 12px;
   color: var(--tx-m);
   padding: 4px 0;
   display: flex;
   align-items: center;
   gap: 8px
 }

 .feature-list .check {
   color: var(--acc);
   font-weight: 700
 }

 .specs-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 12px
 }

 .specs-table tr.even {
   background: #f5f7fa
 }

 .specs-table tr.odd {
   background: #fff
 }

 .specs-table td {
   padding: 8px 12px;
   border: 1px solid var(--bd-l)
 }

 .specs-table td:first-child {
   color: var(--tx-m);
   width: 200px;
   font-weight: 600
 }

 .specs-table td:last-child {
   color: var(--tx)
 }

 .spec-note {
   font-size: 11px;
   color: var(--tx-l);
   margin-top: 10px;
   font-style: italic
 }

 /* ABOUT */
 .about-content {
   padding: 15px
 }

 .about-content p {
   font-size: 13px;
   color: var(--tx-m);
   margin-bottom: 10px;
   line-height: 1.7
 }

 .about-content h3 {
   font-size: 14px;
   font-weight: 700;
   color: var(--pri);
   margin: 15px 0 10px
 }

 .about-img {
   width: 100%;
   max-height: 200px;
   object-fit: cover;
   border: 1px solid var(--bd);
   margin-bottom: 15px
 }

 .about-list {
   padding-left: 20px
 }

 .about-list li {
   font-size: 12px;
   color: var(--tx-m);
   margin-bottom: 5px;
   list-style: disc
 }

 .factory-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin-top: 15px
 }

 .factory-grid img {
   width: 100%;
   height: 140px;
   object-fit: cover;
   border: 1px solid var(--bd)
 }

 .cert-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 15px;
   margin-top: 15px
 }

 .cert-card {
   border: 2px solid var(--pri);
   padding: 18px;
   text-align: center
 }

 .cert-card .check-icon {
   font-size: 28px;
   color: var(--acc);
   margin-bottom: 8px;
   font-weight: 700
 }

 .cert-card .cert-name {
   font-size: 12px;
   font-weight: 700;
   color: var(--pri)
 }

 /* NEWS */
 .news-list {
   padding: 15px
 }

 .news-item {
   border-bottom: 1px solid var(--bd-l);
   padding-bottom: 15px;
   margin-bottom: 15px
 }

 .news-date {
   font-size: 11px;
   color: var(--tx-l);
   display: block;
   margin-bottom: 5px
 }

 .news-title {
   font-size: 15px;
   font-weight: 700;
   color: var(--pri);
   margin-bottom: 6px;
   line-height: 1.4
 }

 .news-summary {
   font-size: 12px;
   color: var(--tx-m);
   margin-bottom: 8px
 }

 .read-more-btn {
   background: none;
   border: none;
   color: var(--acc);
   font-size: 12px;
   font-weight: 600;
   padding: 0;
   cursor: pointer
 }

 .read-more-btn:hover {
   text-decoration: underline
 }

 /* CONTACT */
 .contact-layout {
   display: grid;
   grid-template-columns: 320px minmax(0, 1fr);
   gap: 40px;
   padding: 35px 30px
 }

 .contact-info-panel {
   min-width: 0
 }

 .contact-info-panel h3,
 .contact-form-panel h3 {
   font-size: 18px;
   font-weight: 700;
   color: var(--pri);
   margin-bottom: 16px
 }

 .contact-info-panel>p {
   font-size: 13px;
   color: var(--tx-m);
   margin-bottom: 30px;
   line-height: 1.6
 }

 .contact-details {
   display: flex;
   flex-direction: column;
   gap: 24px
 }

 .contact-detail-item {
   display: flex;
   gap: 16px;
   align-items: flex-start
 }

 .contact-detail-item i {
   color: var(--acc);
   font-size: 18px;
   line-height: 1;
   margin-top: 5px;
   min-width: 18px;
   text-align: center
 }

 .contact-detail-item strong {
   font-size: 14px;
   font-weight: 600;
   color: var(--tx);
   display: block;
   margin-bottom: 4px
 }

 .contact-detail-item p {
   font-size: 13px;
   color: var(--tx-m);
   margin: 0
 }

 .contact-form-panel {
   min-width: 0
 }

 /* FORMS */
 .inquiry-form {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
   max-width: none
 }

 .form-row {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px
 }

 .form-group {
   display: flex;
   flex-direction: column;
   gap: 6px;
   min-width: 0
 }

 .form-group.full-width {
   grid-column: 1 / -1
 }

 .form-group label {
   font-size: 13px;
   font-weight: 600;
   color: var(--tx-m)
 }

 .form-group label span {
   color: #ef4444
 }

 .form-group input,
 .form-group textarea {
   border: 1px solid var(--bd);
   border-radius: 8px;
   padding: 12px 14px;
   font-size: 13px;
   font-family: inherit;
   color: var(--tx);
   outline: none;
   transition: border-color .2s ease, box-shadow .2s ease
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
   color: #64748b
 }

 .form-group input:focus,
 .form-group textarea:focus {
   border-color: var(--pri);
   box-shadow: 0 0 0 3px rgba(13, 71, 161, .12)
 }

 .form-group textarea {
   min-height: 132px;
   resize: vertical
 }

 .inquiry-success {
   background: #e8f5e9;
   border: 1px solid #a5d6a7;
   padding: 15px;
   font-size: 13px;
   color: #2e7d32
 }

 .inquiry-success p {
   margin-bottom: 12px
 }

 .inquiry-error {
   background: #fff1f2;
   border: 1px solid #fecdd3;
   border-radius: 8px;
   color: #be123c;
   font-size: 13px;
   padding: 12px 14px
 }

 /* BUTTONS */
 .btn-pc {
   width: 100%;
   background: #ff8a00;
   color: #fff;
   border: none;
   padding: 14px;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer;
   transition: all .2s ease;
   border-radius: 8px;
   box-shadow: none;
   letter-spacing: 0;
   position: relative;
   overflow: hidden;
   margin-top: 10px
 }

 .btn-pc:disabled {
   cursor: not-allowed;
   opacity: .75;
   transform: none
 }

 .btn-pc::before {
   display: none
 }

 .btn-pc:hover {
   background: #e07a00;
   color: #fff;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(255, 138, 0, .2)
 }

 .btn-pc:hover::before {
   left: 100%
 }

 .btn-pc:active {
   transform: translateY(0);
   box-shadow: 0 2px 8px rgba(255, 107, 0, .25)
 }

 .btn-sc {
   background: linear-gradient(135deg, var(--pri) 0%, #1565c0 100%);
   color: #fff;
   border: none;
   padding: 9px 22px;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   transition: all .3s cubic-bezier(.25, .46, .45, .94);
   border-radius: 4px;
   box-shadow: 0 3px 10px rgba(13, 71, 161, .2);
   letter-spacing: 0.4px
 }

 .btn-sc:hover {
   background: linear-gradient(135deg, var(--pri-d) 0%, #0d47a1 100%);
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(13, 71, 161, .3)
 }

 .btn-sc:active {
   transform: translateY(0)
 }

 .btn-inq {
   background: linear-gradient(135deg, var(--acc) 0%, #fb8c00 100%);
   color: #fff;
   border: none;
   padding: 10px 20px;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   transition: all .3s cubic-bezier(.25, .46, .45, .94);
   border-radius: 4px;
   box-shadow: 0 3px 10px rgba(255, 107, 0, .25);
   letter-spacing: 0.4px
 }

 .btn-inq:hover {
   background: linear-gradient(135deg, var(--acc-h) 0%, #e65100 100%);
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(255, 107, 0, .3)
 }

 .btn-detail {
   background: linear-gradient(135deg, var(--pri) 0%, #1565c0 100%);
   color: #fff;
   border: none;
   padding: 7px 18px;
   font-size: 12px;
   font-weight: 700;
   cursor: pointer;
   transition: all .2s;
   border-radius: 3px;
   box-shadow: 0 2px 6px rgba(13, 71, 161, .2)
 }

 .btn-detail:hover {
   background: linear-gradient(135deg, var(--pri-d) 0%, #0d47a1 100%);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(13, 71, 161, .3)
 }

 .product-list-actions {
   display: flex;
   justify-content: center;
   padding: 6px 20px 28px
 }

 .product-load-more-btn {
   background: linear-gradient(135deg, var(--acc) 0%, #fb8c00 100%);
   color: #fff;
   border: none;
   padding: 10px 26px;
   font-size: 13px;
   font-weight: 800;
   cursor: pointer;
   transition: all .25s cubic-bezier(.25, .46, .45, .94);
   border-radius: 4px;
   box-shadow: 0 3px 10px rgba(255, 107, 0, .25);
   letter-spacing: 0.3px
 }

 .product-load-more-btn:hover {
   background: linear-gradient(135deg, var(--acc-h) 0%, #e65100 100%);
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(255, 107, 0, .3)
 }

 /* FOOTER */
 .main-footer {
   background: #1a2a3a;
   color: #aabbc8;
   border-top: 3px solid var(--pri)
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.5fr;
   gap: 25px;
   padding: 25px 0 18px
 }

 .footer-col h4 {
   font-size: 13px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 10px;
   padding-bottom: 6px;
   border-bottom: 1px solid rgba(255, 255, 255, .15)
 }

 .footer-col p {
   font-size: 12px;
   margin-bottom: 5px;
   line-height: 1.6
 }

 .footer-col ul {
   list-style: none;
   padding: 0;
   margin: 0
 }

 .footer-col ul li {
   margin-bottom: 4px
 }

 .footer-col ul a {
   color: #aabbc8;
   font-size: 12px;
   transition: color .12s
 }

 .footer-col ul a:hover {
   color: #fff;
   text-decoration: underline
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   padding: 10px 0;
   text-align: center;
   font-size: 11px;
   color: #6e8090
 }

 .scroll-top {
   position: fixed;
   bottom: 25px;
   right: 25px;
   background: var(--pri);
   color: #fff;
   border: none;
   padding: 10px 12px;
   border-radius: 50%;
   cursor: pointer;
   z-index: 50;
   box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
   transition: background .15s;
   display: none
 }

 .scroll-top:hover {
   background: var(--acc)
 }

 .scroll-top.visible {
   display: block
 }

 /* RESPONSIVE */
 @media(max-width:991px) {
   .product-grid-home {
     grid-template-columns: repeat(2, 1fr)
   }

   .features-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .cert-grid {
     grid-template-columns: repeat(2, 1fr)
   }

   .contact-layout {
     grid-template-columns: 1fr;
     gap: 40px
   }

   .product-detail {
     flex-direction: column
   }
   .home-intro {
     flex-direction: column
   }
   .about-modern-img {
     min-width: 0;
     width: 100%
   }
 }

 @media(max-width:767px) {
   .main-nav {
     padding: 0
   }

   .main-nav .container {
     justify-content: center
   }

   #mainNav {
     display: block !important;
     flex-basis: auto;
     width: 100%
   }

   #mainNavList {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
     width: 100%
   }

   .navbar-nav .nav-link {
     font-size: 10px;
     padding: 8px 5px;
     white-space: nowrap
   }

   .navbar-nav .dropdown-item {
     font-size: 10px;
     padding: 7px 10px
   }

   .page-wrapper {
     flex-direction: column
   }

   .sidebar {
     width: 100%
   }



   .home-intro-img {
     width: 100%
   }

   .about-modern-img-wrapper {
     min-height: 260px
   }

   .home-intro-img.about-modern-img img {
     min-height: 244px
   }

   .product-detail {
     flex-direction: column
   }

   .product-detail-img {
     width: 100%
   }

   .contact-layout {
     padding: 28px 20px
   }

   .contact-info-panel {
     width: 100%
   }

   .footer-grid {
     grid-template-columns: 1fr 1fr;
     gap: 15px
   }

   .form-row {
     grid-template-columns: 1fr
   }

   .product-list-card {
     flex-direction: column
   }

   .product-list-img {
     width: 100%
   }

   .slider-container {
     height: 220px
   }

   .slide-overlay h2 {
     font-size: 18px
   }
 }

 @media(max-width:575px) {
   .navbar-nav .nav-link {
     font-size: 9px;
     padding: 7px 4px
   }

   .navbar-nav .dropdown-toggle::after {
     margin-left: 2px
   }

   .section-title-row {
     align-items: flex-start;
     /* flex-direction: column; */
     gap: 10px
   }

   .product-grid-home {
     grid-template-columns: 1fr
   }

   .features-grid {
     grid-template-columns: 1fr
   }

   .about-tab-btn {
     flex: 1 1 calc(50% - 8px);
     padding: 0 10px
   }

   .about-tab-panels {
     padding: 18px
   }

   .about-modern-actions .btn-sc {
     flex: 1 1 100%
   }

   .footer-grid {
     grid-template-columns: 1fr
   }

   .top-bar .welcome {
     display: none
   }

   .slider-container {
     height: 180px
   }

   .slide-overlay h2 {
     font-size: 16px
   }

   .slide-overlay p {
     font-size: 12px
   }
 }

 /*menu last*/

 @media(max-width:675px) {
   .navbar-collapse ul li.menu-last .dropdown-menu {
     left: auto;
     right: 0;
   }

   .navbar-collapse ul li.menu-last .dropdown-menu li .dropdown-menu {
     left: auto;
     right: 100%;
   }

   .slide-overlay {
     padding: 40px 75px;
   }
 }



 /* blog css */

 .single-post-area .blog_details img {
   width: 100%;
 }

 /* img{
    width: 100%;
} */
 .rating-img {
   width: 90px !important;
 }

 .blog_post img {
   width: 100%;
   height: 350px;
   object-fit: cover;
 }

 .page_link ul li {
   display: inline-block;
   padding: 5px 10px;
 }

 .page_link ul {
   padding: 0;
 }

 /* Blog details */
 .blog-detail-page {
   background: var(--bg, #f8f9fa);
   padding: 18px 0 34px;
 }

 .blog-detail-header {
   margin-bottom: 16px;
 }

 .blog-detail-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 310px;
   gap: 18px;
   align-items: start;
 }

 .blog-detail-card,
 .blog_right_sidebar .single_sidebar_widget,
 .blog_right_sidebar .single-sidebar-widget,
 .comments-area,
 .comment-form,
 .blog-post-nav-item {
   background: #fff;
   border: 1px solid var(--bd-l, #e0e0e0);
   box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, .1));
 }

 .blog-detail-card {
   overflow: hidden;
 }

 .blog-detail-image img {
   width: 100%;
   max-height: 430px;
   object-fit: cover;
 }

 .blog-detail-content {
   padding: 24px;
 }

 .blog-detail-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 16px;
   color: var(--tx-l, #757575);
   font-size: 12px;
   margin-bottom: 12px;
 }

 .blog-detail-meta i {
   color: var(--acc, #ff6f00);
   margin-right: 5px;
 }

 .blog-detail-title {
   color: var(--pri, #0d47a1);
   font-size: 30px;
   line-height: 1.22;
   font-weight: 800;
   margin: 0 0 12px;
 }

 .blog-detail-categories {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 18px;
 }

 .blog-detail-categories a,
 .blog-share a,
 .tag_cloud_widget a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--bd-l, #e0e0e0);
   background: #f8f9fc;
   color: var(--pri, #0d47a1);
   font-size: 12px;
   font-weight: 700;
 }

 .blog-detail-categories a {
   padding: 5px 10px;
 }

 .blog-detail-categories a:hover,
 .blog-share a:hover,
 .tag_cloud_widget a:hover {
   background: var(--acc, #ff6f00);
   border-color: var(--acc, #ff6f00);
   color: #fff;
 }

 .blog-detail-body {
   color: var(--tx-m, #424242);
   font-size: 15px;
   line-height: 1.8;
 }

 .blog-detail-body h2,
 .blog-detail-body h3,
 .blog-detail-body h4 {
   color: var(--pri, #0d47a1);
   font-weight: 800;
   margin: 24px 0 12px;
 }

 .blog-detail-body p,
 .blog-detail-body ul,
 .blog-detail-body ol,
 .blog-detail-body blockquote,
 .blog-detail-body table {
   margin-bottom: 16px;
 }

 .blog-detail-body img {
   width: 100%;
   height: auto;
   margin: 16px 0;
 }

 .blog-detail-body blockquote {
   border-left: 4px solid var(--acc, #ff6f00);
   background: #f8f9fc;
   padding: 14px 18px;
   color: var(--tx, #1a1a1a);
 }

 .blog-detail-body table {
   width: 100%;
   border-collapse: collapse;
 }

 .blog-detail-body th,
 .blog-detail-body td {
   border: 1px solid var(--bd-l, #e0e0e0);
   padding: 10px;
 }

 .blog-share {
   display: flex;
   align-items: center;
   gap: 8px;
   border-top: 1px solid var(--bd-l, #e0e0e0);
   margin-top: 24px;
   padding-top: 16px;
   font-weight: 700;
   color: var(--tx, #1a1a1a);
 }

 .blog-share a {
   width: 34px;
   height: 34px;
 }

 .blog-post-nav {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
   margin: 16px 0;
 }

 .blog-post-nav-item {
   padding: 14px;
   min-height: 86px;
 }

 .blog-post-nav-item.next {
   text-align: right;
 }

 .blog-post-nav-item span {
   display: block;
   color: var(--tx-l, #757575);
   font-size: 12px;
   margin-bottom: 5px;
 }

 .blog-post-nav-item strong {
   color: var(--pri, #0d47a1);
   font-size: 14px;
   line-height: 1.4;
 }

 .blog-post-nav-item:hover strong {
   color: var(--acc, #ff6f00);
 }

 .blog_right_sidebar {
   display: flex;
   flex-direction: column;
   gap: 14px;
 }

 .blog_right_sidebar .single_sidebar_widget,
 .blog_right_sidebar .single-sidebar-widget {
   padding: 18px;
 }

 .blog_right_sidebar .widget_title {
   color: var(--pri, #0d47a1);
   font-size: 16px;
   font-weight: 800;
   margin: 0 0 14px;
   padding-bottom: 8px;
   border-bottom: 2px solid var(--acc, #ff6f00);
 }

 .mt-blog-form form {
   display: flex;
   border: 1px solid var(--bd-l, #e0e0e0);
   background: #fff;
 }

 .mt-blog-form input {
   width: 100%;
   border: 0;
   padding: 10px 12px;
   font-size: 13px;
   outline: none;
 }

 .mt-blog-form button {
   border: 0;
   background: var(--pri, #0d47a1);
   color: #fff;
   width: 42px;
 }

 .author_widget {
   text-align: center;
 }

 .author_widget .author_img,
 .author_widget .avatar {
   width: 96px;
   height: 96px;
   object-fit: cover;
   margin: 0 auto 10px;
 }

 .author_widget h4 {
   color: var(--pri, #0d47a1);
   font-size: 16px;
   font-weight: 800;
   margin-bottom: 4px;
 }

 .author_widget p {
   color: var(--tx-m, #424242);
   font-size: 12px;
   margin-bottom: 10px;
 }

 .social_icon {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-bottom: 10px;
 }

 .social_icon a {
   display: inline-flex;
   width: 30px;
   height: 30px;
   align-items: center;
   justify-content: center;
   background: #f8f9fc;
   color: var(--pri, #0d47a1);
   border: 1px solid var(--bd-l, #e0e0e0);
 }

 .social_icon a:hover {
   background: var(--acc, #ff6f00);
   color: #fff;
   border-color: var(--acc, #ff6f00);
 }

 .popular_post_widget .post_item {
   display: flex;
   gap: 10px;
   align-items: center;
   padding-bottom: 12px;
   margin-bottom: 12px;
   border-bottom: 1px solid var(--bd-l, #e0e0e0);
 }

 .popular_post_widget .post_item:last-child {
   border-bottom: 0;
   padding-bottom: 0;
   margin-bottom: 0;
 }

 .popular_post_widget .popur_post {
   width: 72px;
   height: 58px;
   object-fit: cover;
 }

 .popular_post_widget h3 {
   font-size: 13px;
   line-height: 1.35;
   font-weight: 800;
   margin: 0 0 4px;
   color: var(--tx, #1a1a1a);
 }

 .popular_post_widget p,
 .cat-list p {
   color: var(--tx-l, #757575);
   font-size: 12px;
   margin: 0;
 }

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

 .cat-list li {
   border-bottom: 1px solid var(--bd-l, #e0e0e0);
 }

 .cat-list li:last-child {
   border-bottom: 0;
 }

 .cat-list a {
   padding: 9px 0;
 }

 .tag_cloud_widget .list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .tag_cloud_widget a {
   padding: 5px 9px;
 }

 .comments-area,
 .comment-form {
   padding: 20px;
   margin-top: 16px;
 }

 .comments-area h4,
 .comment-form .comment-reply-title {
   color: var(--pri, #0d47a1);
   font-size: 18px;
   font-weight: 800;
   margin-bottom: 14px;
 }

 .comments-area .comment-list,
 .comments-area ol {
   list-style: none;
   padding-left: 0;
 }

 .comments-area .comment {
   border-bottom: 1px solid var(--bd-l, #e0e0e0);
   padding: 12px 0;
 }

 .comment-form input[type="text"],
 .comment-form input[type="email"],
 .comment-form input[type="url"],
 .comment-form textarea {
   width: 100%;
   border: 1px solid var(--bd-l, #e0e0e0);
   padding: 10px 12px;
   outline: none;
 }

 .comment-form input:focus,
 .comment-form textarea:focus {
   border-color: var(--pri, #0d47a1);
 }

 .comment-form input[type="submit"] {
   background: var(--acc, #ff6f00);
   border: 0;
   color: #fff;
   font-weight: 800;
   padding: 10px 18px;
 }

 @media (max-width: 991px) {
   .blog-detail-layout {
     grid-template-columns: 1fr;
   }
 }

 @media (max-width: 575px) {
   .blog-detail-page {
     padding-top: 12px;
   }

   .blog-detail-content {
     padding: 18px;
   }

   .blog-detail-title {
     font-size: 24px;
   }

   .blog-post-nav {
     grid-template-columns: 1fr;
   }

   .blog-post-nav-item.next {
     text-align: left;
   }
 }