body {
  scroll-behavior: smooth;
  font-weight: normal;
  line-height: normal;
  font-size: 16px;
  background: var(--bodybg);
  font-family: "Roboto", sans-serif;
}



:root {
  --bodybg: #ffffff;
  --primary: #2C618A;
  --secondary: #000000;
  --tertiary: #1487BF;
  --title:#1D5B86;
  /* --topnavbar-bg: #FBFCFD; */
  --menuactive: #000000;
  --menuhover: #000000;
  --white: #ffffff;
  --subtext: #1B2128;
  --transition: all 0.3s ease;
  --linkhover: #000000;
  --card-title: #066D7C;
  --text: #4B5563;
  --bs-accordion-bg: #FBFCFD;
  --footer: #075981;
  --footer-icon: #ffffff;
  --footerlink:#ffffff;
  --footerlinkhover:#000000;
  --footer-text: #ffffff;
}

a {
  text-decoration: none;
  &:hover {
    color: var(--linkhover);
  }
}

img {
  width: 100%;
  height: auto;
}

/*common section start*/
.storm-btn,
.common-btn,
.btn,
.products-section.products-showcase .product-showcase-link {
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid var(--primary);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  background: transparent;
  letter-spacing: 0.2px;
  z-index: 0;
  line-height: normal;
  font-size: 16px;
}

.storm-btn::before,
.common-btn::before,
.btn::before,
.products-section.products-showcase .product-showcase-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #1487BF 0%, #2C618A 100%);
  transform: translateX(-110%) skewX(-18deg);
  transition: transform 0.35s ease;
  z-index: -1;
}

.storm-btn::after,
.common-btn::after,
.btn::after,
.products-section.products-showcase .product-showcase-link::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 30%;
  height: 160%;
  background: rgba(255, 255, 255, 0.35);
  transform: translateX(-140%) skewX(-18deg);
  transition: transform 0.5s ease;
  z-index: -1;
}

.storm-btn:hover,
.common-btn:hover,
.btn:hover,
.products-section.products-showcase .product-showcase-link:hover {
  color: var(--white);
  border-color: transparent;
  transform: translateY(-1px);
}

.storm-btn:hover::before,
.common-btn:hover::before,
.btn:hover::before,
.products-section.products-showcase .product-showcase-link:hover::before {
  transform: translateX(0) skewX(-18deg);
}

.storm-btn:hover::after,
.common-btn:hover::after,
.btn:hover::after,
.products-section.products-showcase .product-showcase-link:hover::after {
  transform: translateX(260%) skewX(-18deg);
}
h1, h2, h3, h4, h5 {
  color: var(--title);
}

.common-title-style {align-items: center; position: relative;}
.common-title-style span { color: var(--tertiary);}
.common-title-style::before {content: " "; display: block; background: var(--secondary);  position: absolute; bottom: 0; left: 0; width: 70%; height: 3px; }
.common_listing {width: 100%;}
.common_listing ul {margin: 0;padding: 0;}
.common_listing ul li {display: block;background-image: url('../images/list_icon.png');background-repeat: no-repeat; padding: 0 10px 15px 32px; background-position: 0 4px; background-size: 24px;}
.extra_tertiary { color: var(--tertiary);}

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}
.animated {animation-duration: 1s; animation-fill-mode: both; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both}
.animatedFadeInUp {opacity: 0}
.fadeInUp {opacity: 0;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
/*common section End*/

/*menu section start*/
.menu-section .navbar {min-height: 80px; transition: var(--transition); padding: 0; background: var(--white) !important; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.menu-section .navbar .navbar-container { padding:5px 20px;}
.menu-section .navbar .nav-item {margin: 0 16px;}
.menu-section .navbar .nav-item.active .nav-link {color: var(--menuactive); }
.menu-section .navbar .nav-item .nav-link {position: relative; padding: 0; margin: 0 15px; color: var(--primary);font-size: 18px;font-weight: 500;cursor: pointer;display: block;}
.menu-section .navbar .nav-item .nav-link::before {content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 2px; background: var(--tertiary); transition: var(--transition);}
.menu-section .navbar .nav-item .nav-link:hover {color: var(--menuhover); font-weight: 500;}
.menu-section .navbar .nav-item .nav-link:hover::before {width: 100%;}
.menu-section .navbar .nav-item .nav-link.active {color: var(--menuactive); font-weight: 500;}
.menu-section .navbar .nav-item .nav-link.active::before {width: 100%;}
.menu-section .navbar .nav-item.dropdown .nav-link.show {color: var(--menuactive); font-weight: 500;}
.menu-section .navbar .nav-item.dropdown .nav-link.show::before {width: 100%;}
.menu-section .navbar .nav-item.dropdown .dropdown-toggle::after {margin-left: 6px; border-top-color: var(--primary); transition: var(--transition);}
.menu-section .navbar .nav-item.dropdown .dropdown-toggle:hover::after,
.menu-section .navbar .nav-item.dropdown .dropdown-toggle:focus::after {border-top-color: var(--menuhover);}
.menu-section .navbar .nav-item.dropdown .dropdown-toggle.show::after {transform: rotate(180deg);}
.menu-section .logo-section .logo-img img {max-height: 60px; display: block; width: auto;}
.menu-section .navbar .nav-item.dropdown .dropdown-menu .dropdown-item {font-size: 16px; padding: 10px 15px;}
.menu-section .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:hover {background: var(--primary); color: var(--white);}
.menu-section .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:active { background: var(--primary); color: var(--white); }
.navbar-toggler { background: var(--primary);}
.offcanvas {height: 100vh;}
.offcanvas .offcanvas-body {align-items: center;}
.offcanvas.offcanvas-end {width: 90%;}
.offcanvas.text-bg-dark {background-color: var(--topnavbar-bg) !important;}
.offcanvas.show.text-bg-dark {background-color: #ffffff !important;}
.offcanvas {height: 100vh;}
.offcanvas.offcanvas-end {width: 90%;}
.offcanvas.text-bg-dark {background-color: var(--topnavbar-bg) !important;}
.offcanvas.show.text-bg-dark {background-color: #ffffff !important;}
 /*menu section End*/


.page-content-wrapper {line-height: 24px; width: 100%; padding: 77px 0 0 0;}


 /*header section start*/
.hero-section {margin-top: 0; width: 100%; overflow: hidden;}
.hero-section .slide-box-bg { width: 100%; background-image: url(../images/banner-home.jpg); flex-wrap: wrap; position: relative; background-repeat: no-repeat; background-size: cover; min-height: 600px; padding-top:125px;
padding-bottom: 120px; display: flex; align-items: center; justify-content: center;}
.hero-section .slide-box-bg::before { content: ''; z-index: 0; background: #000000b5; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.hero-section .slide-box-bg .hero-content { position: relative; z-index: 1;}
.hero-section .slide-box-bg .hero-content h1 { color: #e4f6ff; font-weight: 700; font-size: 45px; line-height: 60px;}
.hero-section .slide-box-bg .hero-content h2 { color: var(--white); font-size: 28px;}
.hero-section .hero-btn { background: var(--white); color: var(--primary); border: var(--primary); font-weight: 500; font-size: 18px;}
.hero-section .hero-btn:hover {background: var(--primary); color: var(--white); border: var(--primary);}
.hero-section .slide-box-bg .hero-content .hero-subtitle {color: var(--white); font-size: 25px;}
.hero-section .slide-box-bg .product-round-box {width: 520px; height: 520px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 30px 70px rgba(2, 18, 28, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); animation: liquidMorph 4.8s cubic-bezier(0.55, 0.08, 0.36, 0.94) infinite, slideInRight 1.1s ease both; will-change: border-radius, transform, opacity;}
.hero-section .slide-box-bg .product-round-box::before { content: ''; width: 100%; height: 100%; position: absolute; top:0; left: 0; right:0; border-radius: inherit; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 70%); animation: liquidMorph 6.2s cubic-bezier(0.55, 0.08, 0.36, 0.94) infinite; }
.hero-section .slide-box-bg .product-round-box::after {content: ""; position: absolute; inset: 12px; border-radius: inherit; background: linear-gradient(140deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none;}
.hero-section .slide-box-bg .product-sample-list { width: 500px; height: 500px; border-radius: 50%; overflow: hidden; position: relative; animation: liquidMorph 3.8s cubic-bezier(0.55, 0.08, 0.36, 0.94) infinite; will-change: border-radius; }
.hero-section .slide-box-bg .product-sample-list::after {opacity: 0; animation: none;}
.hero-section .slide-box-bg .product-sample-list .product-list img { border-radius: 100%;}
.hero-section .slide-box-bg .product-sample-list .product-list .owl-dots {margin-top: -30px; position: relative; z-index: 111; }
.hero-section .slide-box-bg .product-sample-list .product-list .owl-dots .owl-dot span { background: var(--secondary);}
.hero-section .slide-box-bg .product-sample-list .product-list .owl-dots .owl-dot.active span { background: var(--primary);}

@keyframes anim {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes liquidMorph {
  0% {border-radius: 50% 50% 46% 54% / 54% 46% 52% 48%;}
  20% {border-radius: 58% 42% 54% 46% / 46% 54% 44% 56%;}
  40% {border-radius: 44% 56% 48% 52% / 60% 40% 58% 42%;}
  60% {border-radius: 54% 46% 58% 42% / 42% 58% 46% 54%;}
  80% {border-radius: 46% 54% 44% 56% / 56% 44% 60% 40%;}
  100% {border-radius: 50% 50% 46% 54% / 54% 46% 52% 48%;}
}

@keyframes slideInRight {
  from {transform: translateX(40px); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}
 /*header section End*/

.workprocess-single-item {position: relative; z-index: 1; padding: 35px 20px;  overflow: hidden; background-color: #ffffff; border-radius: 8px; box-shadow: 0px 5px 20px 0px rgb(82, 90, 101, 0.1); -webkit-transition: 0.4s;
transition: 0.4s; margin-top: 5px; height: 100%;}
.workprocess-single-item .workprocess-icon-box { width: 85px; height: 85px; padding: 15px; border-radius: 20%; display: inline-block; border: 5px solid rgb(123, 104, 238, .05); background-color: rgb(123, 104, 238, .05); margin-bottom: 25px; -webkit-transition: 0.4s;transition: 0.4s;}
.workprocess-single-item .workprocess-info { line-height: 28px; font-size: 17px;}
.workprocess-single-item .workprocess-info h3 { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: var(--primary);}
.workprocess-single-item .workprocess-number-bg {position: absolute; z-index: -1; right: 5px; bottom: -45px;}
.workprocess-single-item .workprocess-number-bg span {color: rgb(231 234 235 / 30%); font-size: 12rem;font-weight: 700;line-height: 1;}

/*services modern start*/
.services-modern {background: linear-gradient(180deg, #05618f 0%, #07385e  100%);}
.services-modern .services-heading h2 {color: var(--white); font-size: 36px; margin-bottom: 8px;}
.services-modern .services-subtitle {color: #dbeafe; font-size: 18px;}
.services-modern .workprocess-single-item {background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff; box-shadow: none; border-radius: 14px; padding: 24px 22px;}
.services-modern .workprocess-single-item:hover {transform: translateY(-4px); background: rgba(255, 255, 255, 0.18);}
.services-modern .workprocess-single-item .workprocess-icon-box {width: 56px; height: 56px; border-radius: 14px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.22); display: flex; align-items: center; justify-content: center; padding: 0;}
.services-modern .workprocess-single-item .workprocess-icon-box i {color: #cfe4ff; font-size: 26px;}
.services-modern .workprocess-single-item .workprocess-info {font-size: 14px; line-height: 22px; color: #e2e8f0;}
.services-modern .workprocess-single-item .workprocess-info h3 {color: #ffffff; font-size: 18px; margin-bottom: 10px;}
.services-modern .workprocess-number-bg {display: none;}
/*services modern End*/

/*why choose start*/
.why-choose-section {background: #f8fafc;}
.why-choose-section .why-choose-header h2 {font-size: 36px; margin-bottom: 8px;}
.why-choose-section .why-choose-header h2 span {color: var(--tertiary);}
.why-choose-section .stats-strip {background: #ffffff; border-radius: 14px; padding: 20px 16px; box-shadow: 0 1px 10px rgba(15, 23, 42, 0.08);}
.why-choose-section .stat-item {display: flex; flex-direction: column; align-items: center; gap: 4px;}
.why-choose-section .stat-value {font-size: 32px; font-weight: 700; color: var(--primary); margin-bottom: 5px;}
.why-choose-section .stat-label {font-size: 20px; font-weight: 600; color: var(--tertiary);}
.why-choose-section .why-choose-subtitle {color: #64748b; font-size: 17px; line-height: 30px; max-width: 640px; margin: 0 auto;}
.why-choose-section .why-card {background: var(--white); border-radius: 14px; padding: 22px; box-shadow: 0 1px 10px rgba(15, 23, 42, 0.08); border: 1px solid #eef2f7; height: 100%;}
.why-choose-section .why-icon {width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #eaf2ff; color: var(--primary); font-size: 20px; margin-bottom: 14px;}
.why-choose-section .why-card h3 {font-size: 20px; font-weight: 700; color: var(--primary); margin-bottom: 8px;}
.why-choose-section .why-card .card-text {font-size: 16px; line-height: 24px; color: #475569; margin-bottom: 0;}
/*why choose End*/

 /*products section start*/
.products-section {background-color: var(--bodybg);}
.products-section h2 { color: var(--title); font-weight: 700;}
.products-section .product-card-box { width: 100%;}
.products-section .product-card-box .product-card {background: var(--white); border-radius: 8px; box-shadow: 0px 5px 20px 0px rgb(82, 90, 101, 0.1);  padding: 15px;  width: 100%; text-align: center;}
.products-section .product-card-box .product-card-img-box {width: 100%;overflow: hidden; min-height: 265px; background: #f7f7f7; border-radius: 10px; padding: 10px; justify-content: center; display: flex; align-items: center;}
.products-section .product-card-box .product-card-img-box img { width: auto; height: 260px; object-fit: cover; object-position: center; transition: all .5s ease; will-change: transform;}
.products-section .product-card-box .product-more {width: 100%; margin-bottom: 10px; display: flex; align-items: center; justify-content: center;}
.products-section .product-card-box .product-more-box {width: 100%; display: flex; justify-content: center; align-items: center;}
.products-section .product-card-box .product-more-box a {background: var(--tertiary); color: var(--white); font-weight: 600;  text-align: center;  width: auto; font-size: 15px; border-radius: 6px; color: var(--white); padding: 10px 18px;}
.products-section .product-card-box .product-more-box a:hover {color: var(--secondary);}
.products-section .product-card .products-short {background: #fff; padding: 15px 0 0 0; min-height: 114px; border-radius: 0 0 8px 8px;}
.products-section .product-card .products-short .products-name {font-size: 16px;font-weight: 600;color: var(--primary); display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;
max-height: 28px; line-height: 22px;}
.products-section .product-card .products-short .products-name .products-btn {color: var(--primary);font-size: 21px; font-weight: 600;}
.products-section .product-card .products-short .products-info {font-size: 15px;color: var(--secondary);line-height: 23px;padding: 8px 0 0;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;min-height: 50px;}
.products-section .product-card-box:hover .product-card-img-box img {transform: scale(1.3); overflow: hidden;}
/*products section End*/

/*products showcase start*/
.products-section.products-showcase {background: var(--bodybg);}
.products-section.products-showcase h2 {font-size: 36px; margin-bottom: 8px;}
.products-section.products-showcase h2 span {color: var(--tertiary);}
.products-section.products-showcase .products-subtitle {color: var(--text); font-size: 18px;}
.products-section.products-showcase .product-showcase-card {background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08); transition: var(--transition); height: 100%;}
.products-section.products-showcase .product-showcase-card:hover {transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);}
.products-section.products-showcase .product-showcase-img {width: 100%; height: 220px; overflow: hidden; background: #f1f5f9;}
.products-section.products-showcase .product-showcase-img img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.products-section.products-showcase .product-showcase-body {padding: 18px 20px 22px;}
.products-section.products-showcase .product-showcase-body h3 {font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--primary);}
.products-section.products-showcase .product-showcase-body .product-cnt {font-size: 16px; line-height: 22px; color: #475569; margin-bottom: 16px;}
/*products showcase End*/

/*oil changer section start*/
.oil-changer-section {background: linear-gradient(110deg, #1f5b87 60%, #8fccf9 60%);padding: 30px 0;}
.oil-changer-section .oil-changer-text { width:80%; font-size: 16px; color: var(--white); line-height: 27px;}
.oil-changer-section h1 { color: var(--white); font-size: 48px; font-weight: 700; text-transform: uppercase;}
.oil-changer-section .btn {background: var(--tertiary); border: 1px solid var(--white);}
.oil-changer-section .btn:hover {background: var(--primary); border: 1px solid var(--tertiary); color: var(--white);}
.oil-changer-section .oil-changer-banner { width: auto;}
.oil-changer-section .oil-changer-banner img { width: auto; height: 450px;}
/*oil changer section End*/

/*start*/
.strength-list-bg-section {width: 100%; min-height: 500px; background-image: url("../images/strength-backround.png"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: 100%; position: relative; padding: 50px 20px;}
.strength-list-bg-section h2 { color: var(--white);}
.strength-list-bg-section h2 span { color: var(--white);}
.strength-list-bg-section .common-title-style::before { background: var(--white);}
.strength-list-bg-section::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);}
.strength-list-bg-section .strength-mid-box {position: relative;z-index: 1;}
/* ================= Glass Container ================= */
.strength-list-bg-section .strength-mid-box .glass-container {position: relative;display: flex;align-items: center;background: transparent;border-radius: 20px;}
/* Glass blur layer */
.strength-list-bg-section .strength-mid-box .glass-container .glass-filter {position: absolute;inset: 0;border-radius: inherit;z-index: 0;backdrop-filter: blur(4px);filter: saturate(120%) brightness(1.15);}
/* Glass overlay */
.strength-list-bg-section .strength-mid-box .glass-container .glass-overlay {position: absolute;inset: 0;border-radius: inherit; z-index: 1;background: rgba(255, 255, 255, 0.1);}
/* Glass specular highlights */
.strength-list-bg-section .strength-mid-box .glass-container .glass-specular {position: absolute; inset: 0; border-radius: inherit; z-index: 2; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 5px rgba(255, 255, 255, 0.75);}
.strength-list-bg-section .strength-mid-box .glass-container .glass-specular.specular-2 {box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.75);}
/* Glass content */
.strength-list-bg-section .strength-mid-box .glass-container .glass-content {position: relative; z-index: 3; padding: 15px 30px;}
/* ================= Strength Content Box ================= */
.strength-list-bg-section .strength-mid-box .strength-cnt-box {background: #fff;border-radius: 10px;padding: 15px;width: 100%;display: flex;flex-wrap: nowrap;background: linear-gradient(120deg, #eceef1 0%, #c2e9fb 100%);}
/* Icon box */
.strength-list-bg-section .strength-mid-box .strength-cnt-box .strength-icon-box {width: 60px;height: 60px;border-radius: 50%;background: var(--tertiary);border: 1px solid var(--primary);display: flex;align-items: center;justify-content: center;}
.strength-icon-box .strength-icon-fa { font-size: 25px; color: var(--white);}
.strength-list-bg-section .strength-mid-box .strength-cnt-box .strength-icon-box img {height: 40px;}
/* Text content */
.strength-list-bg-section .strength-mid-box .strength-cnt-box .strength-short-cnt {width: calc(100% - 60px);padding: 0 0 0 15px;font-size: 17px;font-weight: 500;display: flex;align-items: center;}
/*End*/

/*advantage modern start*/
.advantage-modern .advantage-wrapper {background-image: linear-gradient(135deg, #0b1f36 0%, #103a5a 45%, #0d2a45 100%); background-size: cover; background-attachment: scroll; padding: 70px 20px;}
.advantage-modern .advantage-wrapper::before {background: linear-gradient(180deg, rgba(6, 22, 35, 0.78), rgba(8, 36, 56, 0.9));}
.advantage-modern .advantage-heading {text-align: center; margin-bottom: 30px; position: relative; z-index: 1;}
.advantage-modern .advantage-heading h2 {color: #f8fafc; font-size: 36px;}
.advantage-modern .advantage-heading h2 span {color: #8fd3ff;}
.advantage-modern .advantage-subtitle {color: #cbd5e1; font-size: 15px; margin: 0 auto; max-width: 560px;}
.advantage-modern .strength-mid-box {position: relative; z-index: 1;}
.advantage-modern .strength-mid-box .glass-container {padding: 10px; border-radius: 24px; background: rgba(255, 255, 255, 0.06);}
.advantage-modern .strength-mid-box .glass-container .glass-filter {backdrop-filter: blur(8px); filter: saturate(130%) brightness(1.1);}
.advantage-modern .strength-mid-box .glass-container .glass-overlay {background: rgba(255, 255, 255, 0.08);}
.advantage-modern .strength-mid-box .strength-cnt-box {background: rgba(255, 255, 255, 0.92); border-radius: 14px; padding: 18px; box-shadow: 0 10px 25px rgba(2, 12, 20, 0.18); transition: var(--transition);}
.advantage-modern .strength-mid-box .strength-cnt-box:hover {transform: translateY(-4px); box-shadow: 0 16px 30px rgba(2, 12, 20, 0.24);}
.advantage-modern .strength-mid-box .strength-cnt-box .strength-icon-box {background: linear-gradient(135deg, #1487BF, #2C618A); border: none;}
.advantage-modern .strength-mid-box .strength-cnt-box .strength-short-cnt {font-size: 16px; color: #0f172a;}
/*advantage modern End*/

/*start*/
.safety-section { background: var(--white);}
.safety-section .accordion{background: var(--bs-accordion-bg); border-radius: 10px;}
.safety-section .custom-accordion .accordion-item {border: none;border-top: 1px solid #1f5b87;}
.safety-section .custom-accordion .accordion-item:first-child { border-top: none;}
.safety-section .custom-accordion .accordion-button {font-weight: 600; font-size: 18px; color: #222222; padding: 20px 0; background: transparent; padding: 15px 15px; background:var(--bodybg) !important;}
.safety-section .custom-accordion .accordion-button::after {transform: rotate(0deg);}
.safety-section .custom-accordion .accordion-button:not(.collapsed)::after {transform: rotate(180deg);}
.safety-section .custom-accordion .accordion-button:focus {box-shadow: none;}
.safety-section .custom-accordion .accordion-body {padding:10px 15px 20px;color: #555; background:var(--bodybg) !important;}
.safety-section .custom-accordion .accordion-button:not(.collapsed) {color: #1f5b87;background-color: transparent; box-shadow:none;}
/*End*/

/*safety modern start*/
.safety-section.safety-modern {background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); position: relative; overflow: hidden;}
.safety-section.safety-modern::before {content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 135, 191, 0.2), rgba(20, 135, 191, 0)); top: -140px; left: -140px;}
.safety-section.safety-modern::after {content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(44, 97, 138, 0.16), rgba(44, 97, 138, 0)); bottom: -120px; right: -120px;}
.safety-section.safety-modern .safety-intro {position: relative; z-index: 1;}
.safety-section.safety-modern .safety-badge {display: inline-flex; align-items: center; gap: 8px; background: rgba(20, 135, 191, 0.12); color: #0f4c6e; font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 999px; margin-bottom: 12px;}
.safety-section.safety-modern h2 {font-size: 34px; margin-bottom: 0;}
.safety-section.safety-modern h2 span {color: var(--tertiary);}
.safety-section.safety-modern .safety-subtitle {color: #475569; font-size: 17px; line-height: 24px; margin-bottom: 18px;}
.safety-section.safety-modern .safety-highlights {display: flex; flex-wrap: wrap; gap: 10px;}
.safety-section.safety-modern .safety-chip {display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid #e2e8f0; padding: 8px 12px; border-radius: 999px; font-size: 16px; color: #1f2937; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);}
.safety-section.safety-modern .safety-chip i {color: var(--tertiary); font-size: 20px;}
.safety-section.safety-modern .safety-card {background: var(--white); border-radius: 16px; padding: 10px; box-shadow: 0 0 6px rgba(15, 23, 42, 0.1); position: relative; z-index: 1;}
.safety-section.safety-modern .custom-accordion .accordion-item {border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: #ffffff;}
.safety-section.safety-modern .custom-accordion .accordion-item:last-child {margin-bottom: 0;}
.safety-section.safety-modern .custom-accordion .accordion-button {background: #f8fafc !important; font-size: 17px; color: #0f172a; padding: 16px 18px;}
.safety-section.safety-modern .custom-accordion .accordion-button:not(.collapsed) {background: #eef6ff !important; color: #0f4c6e;}
.safety-section.safety-modern .custom-accordion .accordion-body {background: #ffffff !important; color: #475569; padding: 12px 18px 18px;}
/*safety modern End*/

/*footer section start*/
.footer-section {background: #0f172a; color: #e2e8f0; padding: 48px 0 30px; font-size: 15px;}
.footer-section ul {margin: 0; padding: 0;}
.footer-section ul li {list-style: none; margin-bottom: 10px;}
.footer-section .footer-title {color: #60a5fa; font-size: 18px; font-weight: 600; margin-bottom: 14px;}
.footer-section a {color: #cbd5e1; text-decoration: none; transition: var(--transition);}
.footer-section a:hover {color: #ffffff;}
.footer-section .footer-top {padding-bottom: 20px;}
.footer-section .footer-brand {display: flex; align-items: center; gap: 12px; margin-bottom: 14px;}
.footer-section .footer-brand img {height: 48px; width: auto;}
.footer-section .footer-brand-sub {font-size: 12px; color: #94a3b8;}
.footer-section .footer-text {color: #cbd5e1; margin: 0; line-height: 22px;}
.footer-section .footer-links a {display: inline-block; color: var(--white);}
.footer-section .footer-links a:hover {color: #60a5fa;}
.footer-section .footer-contact {display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;}
.footer-section .footer-contact-item {display: flex; align-items: start; gap: 10px; color: #cbd5e1; line-height: 25px;}
.footer-section .footer-contact-item i {color: #60a5fa; min-width: 18px; margin-top: 5px;}
.footer-section .footer-social {display: flex; gap: 12px;}
.footer-section .footer-social a {color: #9ca3af; font-size: 16px;}
.footer-section .footer-social a:hover {color: #60a5fa;}
.footer-section .footer-divider {height: 1px; background: rgba(148, 163, 184, 0.2); margin: 18px 0;}
.footer-section .footer-bottom {text-align: center; color: #94a3b8; font-size: 14px;}

.sub-page-heder {width: 100%; display: flex; flex-wrap: wrap; margin-bottom: 30px; background-image: url(../images/sub-header.png); color: var(--white); position: relative; background-repeat: no-repeat; background-size: cover; background-position: bottom; position: relative; z-index: 11; min-height: 300px; padding-top: 140px;}
.sub-page-heder::before { content: ''; z-index: -1; background: #000000b5; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.breadcrumb-section {width: 100%; display: flex; justify-content: center; align-items: center;}
.breadcrumb-section a { color: var(--white);}
.breadcrumb-section a:hover {color: var(--white); text-decoration: underline;}
.breadcrumb-section h2 { font-size: 40px; margin: 0; font-weight: 700; color: var(--white); line-height: normal; }
.breadcrumb-section.product-header h2 { font-size: 30px;}
.breadcrumb-section h3 { font-size: 30px; margin: 0; padding: 0; font-weight: 600; line-height: normal; }
.breadcrumb-section .sub_breadcrumb_banner img { width: auto; height: 160px;}
.breadcrumb-section .breadcrumb-item.active { color: var(--white);}

.get-touch-section .touch-form .form-control {padding: 10px;font-size: 16px;}
.get-touch-section .touch-form .form-control:focus {box-shadow:none; outline: none;}
.get-touch-section .contact-info { background: var(--primary); color: var(--white);}
.get-touch-section .contact-info h3 { color: var(--white);}
.get-touch-section .contact-info h5 { color: var(--white);}
.get-touch-section .contact-info a { color: var(--white);}
.get-touch-section .contact-info a:hover { color: var(--white);}
.get-touch-section .touch-form label { font-size: 15px; margin-bottom: 4px;}
.get-touch-section .touch-form {box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.contact-touch-section {background: var(--bodybg);}
.get-touch-card {background: #fff; border: 1px solid #E6ECF1;border-radius: 12px;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);padding: 20px;}
.touch-control-input {height: auto;border-radius: 8px; border: 1px solid #EEF2F6;padding: 10px 14px;font-size: 14px;color: #374151;outline: none;width: 100%; background: #F7F7F9;}
.touch-control-input::placeholder {color: #9AA3AF;outline: none;border: none;}
.touch-control-input:focus {background: #F7F7F9;outline: none;box-shadow: inherit;}

/*About section start*/
.about-cnt-banner {background: linear-gradient(to right, #ffffff 70%, var(--primary) 30%); padding: 40px; border-radius: 10px; text-align: end;}
.about-cnt-banner img { border-radius: 10px;}
.about-features {padding-bottom: 10px;}
.about-features.features .box-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1rem;}
.about-features.features .box-container .feature-item {padding: 25px 20px; background-color: var(--tertiary); border-radius: 7px;}
.about-features.features .box-container .feature-item .intro {display: flex; -webkit-box-align: center; align-items: center; gap: 15px; padding-bottom: 10px;}
.about-features.features .box-container .feature-item .intro i {color: transparent; -webkit-text-stroke: 0.15rem var(--white); font-size: 40px; display: flex; -webkit-box-pack: center; justify-content: center;
-webkit-box-align: center;align-items: center;}
.about-features.features .box-container .feature-item h3 {font-size: 23px; font-weight: 500; color: var(--white);}
.about-features.features .box-container .feature-item .feature-cnt {color: var(--white); font-size: 15px;}
/*About section End*/

/*About page cards start*/
/* About page format */
.about-hero-banner {background: linear-gradient(180deg, #05618f 0%, #07385e  100%); padding: 0; min-height: 150px; display: flex; justify-content: center; align-items: center; color: #ffffff; text-align: center;}
.about-hero-banner h1 {font-size: 34px; font-weight: 700; margin-bottom: 8px; color: #ffffff; margin: 0;}
.about-hero-banner p {color: #dbeafe; margin-bottom: 0;}

.about-who {background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); position: relative; overflow: hidden;}
.about-who::before {content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 135, 191, 0.22), rgba(20, 135, 191, 0)); top: -140px; left: -140px;}
.about-who::after {content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(44, 97, 138, 0.18), rgba(44, 97, 138, 0)); bottom: -120px; right: -120px;}
.about-who .about-card-box {background: rgba(255, 255, 255, 0.14); border-radius: 16px; padding: 24px; box-shadow: 0 30px 70px rgba(2, 18, 28, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); position: relative; z-index: 1;}
.about-who .about-card-box::after {content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 70%); pointer-events: none;}
.about-who h2 {font-size: 24px; font-weight: 700; margin-bottom: 12px; color: #0f172a;}
.about-who h2 span {color: #1d6fd8;}
.about-who p {color: #475569; line-height: 24px;}
.about-who .about-bullets {margin: 10px 0 12px 18px; color: #475569;}
.about-who .about-bullets li {margin-bottom: 6px;}
.about-image-card {position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(2, 18, 28, 0.35); border: 1px solid rgba(255, 255, 255, 0.35); z-index: 1;}
.about-image-card::after {content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)); pointer-events: none;}
.about-image-card img {display: block; width: 100%; height: auto;}
.about-badge {position: absolute; left: 16px; bottom: 16px; background: #1d6fd8; color: #ffffff; padding: 10px 12px; border-radius: 10px; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2); font-size: 12px; text-align: left;}
.about-badge .badge-title {font-weight: 700; letter-spacing: 0.3px;}
.about-badge .badge-sub {font-size: 11px;}

.about-stats {background: #1d4fbf; color: #ffffff; padding: 24px 0;}
.about-stats .stat-box {display: flex; flex-direction: column; align-items: center; gap: 4px;}
.about-stats .stat-value {font-size: 22px; font-weight: 700;}
.about-stats .stat-label {font-size: 12px; color: #dbeafe;}


.about-services {background: #f8fafc;}
.about-services  h3 {color:var(--primary); font-size: 30px;}
.about-services  h3 span {color:var(--tertiary)}
.about-services .services-card {background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12); border: 1px solid #e2e8f0; border-left: 3px solid var(--tertiary); position: relative; overflow: hidden;}
.about-services .services-card:hover {transform: translateY(-3px); box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);}
.about-services .services-title {font-size: 23px; font-weight: 700; margin-bottom: 12px; color: var(--primary);}
.about-services .services-card .services-card-cnt {color: var(--text); margin-bottom: 0; line-height: 28px;}
.about-services .service-list {margin: 0; padding-left: 0; list-style: none;}
.about-services .service-list li {display: flex; align-items: flex-start; gap: 8px; color: #475569; margin-bottom: 8px;}
.about-services .service-list i {color: var(--primary); margin-top: 4px;}

.who-we-are {padding: 70px 0;background: var(--white); color: var(--text); line-height: 28px;}
.who-we-are h2 {font-size: 36px; margin-bottom: 8px;}
.who-we-are h2 span {color: var(--tertiary);}
.who-we-are ul { margin: 0; padding: 0;}
.who-we-are ul li {margin-bottom: 10px; list-style: none;}
.who-we-are .image-wrapper {position: relative;}
.who-we-are .image-wrapper img {border-radius: 18px;width: 100%;height: 100%;object-fit: cover;}
.who-we-are .iso-badge {position: absolute; left: -20px; bottom: 20px; background: var(--primary); color: var(--white);padding: 22px 26px; border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.15);}
.who-we-are .iso-badge h4 {margin: 0;font-weight: 700; color: var(--white);}
.who-we-are .iso-badge small {font-size: 14px;}

.product-cnt-img-box { width: 100%; height: auto; padding: 10px; display: flex; justify-content: center; align-items: center;}
.product-cnt-img-box img { width: auto; height: auto; max-height: 300px; max-width: 100%;}

.product-detail-section {background: #ffffff;}
.product-detail-row {row-gap: 32px; column-gap: 24px;}
.product-image-card {position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18); width: 40%;}
.product-image-card img {width: 100%; height: 100%; object-fit: cover; display: block;}
.product-image-card::after {content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0)); pointer-events: none;}
.product-badge {position: absolute; left: 16px; bottom: 16px; background: #1d4fbf; color: #ffffff; font-weight: 600; padding: 8px 14px; border-radius: 999px; font-size: 13px; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);}

.product-detail-content h2 {font-size: 28px; font-weight: 700; color: var(--primary); margin-bottom: 10px;}
.product-detail-content .product-detail-sub {color: var(--text); font-size: 17px; line-height: 28px; margin-bottom: 18px;}
.product-detail-content .product-feature-block {margin-bottom: 18px;}
.product-detail-content .feature-title {font-size: 20px; font-weight: 700; color: var(--tertiary); display: flex; align-items: center; gap: 8px; margin-bottom: 10px;}
.product-detail-content .feature-title i {color: var(--primary);}
.product-detail-content .feature-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 0; margin: 0; list-style: none;}
.product-detail-content .feature-list li {display: flex; align-items: center; gap: 10px; margin: 5px 0; color: #334155; font-size: 16px;}
.product-detail-content .feature-list i {width: 22px; height: 22px; min-width: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(20, 135, 191, 0.15); color: #1487BF; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(20, 135, 191, 0.25);}
.product-detail-content .product-spec-card {background: #ffffff; border: 1px solid #dbeafe; border-radius: 16px; padding: 18px; margin-bottom: 18px; position: relative; overflow: hidden; box-shadow: 0 1px 7px rgba(15, 23, 42, 0.08);}
.product-detail-content .product-spec-card::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #1487BF, #2C618A);}
.product-detail-content .spec-title {font-size: 18px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; margin-bottom: 12px;}
.product-detail-content .spec-title i {color: var(--primary);}
.product-detail-content .spec-list {list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.product-detail-content .spec-list li {display: grid; grid-template-columns: 180px 1fr; align-items: start; gap: 12px; padding: 10px 14px; background: #f8fafc; color: #1f2937; font-size: 15px; border-radius: 12px; border: 1px solid #e2e8f0;}
.product-detail-content .spec-list li:nth-child(even) {background: #eef6ff; border-color: #dbeafe;}
.product-detail-content .spec-list span:first-child {color: #0f172a; font-weight: 600;}
.product-detail-content .spec-list span:last-child {color: #0f172a;}

.btn-cta-product {padding: 12px 26px; border-radius: 10px; font-weight: 600; box-shadow: none;}


.cta-section{background: linear-gradient(140deg, #f6fbff 0%, #eef5fb 55%, #e8f2fb 100%);padding: 90px 0;text-align: center;color: #0f172a;position: relative;overflow: hidden;}
.cta-section::before{content: "";position: absolute;inset: 0;background-image:radial-gradient(circle at 12% 18%, rgba(20, 135, 191, 0.12), rgba(20, 135, 191, 0) 45%),radial-gradient(circle at 88% 20%, rgba(44, 97, 138, 0.12), rgba(44, 97, 138, 0) 40%),repeating-linear-gradient(120deg, rgba(44, 97, 138, 0.08) 0 1px, rgba(44, 97, 138, 0) 1px 32px);pointer-events: none;}
.cta-section .container{position: relative;z-index: 1;}
.cta-section h2{font-weight: 700;margin-bottom: 16px;font-size: 36px;line-height: 44px;color: #0f172a;}
.cta-section p{color: #475569;max-width: 700px;margin: 0 auto 32px;font-size: 17px;line-height: 26px;}
.cta-section .btn-cta{padding: 12px 30px;font-weight: 600;border-radius: 999px;transition: var(--transition);}
.cta-section .btn-primary.btn-cta{background: #1487BF;border-color: #1487BF;box-shadow: 0 12px 24px rgba(20, 135, 191, 0.25);color: #ffffff;}
.cta-section .btn-primary.btn-cta:hover{background: #2C618A;border-color: #2C618A;color: #ffffff;}
.cta-section .btn-outline-light.btn-cta{border-color: rgba(44, 97, 138, 0.4);color: #0f172a;background: #ffffff;box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);}
.cta-section .btn-outline-light.btn-cta:hover{background: #e8f2fb;color: #0f172a;}

.back-to-top{position: fixed;right: 20px;bottom: 20px;width: 45px;height: 45px;border-radius: 50%;border: none;background: var(--tertiary); color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer; opacity: 0;visibility: hidden;transform: translateY(15px);transition: all 0.3s ease;z-index: 999;box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.back-to-top.show{opacity: 1;visibility: visible;transform: translateY(0);}
.back-to-top:hover{background: var(--primary);}

@media screen and (max-width: 1400px) {
  .hero-section .slide-box-bg .product-round-box { width: 480px; height: 480px;}
  .hero-section .slide-box-bg .product-sample-list {width: 450px; height: 450px;}
}

@media screen and (max-width: 1300px) {
  .hero-section .slide-box-bg .product-round-box { width: 450px; height: 450px;}
  .hero-section .slide-box-bg .product-sample-list {width: 430px; height: 430px;}
}

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

@media screen and (max-width: 1199px) {
  .container {max-width: 100%;}
  .breadcrumb-section h2 {font-size: 35px;}
  .breadcrumb-section .sub_breadcrumb_banner { text-align: end;}
  .hero-section .slide-box-bg .product-round-box { width: 380px; height: 380px;}
  .hero-section .slide-box-bg .product-sample-list {width: 350px; height: 350px;}
}

@media screen and (max-width: 999px) {
  .container {max-width: 100%;}
  .hero-section .slide-box-bg {min-height: 430px; padding-top: 125px;}
  .hero-section .slide-box-bg .product-round-box { width: 330px; height: 330px;}
  .hero-section .slide-box-bg .product-sample-list {width: 310px; height: 310px;}
  .hero-section .slide-box-bg .hero-content { text-align: center; margin-bottom: 20px;}
  h2 { font-size: 28px;}
  .oil-changer-section h1 { font-size: 38px;}
  .menu-section .navbar .navbar-container {min-width: 100%;}
  .hero-section {margin-top: 0;}
  .services-modern .services-heading h2 {font-size: 29px;}
  .menu-section .navbar .nav-item .nav-link:hover::before { display: none;}
  .menu-section .navbar .nav-item .nav-link.active::before { display: none;}
}

@media screen and (max-width: 992px) {
.hero-section .slide-box-bg .product-round-box { width: 300px; height: 300px; overflow: hidden;}
.hero-section .slide-box-bg .product-sample-list {width: 280px; height: 280px;} 
.menu-section .navbar-nav .nav-item { margin: 10px 0;padding-bottom: 10px !important;border-bottom: 1px solid var(--primary);}
.menu-section .navbar .navbar-container {padding: 5px 15px;}
.products-section .product-card-box .product-card-img-box img {height: 210px;}
.oil-changer-section {background: #1f5b87;}
.oil-changer-section .oil-changer-text { width: 100%;}
.strength-list-bg-section {background-attachment: scroll; background-size: cover;}
.safety-section .custom-accordion .accordion-button {font-size: 20px;}
.page-content-wrapper {padding-top: 130px;}
.who-we-are .iso-badge {left: 15px;bottom: 15px;}
.product-image-card {width: 70%;}
.feature-list {grid-template-columns: 1fr;}
.product-detail-row {row-gap: 28px;}
.who-we-are h2 {font-size: 28px;}
.about-services h3 span {font-size: 28px;}
}	


@media screen and (max-width: 768px) {
  .services-section .service-card-sub-text img {height: 220px;}
  .products-section  .product-card-img-box img {height: 220px;}
}

@media screen and (max-width: 767px) {
  .menu-section .navbar .navbar-container {max-width: 90%;}
  .oil-changer-section h1 {font-size: 30px;}
  .breadcrumb-section .sub_breadcrumb_banner img { width: 100%; height: auto;}
  .about-cnt-banner img { width: auto; height: 400px;}
  .breadcrumb-section h2 {font-size: 30px;}
  .breadcrumb-section.product-header h2 {font-size: 27px;}
  .hero-section .slide-box-bg .hero-content h2 {min-height: 100px;}
  .product-detail-content .spec-list {grid-template-columns: 1fr;}
}

@media screen and (max-width: 576px) {
  .breadcrumb-section h2 {font-size: 27px;}
  .footer-section .footer-company-text { width: 100%;}
  .page-content-wrapper {padding-top: 80px;}
  .about-hero-banner h1 {font-size: 28px;}
  .product-detail-row {row-gap: 22px;}
  .product-detail-content h2 {font-size: 26px; line-height: 34px;}
  .product-detail-sub {font-size: 15px;}
  .product-detail-content .spec-list li {grid-template-columns: 1fr;}
}

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