.itopplus-background {

}
a {
    color: #444444;
}
a:hover {
    color: #ee1a26;
}

.navbar-default .navbar-nav>li>a {
    font-size: 1.2em;
    color: #fff;
    margin: 0 30px;
    padding: 5px 15px;
    text-shadow: none;
    font-family: "Onest", serif;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:active,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
    color: #fff !important;
    box-shadow: none;
    border-radius: 30px;
    background: transparent;
    background-color: #ee1a26;
}

.dropdown-menu>li>a {
    font-size: 1.3em;
    color: #444;
    padding: 10px 20px;
      font-family: "Onest", serif;
}

.no-js .dropdown-menu>li>a:focus,
.no-js .dropdown-menu>li>a:hover {
    color: #fff;
    background: #ee1a26;
}

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

    #controlBanner img {
        position: fixed;
        top: 13px;
        left: 10px;
        width: 160px !important;
        z-index: 10000;
    }

    #nav-menu,
    #ItopplusMainSidebar>div {
        background: #262626 !important;
    }

    #itpMenuSideBar span {
        background-color: #fff !important;
    }

    #controlMenu * {
        color: #fff !important;
        border: none;
    }


}

@media screen and (min-width: 1024px) {
    .no-js .itopplus-banner {
        position: sticky;
        top: 0;
        z-index: 110;
      padding: 1.5% 0;
    }

    .itopplus-banner {
        background: #262626;
        transition: .3s;
    }

    .itopplus-banner .container {
        display: grid;
        grid-template-columns: 19% auto;
        align-items: center;
    }

    .itopplus-sticky {
        background: #262626 !important;
    }

    #controlBanner {
        object-fit: contain;
        padding: 15px 0;
        width: 100%;
        min-width: auto;
        margin: 0 auto;
    }

    #nav-menu {
        display: grid;
        justify-content: end;
        background: transparent;
        min-height: auto;
    }


}




/**/
.h1, h1 {
    font-size: 1.6em;
    font-weight: 600;
}
.h2, h2 {
    font-size: 1.4em;
    font-weight: 600;
}
.h3, h3 {
    font-size: 1.2em;
    font-weight: 600;
}
.h4, h4 {
    font-size: 1.1em;
    font-weight: 600;
}
.h5, h5 {
    font-size: 1.1em;
}
.boderedlayoutClient {
    border-top: 0px dashed transparent;
    border-left: 0px dashed transparent;
    border-right: 0px dashed transparent;
    border-bottom: 0px dashed transparent;
}
ol, ul {
    margin-top: 10px;
    margin-bottom: 10px;
}
/**/




/*footer*/
.itopplus-footer {
    font-size: 14px;
}
.itopplus-footer h4 {
    margin: 0px 0 8px;
    font-weight: 600;
}
.itopplus-footer a {
    color: #ffffff;
}
.itopplus-footer a:hover {
    color: #ee1a26;
}
.footer-logo {
    width: 60%;
    margin: 0 auto;
}
.tel-block {
    display: grid;
    grid-template-columns: 20px auto;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    margin: 15px auto;
    font-family: Tahoma, Geneva, sans-serif;
    gap: 10px;
}
.footer-icon-img {
    display: flex;
    gap: 10px;
    width: 55%;
    justify-content: center;
    margin: 5px 0 15px;
}
.icon-img {
    transition: 0.5s;
}
.icon-img:hover {
    transform: scale(1.1);
}
.footer-pd {
    padding: 0 5%;
}
.footer-pd2 {
    font-family: "Onest", serif;
    padding: 0 20%;
}
.copy-right {
    font-size: 0.85em;
    font-family: "Onest", serif;
}
.ITPcookiebar {
    width: 100% !important;
}
.buttonExampleSite {
    border: 1px solid #ee1a26 !important;
    color: #ee1a26 !important;
    font-family: Prompt,sans-serif !important;
}
.buttonExampleSite:hover {
    background: #ee1a26 !important;
    color: #ffffff !important;
}
.ITP-pdpa-template-titleFont {
    font-size: 1.2em !important;
    padding-bottom: 0rem !important;
    font-weight: 600 !important;
}
.ITP-pdpa-template-contentFont {
    font-size: 1em !important;
}
.itpPDPALandingPage {
    padding: 6% 2% 2%;
}
/*footer*/


/*Home*/
.about-us {
    padding: 0% 0 0 10%;
}
.about-us h1 {
    white-space: pre-line;
    color: #ee1a26;
    margin: 0 0 25px;
    font-family: Prompt, sans-serif;
}
.about-sub {
    font-family: "Onest", serif;
}
#slider6719f3cc628132001367d26a {
    width: 85%;
    margin: 0 auto;
}
.padding-pd {
    padding: 2%;
}
.why-icon-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.why-icon {
    white-space: pre-line;
    text-align: center;
    font-size: 0.9em;
    transition: 0.5s;
}
.why-icon:hover {
    transform: scale(1.1);
}
.why-icon img {
    width: 50% !important;
    border-radius: 50%;
}
.why-icon h4 {
    color: #000;
    margin: 20px 0 5px;
}
.menu-align {
    font-family: "Onest", serif;
    text-align: center;
    padding: 5% 0 2%;
    color: #000000;
}
figure.effect-phoebe {
    background: transparent;
    border-radius: 20px;
}
figure.effect-phoebe h2 {
    transform: translate3d(0, 0px, 0);
    background: rgba(255, 255, 255, .65);
    color: #000;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    font-size: 1.1em;
    text-transform: none;
    font-weight: 600;
    padding: 20px 0;
    transition: 0.5s;
}
figure.effect-phoebe:hover h2 {
    background: rgba(238, 26, 38, .85);
    color: #fff;
}
.grid figure h2 {
    word-spacing: normal;
}
figure.effect-phoebe img {
    opacity: 1;
    transition: 0.5s;
}
figure.effect-phoebe:hover img {
   transform: scale(1.1);
}
.btn-more {
    background: #ee1a26;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 0.9em;
    transition: 0.5s;
}
.btn-more:hover  {
    background: #000;
    color: #fff;
}
.btn-align {
    text-align: center;
    padding: 1% 0 10%;
}
.why-head {
    font-family: "Onest", serif;
    text-align: center;
    font-size: 1.6em;
    color: #000;
    padding: 7% 0;
}
.why-head h3 {
    font-weight: 400;
    line-height: 1.6;
}
.why-head h3 span {
    text-transform: uppercase;
    font-weight: bolder;
}
#Component6736efa7dd075f001358b711 {
    width: 90%;
    margin: 0 auto;
}
/*Home*/



/**/
.menu-bg {
    text-align: center;
    padding: 2% 0;
    border-radius: 20px;
    margin: 3% 0 1%;
      font-family: "Onest", serif;
}
.vision-block-display {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    gap: 20px;
}
.vision-block {
    padding: 10%;
    background: #fff;
}
.vision-block h2 {
    color: #000;
    margin: 0;
}
.vision-block h3 {
    margin: 5px 0 0;
    color: #000;
}
.vision-border {
    background: #ef1a26;
    width: 1px;
    height: 30px;
    margin: 20px auto;
}
/**/


/*Reference*/
figure.effect-jazz {
    background: transparent;
    border-radius: 20px;
}
figure.effect-jazz figcaption::after {
    border-top: 0 solid #fff;
    border-bottom: 0 solid #fff;
}
/*Reference*/


/*Product*/
.col-section {
    padding: 0% 0% 0%;
}
article.col-md-6.item.-micro {
    width: 23%;
    background: #fff;
    margin: 0 1% 20px;
    border-radius: 20px;
}
.Contentmanager .site .col-section .item.-micro {
    padding: 7px;
}
.Contentmanager .site .col-section .item.-micro:nth-child(odd) {
    border-right: solid 0px #e8e6e8;
    border-bottom: solid 0px #e8e6e8;
}
.Contentmanager .site .col-section .item.-micro:nth-child(even) {
    border-bottom: solid 0px #e8e6e8;
}
.Contentmanager .site .col-section .item.-micro a .image {
    width: 100%;
    border-radius: 15px;
    background-color: transparent;
}
.Contentmanager .site .col-section .item.-micro a .post {
    display: none;
}
.Contentmanager .site .col-section .item.-micro a .caption {
    width: 100%;
    background-color: transparent;
    border-radius: 0;
    padding: 7% 0;
}
.Contentmanager .site .col-section .item.-micro a .caption .time {
    padding: 0% 0;
    color: #444;
    text-align: center;
    font-weight: 400;
    font-size: 0.9em;
}
.Contentmanager .site .col-section .item.-micro a .caption .time .btn-more {
    padding: 7px 10px;
    border-radius: 5px;
      font-family: "Onest", serif;
}
article.col-md-6.item.-micro:hover .btn-more {
    background: #000;
    color: #fff;
}
.Contentmanager .site .col-section .item.-micro a .caption .title {
    font-size: 1.1em;
    font-weight: 600;
    background: transparent;
    color: #000;
    margin-bottom: 0px;
    line-height: 1.2;
    text-align: center;
    height: 60px;
      font-family: "Onest", serif;
}
.Contentmanager .site .col-section .item.-micro a:hover .caption .title {
    color: #000;
}
h3.managerHeader {
    font-size: 1.8em;
    font-weight: 600;
    text-align: center;
    padding: 2% 0;
    font-family: "Onest", serif;
}
#Contentmanager .post-time {
    display: none;
}
.page-header {
    border-bottom: 0px solid #eee;
    margin: 40px 20px 20px;
}
.col-md-6.pull-left {
    padding: 0;
    width: 50%;
    margin: 0 4% 0 0;
}
.Textmanager.font-inherit {
    text-align: left;
    display: flow-root;
}
.Textmanager.font-inherit h4 {
    font-weight: 600;
    margin: 20px 0 5px;
    line-height: 1.3;
}
.Textmanager.font-inherit h3 {
    font-weight: 600;
    margin: 0px 0 10px;
    font-size: 1.4em;
}
.Textmanager.font-inherit p {
    margin: 0 0 0px;
}
.Textmanager.font-inherit strong {
    font-weight: 600;
}
.contenemanager-gallery .col-xs-12.col-md-3,.Contenemanager-gallery .col-xs-6.col-md-3 {
    width: 33.33%;
    padding: 10px 10px 0;
}
.contenemanager-gallery .thumbnail,.Contenemanager-gallery .thumbnail {
    padding: 0px;
    border: 0 solid #cecece;
    border-radius: 20px;
    transition: 0.3s;
}
.Contenemanager-gallery .thumbnail:hover,.contenemanager-gallery .thumbnail:hover {
    transition: 0.3s;
}
.Contenemanager-gallery .thumbnail,.img-thumbnail,.contenemanager-gallery .thumbnail,.img-thumbnail {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
    box-shadow: 0 0 0 rgba(0, 0, 0, .075);
    border-radius: 20px;
    transform: scale(1.0) !important;
}
#Contentmanager img.img-responsive {
    border-radius: 20px;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    transition: 0.5s;
}
#Contentmanager img.img-responsive:hover {
    transform: scale(1.1);
}
a.thumbnail:hover,a.thumbnail:focus,a.thumbnail.active {
    border-color: transparent;
}
#Contentmanager .thumbnail {
    background-color: #fff;
    position: relative !important;
    overflow: hidden !important;
    border: 0 solid #eee;
    padding: 0px !important;
    box-shadow: none !important;
    border-radius: 20px;
}
.img-thumbnail {
    padding: 0px;
    border: 0 solid #ddd;
    border-radius: 10px;
}
.social-icon {
    border-radius: 5px;
}
.social-share {
    top: 15px;
}
.product-sub {
    padding: 15% 0 0 0%;
    font-family: "Onest", serif;
}
.coming-soon {
    width: 80%;
    margin: 0 auto;
}
.product-intro {
    grid-template-columns: 65% 35%;
}
.product-intro2 {
    grid-template-columns: 35% 65%;
}
.product-intro , .product-intro2 {
    display: grid;
    align-items: center;
    background-color: #f9f9f9;
    text-align: center;
    color: #000;
    margin: 2% 0;
}
.product-text {
    font-family: "Onest", serif;
}
.product-text h2 {
    font-size: 2.4em;
    margin: 0 0 20px;
}
.product-img {
    overflow: hidden;
}
.product-img img {
    transition: 0.5s;
}
.product-img:hover img {
    transform: scale(1.1);
}
.product-head-bg {
    background: #fff;
    padding: 15px 20px;
    margin: 0 10px;
    border-radius: 0 10px 10px 0;
    border-left: 5px solid #262626;
    color: #000;
    font-family: "Onest", serif;
}

/*Product*/


/*Contact us*/
.text-contact {
  text-align: center;
  padding: 2%;
}
.text-contact h3 {
    font-weight: 600;
    line-height: 1.2;
    font-size: 1.6em;
    color: #ee1a26;
}
.contact-block4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.contact-bg2 {
    display: grid;
    grid-template-columns: 40px auto;
    gap: 10px;
    align-items: center;
    background: #ffffff;
    box-shadow: 0 0 10px #e8ebf0;
    border-radius: 50px;
    padding: 7px;
    line-height: 1.2;
    margin: 5px;
}
.contact-bg2:hover {
    background: #262626;
    color: #fff;
}
/*form Contact*/
.no-js #Component671b22ebb77fba00139d5891 label {
  display: none !important;
}
.no-js #Component671b22ebb77fba00139d5891 .col-md-6 {
  width: 100%;
  margin-left: auto;
  display: block;
  margin-right: auto;
  float: initial;
}
.no-js #Component671b22ebb77fba00139d5891 .form-control {
  border: 1px solid #eee;
  border-radius: 10px !important;
  -webkit-box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%);
  box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%);
  font-size: 1em !important;
  padding: 27px 20px;
  font-weight: 400;
  line-height: 1.5;
  background: #fff;
  color: #000 !important;
}
.no-js #Component671b22ebb77fba00139d5891 .form-control:hover {
  border: 1px solid #ee1a26;
}
.no-js #Component671b22ebb77fba00139d5891 .form-control:focus {
  border: 1px solid #ee1a26;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075), 0 0 0px rgba(102, 175, 233, 0);
  color: #000 !important;
}
.no-js #Component671b22ebb77fba00139d5891 .btn {
  background-image: -webkit-linear-gradient(top, #111f39 0, #111f39 100%);
  background-image: -o-linear-gradient(top, #f9a71f 0, #f9a71f 100%);
  background: #ee1a26;
  color: #fff;
  text-shadow: 0 0px 0 #3173ed;
  background-repeat: repeat-x;
  border-color: #3faf7e;
  border-radius: 50px;
  padding: 10px 25px;
  font-size: 0.9em;
  font-weight: 400;
  border: 0 solid transparent;
}
.no-js #Component671b22ebb77fba00139d5891 .btn-default:active {
  background: #ee1a26;
  color: #fff;
}
.no-js #Component671b22ebb77fba00139d5891 .btn-default:hover,.no-js #Component671b22ebb77fba00139d5891 .btn-default:focus {
  background-position: 0 0px;
  background: #ee1a26;
  color: #fff;
}
.no-js #Component671b22ebb77fba00139d5891 .col-xs-12.col-sm-5.col-md-5.padding {
  width: 100%;
}
.no-js #Component671b22ebb77fba00139d5891 span.label {
  font-size: 0.85em;
  font-weight: 400;
}
.no-js #Component671b22ebb77fba00139d5891 .ITPcheckboxAuthen {
  font-size: 0.8em;
  padding: 0 0 0 0%;
}
#iframe671b352abb077500138a731f iframe {
    height: 245px;
    border-radius: 10px;
}
/*Contact us*/



.product-sub2 {
    font-family: "Onest", serif;
}
.product-name2 {
    text-align: center;
    padding: 10% 0;
    font-family: "Onest", serif;
}
.product-name2 h4 {
    height: 50px;
}
.product-name2 .btn-more , .thumbnail:hover.btn-more {
    font-size: 0.8em;
    padding: 7px 10px;
    border-radius: 5px;
}
.thumbnail {
    padding: 10px;
    border: 0 solid #ddd;
    border-radius: 20px;
    box-shadow: none;
}
.thumbnail .imageWidth.imageGallery {
    transform: scale(1.0);
    transition: 0.5s;
}
.thumbnail .imageWidth.imageGallery:hover {
    transform: scale(1.1);
}
.thumbnail .imgLightbox {
   position: relative!important;
   overflow: hidden!important;
   width: 100%!important;
   border-radius: 20px;
}
.product-sub3 {
    padding: 3% 1%;
      font-family: "Onest", serif;
}
.product-sub3 h4 {
    color: #ee1a26;
    margin: 0 0 5px;
    font-size: 1.4em;
}
table.tj2 {
   width:100%;
}
table.tj2 td , table.tj2 th {
    border: 1px solid #eee;
    padding: 12px;
      color: #444;
}
table.tj2 td:nth-child(2) {
    width: 30%;
    color: #ee1a26;
     text-align: center;
}
.tj2 tr:nth-child(even){background-color: #f9f9f9}
.tj2 tr:nth-child(odd){background-color: #fff}


.about-block2 {
    display: flex;
    margin-bottom: 15px;
}
.about-sub2 {
    width: 15%;
    font-weight: bold;
    color: #000;
}
.product-img5 img {
    width: 80% !important;
    margin: 0 auto;
    display: block;
}
#Component6736fa6a0fa1130013167dcc , #Component6736fb5ddc98300013c81c92 , #Component674d6f9984bae400136a2d59 , #Component674d705e859e8a001334c190 {
    width: 70%;
}
#Component6736fb45d73a4b0013dccbca ,  #Component6736fba71c35e0001372a905 , #Component674d6fff84bae400136a2d70 {
    width: 70%;
    float: right;
}
.product-table {
    padding-bottom: 5%;
      font-family: "Onest", serif;
}
#slider6769230c023a650013ee7584 ,  ul#slider678607a31270ef0013dfad79 , ul#slider67863f91db2e1c0013c10603 , ul#slider67863d5e1270ef0013dfba39 {
    width: 40%;
    margin: 0 auto;
    border-radius: 20px;
}
.product-sub-pdpage {
    padding: 35% 0;
}
.product-ct-pd {
    padding: 5% 2%;
}
#Component678602a5ec68f70013f2e5df {
    width: 85%;
    margin: 0 auto;
}
#Component678607a31270ef0013dfad79 {
    width: 60%;
    margin: 0 auto;
}
#Component674d5d01859e8a001334bca8 {
    width: 75%;
    margin: 0 auto;
}
#Component67a049fffc85cf0013dc9090 {
    width: 80%;
    margin: 0 auto;
}

/*pagination*/
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
    background-color: #ee1a26;
    border-color: #ee1a26;
}
.pagination>li>a, .pagination>li>span {
    color: #ee1a26;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
    color: #ee1a26;
    background-color: #f7f7f7;
}
/*pagination*/






/* Large Devices, Wide Screens */
@media only screen and (min-width : 1900px) {
body {
    font-size: 21px;
}
  .container {
        width: 1440px;
    }
  .dropdown-menu>li>a {
    font-size: 1.6em;
}
  .itopplus-footer {
    font-size: 17px;
}
  .ITPcookiebar , .buttonExampleSite {
    font-size: 16px !important;
}
  .Contentmanager .site .col-section .item.-micro a .caption .title {
    height: 70px;
}
  #iframe671b352abb077500138a731f iframe {
    height: 260px;
}
  .product-name2 h4 {
    height: 65px;
}
  #slider6769230c023a650013ee7584 ,  ul#slider678607a31270ef0013dfad79 , ul#slider67863f91db2e1c0013c10603 , ul#slider67863d5e1270ef0013dfba39 {
    width: 30%;
}
#Component6736efa7dd075f001358b711 {
    width: 92%;
    margin: 0 auto;
}
}



/* Large Devices, Wide Screens */
@media only screen and (max-width:1191px) {
.navbar-default .navbar-nav>li>a {
    margin: 0 10px;
}
  figure.effect-phoebe h2 {
    font-size: 0.95em;
}
  .why-icon {
    white-space: inherit;
}
  .itopplus-footer {
    font-size: 13px;
}
  .footer-pd2 {
    padding: 0 17%;
}
  #iframe671b352abb077500138a731f iframe {
    height: 270px;
}
}





/* Large Devices, Wide Screens */
@media only screen and (max-width:900px) {
.h1, h1 {
    font-size: 2.5em;
}
  .h2, h2 {
    font-size: 2em;
}
  .h3, h3 {
    font-size: 1.3em;
}
       figure.effect-phoebe h2 {
        font-size: 0.65em;
    }
  .copy-right {
    text-align: center;
}
    .contact-block4 {
    grid-template-columns: repeat(1, 1fr);
}
      #iframe671b352abb077500138a731f iframe {
        height: 145px;
    }
  .table-responsive {
        border: 0 solid #ddd;
    }
  .about-sub2 {
    width: 25%;
}
  .product-ct-pd {
    font-size: 0.9em;
}
}



/* Large Devices, Wide Screens */
@media only screen and (max-width:480px) {
#imagesControl6719f389628132001367d249 {
    padding: 0 !important;
}
  ul#slider6719f389628132001367d249 {
    margin-bottom: -7px;
}
  #slider6719f3cc628132001367d26a {
    width: 60%;
}
      .h1, h1 {
        font-size: 2.3em;
    }
      .h2, h2 {
        font-size: 1.8em;
    }
  figure.effect-phoebe h2 {
        font-size: 1em;
    }
  .col-section {
    padding: 0% 5% 0%;
}
  article.col-md-6.item.-micro {
    width: 100%;
    margin: 0 0% 20px;
}
.Contentmanager .site .col-section .item.-micro a .caption .title {
    margin-bottom: 20px;
    height: inherit;
}
  h3.managerHeader {
    font-size: 1.5em;
    padding: 4% 2%;
    border-radius: 10px;
}
  .col-md-6.pull-left {
    width: 100%;
    margin: 0 0% 0 0;
}
  .Textmanager.font-inherit {
    display: block;
}
  .product-sub {
    padding: 0% 0 0 0%;
}
  .menu-bg {
    padding: 4% 3%;
}
.no-js #Component671b22ebb77fba00139d5891 .col-md-6 {
    padding: 0 15px;
}
  div#background6736fb2cdc98300013c81c86 .none-middle-mid , div#background6736fb911c35e0001372a8f3 .none-middle-mid , #background674d6ffa84bae400136a2d6b  .none-middle-mid {
    display: flex;
    flex-direction: column-reverse;
}
  .product-intro {
    display: flex;
    flex-direction: column-reverse;
}
 .product-intro2 {
    display: flex;
    flex-direction: column;
}
  .product-text {
    padding: 13% 0;
}
  .product-text h2 {
    font-size: 2.4em;
}
  .vision-block-display {
    grid-template-columns: repeat(2, 1fr);
}
  #slider6769230c023a650013ee7584 ,  ul#slider678607a31270ef0013dfad79 , ul#slider67863f91db2e1c0013c10603 , ul#slider67863d5e1270ef0013dfba39 {
    width: 100%;
}
  #Component6736fa6a0fa1130013167dcc, #Component6736fb5ddc98300013c81c92  , #Component674d6f9984bae400136a2d59 , #Component674d705e859e8a001334c190 {
    width: 100%;
}
  #Component6736fb45d73a4b0013dccbca, #Component6736fba71c35e0001372a905 ,  #Component674d6fff84bae400136a2d70 {
    width: 100%;
}
  .about-us {
    padding: 0% 0 0 0%;
}
  .about-block2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
      .about-sub2 {
        width: 100%;
    }
    .product-ct-pd {
    font-size: 0.9em;
}
  #Component674d5d01859e8a001334bca8 , #Component67a049fffc85cf0013dc9090 {
    width: 100%;
}
}




/* =====================================================
   Global product utilities (opt‑in, non‑breaking)
   Palette: brand red (#ee1a26), black, white
   ===================================================== */
:root{
  --brand-red:#ee1a26;
  --brand-black:#000000;
  --brand-white:#ffffff;
  --ink-900:#0f0f10;
  --ink-700:#222325;
  --ink-500:#444444;
  --ink-300:#767676;
  --border-muted:#e6e6e6;
  --surface:#ffffff;
  --surface-alt:#f8f8f8;
  --table-head:#efefef; /* neutral header bg for tables */
  --radius-md:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 6px 18px rgba(0,0,0,.10);
  --gap-lg:32px;
  --gap-md:24px;
  --gap-sm:16px;
}

/* 0) Modern page container (use instead of raw "container" to avoid header/footer) */
.page-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px;
}
@media (min-width:1024px){
  .page-container{ padding: 40px 24px; }
}

/* 1) Clean section title with red accent line */
.section-title{
  color: var(--ink-900);
  margin: 28px 0 12px;
  line-height: 1.25;
  font-weight: 700;
}
.section-title::after{
  content:"";
  display:block;
  width: 72px;
  height: 3px;
  margin-top: 10px;
  background: var(--brand-red);
  border-radius: 2px;
}

/* 2) Lead paragraph (intro copy) */
.lead{
  color: var(--ink-700);
  line-height: 1.8;
  font-size: 1.06em;
  margin-bottom: 1rem;
}

/* 3) Consistent, responsive product image pair */
.product-media{
  display:flex; flex-wrap:wrap; gap: var(--gap-md);
  align-items:flex-start; justify-content:center; margin: 18px 0 var(--gap-lg);
}
.product-media img{
  width:100%;
  max-width:520px;     /* prevents oversized images on large screens */
  height:auto;
  aspect-ratio: 4 / 3; /* consistent boxes, no jumpy layout */
  object-fit: contain; /* no crop – letterbox if ratio differs */
  background: var(--surface);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-media img:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color:#ddd;
}
@media (max-width: 768px){
  .product-media{ gap: var(--gap-sm); }
  .product-media img{ max-width:100%; aspect-ratio: 4 / 3; }
}
.img-fluid{ max-width:100%; height:auto; }

/* 4) Card surface for small blocks (optional) */
.card{
  background: var(--surface);
  border:1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

/* 5) Table: modern look with clear header contrast */
.table-modern{
  width:100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  overflow: hidden; /* rounds the corners */
}
.table-modern thead th{
  background: var(--table-head);
  color: var(--ink-900);
  font-weight: 600;
}
.table-modern th, .table-modern td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-muted);
  text-align: left;
  vertical-align: top;
  white-space: nowrap; /* prevent wrap on narrow cells */
}
.table-modern tbody tr:hover{ background: var(--surface-alt); }

/* 6) Mobile horizontal scroll with subtle edge fade + swipe affordance */
.table-scroll-x{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll-x::before,
.table-scroll-x::after{ content:none; }

/* 7) Back link crumb */
.back-link-crumb a{ color:#000; text-decoration:none; border-bottom:1px solid transparent; }
.back-link-crumb a:hover{ color:var(--brand-red); border-color:var(--brand-red); }

/* 8) Contact link style: red → black on hover */
.contact-link-flip a{ color:var(--brand-red); text-decoration:none; }
.contact-link-flip a:hover{ color:#000; text-decoration:underline; }

/* 9) Utility to neutralize sticky if needed locally */
.no-sticky{ position:static !important; bottom:auto !important; top:auto !important; }

/* 10) Optional subtle divider */
.hr-accent{
  height:1px; border:0; background:linear-gradient(90deg, var(--brand-red), var(--brand-red) 60%, transparent 60%);
  background-size: 120px 1px; background-repeat: no-repeat;
  margin: 24px 0;
}

/* Bold first column in all product tables */
.table-modern td:first-child,
.table-modern th:first-child,
.el-table td:first-child,
.el-table th:first-child {
  font-weight: 600;
  color: #000; /* ensures dark text for readability */
}

/* Table alignment: keep first column left, center the rest */
.table-modern th:first-child,
.table-modern td:first-child,
.el-table th:first-child,
.el-table td:first-child{
  text-align: left;
}
.table-modern :where(th,td):not(:first-child),
.el-table :where(th,td):not(:first-child){
  text-align: center;
}

/* === Section chrome reset: no grey boxes on page wrappers === */
.el-page > header,
.el-page > section{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove chrome from generic .card only when used as top‑level section wrapper */
.el-page > header .card,
.el-page > section .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.section-surface{
  background:#fff;
  border:1px solid var(--border-muted);
  border-radius:12px;
  box-shadow: var(--shadow-sm);
  padding:16px;
}
@media (max-width:480px){
  .section-surface{ padding:12px; }
}
.product-item img{
  width: 100%;
  height: 180px;            /* keep images from appearing too large */
  object-fit: contain;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}
.product-item h3{ font-size:1rem; color: var(--brand-red); margin:.6rem 0 .2rem; text-align:center; }
.product-item .desc{ font-size:.95rem; color:#444; text-align:center; }
@media (max-width: 680px){
  .product-item img{ height: 140px; }
}

/* Lists inside white panels – remove browser bullets */
.section-surface .clean{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.section-surface .clean li{ margin:.45rem 0; }

/* ===== EL Series design system (global) ===== */
:root{
  --el-soft:#f6f6f6;
  --el-head:#f0f0f0;
}

/* Page shell */
.el-page{max-width:1120px;margin-inline:auto;padding:clamp(1.5rem,2vw,2.5rem) 1rem;line-height:1.75}
.el-hero{padding-top:.25rem;margin-bottom:1rem}
.el-kicker{font-size:.9rem;letter-spacing:.06em;color:#888;margin:0 0 .25rem}
.el-hero-card{background:var(--surface);border:1px solid var(--border-muted);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-sm);margin:.75rem 0 1.25rem}
/* Limit line-length for text only (card should span container) */
.el-section .el-lead{ max-width:72ch; }
.el-hero-card{
  width: 100%;
  max-width: none; /* allow full container width on large screens */
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box; /* include padding/border inside width */
}
.back-link-crumb{margin:0 0 1rem}

/* Product/gallery grid (shared) */
.el-grid{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,24px);align-items:flex-start;justify-content:center;margin-bottom:2rem}
.el-figure{text-align:center;flex:1 1 320px;max-width:375px}
.el-grid img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:contain;
  background:var(--surface);
  border:1px solid var(--border-muted);
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.el-grid img:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.10); border-color:#ddd; }
.el-grid img:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.10)}
.el-figcaption{ font-size:.93rem; color:#555; margin-top:.5rem; }

/* Feature list with red dots */
.el-list{list-style:none;padding:0;display:grid;gap:10px}
.el-list li{position:relative;padding-left:26px;line-height:1.65;color:#222;margin-bottom:.25rem}
.el-list li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--brand-red)}
@media(min-width:900px){.el-list{grid-template-columns:1fr 1fr}}

/* Titles, chips, sections */
.el-section{ margin: clamp(2.2rem, 4vw, 3rem) 0; }
.el-metrics{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0 1.25rem}
.chip{border:1px solid var(--border-muted);border-radius:999px;padding:.4rem .75rem;font-size:.95rem;color:#222;background:#fff}

/* EL table helpers (table-modern already defined globally) */
.el-table-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.el-table{width:100%;border-collapse:collapse;border:1px solid var(--border-muted);border-radius:10px;overflow:hidden}
.el-table th,.el-table td{padding:12px 16px;text-align:left;border-top:1px solid var(--border-muted);white-space:nowrap}
.el-table thead th{background:var(--el-head);color:#111;font-weight:600;border-top:none}
.el-table tbody tr:nth-child(even){background:#fafafa}
.el-table tbody tr:hover{background:var(--el-soft)}
.el-table :where(th,td):not(:first-child){text-align:center}

@media(max-width:768px){
  .el-page{padding:2rem 1rem}
  .el-grid{gap:16px}
  .el-figure{max-width:100%}
  .el-table{min-width:900px}
}
@media(max-width:480px){
  .el-page{padding:1.25rem .9rem}
  .el-hero-card{padding:10px 12px}
  .el-grid{gap:12px}
  .el-figure{flex:1 1 240px;max-width:300px;margin-inline:auto}
  .el-figcaption{font-size:.9rem}
  .el-list{gap:8px}
  .el-list li{padding-left:26px;line-height:1.6}
  .el-metrics{gap:6px}
  .chip{padding:.3rem .6rem;font-size:.9rem}
  .el-table th,.el-table td{padding:9px 12px}
  .el-table{min-width:720px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Contact list panel – white smooth border (for every page) */
.contact-surface{
  background:#fff;
  border:1px solid var(--border-muted);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  padding:16px;
}
@media(max-width:480px){ .contact-surface{ padding:12px; } }
/* Contact links in brand red */
.contact-list a{color:var(--brand-red);font-weight:600;text-decoration:none}
.contact-list a:hover{color:#000;text-decoration:underline}
/* ==== EL Landing visual fixes (mobile & narrow containers) ==== */
/* Make product/gallery images never feel oversized and always centered */
.el-grid img{
  max-width: 360px;
  max-height: 260px;
  margin-inline: auto;
}
@media (max-width: 680px){
  .el-grid img{
    max-width: 320px;
    max-height: 220px;
  }
}
@media (max-width: 480px){
  .el-grid img{
    max-width: 280px;
    max-height: 200px;
  }
}

/* Tighter spacing for sections on small screens */
@media (max-width: 680px){
  .el-section{ margin: 2rem 0; }
  .el-figcaption{ margin-top: .35rem; }
  .el-lead{ margin-bottom: .9rem; }
}
/* Small helper for muted subtext under tables or options */
.el-sub{
  color: #666;
  font-size: .92rem;
  margin-top: 8px;
}


/* Balanced spacing for section titles on desktop */
@media (min-width:1024px){
  .el-title{ margin: 1.75rem 0 1rem; }
}
/* ==== Premium CTA buttons (global) ==== */
.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.btn-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  border: 0;
  background: linear-gradient(180deg, #ED1F29 0%, #C01016 100%);
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(237, 28, 36, .18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(237, 28, 36, .25); }
.btn-cta:active{ transform: translateY(0); box-shadow: 0 4px 10px rgba(237, 28, 36, .2); }

.btn-cta--outline{
  background: #fff;
  color: #ED1C24 !important;
  border: 1.5px solid #ED1C24;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.btn-cta--outline:hover{
  background: #ED1C24;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(237, 28, 36, .2);
}

/* --- Ensure Options list bullets match other sections inside white panels --- */
.section-surface .el-list{ list-style: none !important; padding-left: 0; display: grid; gap: 10px; }
.section-surface .el-list li{ position: relative; padding-left: 26px; line-height: 1.65; color: #222; margin-bottom: .25rem; }
.section-surface .el-list li::before{ content:""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-red); }
@media (min-width: 900px){
  .section-surface .el-list{ grid-template-columns: 1fr 1fr; }
}


/* ==== FAQ spacing fine‑tune (light, only add space between Q & A) ==== */
.faq details{ padding: 8px 0; }
.faq summary{ padding: 10px 28px 8px 0; }
.faq details > *:not(summary){ margin-top: 8px; } /* space between question and answer */
.faq details p{ margin: 8px 0 0; }
.faq details[open]{
  background: var(--surface-alt); /* subtle grey from your palette */
  box-shadow: none;
  padding: 12px;                  /* a little inner space for contrast */
  margin: 6px 0;
  border-radius: 10px;
}
/* FAQ affordance icon (+ / –) */
.faq summary{
  position: relative;
  padding: 10px 34px 8px 0;
  cursor: pointer;
  font-weight: 600;
  transition: color .15s ease;
}
.faq summary::-webkit-details-marker{ display:none; } /* hide default marker for WebKit */
.faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-50%);
  font-weight:700;
  font-size:1.1em;
  color: var(--brand-red);
  line-height:1;
}
.faq details[open] summary::after{
  content:"–"; /* en dash for a clean minus look */
}

/* FAQ top spacing fix: remove unexpected top gap inside .section-surface */
.section-surface.faq{ padding-top:12px; }  /* ensure spacing via padding */
.faq details{ margin:0; }                  /* normalize UA default margins */
.faq summary{ margin:0; }                  /* zero any summary top margin */
.faq details:first-child{ margin-top:0; }  /* no margin on first item */

/* ===== Mobile-medium polish (<=680px) – keep consistency across small tablets ===== */
@media (max-width: 680px){
  .el-list li{ line-height: 1.7; }
  .faq details > *:not(summary){ margin-top: 6px; }
}

/* ===== Typography adjustments for premium clean look ===== */
body{ font-size:17px; line-height:1.75; overflow-x:hidden; font-family:"Sarabun", sans-serif; }

/* ===== Consolidated headings for EL system (clean, single source) ===== */
.el-title{
  font-weight:700;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem); /* ~23–31px on desktop with 17px base */
  line-height:1.3;
  letter-spacing:.1px;
  margin: 1.75rem 0 1rem;
}
.el-hero h1{
  font-weight:700;
  letter-spacing:.2px;
  font-size: clamp(1.9rem, 3.8vw, 2.5rem); /* ~32–42px on desktop with 17px base */
  line-height:1.24;
  margin:.2rem 0 .6rem;
}
.el-kicker{ font-size: 1rem; }

/* Tablet & small laptops */
@media (max-width:680px){
  .el-title{
    font-size: clamp(1.22rem, 4.6vw, 1.6rem);
    margin: 1.3rem 0 .85rem;
  }
  .el-hero h1{
    font-size: clamp(1.6rem, 6.4vw, 2rem);
    line-height:1.23;
    margin:.15rem 0 .45rem;
  }
}

/* Phones */
@media (max-width:480px){
  .el-title{
    font-size: clamp(1.16rem, 5.2vw, 1.5rem);
    margin: 1.1rem 0 .75rem;
  }
  .el-hero h1{
    font-size: clamp(1.45rem, 6.9vw, 1.8rem);
    line-height:1.22;
    margin:.1rem 0 .4rem;
  }
}

/* Lead paragraph style (clean, consolidated) */
.el-lead{
  font-size: 1.5rem;     /* requested: consistent across breakpoints */
  line-height: 1.8;      /* balanced for desktop/tablet */
  color:#444;
  margin:.5rem 0 1.25rem;
}
@media(max-width:680px){
  body{ font-size:15.5px; }
  .el-lead{ font-size:1.25rem; line-height:1.9; }  /* keep 1.5rem, add breathing room */
  .el-list li{ font-size:1rem; line-height:1.7; }
}
@media(max-width:480px){
  body{ font-size:15px; }
  .el-lead{ font-size:1.2rem; line-height:2.0; }  /* keep 1.5rem, extra line-height on phones */
  .el-list li{ font-size:1.1rem; line-height:1.65; }
}