/*--------------------------------------------------------------
# Container
--------------------------------------------------------------*/
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
      max-width: 800px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 800px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .container, .container-lg, .container-md, .container-sm {
      max-width: 800px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .container, .container-md, .container-sm {
      max-width: 720px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .container, .container-sm {
      max-width: 540px;
  }
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.product-page #hero {
  background: #1972cd;
  /*background: linear-gradient(11deg, rgba(18,66,101,1) 0%, rgba(25,114,205,1) 100%);*/
  background: #1972cd; background-image: radial-gradient(at 2.0% 29.8%, hsl(214, 97%, 48%) 0px, transparent 50%),radial-gradient(at 48.8% 99.9%, #0d2f47 0px, transparent 50%),radial-gradient(at 1.7% 83.1%, #124265 0px, transparent 50%),radial-gradient(at 53.4% -1.7%, hsl(176, 87%, 54%) 0px, transparent 50%),radial-gradient(at 92.9% 96.0%, #124265 0px, transparent 50%),radial-gradient(at 10.0% 95.3%, hsl(205, 70%, 23%) 0px, transparent 50%),radial-gradient(at 98.9% 74.8%, hsl(210, 78%, 45%) 0px, transparent 50%);
  color: white;
  padding: 60px 0;
  overflow: visible;
}

.product-page #hero h1 {
  font-family: "Boxed", sans-serif;
  text-transform: uppercase;
  font-size: 50px;
  font-weight: 800;
  letter-spacing: 5%;
  line-height: 50px;
  color: #fff;
}

.product-page #hero h1 span {
  font-family: "Boxed", sans-serif;
  text-transform: uppercase;
  font-size: 50px;
  font-weight: 400;
  line-height: 50px;
  color: #fff;
}

.product-page #hero h1 span>span {
  font-family: "Lexend", sans-serif;
  text-transform: none;
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
  color: #fff;
}

.product-page #hero .lead {
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .product-page #hero h1 {
    font-size: 30px;
    line-height: 30px;
  }
  .product-page #hero h1 span {
    font-size: 30px;
    line-height: 30px;
  }
  .product-page #hero h1 span>span {
    font-size: 27px;
    line-height: 30px;
  }
  .product-page #hero .lead {
    font-size: 15px;
  }
}

.product-page #hero img {
  max-width: 100%;
  height: auto;
}

.product-page #hero .swiffy-slider .slider-nav {
  opacity: 1;
  -webkit-filter: drop-shadow(0 0 .5rem rgba(18, 66, 101, 0.8));
  filter: drop-shadow(0 0 .5rem rgb(18, 66, 101, 1)) drop-shadow(0 0 2px rgb(18, 66, 101, .5));
}

.product-page #hero .swiffy-slider .slider-container div[id^="slide"] {
  overflow: hidden;
}

@media (min-width: 1200px) {
  .product-page #hero .swiffy-slider .slider-container {
    margin-bottom: -279px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .product-page #hero .swiffy-slider .slider-container {
    margin-bottom: -279px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .product-page #hero .swiffy-slider .slider-container {
    margin-bottom: -256px;
  }
}
@media (max-width: 767px) {
  .product-page #hero .swiffy-slider .slider-container {
    margin-bottom: -40%;
  }
}

/*--------------------------------------------------------------
# Product
--------------------------------------------------------------*/
#product .icons-list ul {
  margin: 0;
}

#product .icons-list ul li {
  display: inline-block;
  margin: 0 10px 9px 0;
}

#product .icons-list ul li span {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url(/assets/img/ico_empty.svg);
}

#product .icons-list ul li span.field-mqtt {
  background-image: url(/assets/img/ico_mqtt.svg)
}
#product .icons-list ul li span.field-dev-smtp-targets {
  background-image: url(/assets/img/ico_emailnotify.svg)
}
#product .icons-list ul li span.field-dev-modbus-tcp {
  background-image: url(/assets/img/ico_modbus.svg)
}
#product .icons-list ul li span.poe {
  background-image: url(/assets/img/ico_poe.svg)
}
#product .icons-list ul li span.field-dev-ipv6 {
  background-image: url(/assets/img/ico_ipv6.svg)
}
#product .icons-list ul li span.field-https {
  background-image: url(/assets/img/ico_https.svg)
}
#product .icons-list ul li span.field-dev-snmp1 {
  background-image: url(/assets/img/ico_snmp.svg);
}
#product .icons-list ul li span.field-dev-push {
  background-image: url(/assets/img/ico_push.svg)
}
#product .icons-list ul li span.field-dev-portal {
  background-image: url(/assets/img/ico-portal.svg)
}
#product .icons-list ul li span.lte {
  background-image: url(/assets/img/ico_lte.svg)
}
#product .icons-list ul li span.field-dev-mbus-sensors {
  background-image: url(/assets/img/ico_mbussensors.svg)
}

#product .icons-list ul li.note:after {
  content:'*';
  color: #1972cd;
  position: absolute;
  transform: translateX(-3px);
}

#product figcaption.note:before {
  content:'*';
  color: #1972cd;
  margin-right: 3px;
  font-size: 16px;
}

#product figcaption.note {
  color: #5a5a5a;
  font-size: 12px;
  text-align: right;
}

@media (min-width: 992px) {
  #product {
    padding-top: 230px !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #product {
    padding-top: 200px !important;
  }
}
@media (max-width: 767px) {
  #product {
    padding-top: 200px !important;
  }
}
@media (max-width: 550px) {
  #product {
    padding-top: 150px !important;
  }
}

#product .description {
  text-align: justify;
}

#product .description h2 {
  font-size: 20px;
  font-weight: 700;
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
#features {
  padding: 60px 0;
  background-image: url(/assets/img/hwgroup-perseus_empty-bg.webp);
  background-size: cover;
  background-position: center;
}

.feature-box {
  height: 100%; 
  text-align: center;
  background-color: #fff;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.feature-box i {
  color: #1972cd;
}

.feature-box:hover {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}

.feature-box h4 {
  color: #124265;
}

.feature-box p {
  font-size: 15px;
}


/*--------------------------------------------------------------
# Interfaces
--------------------------------------------------------------*/
#interfaces {
  background: #f5f5f0;
}

#interfaces .container {
  max-width: 1500px;
}

#interfaces h2 {
  color: #124265;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
}

#interfaces h3 {
  font-size: 23px;
  color: #FFF;
  background: #1972cd;
  padding: 12px 20px;
}

#interfaces .swiffy-slider.slider-nav-dark .slider-nav {
  opacity: 1;
}

#interfaces .swiffy-slider.slider-nav-dark.slider-nav-round .slider-nav::before, .slider-nav-dark.slider-nav-square .slider-nav::before {
  background-color: #124265;
  transform: scale(1.3);
}

/*--------------------------------------------------------------
# Applications
--------------------------------------------------------------*/
#applications {
  padding: 60px 0;
  background: url(/assets/img/hwgroup-perseus_secteurs-applications-bg.webp);
  background-size: cover;
  background-position: bottom;
}

#applications h2 {
  color: #124265;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
}

#applications h4 {
  color: #1972cd;
}

/*--------------------------------------------------------------
# Photos
--------------------------------------------------------------*/
#photos {
  padding: 60px 0;
}

#photos .container>.row>div.col-lg-6 {
  padding-right: 30px;
  padding-left: 30px;
}

#photos h2 {
  display: none;
}

#photos h3 {
  color: #124265;
}

#photos img[alt*="schéma"] {
  mix-blend-mode: darken;
}


/*--------------------------------------------------------------
# Specifications
--------------------------------------------------------------*/
#specifications {
  padding: 60px 0;
}

#specifications h2 {
  color: #124265;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
}

#specifications .table-responsive {
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
  margin-bottom: -1px;
}

#specifications .table {
  margin-bottom: -1px;
}


#specifications .table th, .table td {
  vertical-align: middle;
  padding: 10px 20px;
}

#specifications .table thead th {
  background-color: #1972cd;
  color: #fff;
  border-color: #dee2e6;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Lexend', sans-serif;
}

#specifications .table th {
  font-weight: bold;
  width: 30%;
}

#specifications .table tbody tr:nth-of-type(even) {
  background-color: #f2f2f2;
}

#specifications .table tbody tr:hover {
  background-color: #d6e0f5;
}

#specifications .datasheets {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 50px auto;
}

#specifications .btn-datasheet {
  background: #1972cd;
  padding: 8px 20px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
}

#specifications .btn-datasheet:hover,
#specifications .btn-datasheet:focus:hover {
  color: #fff;
  background: #3194db;
}