/* =====================================================
   CLEANED OPENCART CUSTOM CSS
   Source: user-provided stylesheet.

   ORDER NOTES:
   1. OpenCart/base rules stay first.
   2. Reusable components come next.
   3. Mobile safety fixes are late so they can override desktop layouts.
   4. The merged HOME PAGE section is last because it intentionally overrides
      older homepage carousel/text/background rules.

   Removed old duplicate/obsolete sections from this cleaned version:
   - old generic homepage '2 carousels' block
   - old homepage background block
   - old .home-main-text-carousel-grid homepage override block
   They are replaced by the final HOME PAGE MERGED SETTINGS section.
   ===================================================== */

/* =====================================================
   BASE OPENCART DEFAULTS START
   Original theme/default rules. Keep these first so custom rules can override them later.
   ===================================================== */


body {
  width: 100%;
  height: 100%;
}
h1, h2, h3, h4, h5, h6 {
  color: #444;
}
legend {
  padding: 7px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
label {
  font-size: 12px;
  font-weight: normal;
}
/* Chrome border line */
button:focus {
  outline: none !important;
}
/* container */
#container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  margin-bottom: 300px;
}
/* content */
#content, #column-left, #column-right {
  padding-bottom: 730px;
}
@media (min-width: 576px) {
  #content, #column-left, #column-right {
    padding-bottom: 400px;
  }
}
#alert {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
}
@media (min-width: 992px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1140px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1320px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
#alert .alert {
  margin-bottom: 15px;
}
#alert .alert-primary {
  box-shadow: 0 0 0 5px rgb(var(--bs-primary-rgb), 0.1);
}
#alert .alert-secondary {
  box-shadow: 0 0 0 5px rgb(var(--bs-secondary-rgb), 0.1);
}
#alert .alert-success {
  box-shadow: 0 0 0 5px rgb(var(--bs-success-rgb), 0.1);
}
#alert .alert-warning {
  box-shadow: 0 0 0 5px rgb(var(--bs-warning-rgb), 0.1);
}
#alert .alert-danger {
  box-shadow: 0 0 0 5px rgb(var(--bs-danger-rgb), 0.1);
}
#alert .alert-info {
  box-shadow: 0 0 0 5px rgb(var(--bs-info-rgb), 0.1);
}
#alert .alert-light {
  box-shadow: 0 0 0 5px rgb(var(--bs-light-rgb), 0.1);
}
#alert .alert-dark {
  box-shadow: 0 0 0 5px rgb(var(--bs-dark-rgb), 0.1);
}
/* top */
#top {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 5px;
}
#top ul.list-inline {
  margin-bottom: 0;
}
#top .list-inline-item > a, #top .list-inline-item .dropdown > a {
  font-size: 1.1em;
  color: var(--bs-gray-600);
  line-height: 40px;
  vertical-align: middle;
  padding: 10px 0px 5px 0px;
}
/* logo */
#logo {
  
  text-align: center;
  margin: 7px 0 7px 0;
}
#logo img {
  max-width: 200px;
  margin-left: 50px;
}
@media (min-width: 768px) {
  #logo {
    text-align: left;
  }
}
/* search */
#search {
  margin-bottom: 10px;
}
#search .form-control-lg {
  height: 40px;
  font-size: 12px;
  line-height: 20px;
  padding: 0 10px;
}
#search .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 0.57rem 35px;
  text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
  margin-bottom: 10px;
}
#cart .img-thumbnail {
  min-width: 100px;
}
#cart .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 14px 35px;
}
#cart .dropdown-menu {
  background: #eee;
}
#cart .dropdown-menu li {
  min-width: 300px;
}
@media (max-width: 768px) {
  #cart .dropdown-menu li {
    min-width: 100%;
  }
}

/* menu */
#menu {
  background-color: #229ac8;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
  border: 1px solid #1f90bb;
  border-color: #1f90bb #1f90bb #145e7a;
  min-height: 40px;
  border-radius: 4px;
  padding: 0 1rem;
  margin-bottom: 20px;
}
#menu .navbar-nav > li > a {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  padding: 10px 15px 10px 15px;
  background-color: transparent;
}
#menu .navbar-nav > li > a:hover {
  background-color: #0000001a;
}
#menu .dropdown-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#menu .dropdown-inner {
  display: flex;
  flex-direction: column;
}
#menu .dropdown-inner ul {
  width: 100%;
  min-width: 200px;
}
@media (min-width: 960px) {
  #menu .dropdown:hover .dropdown-menu {
    display: block;
  }
  #menu .dropdown-inner {
    flex-direction: row;
  }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -200px;
  }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -400px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-2 {
    left: -200px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -400px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -600px;
  }
}
#category {
  float: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .navbar-toggler i {
  color: #fff;
  border-color: #fff;
  font-size: 0.9em;
}
/* default boostrap changes */
div.required .col-form-label:before, div.required .form-label:before {
  content: "* ";
  color: #F00;
  font-weight: bold;
}
.form-switch-lg {
  font-size: 20px;
  min-height: 30px;
  line-height: 30px;
}
.nav-tabs {
  margin-bottom: 15px;
}
.form-check .form-check-input {
  margin-top: 0.25rem;
}
@media (min-width: 768px) {
  .col-form-label {
    text-align: right;
  }
}
/* footer */
footer {
  border: 1px solid #000000;
  position: absolute;
  bottom: -1px;
  width: 100%;
  padding-top: 30px;
  background-color: #303030;
  border-top: 1px solid #ddd;
  color: #e2e2e2;
}
footer hr {
  border-top: none;
  border-bottom: 1px solid #666;
}
footer a {
  color: #ccc;
  text-decoration: none;
}
footer a:hover {
  color: #fff;
}
footer h5 {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
}
/* breadcrumb */
.breadcrumb {
  margin: 10px 0 20px 0;
  padding: 8px 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
}
.breadcrumb i {
  font-size: 15px;
}
.breadcrumb > li.breadcrumb-item {
  text-shadow: 0 1px 0 #FFF;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
}
.breadcrumb > li.breadcrumb-item > a {
  text-decoration: none;
}
.breadcrumb > li.breadcrumb-item:after {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  right: -5px;
  width: 29px;
  height: 29px;
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  transform: rotate(-45deg);
}
.breadcrumb > li.breadcrumb-item + li:before {
  content: "";
  padding: 0;
}
.product-thumb {
  border: 1px solid #ddd;
  position: relative;
  height: 100%;
}
.product-thumb .image {
  text-align: center;
}
.product-thumb .image a:hover {
  opacity: 0.8;
}
.product-thumb .description {
  padding: 15px;
  margin-bottom: 45px;
}
.product-thumb .description h4 {
  font-weight: bold;
}
.product-thumb .button {
  display: flex;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.product-thumb .button button {
  width: 33.33%;
  border: none;
  border-top: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-gray-600);
  line-height: 38px;
  text-align: center;
}
.product-thumb .button button:hover {
  color: var(--bs-gray-600);
  background-color: #ddd;
  text-decoration: none;
  cursor: pointer;
}
.product-thumb .button button + button {
  border-left: 1px solid var(--bs-border-color);
}
@media (min-width: 960px) {
  .product-list .product-thumb {
    display: flex;
  }
  .product-list .product-thumb .image {
    flex-direction: column;
    margin-bottom: 0px;
  }
  .product-list .product-thumb .content {
    flex-direction: column;
    flex: 75%;
    position: relative;
  }
  .product-list .product-thumb .button {
    border-left: 1px solid #ddd;
    width: calc(100% -  15px);
    margin-left: 15px;
  }
}
.rating .fa-stack {
  width: 20px;
}
.rating .fa-star {
  color: #999;
  font-size: 15px;
}
.rating .fa-star {
  color: #FC0;
  font-size: 15px;
}
.rating .fa-star + .fa-star {
  color: #E69500;
}
/* product list */
.price {
  color: #444;
}
.price-new {
  font-weight: 600;
}
.price-old {
  color: #dc512c;
  text-decoration: line-through;
}
.price-tax {
  color: #999;
  font-size: 12px;
  display: block;
}
/* blog */
.blog-thumb {
  border: 1px solid #ddd;
  margin-bottom: 15px;
}
.blog-thumb h4 {
  font-weight: bold;
}
.blog-thumb .image {
  text-align: center;
  margin-bottom: 15px;
}
.blog-thumb .image a:hover {
  opacity: 0.8;
}
.blog-thumb .description {
  padding: 15px;
}
/* Theme Custom CSS */
#cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9999;
  opacity: 0.95;
  color: #ecf0f1;
  background: #343a40;
}
#cookie div {
  font-size: 16px;
  color: #FFFFFF;
}

#cart {
  display: none !important;
}

/* Custom carousel height */
#mainCarousel {
  max-height: 460px;
  overflow: hidden;
}

#mainCarousel .carousel-item {
  height: 460px;
}

#mainCarousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  #mainCarousel {
    max-height: 220px;
  }

  #mainCarousel .carousel-item {
    height: 220px;
  }
}

#menu .navbar-nav > li > a {
display: none
}

/* =====================================================
   BASE OPENCART DEFAULTS END
   ===================================================== */


/* =====================================================
   CUSTOM HEADER LOGO AND MENU START
   Logo row, custom menu bar, and logo mobile fixes.
   ===================================================== */

/* =========================
   CUSTOM LOGO ROW
   ========================= */

.custom-logo-row {
  width: 100%;
  background-color: #f2f2f2;
  padding-top: 1px;
  padding-bottom: 1px;
}

.custom-logo-line {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

/* Left logo + text/image beside it */
.custom-logo-left-group {
  display: flex;
  align-items: flex-end;   /* bottom alignment */
  gap: 14px;
  min-width: 0;
}

#logo img,
.right-logo img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-height: 130px !important;
  max-width: 45vw !important;
}

.right-logo img {
  padding-right: 20px;
}

/* Text next to left logo */
.logo-side-text {
  color: #333333;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  white-space: normal;
  padding-bottom: 10px;    /* move up/down from bottom */
}

/* Optional image next to left logo */
.logo-side-text img {
  display: block;
  max-height: 70px;
  width: auto;
}


/* =========================
   CUSTOM MENU BAR
   ========================= */

#custom-menu {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  gap: 14px;
  padding: 0 40px;
  box-sizing: border-box;
}

/* Left bold two-line text */
#custom-menu .custom-menu-left-text {
  flex: 0 0 300px;
  max-width: 300px;
  font-weight: 700;
  color: #333333;
  font-size: 18px;
  line-height: 1.15;
  white-space: normal;
  letter-spacing: 1px;
  padding-left: 00px;
  text-align: center;
}

/* Menu buttons pushed toward right */
#custom-menu .custom-menu-list {
  list-style: none;
  margin: 0 0 0 auto;
  padding-right: 00;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 40px;
  align-items: center !important;
}

#custom-menu .custom-menu-list li {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#custom-menu .custom-menu-list a {
  display: block;
  position: relative;
  padding: 14px 0 10px 0;
  color: #333333 !important;
  text-decoration: none;
  transition: color 0.25s ease;
}

#custom-menu .custom-menu-list a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background-color: #7ea3c0; /* #e67e22;*/
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

#custom-menu .custom-menu-list a:hover {
  color: #7ea3c0 !important;
  background-color: transparent !important;
}

#custom-menu .custom-menu-list a:hover::before {
  transform: scaleX(1);
}

/* Right-side text */
#custom-menu .custom-menu-right-text {
  flex: 0 0 180px;
  max-width: 180px;
  color: #666666;
  font-size: 14px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: right;
  display: block !important;
  display: none !important;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {
  .custom-logo-row {
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .custom-logo-line {
    gap: 6px !important;
  }

  .custom-logo-left-group {
    align-items: flex-end !important;
    gap: 6px !important;
  }

  #logo img,
  .right-logo img {
    max-height: 110px !important;
    max-width: 48vw !important;
  }

  .right-logo img {
    padding-right: 5px !important;
  }

  .logo-side-text {
    font-size: 11px !important;
    max-width: 25vw;
    line-height: 1.1;
    padding-bottom: 5px;
  }

  .logo-side-text img {
    max-height: 45px;
  }

  #custom-menu {
    gap: 6px !important;
    padding: 0 10px !important;
  }

  #custom-menu .custom-menu-left-text {
    flex: 0 0 72px !important;
    max-width: 300px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  #custom-menu .custom-menu-list {
  margin-left: 0 !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  gap: 6px 12px !important;
}

  #custom-menu .custom-menu-list a {
    font-size: 13px !important;
    padding: 12px 0 9px 0 !important;
  }

  #custom-menu .custom-menu-right-text {
    flex: 0 0 30vw !important;
    max-width: 30vw !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: right !important;
  }
}

/* mobile logo fix */
/* Mobile: remove left/right padding from logo row */
@media (max-width: 768px) {
  .custom-logo-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .custom-logo-line {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #logo img {
    margin-left: 0 !important;
  }

  .right-logo img {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
}
/* mobile logo fix */

/* =====================================================
   CUSTOM HEADER LOGO AND MENU END
   ===================================================== */


/* =====================================================
   COMMON SIDE MENU LAYOUT START
   Shared right side menu for information pages and home page.
   ===================================================== */

/* ==== side menu: information pages + home page ==== */

/* Remove Bootstrap side spacing */
:is(#information-information, #common-home) > .breadcrumb,
:is(#information-information, #common-home) > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Main OpenCart content column */
:is(#information-information, #common-home) #content {
  padding-left: clamp(12px, 2vw, 32px);
  padding-right: 0;
}

/* Page layout: content left, side menu right */
:is(#information-information, #common-home) .custom-page-with-sidemenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 30px;
  align-items: start;
}

/* Main text/content container */
:is(#information-information, #common-home) .custom-page-content {
  min-width: 0;
}

/* Right side menu */
:is(#information-information, #common-home) .custom-sidemenu {
  background: #f2f2f2;
  padding: 15px;
  border-radius: 3px 0 0 3px;
  position: sticky;
  top: 20px;
}

/* Side menu category */
:is(#information-information, #common-home) .custom-sidemenu .menu-categories {
  margin-bottom: 20px;
}

/* Side menu title */
:is(#information-information, #common-home) .custom-sidemenu .sidemenu-title {
  font-weight: 700;
  font-size: 16px;
  color: #333333;
  margin-bottom: 10px;
}

/* Side menu list */
:is(#information-information, #common-home) .custom-sidemenu .sidemenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

:is(#information-information, #common-home) .custom-sidemenu .sidemenu-list li {
  margin: 0;
  padding: 0;
}

:is(#information-information, #common-home) .custom-sidemenu .sidemenu-list a {
  display: block;
  padding: 8px 0;
  color: #333333;
  text-decoration: none;
  border-bottom: 1px solid #dddddd;
}

:is(#information-information, #common-home) .custom-sidemenu .sidemenu-list a:hover {
  color: #7ea3c0; /*#e67e22;*/
}

/* mobile */
@media (max-width: 768px) {
  :is(#information-information, #common-home) #content {
    padding-left: 12px;
    padding-right: 12px;
  }

  :is(#information-information, #common-home) .custom-page-with-sidemenu {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  :is(#information-information, #common-home) .custom-sidemenu {
    position: static;
    padding: 8px;
    max-height: none;
    border-radius: 3px;
  }

  :is(#information-information, #common-home) .custom-sidemenu .menu-categories {
    margin-bottom: 8px;
  }

  :is(#information-information, #common-home) .custom-sidemenu .sidemenu-title {
    font-size: 13px;
    margin-bottom: 5px;
  }

  :is(#information-information, #common-home) .custom-sidemenu .sidemenu-list {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }

  :is(#information-information, #common-home) .custom-sidemenu .sidemenu-list a {
    padding: 6px 0;
    border-bottom: none;
    font-size: 13px;
  }
}
/* mobile */

/* ==== side menu: information pages + home page ==== */

/* =====================================================
   COMMON SIDE MENU LAYOUT END
   ===================================================== */


/* =====================================================
   MUSIC BUTTON START
   Floating music button.
   ===================================================== */

/* == music == */
/* Music button - visible but not distracting */
#site-music-box {
  position: fixed !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 999999 !important;
  display: block !important;
}

#site-music-button {
  display: block !important;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(40,40,40,0.72);
  color: #ffffff;
  border-radius: 18px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  opacity: 0.72;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

#site-music-button:hover {
  opacity: 1;
  background: rgba(230,126,34,0.9);
  transform: translateY(-1px);
}


@media (max-width: 768px) {
  #site-music-box {
    right: 10px !important;
    bottom: 10px !important;
  }

  #site-music-button {
    font-size: 11px;
    padding: 6px 9px;
    opacity: 0.78;
  }
}
/* == music == */

/* =====================================================
   MUSIC BUTTON END
   ===================================================== */


/* =====================================================
   CONTACT PAGE MAP START
   Google map/card styles for the contact page.
   ===================================================== */

/* google maps */
/* Contact page map directly above footer */
/* Contact page map as smaller body box */
/*.custom-contact-map-section {
  width: min(900px, calc(100% - 32px));
  max-width: 900px;
  margin: 25px auto 35px auto;
  padding: 0;
  background: #f2f2f2;
  box-sizing: border-box;
  clear: both;
  border-radius: 6px;
  overflow: hidden;
}

.custom-contact-map-title {
  margin: 0;
  padding: 8px 12px;
  background: #f2f2f2;
  color: #333333;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.custom-contact-map-section iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 360px;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 768px) {
  .custom-contact-map-section {
    margin-top: 12px;
  }

  .custom-contact-map-title {
    font-size: 18px;
    padding: 7px 10px;
  }

  .custom-contact-map-section iframe {
    height: 280px;
  }
}*/

/* Contact map inside last card column */
.custom-contact-map-card {
  width: 100%;
}

.custom-contact-map-card h5 {
  margin: 0 0 10px 0;
  font-weight: 700;
}

.custom-contact-map-card iframe {
  display: block;
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .custom-contact-map-card {
    margin-top: 15px;
  }

  .custom-contact-map-card iframe {
    height: 260px;
  }
}

/* google maps */

/* =====================================================
   CONTACT PAGE MAP END
   ===================================================== */


/* =====================================================
   INFORMATION PAGE BASE LAYOUT START
   Information page width, info rows, and columns.
   ===================================================== */

/* Hide OpenCart default top bar */
#top {
  display: none !important;
}
/* Hide OpenCart default top bar */

/* Information Page Template Size */
#information-information.container {
  max-width: none;
  width: 100%;
  padding-left: clamp(12px, 2vw, 32px);
  padding-right: clamp(12px, 2vw, 32px);
}
/* Information Page Template Size */
/* orange h3 headers for all information pages */
.custom-info-row h3 {
  color: #7ea3c0 !important;
}
/* orange h3 headers for all information pages */
  
  
/* ==== custom two-column information content Ποιοι Ειμαστε ==== */
.custom-info-row {
  margin-left: 0;
  margin-right: 0;
  padding: 20px 30px;
  row-gap: 20px;
}

.custom-info-column {
  padding: 20px 28px;
}

.custom-info-row h3 {
  color: #7ea3c0 !important;
  margin-bottom: 12px;
}

.custom-info-row ul {
  padding-left: 22px;
}

/* mobile */
@media (max-width: 768px) {
  .custom-info-row {
    padding: 12px 8px;
  }

  .custom-info-column {
    padding: 12px 8px;
  }
}
/* ==== custom two-column information content Ποιοι Ειμαστε ==== */  
  
/* page content size for desktop + mobile */
.custom-page-content.custom-description-content {
  justify-self: start !important;
  width: 50vw !important;
  max-width: 50vw !important;
  margin-left: 2vw !important;
  margin-right: auto !important;
  margin-top: 1vw !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .custom-page-content.custom-description-content {
    width: 80vw !important;
    max-width: 80vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* page content size for desktop + mobile */

/* =====================================================
   INFORMATION PAGE BASE LAYOUT END
   ===================================================== */


/* =====================================================
   SOFT TEXT BOXES START
   Reusable soft text boxes used on multiple pages.
   ===================================================== */

/* soft text box 1 */
.soft-text-box {
  display: block !important;
   background: rgba(26, 80, 159, 0.4) !important; 
  /* background: transparent !important; */
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  padding: 18px 28px !important;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  width: calc(100% - 4vw) !important;
  max-width: 90% !important;
  margin-left: 4vw !important;
  margin-right: 0 !important;
  margin-top: 10px !important;
  box-sizing: border-box;
  text-align: left;
  overflow-wrap: anywhere;
}

#common-home .soft-text-box h2,
#common-home .soft-text-box p {
  max-width: 100% !important;
  margin-left: 0 !important;
  overflow-wrap: anywhere;
}

/* mobile only */
@media (max-width: 768px) {
  .soft-text-box {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* soft text box 1 */
  
/* soft text box 2 */
.soft-text-box2 {
  display: block !important;
  /* background: rgba(26, 80, 159, 0.4) !important; */
   background: transparent !important; 
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  padding: 18px 28px !important;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  width: calc(100% - 4vw) !important;
  max-width: 90% !important;
  margin-left: 4vw !important;
  margin-right: 0 !important;
  margin-top: 10px !important;
  box-sizing: border-box;
  text-align: left;
  overflow-wrap: anywhere;
}

#common-home .soft-text-box2 h2,
#common-home .soft-text-box2 p {
  max-width: 100% !important;
  margin-left: 0 !important;
  overflow-wrap: anywhere;
}

/* mobile only */
@media (max-width: 768px) {
  .soft-text-box2 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* soft text box 2 */

/* =====================================================
   SOFT TEXT BOXES END
   ===================================================== */


/* =====================================================
   INFORMATION PAGE CAROUSELS START
   Diakriseis carousel and single1 carousel.
   ===================================================== */

/* carousel selida diakriseis */
.diakriseis-carousel {
  position: relative !important;
  width: 100% !important;
  max-width: 1100px !important;
  aspect-ratio: 16 / 9 !important;
  margin: 25px auto !important;
  margin-top: 0px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16) !important;
  background: #f2f2f2 !important;
}

.diakriseis-carousel .diakriseis-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: rgba(255,255,255,0.16) !important;
  opacity: 0;
  animation: diakriseisCarouselFade 24s linear infinite;
}

.diakriseis-carousel .diakriseis-slide:nth-child(1) {animation-delay: 0s;}
.diakriseis-carousel .diakriseis-slide:nth-child(2) {animation-delay: 4s;}
.diakriseis-carousel .diakriseis-slide:nth-child(3) {animation-delay: 8s;}
.diakriseis-carousel .diakriseis-slide:nth-child(4) {animation-delay: 12s;}
.diakriseis-carousel .diakriseis-slide:nth-child(5) {animation-delay: 16s;}
.diakriseis-carousel .diakriseis-slide:nth-child(6) {animation-delay: 20s;}
@keyframes diakriseisCarouselFade {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  23% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .diakriseis-carousel {
    max-width: 100% !important;
    margin: 18px auto !important;
    border-radius: 10px !important;
  }
}
/* carousel selida diakriseis */


/* carousel single 1 */
.single1-carousel {
  position: relative !important;
  width: 100% !important;
  max-width: 1100px !important;
  aspect-ratio: 9 / 9 !important;
  margin: 25px auto !important;
  margin-top: 0px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16) !important;
  background: #f2f2f2 !important;
}

.single1-carousel .single1-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #f2f2f2 !important;

  opacity: 0;
  animation: single1CarouselFade 60s linear infinite;

  /* Title placement inside each slide */
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

/* Per-image title shown together with each active slide */
.single1-carousel .single1-slide-title {
  display: inline-block;
  max-width: 95%;
  padding: 6px 12px;

  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;

  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* 10 slides: 4 seconds apart, total 36 seconds */
.single1-carousel .single1-slide:nth-child(1) {animation-delay: 0s;}
.single1-carousel .single1-slide:nth-child(2) {animation-delay: 4s;}
.single1-carousel .single1-slide:nth-child(3) {animation-delay: 8s;}
.single1-carousel .single1-slide:nth-child(4) {animation-delay: 12s;}
.single1-carousel .single1-slide:nth-child(5) {animation-delay: 16s;}
.single1-carousel .single1-slide:nth-child(6) {animation-delay: 20s;}
.single1-carousel .single1-slide:nth-child(7) {animation-delay: 24s;}
.single1-carousel .single1-slide:nth-child(8) {animation-delay: 28s;}
.single1-carousel .single1-slide:nth-child(9) {animation-delay: 32s;}
.single1-carousel .single1-slide:nth-child(10) {animation-delay: 36s;}
.single1-carousel .single1-slide:nth-child(11) {animation-delay: 40s;}
.single1-carousel .single1-slide:nth-child(12) {animation-delay: 44s;}
.single1-carousel .single1-slide:nth-child(13) {animation-delay: 48s;}
.single1-carousel .single1-slide:nth-child(14) {animation-delay: 52s;}
.single1-carousel .single1-slide:nth-child(15) {animation-delay: 56s;}

/*
  15 slides × 4 seconds = 60 seconds total.

  1% of 60s = 0.6s fade time.
  The next slide starts every 4 seconds, at 6.67%.
*/
@keyframes single1CarouselFade {
  /* Fade in during the first 0.6 seconds */
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  /* Remain fully visible until the next slide starts */
  6.67% {
    opacity: 1;
  }
  /* Fade out while the next slide fades in */
  7.67% {
    opacity: 0;
  }
  /* Remain hidden for the rest of the 60-second loop */
  100% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .single1-carousel {
    max-width: 100% !important;
    margin: 18px auto !important;
    border-radius: 10px !important;
  }

  .single1-carousel .single1-slide {
    padding: 8px !important;
  }

  .single1-carousel .single1-slide-title {
    font-size: 14px;
    padding: 5px 9px;
  }
}
/* carousel single 1 */

/* =====================================================
   INFORMATION PAGE CAROUSELS END
   ===================================================== */


/* =====================================================
   FOOTER AND SPACING HELPERS START
   Blocks that keep content and footer separated.
   ===================================================== */

/* Text below side menu layout */
.after-sidemenu-text {
  display: block;
  clear: both;
  margin-top: 35px;
  margin-bottom: 35px;
}
/* Text below side menu layout */

  
/* Footer must stay after page content */
footer {
  position: relative !important;
  clear: both !important;
  margin-top: 40px !important;
  z-index: 2;
}

@media (max-width: 768px) {
  footer {
    margin-top: 25px !important;
  }
}
/* Footer must stay after page content */
  

  
/* Space block before footer */
.before-footer-block {
  display: block;
  clear: both;
  position: relative;
  z-index: 1;
  margin-top: 50px;
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  .before-footer-block {
    margin-top: 30px;
    margin-bottom: 35px;
  }
}
/* Space block before footer */

/* =====================================================
   FOOTER AND SPACING HELPERS END
   ===================================================== */


/* =====================================================
   GLOBAL MOBILE SAFETY FIX START
   Important mobile overflow/layout protection. Keep before final page-specific overrides.
   ===================================================== */

/* ==== mobile full-width safety fix ==== */
/* Mobile-only override: keeps content inside the phone screen */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  #container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin-bottom: 0 !important;
    overflow-x: hidden !important;
  }

  #content,
  #column-left,
  #column-right {
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 0 !important;
  }

  #alert {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: 0 !important;
  }

  .container,
  .container-fluid {
    max-width: 100% !important;
  }

  #common-home.container-fluid,
  #information-information.container,
  #information-information.container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: hidden !important;
  }

  :is(#information-information, #common-home) > .row,
  :is(#information-information, #common-home) .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  :is(#information-information, #common-home) .custom-page-with-sidemenu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  :is(#information-information, #common-home) .custom-page-content {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  :is(#information-information, #common-home) .custom-page-content.custom-description-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :is(#information-information, #common-home) .custom-sidemenu {
    order: 2 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px 0 !important;
    padding: 8px !important;
    z-index: auto !important;
    overflow: visible !important;
  }

  :is(#information-information, #common-home) .custom-sidemenu .sidemenu-list {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  #common-home .custom-page-content > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  .home-square-carousels-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .home-square-carousels {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .home-crossfade-carousel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  img,
  iframe,
  video {
    max-width: 100% !important;
  }

  .breadcrumb {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .before-footer-block,
  .after-sidemenu-text {
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  footer {
    position: relative !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 25px !important;
    display: block !important;
    visibility: visible !important;
  }
}
/* ==== mobile full-width safety fix ==== */

/* =====================================================
   GLOBAL MOBILE SAFETY FIX END
   ===================================================== */


/* =====================================================
   INFORMATION PAGE BACKGROUND START
   General information page background.
   ===================================================== */

/* information pages body background color */
#information-information {
   background-color: #cce9ff !important; 
  /* background-color: #68b4ee !important; */
    background-image:
    linear-gradient(rgba(204, 233, 255,0.85), rgba(204, 233, 255,0.85)),
    url('../../../image/catalog/main-image.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
/* homepage background image */
}
/* information pages body background color */

/* =====================================================
   INFORMATION PAGE BACKGROUND END
   ===================================================== */


/* =====================================================
   SINGLE INFORMATION WORK PAGE START
   Special work page two-column text/carousel layout.
   ===================================================== */

/* single information page work section */
.single-info-work-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-items: start;
}

.single-info-work-left,
.single-info-work-right {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* left text box */
.single-info-work-section .soft-text-box2 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 22px 28px !important;
  box-sizing: border-box;
}

.single-info-work-section .soft-text-box2 h2 {
  margin-top: 0 !important;
  margin-left: 0 !important;
}

.single-info-work-section .soft-text-box2 h2 span {
  color: #7ea3c0;
}

.single-info-work-section .soft-text-box2  p {
  font-size: 16px;
  line-height: 1.55;
  margin-left: 0 !important;
  margin-top: 0;
  margin-bottom: 12px;
}

/* right title */
.single-info-work-title {
  color: #7ea3c0 !important;
  text-align: center;
  margin-top: 0;
  margin-bottom: 16px;
}

/* right carousel */
.single-info-work-carousel {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  background: #f2f2f2;
}

.single-info-work-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #f2f2f2;
  opacity: 0;
  animation: singleInfoWorkCarouselFade 34s infinite;
}
.single-info-work-carousel img:nth-child(1) {animation-delay: 0s;}
.single-info-work-carousel img:nth-child(2) {animation-delay: 4s;}
.single-info-work-carousel img:nth-child(3) {animation-delay: 8s;}
.single-info-work-carousel img:nth-child(4) {animation-delay: 12s;}
.single-info-work-carousel img:nth-child(5) {animation-delay: 16s;}
.single-info-work-carousel img:nth-child(6) {animation-delay: 20s;}
.single-info-work-carousel img:nth-child(7) {animation-delay: 24s;}
.single-info-work-carousel img:nth-child(8) {animation-delay: 28s;}
.single-info-work-carousel img:nth-child(9) {animation-delay: 32s;}


@keyframes singleInfoWorkCarouselFade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  30% { opacity: 1; }
  38% { opacity: 0; }
  100% { opacity: 0; }
}

/* mobile */
@media (max-width: 768px) {
  .single-info-work-section {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .single-info-work-section .soft-text-box2 {
    padding: 16px 14px !important;
  }

  .single-info-work-carousel {
    max-width: 100%;
    border-radius: 10px;
  }
}
/* single information page work section */

/* ==== second single information page work carousel ===== */
.single-info-work-title-2 {
  margin-top: 28px !important;
}

.single-info-work-carousel2 {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1080 / 718;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  background: #f2f2f2;
}

.single-info-work-carousel2 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #f2f2f2;
  opacity: 0;
  animation: singleInfoWorkCarousel2Fade 35s infinite;
}

.single-info-work-carousel2 img:nth-child(1) {animation-delay: 0s;}
.single-info-work-carousel2 img:nth-child(2) {animation-delay: 5s;}
.single-info-work-carousel2 img:nth-child(3) {animation-delay: 10s;}
.single-info-work-carousel2 img:nth-child(4) {animation-delay: 15s;}
.single-info-work-carousel2 img:nth-child(5) {animation-delay: 20s;}
.single-info-work-carousel2 img:nth-child(6) {animation-delay: 25s;}
.single-info-work-carousel2 img:nth-child(7) {animation-delay: 30s;}

@keyframes singleInfoWorkCarousel2Fade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  30% { opacity: 1; }
  38% { opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 768px) {
  .single-info-work-carousel2 {
    max-width: 100%;
    border-radius: 10px;
  }

  .single-info-work-title-2 {
    margin-top: 20px !important;
  }
}
/* second single information page work carousel */

/* make only this information page wider */
#information-information:has(.single-info-work-section) .custom-page-content,
#information-information:has(.single-info-work-section) .custom-page-content.custom-description-content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
}

/* remove extra inner restriction only on this page */
#information-information:has(.single-info-work-section) #content {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* optional: give this page a different body background */
#information-information:has(.single-info-work-section) {
  background-color: #daeefd !important;
}

@media (max-width: 768px) {
  #information-information:has(.single-info-work-section) .custom-page-content,
  #information-information:has(.single-info-work-section) .custom-page-content.custom-description-content {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* make only this information page wider */
/* wider special page content area */
/* #information-information:has(.single-info-work-section) .custom-page-with-sidemenu {
  grid-template-columns: minmax(0, 1fr) 220px !important;
  gap: 20px !important;
} */
/* wider special page content area */

/* =====================================================
   SINGLE INFORMATION WORK PAGE END
   ===================================================== */


/* =====================================================
   MOBILE CUSTOM WIDE INFORMATION PAGE FIX START
   Mobile stacking for custom wide information pages.
   ===================================================== */

/* MOBILE: custom wide information page grid fix */
@media (max-width: 768px) {

  #information-information .custom-wide-information-page,
  #information-information .custom-three-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #information-information .custom-three-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #information-information .custom-three-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #information-information .custom-three-grid > div:has(.diakriseis-carousel) {
    order: 3 !important;
  }

  #information-information .diakriseis-carousel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #information-information .diakriseis-slide {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* MOBILE: custom wide information page grid fix */

/* =====================================================
   MOBILE CUSTOM WIDE INFORMATION PAGE FIX END
   ===================================================== */


/* =====================================================
   MOBILE MENU AND TEXT FIXES START
   Final mobile wrapping fixes for top menu, side menu, and responsive text.
   ===================================================== */

/* MOBILE: remove horizontal scrollbars from top menu, main menu, side menu */
@media (max-width: 991px) {

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body * {
    box-sizing: border-box;
  }

  /* TOP MENU */
  #top,
  #top .container,
  #top .pull-left,
  #top .pull-right,
  #top-links,
  #top-links ul,
  #top .list-inline,
  header,
  header .container,
  header .row {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #top .pull-left,
  #top .pull-right {
    float: none !important;
    width: 100% !important;
  }

  #top .list-inline,
  #top-links .list-inline,
  header .list-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    white-space: normal !important;
    overflow-x: hidden !important;
    gap: 4px 8px;
  }

  #top .list-inline > li,
  #top-links .list-inline > li,
  header .list-inline > li {
    float: none !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  #top a,
  #top button,
  #top-links a,
  header .list-inline a {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* MAIN CATEGORY MENU */
  #menu,
  #menu .navbar-header,
  #menu .navbar-collapse,
  #menu .navbar-ex1-collapse,
  #menu .navbar-nav,
  #menu .nav,
  #menu .dropdown-menu,
  #menu .dropdown-inner,
  #menu .dropdown-inner ul,
  #menu .list-unstyled {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #menu .navbar-collapse,
  #menu .navbar-ex1-collapse {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #menu .navbar-nav {
    display: block !important;
    float: none !important;
    margin: 0 !important;
  }

  #menu .navbar-nav > li,
  #menu .nav > li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #menu .navbar-nav > li > a,
  #menu .nav > li > a,
  #menu a,
  #menu .see-all {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #menu .dropdown-menu {
    position: static !important;
    float: none !important;
  }

  #menu .dropdown-inner {
    display: block !important;
  }

  #menu .dropdown-inner ul {
    display: block !important;
  }

  /* SIDE MENU / LEFT-RIGHT COLUMN LISTS */
  #column-left,
  #column-right,
  #column-left *,
  #column-right *,
  .list-group,
  .list-group *,
  .list-group-item,
  .list-group-item * {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #column-left .list-group-item,
  #column-right .list-group-item,
  .list-group-item,
  .list-group-item a {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}
/* MOBILE: remove horizontal scrollbars from top menu, main menu, side menu */

/* FINAL MOBILE: custom top menu wraps instead of scrolling */
@media (max-width: 768px) {

  #custom-menu {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
  }

  #custom-menu .custom-menu-list {
    margin-left: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
    white-space: normal !important;

    gap: 6px 12px !important;
  }

  #custom-menu .custom-menu-list li {
    white-space: normal !important;
    max-width: 100% !important;
  }

  #custom-menu .custom-menu-list a {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
}
/* FINAL MOBILE: custom top menu wraps instead of scrolling */

/* FINAL MOBILE: side menu wraps instead of scrolling */
@media (max-width: 768px) {

  :is(#information-information, #common-home) .custom-sidemenu .sidemenu-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
    white-space: normal !important;

    gap: 6px 12px !important;
  }

  :is(#information-information, #common-home) .custom-sidemenu .sidemenu-list li,
  :is(#information-information, #common-home) .custom-sidemenu .sidemenu-list a {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
}
/* FINAL MOBILE: side menu wraps instead of scrolling */

/* Mobile two columns element */
@media (max-width: 768px) {
  .mobile-two-columns {
    display: block !important;
        margin-left: 0px !important;
    align-self: left !important;
  }

  .mobile-two-columns > div {
    margin-bottom: 16px !important;
    margin-left: 0px !important;
    align-self: left !important;
  }
}
/* Mobile two columns element */

/* responsive text1 desktop */
#common-home {
  --responsive-text1-size: 17px;
  --responsive-text1-line-height: 1.2;
  --responsive-text1-weight: 700;

  --responsive-text1-mobile-size: 15px;
  --responsive-text1-mobile-line-height: 0.95;
}

#common-home .responsive-text1 {
  display: block !important;
  font-family: Arial, sans-serif;
  font-size: var(--responsive-text1-size) !important;
  line-height: var(--responsive-text1-line-height) !important;
  font-weight: var(--responsive-text1-weight) !important;
}
/* responsive text1 desktop */


/* mobile text1 */
@media (max-width: 768px) {
  #common-home .responsive-text1 {
    font-size: var(--responsive-text1-mobile-size) !important;
    line-height: var(--responsive-text1-mobile-line-height) !important;
  }
}
/* mobile text1 */

/* responsive text1b desktop */
.responsive-text1b {
  font-family: Arial, sans-serif;
  font-size: 15px!important;
  line-height: 1.5!important;
  font-weight: 500!important;
}
/* responsive text1b desktop */
/* mobile text1b */
@media (max-width: 768px) {
  .responsive-text1b {
    font-size: 15px;
  }
}
/* mobile text1b */

/* responsive text1c desktop */
#common-home .responsive-text1c {
  display: block !important;
  font-family: Arial, sans-serif;
  font-size: 14px !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
}
/* responsive text1c desktop */

/* mobile text1c */
@media (max-width: 768px) {
  #common-home .responsive-text1c {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
}
/* mobile text1c */

/* responsive text2 desktop */
#common-home .responsive-text2 {
  font-family: Arial, sans-serif;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  text-align: left !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  color: #ffffff !important;
  overflow-wrap: anywhere;
}
/* responsive text2 desktop */


/* responsive text2 inside the two small bordered columns */
#common-home .mobile-two-columns .responsive-text2 {
  width: 350px !important;
  max-width: 100% !important;

  padding: 8px 10px !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;

  box-sizing: border-box !important;
}
/* responsive text2 inside the two small bordered columns */


/* mobile text2 */
@media (max-width: 768px) {
  #common-home .responsive-text2 {
    font-size: 15px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    padding-left: 0 !important;
  }

  #common-home .mobile-two-columns .responsive-text2 {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* mobile text2 */

/* =====================================================
   MOBILE MENU AND TEXT FIXES END
   ===================================================== */


/* =====================================================
   CUSTOM WHITE SHADOW TEXT START
   Reusable dramatic white text effect.
   ===================================================== */

/* ==== customizable white text with shadow + black border ==== */
.custom-white-shadow-text {
  /* CUSTOM SETTINGS */
  --text-font: "Arial", sans-serif;
  --text-size: clamp(28px, 6vw, 74px);
  --text-weight: 800;
  --text-color: #ffffff;

  --letter-space: 2px;

  --border-color: rgba(114, 114, 114, 0.4);
  --border-size: 0.1px;

  --shadow-color: rgba(0, 0, 0, 0.99);
  --shadow-x: 0.5px;
  --shadow-y: 0.5px;
  --shadow-blur: 4px;

  font-family: var(--text-font);
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  color: var(--text-color);
  letter-spacing: var(--letter-space);
  line-height: 1.1;

  /* Real text border where supported */
  -webkit-text-stroke: var(--border-size) var(--border-color);

  /* Shadow + fallback border for browsers */
  text-shadow:
    var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color),
    1px 1px 0 var(--border-color),
    -1px 1px 0 var(--border-color),
    1px -1px 0 var(--border-color),
    -1px -1px 0 var(--border-color);

  margin: 0;
}

/* mobile adjustment */
@media (max-width: 768px) {
  .custom-white-shadow-text {
    --text-size: clamp(24px, 9vw, 46px);
    --letter-space: 1px;
    --border-size: 0.05px!important;
    --shadow-x: 1px;
    --shadow-y: 1px;
    --shadow-blur: 3px;
  }
}
/* ==== customizable white text with shadow + black border ==== */

/* =====================================================
   CUSTOM WHITE SHADOW TEXT END
   ===================================================== */



/* =====================================================
   CUSTOM INFORMATION PAGE 2 DOUBLE CAROUSEL START
   Second information page double-carousel component.

   Current setup:
   - Left carousel: 14 images
   - Right carousel: 15 images
   - Each image slot: 2 seconds

   Left total:
   14 images × 2s = 28s

   Right total:
   15 images × 2s = 30s

   Important:
   The two carousels are independent.
   The left will restart every 28s.
   The right will restart every 30s.
   ===================================================== */

/* ==== custom information page 2 double carousel ==== */

.info2-double-carousel-wrap {
  width: 100%;
  padding: 20px clamp(10px, 4vw, 80px);
  box-sizing: border-box;
  margin-top: -10px;
  margin-left: -40px;
}

.info2-double-carousel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 80px);
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

/* Shared visual box for both carousels */
.info2-carousel-box {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(0,0,0,0.16);
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  margin: 0 auto;
}

/* Shared image style for both carousels */
.info2-carousel-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #f4bc8d;
  opacity: 0;
}


/* =========================
   LEFT CAROUSEL TIMING
   14 images × 2 seconds = 28 seconds total
   ========================= */

.info2-carousel-left img {
  animation: info2CarouselFadeLeft 42s linear infinite;
}

.info2-carousel-left img:nth-child(1) { animation-delay: 0s; }
.info2-carousel-left img:nth-child(2) { animation-delay: 3s; }
.info2-carousel-left img:nth-child(3) { animation-delay: 6s; }
.info2-carousel-left img:nth-child(4) { animation-delay: 9s; }
.info2-carousel-left img:nth-child(5) { animation-delay: 12s; }
.info2-carousel-left img:nth-child(6) { animation-delay: 15s; }
.info2-carousel-left img:nth-child(7) { animation-delay: 18s; }
.info2-carousel-left img:nth-child(8) { animation-delay: 21s; }
.info2-carousel-left img:nth-child(9) { animation-delay: 24s; }
.info2-carousel-left img:nth-child(10) { animation-delay: 27s; }
.info2-carousel-left img:nth-child(11) { animation-delay: 30s; }
.info2-carousel-left img:nth-child(12) { animation-delay: 33s; }
.info2-carousel-left img:nth-child(13) { animation-delay: 36s; }
.info2-carousel-left img:nth-child(14) { animation-delay: 39s; }


/* =========================
   RIGHT CAROUSEL TIMING
   15 images × 2 seconds = 30 seconds total
   ========================= */

.info2-carousel-right img {
  animation: info2CarouselFadeRight 45s linear infinite;
}

.info2-carousel-right img:nth-child(1) { animation-delay: 0s; }
.info2-carousel-right img:nth-child(2) { animation-delay: 3s; }
.info2-carousel-right img:nth-child(3) { animation-delay: 6s; }
.info2-carousel-right img:nth-child(4) { animation-delay: 9s; }
.info2-carousel-right img:nth-child(5) { animation-delay: 12s; }
.info2-carousel-right img:nth-child(6) { animation-delay: 15s; }
.info2-carousel-right img:nth-child(7) { animation-delay: 18s; }
.info2-carousel-right img:nth-child(8) { animation-delay: 21s; }
.info2-carousel-right img:nth-child(9) { animation-delay: 24s; }
.info2-carousel-right img:nth-child(10) { animation-delay: 27s; }
.info2-carousel-right img:nth-child(11) { animation-delay: 30s; }
.info2-carousel-right img:nth-child(12) { animation-delay: 33s; }
.info2-carousel-right img:nth-child(13) { animation-delay: 36s; }
.info2-carousel-right img:nth-child(14) { animation-delay: 39s; }
.info2-carousel-right img:nth-child(15) { animation-delay: 42s; }


/* Left fade:
   Total = 28s.
   One slide slot = 2s.
   2s is about 7.15% of 28s.
*/
@keyframes info2CarouselFadeLeft {
  0% { opacity: 0; }
  0.9% { opacity: 1; }
  6.25% { opacity: 1; }
  7.15% { opacity: 0; }
  100% { opacity: 0; }
}

/* Right fade:
   Total = 30s.
   One slide slot = 2s.
   2s is about 6.67% of 30s.
*/
@keyframes info2CarouselFadeRight {
  0% { opacity: 0; }
  0.85% { opacity: 1; }
  5.85% { opacity: 1; }
  6.67% { opacity: 0; }
  100% { opacity: 0; }
}


/* Mobile: stack the two carousels vertically */
@media (max-width: 768px) {
  .info2-double-carousel-wrap {
    padding: 12px 0;
    margin-left: 0;
  }

  .info2-double-carousel-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .info2-carousel-box {
    border-radius: 10px;
  }
}

/* ==== custom information page 2 double carousel ==== */

/* =====================================================
   CUSTOM INFORMATION PAGE 2 DOUBLE CAROUSEL END
   ===================================================== */


/* =====================================================
   CUSTOM SYMBOL BULLET LIST START
   Reusable list class with normal disc bullets.
   ===================================================== */

/* === Custom symbol bullet list === */
/* Main custom symbol list */
.custom-symbol-list {
   list-style-type: disc;   /* default filled bullet: • */
  padding-left: 0;
  margin-left: 0;
}

/* ONLY direct list items of the main list */
.custom-symbol-list > li {
  position: relative;
  padding-left: 0px;
  margin-bottom: 8px;
}

/* ONLY direct list items get the custom symbol */
/*.custom-symbol-list > li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #7ea3c0;
  font-weight: bold;
}*/
/* === Custom symbol bullet list === */

/* =====================================================
   CUSTOM SYMBOL BULLET LIST END
   ===================================================== */


/* =====================================================
   CUSTOM WIDE INFORMATION PAGE START
   Makes selected information pages wider.
   ===================================================== */

/* one information page wider body */
#information-information .custom-page-content:has(.custom-wide-information-page) {
  width: 75vw !important;
  max-width: 75vw !important;
}

#information-information .custom-wide-information-page {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #information-information .custom-page-content:has(.custom-wide-information-page) {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* one information page wider body */

/* =====================================================
   CUSTOM WIDE INFORMATION PAGE END
   ===================================================== */


/* =====================================================
   OPTIONAL CONTACT SUBMIT HIDE START
   Still commented out. Enable only if you want to hide the contact submit button.
   ===================================================== */

/* hide contact page submit button */
/* 
#information-contact form button[type="submit"],
#information-contact form input[type="submit"] {
  display: none !important;
}
*/
/* hide contact page submit button */

/* =====================================================
   OPTIONAL CONTACT SUBMIT HIDE END
   ===================================================== */

/* =====================================================
   HOME PAGE MERGED SETTINGS START

   Current home.twig structure:
   .home-main-text-carousel-grid contains 5 autonomous elements:

   1) .home-softbox-a   = top-left soft text box
   2) .home-softbox-b   = top-right soft text box
   3) .home-carousel-a  = bottom-left carousel
   4) .home-carousel-c  = bottom-center carousel
   5) .home-carousel-b  = bottom-right carousel

   Design goal:
   - Every element moves independently.
   - No bundled carousel wrapper/grid is needed.
   - Main settings are CSS variables, so later changes are easy.
   - To undo movement, set the x/y variables back to 0px.

   Important:
   This section is intentionally near the end of the CSS so it can override
   older/global soft-box, text, and carousel rules.
   ===================================================== */


/* -------------------------
   HOME VARIABLES START
   Edit these first when you want layout changes.
   ------------------------- */

#common-home {
  /* Background */
  --home-bg-color: #4991c8;
  --home-bg-overlay-a: rgba(73,145,200,0.75);
  --home-bg-overlay-b: rgba(73,145,200,0.75);
  --home-bg-image: url('../../../image/catalog/main-image.webp');

  /* Main layout */
  --home-two-column-gap: 40px;
  --home-row-gap: 24px;

  /* Soft box controls */
  --home-softbox-a-max: 100%;
  --home-softbox-b-max: 100%;
  --home-softbox-padding-y: 18px;
  --home-softbox-padding-x: 28px;
  --home-softbox-bg: rgba(26, 80, 159, 0.4);
  --home-softbox-border: rgba(255, 255, 255, 0.4);

  /* Carousel size controls */
  --home-carousel-a-max: 410px;
  --home-carousel-c-max: 410px;
  --home-carousel-b-max: 410px;

  /* Individual movement controls */
  --home-softbox-a-x: 0px;
  --home-softbox-a-y: 0px;

  --home-softbox-b-x: 0px;
  --home-softbox-b-y: 0px;

  --home-carousel-a-x: 0px;
  --home-carousel-a-y: 0px;

  --home-carousel-c-x: 0px;
  --home-carousel-c-y: 0px;

  --home-carousel-b-x: 0px;
  --home-carousel-b-y: 0px;

  /* Text controls */
  --responsive-text1-size: 17px;
  --responsive-text1-line-height: 1.2;
  --responsive-text1-weight: 700;

  --responsive-text1b-size: 15px;
  --responsive-text1b-line-height: 1.5;
  --responsive-text1b-weight: 500;

  --responsive-text1c-size: 14px;
  --responsive-text1c-line-height: 1.45;
  --responsive-text1c-weight: 500;

  --responsive-text2-size: 16px;
  --responsive-text2-line-height: 1.65;
  --responsive-text2-weight: 500;

  /* Mobile text controls */
  --responsive-text1-mobile-size: 15px;
  --responsive-text1-mobile-line-height: 0.95;

  --responsive-text1b-mobile-size: 15px;
  --responsive-text1b-mobile-line-height: 1.35;

  --responsive-text1c-mobile-size: 15px;
  --responsive-text1c-mobile-line-height: 1.2;

  --responsive-text2-mobile-size: 15px;
  --responsive-text2-mobile-line-height: 1.25;
}

/* -------------------------
   HOME VARIABLES END
   ------------------------- */


/* -------------------------
   HOME BACKGROUND START
   ------------------------- */

#common-home {
  background-color: var(--home-bg-color) !important;
  background-image:
    linear-gradient(var(--home-bg-overlay-a), var(--home-bg-overlay-b)),
    var(--home-bg-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* -------------------------
   HOME BACKGROUND END
   ------------------------- */


/* -------------------------
   HOME MAIN GRID START

   6 columns are used so the top row can have 2 big areas
   and the bottom row can have 3 equal carousel areas.

   Desktop:
   softbox A | softbox B
   carousel A | carousel C | carousel B
   ------------------------- */

#common-home .home-main-text-carousel-grid {
  display: grid !important;

  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;

  grid-template-areas:
    "soft-a soft-a soft-a soft-b soft-b soft-b"
    "carousel-a carousel-a carousel-c carousel-c carousel-b carousel-b" !important;

  column-gap: var(--home-two-column-gap) !important;
  row-gap: var(--home-row-gap) !important;

  align-items: start !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

/* -------------------------
   HOME MAIN GRID END
   ------------------------- */


/* -------------------------
   HOME SOFT BOXES START

   Fixed version:
   - soft boxes stay autonomous
   - right inner list boxes stay inside parent
   - no fixed 350px overflow
   - easier to adjust later with variables
   ------------------------- */

#common-home {
  /* Right softbox list controls */
  --home-right-list-gap: 16px;
  --home-right-list-padding-y: 8px;
  --home-right-list-padding-x: 10px;
}

/* Main shared softbox style */
#common-home .home-softbox.soft-text-box {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding: var(--home-softbox-padding-y) var(--home-softbox-padding-x) !important;
  box-sizing: border-box !important;

  background: var(--home-softbox-bg) !important;
  border: 2px solid var(--home-softbox-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08) !important;

  text-align: left;
  overflow-wrap: anywhere;
  overflow: visible !important;
}

/* Left softbox placement */
#common-home .home-softbox-a {
  grid-area: soft-a !important;
  width: 100% !important;
  max-width: var(--home-softbox-a-max) !important;
  min-width: 0 !important;

  justify-self: stretch !important;
  align-self: start !important;

  transform: translate(var(--home-softbox-a-x), var(--home-softbox-a-y)) !important;
}

/* Right softbox placement */
#common-home .home-softbox-b {
  grid-area: soft-b !important;
  width: 100% !important;
  max-width: var(--home-softbox-b-max) !important;
  min-width: 0 !important;

  justify-self: stretch !important;
  align-self: start !important;

  transform: translate(var(--home-softbox-b-x), var(--home-softbox-b-y)) !important;
}

/* Left softbox title/text helpers */
#common-home .home-softbox-title {
  text-align: center !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 8px !important;
  line-height: normal !important;
}

#common-home .home-softbox-main-text {
  color: #ffffff !important;
  text-align: center !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#common-home .responsive-text1-title-line {
  display: block !important;
  margin-bottom: 1px !important;
  line-height: var(--responsive-text1-line-height) !important;
}

/* Right softbox inner layout */
#common-home .home-softbox-b-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

#common-home .home-softbox-b-top-text {
  color: #ffffff !important;
  text-align: left !important;

  padding-left: 0 !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

/* Two small text columns inside the right softbox */
#common-home .home-softbox-b-two-columns {
  display: grid !important;

  /* Important: minmax(0, 1fr) allows columns to shrink inside parent */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;

  gap: var(--home-right-list-gap) !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 12px !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 12px !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

#common-home .home-softbox-b-two-columns > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Small bordered text boxes */
#common-home .home-small-border-text {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  color: #ffffff !important;
  text-align: left !important;

  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding: var(--home-right-list-padding-y) var(--home-right-list-padding-x) !important;

  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;

  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}

/* Mobile: stack the two small list boxes vertically */
@media (max-width: 768px) {
  #common-home .home-softbox-b-two-columns {
    display: block !important;
  }

  #common-home .home-softbox-b-two-columns > div {
    margin-bottom: 16px !important;
  }

  #common-home .home-small-border-text {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* -------------------------
   HOME SOFT BOXES END
   ------------------------- */


/* -------------------------
   RESPONSIVE HOME TEXT START

   These are scoped to #common-home so they override the older general
   responsive-text rules without breaking other pages.
   ------------------------- */

#common-home .responsive-text1 {
  display: block !important;
  font-family: Arial, sans-serif;
  font-size: var(--responsive-text1-size) !important;
  line-height: var(--responsive-text1-line-height) !important;
  font-weight: var(--responsive-text1-weight) !important;
}

#common-home .responsive-text1b {
  display: block !important;
  font-family: Arial, sans-serif;
  font-size: var(--responsive-text1b-size) !important;
  line-height: var(--responsive-text1b-line-height) !important;
  font-weight: var(--responsive-text1b-weight) !important;
}

#common-home .responsive-text1c {
  display: block !important;
  font-family: Arial, sans-serif;
  font-size: var(--responsive-text1c-size) !important;
  line-height: var(--responsive-text1c-line-height) !important;
  font-weight: var(--responsive-text1c-weight) !important;
}

#common-home .responsive-text2 {
  font-family: Arial, sans-serif;
  font-size: var(--responsive-text2-size) !important;
  line-height: var(--responsive-text2-line-height) !important;
  font-weight: var(--responsive-text2-weight) !important;

  color: #ffffff !important;
  text-align: left !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  overflow-wrap: anywhere;
}

/* -------------------------
   RESPONSIVE HOME TEXT END
   ------------------------- */


/* -------------------------
   HOME CAROUSELS START
   ------------------------- */

#common-home .home-crossfade-carousel {
  position: relative !important;

  width: 100% !important;
  aspect-ratio: 1 / 1;

  margin-left: auto !important;
  margin-right: auto !important;

  overflow: hidden !important;
  background: transparent !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
  border-radius: 18px !important;
  isolation: isolate;
  box-sizing: border-box !important;
}

/* Left carousel */
#common-home .home-carousel-a {
  grid-area: carousel-a !important;
  max-width: var(--home-carousel-a-max) !important;
  justify-self: center !important;
  align-self: start !important;
  transform: translate(var(--home-carousel-a-x), var(--home-carousel-a-y)) !important;
}

/* Center carousel */
#common-home .home-carousel-c {
  grid-area: carousel-c !important;
  max-width: var(--home-carousel-c-max) !important;
  justify-self: center !important;
  align-self: start !important;
  transform: translate(var(--home-carousel-c-x), var(--home-carousel-c-y)) !important;
}

/* Right carousel */
#common-home .home-carousel-b {
  grid-area: carousel-b !important;
  max-width: var(--home-carousel-b-max) !important;
  justify-self: center !important;
  align-self: start !important;
  transform: translate(var(--home-carousel-b-x), var(--home-carousel-b-y)) !important;
}

/* Carousel images */
#common-home .home-crossfade-carousel .crossfade-slide {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  display: block !important;
  opacity: 0;
  transition: opacity 1.5s linear;

  z-index: 1;
  border-radius: inherit;

  transform: none;
  filter: none;
  image-rendering: auto;
  backface-visibility: hidden;
}

#common-home .home-crossfade-carousel .crossfade-slide.is-active {
  opacity: 1;
  z-index: 2;
}

/* =====================================================
   HOME MIDDLE CAROUSEL TITLES START
   Applies only to .home-carousel-c.
   ===================================================== */

#common-home .home-carousel-c .home-carousel-c-title {
  position: absolute !important;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);

  display: inline-block;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 6px 12px;

  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 8px;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;

  box-sizing: border-box;
  overflow-wrap: anywhere;

  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s linear;
}

/* Show only the title belonging to the active image */
#common-home .home-carousel-c
.crossfade-slide.is-active
+ .home-carousel-c-title {
  opacity: 1;
}

/* Hide empty title elements */
#common-home .home-carousel-c .home-carousel-c-title:empty {
  display: none;
}

/* Mobile title size */
@media (max-width: 768px) {
  #common-home .home-carousel-c .home-carousel-c-title {
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 5px 9px;
    font-size: 14px;
  }
}

/* =====================================================
   HOME MIDDLE CAROUSEL TITLES END
   ===================================================== */


/* Carousel buttons */
#common-home .crossfade-prev,
#common-home .crossfade-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  z-index: 5;

  width: 34px;
  height: 44px;

  border: none;
  background: rgba(0,0,0,0.18);
  border-radius: 10px;

  color: white;
  font-size: 32px;
  line-height: 1;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 0 7px 0;
  box-sizing: border-box;
}

#common-home .crossfade-prev {
  left: 8px;
}

#common-home .crossfade-next {
  right: 8px;
}

#common-home .crossfade-prev:hover,
#common-home .crossfade-next:hover {
  background: rgba(0,0,0,0.45);
}

/* -------------------------
   HOME CAROUSELS END
   ------------------------- */


/* -------------------------
   HOME MOBILE START
   On mobile everything stacks vertically.
   ------------------------- */

@media (max-width: 768px) {
  #common-home {
    --home-two-column-gap: 12px;
    --home-row-gap: 16px;

    --home-softbox-padding-y: 16px;
    --home-softbox-padding-x: 12px;

    --home-carousel-a-max: 100%;
    --home-carousel-c-max: 100%;
    --home-carousel-b-max: 100%;

    --responsive-text1-size: var(--responsive-text1-mobile-size);
    --responsive-text1-line-height: var(--responsive-text1-mobile-line-height);

    --responsive-text1b-size: var(--responsive-text1b-mobile-size);
    --responsive-text1b-line-height: var(--responsive-text1b-mobile-line-height);

    --responsive-text1c-size: var(--responsive-text1c-mobile-size);
    --responsive-text1c-line-height: var(--responsive-text1c-mobile-line-height);

    --responsive-text2-size: var(--responsive-text2-mobile-size);
    --responsive-text2-line-height: var(--responsive-text2-mobile-line-height);
  }

  #common-home .home-main-text-carousel-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "soft-a"
      "soft-b"
      "carousel-a"
      "carousel-c"
      "carousel-b" !important;
  }

  #common-home .home-softbox.soft-text-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  #common-home .home-softbox-b-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  #common-home .home-softbox-b-two-columns {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #common-home .home-softbox-b-two-columns > div {
    margin-bottom: 16px !important;
  }

  #common-home .home-small-border-text {
    width: 100% !important;
    max-width: 100% !important;
  }

  #common-home .home-crossfade-carousel {
    max-width: 100% !important;
    border-radius: 10px !important;
  }

  #common-home .custom-sidemenu {
    margin-top: 0 !important;
  }
}

/* -------------------------
   HOME MOBILE END
   ------------------------- */


/* =====================================================
   HOME PAGE MERGED SETTINGS END
   ===================================================== */

/* =====================================================
   CUSTOM TEAM CAROUSEL START
   Small isolated carousel for the image column inside .custom-wide-information-page.
   Put this near the CUSTOM WIDE INFORMATION PAGE section, not randomly at the end.
   ===================================================== */

/* Carousel column safety */
#information-information .custom-team-carousel-column {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Main carousel box */
#information-information .custom-wide-information-page .custom-team-carousel {
  position: relative !important;

  width: 100% !important;
  max-width: 850px !important;

  /* Change this if your images need a different shape.
     1 / 1 = square, 4 / 5 = portrait, 16 / 9 = wide. */
  aspect-ratio: 4 / 3 !important;

  margin: 0 auto !important;
  overflow: hidden !important;

  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16) !important;
  background: #f2f2f2 !important;
}

/* Carousel images */
#information-information .custom-wide-information-page .custom-team-carousel img {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;

  background: #f2f2f2 !important;
  opacity: 0;

  animation: customTeamCarouselFade 16s infinite;
}

/* 4 slides: 4 seconds apart, total 16 seconds */
#information-information .custom-wide-information-page .custom-team-carousel img:nth-child(1) { animation-delay: 0s; }
#information-information .custom-wide-information-page .custom-team-carousel img:nth-child(2) { animation-delay: 4s; }
#information-information .custom-wide-information-page .custom-team-carousel img:nth-child(3) { animation-delay: 8s; }
#information-information .custom-wide-information-page .custom-team-carousel img:nth-child(4) { animation-delay: 12s; }

/* Fade timing */
@keyframes customTeamCarouselFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  28%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Mobile */
@media (max-width: 768px) {
  #information-information .custom-wide-information-page .custom-team-carousel {
    max-width: 100% !important;
    border-radius: 10px !important;
  }
}

/* =====================================================
   CUSTOM TEAM CAROUSEL END
   ===================================================== */