@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
*{ box-sizing:border-box;}
html{font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased; scroll-behavior: smooth;}
body{font:normal 13px/18px 'Open Sans', sans-serif; margin: 0; color: #313131;  counter-reset: my-sec-counter; background: #fff;}
.clear{content:".";display:block;clear:both;height:0;visibility:hidden;}
img{max-width:100%;width:auto\9;height:auto;border:0;-ms-interpolation-mode:bicubic; vertical-align: middle;}
p{ margin:5px 0;}
a{ color: #404040; text-decoration: none; display: inline-block;}
ul,ul li{ list-style:none; padding: 0; margin: 0;}
i{ font-size:24px;}

input:focus{outline: none;}
.container{ max-width: 1140px; margin: 0 auto;}
header{box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-color: #fff; padding: 10px;}
header .container{ display: grid; grid-template-columns: auto max-content; align-items: center;}
.search{ background-color: #fff; border: solid 1px #d8dee6; max-width: 300px; min-width: 300px; border-radius: 30px; display: grid; grid-template-columns: auto max-content; align-items: center; padding-left: 10px;}
.search-icon{ background: #e92227; width: 32px; height: 32px; line-height: 32px; border-radius:50%; text-align: center; cursor: pointer;}
.search input{ width: 100%; border: 0;}

.menu-icon{ width: 26px; display: none;}
.menu-icon span{ display: block; background: #626262; height: 3px;}
.menu-icon span:nth-of-type(2){ margin: 3px 0;}

.menu-wrapper{ background: #0a56b8;}
.menu-wrapper nav ul { display: inline-flex; width: 100%; justify-content: space-evenly;}
.menu-wrapper nav ul li{}
.menu-wrapper nav ul li a{ padding: 18px 15px; color: #fff; font-size: 16px; font-weight: 600;}
.menu-wrapper .close-div{ display: none;}
.menu-wrapper nav ul li a.active{ background: #fff; color: #0a56b8; position: relative;}
.menu-wrapper nav ul li a.active:before,.menu-wrapper nav ul li a.active:after{content: ''; position: absolute; width: 100%;  left: 0; height: 4px;}
.menu-wrapper nav ul li a.active:before{ top:0; background: #0a56b8;}
.menu-wrapper nav ul li a.active:after{ bottom:0; background: #ff4b50;}

.slider-wrapper{ margin: 20px 0;}
.banner-wrapper{margin-bottom: 50px;}
.main-title{ position: relative; text-align: center; margin: 20px 0; font-size: 20px;}
.main-title:before,.main-title:after{content:''; background: #d8dee6; position: absolute; top: 50%; transform: translateY(-50%); width: 50%; height: 1px;}
.main-title:before{left: 0;}
.main-title:after{right: 0;}
.main-title span{ display: inline-block; position: relative; padding: 0 20px; background: #fff; z-index: 1;}

.product-list-warpper{ margin-bottom: 40px;}
.product-list{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px;}
.product-list a{ display: block;}
.product-list img{ width: 100%;}
.product-list h6 { color: #021227; margin: 15px 0 10px; font-size: 16px; font-weight: 700;}
.product-list p { margin: 0; color: #929eae; font-family: sans-serif; font-size: 11px; font-weight: 600;}

.close-div{text-align: right; padding: 10px;  color: #fff; cursor: pointer; font-size: 18px;}

footer{ background: #001734; text-align: center; color: #f1f1f1; padding: 20px 10px; font-family: sans-serif;}
footer a{ color: #f1f1f1;}

.banner-wrapper.inner-product-banner{ margin: 25px 0;}
.main-grid{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px;}
.main-grid .product-list{ display: block;}
.sub-grid  .product-list{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px;}

.product-detail-grid{ display: grid; grid-template-columns: auto 280px; grid-gap: 40px; padding: 40px 0;}
.related-articles h1{ margin: 0; color: #021227; font-size: 20px; line-height: 20px;}
.related-articles-list li{ margin: 15px 0;}
.related-articles-list li a{ diplay: block; color: #67727e; font-size:14px; font-weight: 600;}
.product-detail{}
.product-detail-header h1{ margin: 0 0 10px 0; font-size: 24px; line-height: 24px;}
.product-detail-header h6{margin: 0; color: #929eae; font-family: sans-serif; font-size: 11px; font-weight: 600;}
.product-detail-header img { margin: 10px 0; width: 100%;}
.product-detail-header p{ font-size: 16px;}
.product-detail p{font-size: 16px; line-height: 24px; font-weight: 600; color: #67727e; margin: 15px 0;}

.wp-block-table{ margin: 0; font-size: 14px;}
.wp-block-table table{ width: 100%; border-collapse: collapse;}
.wp-block-table table tr td{ padding: 8px;}
.wp-block-table table tr:nth-child(odd){background-color: #fff; }
.wp-block-table table tr:nth-child(even){ background-color: #f2f2f2;}

.product-desc ul{ font-size: 14px; font-weight: 600;}
.product-desc ul li{ margin: 8px 0;}

.product-desc h2{display: inline-flex; width: 100%;}
.product-desc h2 strong{ display: inline-block;}

.wp-block-table table.has-cyan-grey-background-color.has-background{margin: 20px 0; font-weight: 600;}
.wp-block-table table.has-cyan-grey-background-color.has-background tr:nth-of-type(1) td:first-of-type{ background: #eef7f2;}
.wp-block-table table.has-cyan-grey-background-color.has-background tr:nth-of-type(1) td:last-of-type{ background: #ffebeb;}
.wp-block-table table.has-cyan-grey-background-color.has-background tr{ background: #fff;}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .menu-wrapper nav ul li a { padding: 15px 8px; font-size: 14px;}
    .product-list-container{ padding: 0 10px;}
    .banner-wrapper.inner-product-banner{ padding: 0 10px;}
}
@media only screen and (max-width: 767px) {
    header .container{ grid-gap: 10px; display: block; position: relative;}
    .search{ min-width:220px; max-width: 100%; margin-top: 10px;}
    .menu-icon{ display: block; position: absolute; right: 10px; top: 12px;}
    .menu-wrapper {display: none; background: rgba(0,0,0,0.8); position: fixed; top: 0; right: 0; width: 100%; z-index: 9; height: 100vh; }
    .menu-wrapper .container{background: #0a56b8; width: 280px; position: absolute;right: 0; height: 100vh;}
    .menu-wrapper .close-div{ display: block;}
    .menu-wrapper nav ul{ display: block;}
    .menu-wrapper nav ul li a{ display: block; border-bottom: 1px solid #115ec1; padding: 15px 20px;}
    .slider-wrapper { margin: 12px 0; }
    .banner-wrapper { margin-bottom: 40px; }
    .main-title{font-size: 16px;}
    .main-title span{ padding: 0 10px;}
    .product-list-container{ padding: 0 10px;}
    .product-list{grid-template-columns: repeat(2, 1fr); grid-gap: 15px;}
    .product-list-warpper { margin-bottom: 20px; }
    .product-list h6{margin: 10px 0 8px; font-size: 14px;}
    .banner-wrapper.inner-product-banner{ padding: 0 10px;}
    .main-grid{ grid-template-columns: auto;}
    .product-detail-grid{ grid-template-columns: auto; grid-gap: 10px;}
    .product-desc h2{ font-size: 16px; margin: 0;}
    .product-detail p { font-size: 14px; line-height: 22px; margin: 10px 0;}
}