/* =====================================================
   UFFIZIO MAIN STYLESHEET (Optimized & Organized)
   Author: Uffizio
   
   2. BASE / RESET / TYPOGRAPHY
   3. RESPONSIVE TYPOGRAPHY
   4. HEADER & NAVIGATION
   5. FOOTER HELP SECTION
   6. FOOTER

====================================================== */

/* Tokens ( variables (colors, fonts, spacing) ) */
/* @import url('tokens.css'); */

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

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: var(--uffizio-font-body);
}

html.fonts-loaded {
  font-family: var(--uffizio-font-body);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--uffizio-text-white);
  color: var(--uffizio-text-secondary);
  font-family: var(--uffizio-font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



.site-main {
  flex: 1 0 auto;
}


body.admin-bar {
  min-height: calc(100vh - 32px);
}

.fa-css-arrow-circle {
  --size: 20px;
  --stroke: calc(var(--size) * 0.06);
  --arrow-head: calc(var(--size) * 0.23);
  --arrow-line: calc(var(--size) * 0.3);
  width: var(--size);
  height: var(--size);
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  color: var(--uffizio-color-accent);
  border: var(--stroke) solid var(--uffizio-color-accent);
  border-radius: 50%;
  vertical-align: text-bottom;
  margin-left: 5px;
}

.product-detail .fa-css-arrow-circle,
.discover .fa-css-arrow-circle,
.resources .fa-css-arrow-circle {
  --size: 16px;
}

.disp-flex {
  display: flex;
  column-gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  line-height: 1.45;
  color: var(--uffizio-text-secondary);
}

.disp-flex:hover svg {
  color: var(--uffizio-color-accent);
}

.discover .disp-flex:hover svg.help-icon {
  color: var(--uffizio-color-accent);
}

.product-discover img {
  width: 28px;
  vertical-align: middle;
  height: 28px;
}

/* Arrow line */
.fa-css-arrow-circle::before {
  content: "";
  position: absolute;
  width: calc(var(--arrow-line) + 2.6px);
  height: calc(var(--stroke) - 0px);
  background: var(--uffizio-color-accent);
  top: 50%;
  left: calc(var(--size) * 0.19);
  transform: translateY(-50%);
}

/* Arrow head (border trick!) */
.fa-css-arrow-circle::after {
  content: "";
  position: absolute;
  width: var(--arrow-head);
  height: var(--arrow-head);
  border-bottom: var(--stroke) solid var(--uffizio-color-accent);
  border-right: var(--stroke) solid var(--uffizio-color-accent);
  top: 50%;
  left: calc(var(--size) * 0.35);
  transform: translateY(-50%) rotate(-45deg);
}

.product-detail:hover .fa-css-arrow-circle,
.card-with-icon:hover .fa-css-arrow-circle,
.second-col:hover .fa-css-arrow-circle {
  transform: rotate(-30deg);
  transition: rotate .5s ease;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--uffizio-font-heading);
  color: var(--uffizio-text-primary);
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.7px;
  margin-block-end: 1.25rem;
}

h1 {
  font-size: 3.75rem;
  font-weight: 700;
}

h2 {
  font-size: 2.5rem;
  font-weight: 600;
}

h3 {
  font-size: 1.75rem;
  font-weight: 600;
}

h4 {
  font-size: 1.5rem;
  font-weight: 500;
}

h5 {
  font-size: 1.25rem;
  font-weight: 500;
}

h6 {
  font-size: 1rem;
  font-weight: 400;
}

p {
  font-family: var(--uffizio-font-body);
  margin-block-start: 0;
  margin-block-end: 20px;
  line-height: 26px;
  color: var(--uffizio-text-secondary)
}

a {
  color: var(--uffizio-color-accent);
  text-decoration: none
}

a:hover,
a:active {
  color: #0056b3;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* This is the key line */
  aspect-ratio: attr(width) / attr(height);
}

/* Buttons & Forms */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  border-radius: 3px;
  transition: all .3s
}

button,
[type=button],
[type=submit],
[type=reset] {
  cursor: pointer;
  border: 1px solid var(--uffizio-color-primary);
  background-color: transparent;
  color: var(--uffizio-color-primary);
  padding: .5rem 1rem
}

button:hover,
[type=button]:hover,
[type=submit]:hover {
  color: var(--uffizio-text-white)
}

input,
textarea,
select {
  border: 1px solid #666;
  border-radius: 3px;
  padding: .5rem 1rem;
  width: 100%;
  transition: all .3s
}

input:focus,
textarea:focus,
select:focus {
  border-color: #333
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 1rem
}

table th,
table td {
  border: 1px solid #ccc;
  padding: .75rem;
  text-align: left
}

/* Lists */
ul,
ol {
  list-style: none
}

ol {
  padding-left: 40px;
  list-style-type: decimal;
}

/* Hide skip link (intentional) */
.skip-link {
  display: none !important
}

/* for counters */
.elementor-widget-counter span {
  font-family: var(--uffizio-font-heading);
}

.elementor-counter-title {
  font-family: var(--uffizio-font-body);
}

.uffizio-counter-wrapper .elementor-widget-counter span {
  color: var(--uffizio-text-primary);
  text-transform: uppercase;
}

.uffizio-counter-wrapper.text-white .elementor-widget-counter span {
  color: var(--uffizio-text-white);
}

.uffizio-counter-wrapper .elementor-counter-title {
  color: var(--uffizio-text-primary);
}

/* .e-con.e-parent{
padding-top: var(--desktop-padding-top);
padding-bottom: var(--desktop-padding-bottom);
} */

.container {
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
}

/* ==============================
   4. HEADER & NAVIGATION
   ============================== */

/* Page Header & Main Layout */
.site-header .header-inner,
.site-header:not(.dynamic-header),
body:not([class*=elementor-page-]) .site-main {
  width: 100%;
  margin-inline: auto;
}

/* Consolidated padding-inline rule across breakpoints (matches original values) */
/* @media (max-width:575px) {

  .site-header .header-inner,
  .site-header:not(.dynamic-header),
  body:not([class*=elementor-page-]) .site-main {
    padding-inline: 20px
  }
} */

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* padding: 1rem 0; */
  position: sticky;
  top: 0;
  z-index: 9999;
}

.site-header .site-branding {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.site-header .header-inner {
  display: flex;
  width: 100%;
  gap: 0;
  align-items: center;
  justify-content: space-between;
}

.site-header .custom-logo-link,
.site-header .site-logo img {
  display: block;
  max-width: 100%;
  width: 225px;
  height: 35px;
  object-fit: contain;
}

.site-header .site-branding.show-title .site-logo {
  display: none !important
}

/* Inverted / stacked header variants */
.site-header.header-inverted .header-inner {
  flex-direction: row-reverse
}

.site-header.header-inverted .site-branding {
  text-align: end
}

.site-header.header-stacked .header-inner {
  flex-direction: column;
  align-items: center;
  text-align: center
}

header#site-header {
  background: var(--uffizio-color-primary);
  min-height: 64px;
  z-index: 9999;
}

.site-navigation ul.menu li a {
  color: var(--uffizio-text-white)
}

/* Sticky header */
.uffizio-header.sticky-header {
  background: var(--uffizio-color-primary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  will-change: transform;

}

.uffizio-header .site-navigation ul.menu li a {
  color: var(--uffizio-text-white);
}

/* Navigation layout */
.site-navigation {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
}

.site-navigation ul.menu {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: 'Inter';
  font-weight: normal;
  justify-content: space-between;
}

.site-navigation ul.menu li {
  position: relative;
  display: flex
}

.site-navigation ul.menu li a {
  display: block;
  padding: 8px 15px
}

#menu-header-menu li.menu-item-has-children>a {
  position: relative;
  padding-right: 18px
}

#menu-header-menu li.menu-item-has-children>a::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 51%;
  transform: translateY(-50%) rotate(45deg);
  /* transform: rotate(-135deg); */
  width: 6px;
  height: 6px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transition: transform .3s ease;

}

#menu-header-menu li.menu-item-has-children>a:hover:after {
  /* transform: translateY(-50%) rotate(45deg) */
}

body.home.site-2 #site-header:not(.sticky-header) .site-logo img,
body.home.site-2 header:not(.sticky-header) .mobile-menu-toggle button {
  filter: invert(1);
}

body.home.site-2 #site-header:not(.sticky-header) #menu-header-menu li.menu-item-has-children>a {
  color: black;
}

body.home.site-2 #site-header:not(.sticky-header) li.menu-item-has-children>a::after,
body.home.site-2 #site-header:not(.sticky-header) .site-logo img {
  filter: invert(1);
}

#menu-header-menu-1 {
  height: 100vh;
}

.mobile-cta {
  position: absolute !important;
  bottom: 10%;
  width: 90%;
  margin: 0 20px;
  background: #0057ff;
  border-radius: 4px;
}

.mobile-cta a {
  color: white;
}

.mobile-navigation ul.menu li.mobile-cta a {
  color: white;
  text-align: center;
}

.cpt-single-post header#site-header:not(.sticky-header) {
  background: #000E23 !important;
}

/* Submenus (desktop) */
.site-navigation ul.menu li:hover>ul,
.site-navigation ul.menu li:focus-within>ul {
  display: none
}

.site-navigation ul.menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 150px;
  background: #fff;
  z-index: 2
}

.site-navigation ul.menu li ul li {
  border-bottom: 1px solid #eee
}

.site-navigation ul.menu li ul li:last-child {
  border-bottom: none
}

.site-navigation ul.menu li ul ul {
  left: 100%;
  top: 0
}

.header-contact {
  flex: 0 0 auto;
  margin-left: 12px;
  display: flex;
  align-items: center;
}

.contact-btn {
  display: inline-block;
  padding: 5px 30px;
  background: #fff;
  background-color: var(--uffizio-color-accent);
  color: var(--uffizio-text-white);
  text-transform: uppercase;
  border-radius: 3px;
  font-family: "Antonio", serif;
  transition: all 0.3s ease;
}

/* Hover */
.contact-btn:hover {
  color: #fff;
}

.uffizio-mobile-menu {
  display: none;
}

/* contact */

#contact_cta a b {
  color: var(--uffizio-text-secondary);
}

#contact_cta a:hover b {
  color: var(--uffizio-color-accent);
}



/*** Mega menu ***/

/* Base submenu styling (same as before) */
.mega-menu-content .submenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 14%;
  width: auto;
  background: #fff;
  z-index: 999;
  box-sizing: border-box;
  box-shadow: 0 0 18px 4px rgba(126, 129, 132, .1);
  transition: width .3s, height .3s, transform .3s;
  border-radius: 0 0 6px 6px;
  will-change: width, height, transform;
}

/* Active submenu */
.mega-menu-content .submenu.active {
  display: block;
}

/* Grid system for mega menu */
.menu-grid {
  display: grid;
  gap: 20px;
}

.first-col {
  padding: 30px;
}

.col.second-col {
  height: -webkit-fill-available;
  background: var(--uffizio-bg-light);
  padding: 30px;
  height: -webkit-fill-available;
  border-radius: 0 0 8px 0;
  max-width: 285px;
}

/* Variants */
.menu-grid.three-cols {
  display: grid;
  grid-template-columns: 0.756fr 1.6fr 1.3fr;
  gap: 0px;
  align-items: start;
}

.menu-grid.two-cols {
  /* grid-template-columns: repeat(2, 1fr); */
  grid-template-columns: 1fr 284px;
  gap: 50px;
  align-items: flex-start;
}

.menu-grid.one-col {
  grid-template-columns: 1fr;
}

/* Column styling */
.menu-grid .col .menu_heading {
  font-size: 14px;
  margin-bottom: 5px;
  font-family: var(--uffizio-font-body);
  color: var(--uffizio-text-primary);
  font-weight: 500;
}

.menu_img img {
  width: 224px;
  border-radius: 6px;
  margin-bottom: 20px;
  height: 120px;
  object-fit: cover;

}

.menu-grid .col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-grid .col ul li a,
.prodct-title {
  text-decoration: none;
  color: var(--uffizio-text-primary);
  font-size: 14px;
  font-weight: 500;
  margin-right: -3px;
  transition: color 0.3s ease;
}

.menu-grid .col ul li a:hover {
  color: var(--uffizio-color-accent);
}


/* Smooth dynamic switch */
.dynamic-content .content-group {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.dynamic-content .content-group.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.product-categories,
.product-list {
  padding: 30px;
}

.product-categories ul {
  display: grid;
  float: none !important;
  grid-template-columns: 1fr;
  gap: 30px;
}

.product-categories li {
  cursor: pointer;
}

.product-categories li.active a,
.product-categories li:hover a {
  color: var(--uffizio-color-accent);
  font-weight: 600;
}

/* Default arrow pointing down (v) */
.product-categories li a {
  position: relative;
  padding-right: 18px;
  /* space for the arrow */
  display: flex;
  justify-content: space-between;
}

.product-categories li a::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border: solid #333;
  border-width: 0 1px 1px 0;
  transform: translateY(-50%) rotate(45deg);
  /* down arrow */
  display: inline-block;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* On hover/active, rotate to right arrow (>) */
.product-categories li:hover a::after,
.product-categories li.active a::after {
  transform: translateY(-50%) rotate(-45deg);
  /* right arrow */
  border-color: var(--uffizio-color-accent);
  display: none;
  /* optional highlight color */

}

.product-categories li.active a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M6.34615 0C6.02753 0 5.76923 0.258297 5.76923 0.576923C5.76923 0.895549 6.02753 1.15385 6.34615 1.15385H8.03026L4.20744 4.97667C3.98214 5.20197 3.98214 5.56726 4.20744 5.79256C4.43274 6.01786 4.79803 6.01786 5.02333 5.79256L8.84615 1.96974V3.65385C8.84615 3.97247 9.10445 4.23077 9.42308 4.23077C9.7417 4.23077 10 3.97247 10 3.65385V0.576923C10 0.258297 9.7417 0 9.42308 0H6.34615Z' fill='%230057FF'%3E%3C/path%3E%3Cpath d='M8.84615 5.74415C8.84615 5.42552 8.58786 5.16722 8.26923 5.16722C7.9506 5.16722 7.69231 5.42552 7.69231 5.74415V7.88462C7.69231 8.41566 7.26181 8.84616 6.73077 8.84616H2.11538C1.58434 8.84616 1.15385 8.41566 1.15385 7.88462L1.15385 3.26923C1.15385 2.73819 1.58434 2.30769 2.11539 2.30769H4.25585C4.57448 2.30769 4.83278 2.04940 4.83278 1.73077C4.83278 1.41214 4.57448 1.15385 4.25585 1.15385L2.11539 1.15385C0.94709 1.15385 0 2.10094 0 3.26923V7.88462C0 9.05291 0.94709 10 2.11538 10H6.73077C7.89906 10 8.84615 9.05291 8.84615 7.88462V5.74415Z' fill='%230057FF'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px 10px;
}


/* Preview column styling */
.product-preview {
  background: #fff;
  border-left: 1px solid #e5e5e5;
  padding: 20px;
  text-align: left;
  transition: all 0.3s ease;
}

.product-preview img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.product-preview h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #222;
}

.product-preview p {
  font-size: 0.9rem;
  color: var(--uffizio-text-secondary);
  margin-bottom: 12px;
}

.btn-readmore {
  display: inline-block;
  color: var(--uffizio-color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
}

.product-detail {
  background: var(--uffizio-bg-light);
  padding: 30px;
  height: -webkit-fill-available;
  border-radius: 0 0 8px 0;
  max-width: 285px;
}

.product-detail .weblink {
  font-size: 10px;
  color: var(--uffizio-text-secondary);
  margin-bottom: 20px;
  display: block;
  margin-top: 5px !important;
}

.menu-detail {
  color: var(--uffizio-text-secondary);
  line-height: 135%;
  font-size: 12px;
  margin-bottom: 15px;
}

.product-lists .product-list,
.product-detail .detail {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.product-lists .product-list.active,
.product-detail .detail.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.product-detail h4 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.product-detail p {
  color: var(--uffizio-text-secondary);
  margin-bottom: 12px;
}

.product-lists {
  border-left: 1px solid #DDE2E9;
  /* min-height: 522px; */
  min-height: 465px;
}

.product-lists ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.product-list:not(.connect) li {
  margin-bottom: 10px;
}

.groupBrand {
  position: absolute;
  bottom: 30px;
  font-size: 14px;
  margin-left: 2px;
}

.brandname {
  font-size: 14px;
  color: #0E0E0E;
  display: flex;
  align-items: center;
  column-gap: 9px;
}

#uffSidePanel .hs-form-field label:not(.hs-error-msg):not(.hs-form-booleancheckbox-display) {
  display: none !important
}

.webname {
  display: flex;
  font-size: 10px;
  color: #484848;

}

.product-lists a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background 0.25s ease, transform 0.25s ease;
  flex-direction: row;
  padding: 0px;
}

.menuIcon {
  flex: 0 0 37px;
  height: 37px;
  width: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.3s, color 0.3s;
}

.product-list:hover .menuIcon svg {
  fill: var(--uffizio-color-accent);
  transition: color 0.1s ease;

}

.product-list a:hover .prodct-title,
.product-discover .menu-product-wrapper:hover .prodct-title {
  color: var(--uffizio-color-accent);
}

li:hover .menuIcon {
  background: #f0f4ff;
}

.product-lists a:hover .menuIcon {
  background: var(--uffizio-bg-light);
  border-radius: 5px;

}

.menuInfo {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sub-title {
  font-size: 13px;
  color: var(--uffizio-text-secondary);
  margin-top: 4px;
}

.product-lists a:hover .sub-title {
  color: #333;
}

/* ==============================
   5. FOOTER HELP SECTION
   ============================== */

.footer-help-section {
  background-color: var(--uffizio-bg-light);
  padding: 100px 30px;
}

.footer-help-section .help-title,
.footer-help-section .help-subtitle {
  text-align: center
}

.footer-help-section .help-subtitle {
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: var(--uffizio-text-secondary)
}

p.help-description {
  font-size: 1.063rem;
  line-height: 30px
}

.footer-help-section .container {
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
  padding: 0px;

}

.help-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
  padding: 33px 0 0 0
}

.help-col {
  background: #fff;
  border: 1px solid var(--uffizio-color-border);
  border-radius: 8px;
  box-shadow: 0 0 10px 0 #E0E0E0;
  padding: 20px;
  min-width: 0;
  /* ✅ MOST IMPORTANT */
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  transition: transform .3s ease, box-shadow .3s ease
}

.help-btn {
  display: grid;
  grid-template-columns: 23px auto;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  background: transparent;
  color: var(--help-btn-color, var(--uffizio-color-accent));
  border: 1px solid var(--help-btn-color, var(--uffizio-color-accent));
  border-radius: 7px;
  padding: .5rem .75rem;
  font-family: "Antonio", serif;
  font-size: 1.125rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: all .3s
}

.help-btn:hover {
  background-color: var(--help-btn-color, var(--uffizio-color-accent));
  color: var(--help-btn-hover-color, #fff)
}

.help-btn:hover svg.help-btn-icon {
  filter: brightness(0) invert(1)
}

.help-btn .help-icon {
  width: 23px;
  height: 23px;
  fill: currentColor;
  transition: fill .3s
}


/* ==============================
   6. FOOTER
   ============================== */
.uffizio-footer {
  background: linear-gradient(0deg, rgba(7, 31, 65, 1) 0%, rgba(5, 20, 46, 1) 28%, rgba(0, 14, 35, 1) 100%);
  color: var(--uffizio-text-white);
  font-family: 'Arial', sans-serif
}

.footer-container {
  max-width: 1350px;
  margin: 0 auto
}

.uffizio-footer p {
  color: var(--uffizio-text-white)
}

/* footer top */
.uffizio-footer-top {
  overflow: hidden;
  align-items: flex-start;
  padding: 100px 0 95px 0;

}

.uffizio-footer-top.uffizio-grid-4 {
  display: grid;
  grid-template-columns: 18% 18% 18% 46%;
  /* total = 100% */
  column-gap: 0;
}

.uffizio-footer-top.uffizio-grid-5 {
  display: grid;
  grid-template-columns: 15% 14% 25% 10% 30%;
  /* total = 94% */
  column-gap: 1%;
  /* 4% (1% × 4 gaps) */
}

.footer-container .uffizio-footer-top {
  width: 100%;
  box-sizing: border-box;
}

.footer-column {
  min-width: 180px
}

.footer-column .footer-title {
  font-size: 17px;
  margin-bottom: 20px;
  font-weight: 400;
  font-family: var(--uffizio-font-heading);
  color: var(--uffizio-text-white);
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 1px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0
}

.footer-column ul li {
  margin-bottom: 5px
}

.footer-column ul li a {
  color: var(--uffizio-text-footer);
  text-decoration: none;
  transition: color .3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  padding: 2px 0 !important;
}

.footer-column:last-child {
  text-align: right
}

.footer-column ul li a:hover,
.footer-bottom-menu .menu-wrapper li a:hover {
  color: #fff;
}

.footer-logo {
  margin-bottom: 3em
}

/* Social Media Icons */
.uffizio-footer .social-links {
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0
}

.uffizio-footer .social-links li {
  display: inline-flex;
  margin-left: 6px
}

.uffizio-footer .social-links li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--uffizio-text-white);
  border-radius: 50%;
  text-decoration: none;
  transition: all .3s
}

.uffizio-footer .social-links .social-media {
  width: 15px;
  height: 15px;
  fill: var(--uffizio-text-secondary);
  transition: fill .3s
}

.uffizio-footer .social-links li a:hover {
  background: var(--uffizio-text-white);
  opacity: 0.9;
  transition: .5s ease;
}

.uffizio-footer .social-links li a:hover .social-media {
  fill: var(--uffizio-color-primary)
}

/* Footer bottom / copyright */
.uffizio-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 0 20px;
  flex-wrap: wrap;
  font-size: 14px;
}

.uffizio-footer-bottom .copyright-text {
  margin-bottom: 0;
  color: #C2C2CA;
}

.footer-bottom-menu .menu-wrapper {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0
}

.footer-bottom-menu .menu-wrapper li a {
  color: #C2C2CA;
  text-decoration: none;
  transition: color .3s ease
}

.footer-bottom-menu .menu-wrapper li {
  position: relative
}

.footer-bottom-menu .menu-wrapper li+li::before {
  content: "|";
  color: var(--uffizio-text-white);
  margin: 0 10px
}

/* Uffizio Gradient pattern-1 - old class :  uffizio-gradient-pattern-one */
.uffizio-gradient-pattern-1 {
  background:
    radial-gradient(919.5px 128.5px at 50% 0%,
      rgba(38, 86, 158, 0.40) 0%,
      rgba(38, 86, 158, 0.08) 40%,
      transparent 80%),
    radial-gradient(919.5px 128.5px at 50% 47%,
      rgba(38, 86, 158, 0.20) 0%,
      rgba(38, 86, 158, 0.06) 40%,
      transparent 80%),
    radial-gradient(919.5px 128.5px at 50% 100%,
      rgba(38, 86, 158, 1) 0%,
      rgba(38, 86, 158, 0.45) 35%,
      rgba(38, 86, 158, 0.12) 60%,
      transparent 80%),
    #000E23;
  background-blend-mode:
    screen,
    screen,
    plus-lighter,
    normal;
  background-repeat: no-repeat;
  background-size: cover;
}

/* uffizio gradient pattern two */

.uffizio-gradient-pattern-two {
  position: relative;
  background-image:
    radial-gradient(100% 70% at 0% 50%,
      rgba(0, 0, 0, 0.55),
      transparent 70%),
    radial-gradient(100% 70% at 100% 50%,
      rgba(0, 0, 0, 0.55),
      transparent 70%),
    radial-gradient(1500px 400px at 50% 100%,
      rgba(23, 55, 125, 0.95) 0%,
      rgba(15, 40, 95, 0.55) 35%,
      rgba(8, 20, 40, 0.18) 60%,
      transparent 85%),
    linear-gradient(to bottom,
      #000000 0%,
      #03060d 20%,
      #05132b 45%,
      #0a2a60 70%,
      #0d387a 100%),
    repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 2px,
      transparent 2px,
      transparent 60px),
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 2px,
      transparent 2px,
      transparent 60px);
  background-blend-mode: overlay;
  padding: 60px 8%;
  border-top: 1px solid #0d3663;
  color: var(--uffizio-text-white);
  text-align: center;
}

/* 
uffizio gradient pattern three
pattern for category archive behind title 
*/

.uffizio-gradient-pattern-three {
  width: 100%;
  height: 40vh;
  background:
    /* Left Grid */
    repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px,
      transparent 50px),
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px,
      transparent 50px),
    /* Right Grid */
    repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px,
      transparent 50px),
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px,
      transparent 50px),
    /* Main Gradient */
    linear-gradient(to right, #0062c7 0%, #0098ff 50%, #58c4ff 100%);

  background-size:
    25% 100%, 25% 100%,
    25% 100%, 25% 100%,
    100% 100%;

  background-position:
    left top, left top,
    right top, right top,
    center;

  background-repeat: no-repeat;
}

/*
uffizio gradient pattern four
- for product features page
- 
*/

.uffizio-gradient-pattern-four {
  width: 100%;
  min-height: 900px;
  position: relative;
  overflow: hidden;
  background-color: #000000;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 100% 0%, rgba(30, 144, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 0% 90%, rgba(30, 144, 255, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 65% 70%, rgba(30, 144, 255, 0.15) 0%, transparent 30%),
    linear-gradient(to bottom, #000000 0%, #0c2753 100%);
  background-size: 59px 52px, 59px 52px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.uffizio-gradient-pattern-four::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .uffizio-gradient-pattern-four {
    min-height: 600px;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      radial-gradient(circle at 100% 0%, rgba(30, 144, 255, 0.2) 0%, transparent 60%),
      radial-gradient(circle at 0% 100%, rgba(30, 144, 255, 0.15) 0%, transparent 60%),
      linear-gradient(to bottom, #000000 0%, #0c2753 100%);
    background-size: 45px 40px, 45px 40px, 100% 100%, 100% 100%, 100% 100%;
  }
}

@media (max-width: 768px) {
  .uffizio-gradient-pattern-four {
    min-height: 500px;
    background-size: 30px 26px, 30px 26px, 100% 100%, 100% 100%, 100% 100%;
  }

  .uffizio-gradient-pattern-four::before {
    background: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.7) 100%);
  }
}


/* Template part background */
.wp-block-template-part {
  background: radial-gradient(ellipse at center, #1c2a4a 0%, #0a1428 50%, #000000 100%);
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 25px), repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 25px), radial-gradient(ellipse at center, #1c2a4a 0%, #0a1428 50%, #000000 100%);
  color: var(--uffizio-text-white);
  padding: 60px 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 1px solid #0d3663;
  font-size: .95em;
}

/*  Product Background Pattern */
.product-background-pattern {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  perspective: 1200px;
  background: linear-gradient(to bottom,
      #050811 0%,
      #0A1227 50%,
      #112642 100%);
}

.product-background-pattern::before {
  content: "";
  position: absolute;
  left: -100%;
  right: -100%;
  bottom: -30%;
  height: 160vh;
  transform-origin: bottom center;
  transform: rotateX(74deg);
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 39px,
      rgba(120, 200, 255, 0.18) 39px,
      rgba(120, 200, 255, 0.18) 41px),
    repeating-linear-gradient(90deg,
      transparent,
      transparent 39px,
      rgba(120, 200, 255, 0.18) 39px,
      rgba(120, 200, 255, 0.18) 41px);

  background-size: 40px 40px;
  opacity: 0.92;
  mask-image: linear-gradient(to top, black 20%, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, black 20%, transparent 70%);
  filter: drop-shadow(0 0 4px rgba(100, 190, 255, 0.4));
}

/* HOME page Counter section css start */
.uffizio-counter-wrapper .elementor-counter-number-wrapper {
  /* position: relative; */
  border-bottom: 1px solid;
  border-image-source: linear-gradient(to right, #0057ff, #fff);
  padding-bottom: 13px;
  border-image-slice: 1;
}

.uffizio-counter-wrapper.text-white .elementor-counter-number-wrapper {
  width: 50%;
  border-image-source: linear-gradient(to right, #6fb8ff, #00488e);
}

.elementor-counter .elementor-counter-title {
  line-height: 1.5;
}

/* HOME page Counter section css end */


.product-page.uffizio-gradient-pattern-two {
  padding-block-start: 30px;
  padding-block-end: 30px;
  border-radius: 20px !important;

  background:

    repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.25) 0px,
      rgba(255, 255, 255, 0.25) 1px,
      transparent 1px,
      transparent 40px),

    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.25) 0px,
      rgba(255, 255, 255, 0.25) 1px,
      transparent 1px,
      transparent 40px),

    linear-gradient(to bottom,
      #030f24 0%,
      #093564 100%);

  background-size: 100% 100%;
  background-repeat: repeat;
}

.product-page.uffizio-gradient-pattern-three {
  border-radius: 20px !important;

  background:
    repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px,
      transparent 40px),
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px,
      transparent 40px),

    linear-gradient(to bottom,
      #2091ff 0%,
      #5fabf8 100%);

  background-size: 100% 100%;
  background-repeat: repeat;
}

/* ============================== */
/* pattern four */
/* ============================== */
.uffizio-gradient-pattern-four {
  width: 100%;
  min-height: 900px;
  position: relative;
  overflow: hidden;
  background-color: #000000;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 100% 0%, rgba(30, 144, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 0% 90%, rgba(30, 144, 255, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 65% 70%, rgba(30, 144, 255, 0.15) 0%, transparent 30%),
    linear-gradient(to bottom, #000000 0%, #0c2753 100%);
  background-size: 59px 52px, 59px 52px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.uffizio-gradient-pattern-four::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.uffizio-gradient-pattern-five {
  border-radius: 20px !important;
  /* The base dark blue color */
  background-color: #051221;

  /* Layer 1: Top-Left Light | Layer 2: Bottom-Right Light | Layer 3 & 4: Grid Lines */
  background-image:
    radial-gradient(circle at 10% 10%, rgba(30, 136, 229, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(30, 136, 229, 0.25) 0%, transparent 40%),
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  /* Grid size (30px) and lights span the whole area (100%) */
  background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px;
  width: 100%;
  height: 100%;

}

@media (max-width: 1024px) {
  .uffizio-gradient-pattern-four {
    min-height: 600px;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      radial-gradient(circle at 100% 0%, rgba(30, 144, 255, 0.2) 0%, transparent 60%),
      radial-gradient(circle at 0% 100%, rgba(30, 144, 255, 0.15) 0%, transparent 60%),
      linear-gradient(to bottom, #000000 0%, #0c2753 100%);
    background-size: 45px 40px, 45px 40px, 100% 100%, 100% 100%, 100% 100%;
  }
}

@media (max-width: 768px) {
  .uffizio-gradient-pattern-four {
    min-height: 500px;
    background-size: 30px 26px, 30px 26px, 100% 100%, 100% 100%, 100% 100%;
  }

  .uffizio-gradient-pattern-four::before {
    background: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.7) 100%);
  }
}



.elementor-element.uffizio-product-rating {
  display: grid !important;
  grid-template-columns: 224px 283px 350px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  justify-content: center !important;
  gap: 15px !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* For tablets */
@media (max-width: 1024px) {
  .elementor-element.uffizio-product-rating {
    grid-template-columns: 224px 283px !important;
    gap: 12px !important;
    justify-content: center !important;
  }

  .elementor-element.uffizio-product-rating> :nth-child(3) {
    grid-column: 1 / 3;
    justify-self: center;
  }
}

/* For small tablets / large phones */
@media (max-width: 767px) {
  .elementor-element.uffizio-product-rating {
    grid-template-columns: 190px 240px !important;
    /* corrected values */
    gap: 10px !important;
    justify-content: center !important;
  }

  .elementor-element.uffizio-product-rating> :nth-child(3) {
    grid-column: 1 / 3;
    justify-self: center;
  }

  .site-header .custom-logo-link,
  .site-header .site-logo img {

    height: auto;

  }

  /* Remove hiding all children */
  /* .elementor-element.uffizio-product-rating > *, .header-contact { display: none; } */
}


.uffizio-share-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
}

.share-icons {
  display: flex;
  gap: 10px;
}

.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  /* This controls the SVG color */
  transition: transform 0.2s ease;
  text-decoration: none;
}

/* Ensure SVG fills the button properly */
.share-btn svg {
  display: block;
}

.share-btn:hover {
  transform: scale(1.1);
}

/* Colors */
.fb {
  background-color: #1877F2;
}

.x-com {
  background-color: #000000;
}

.linkedin {
  background-color: #0077b5;
}


/* UFFIZIO LIST ICON */
.uffizio-list-icon,
#features td ul li {
  /* display: flex; */
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  position: relative;
  padding-left: 28px;
}

.uffizio-list-icon::before,
#features td ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath fill='%230057ff' stroke='%230057ff' stroke-width='.5' d='M13.85 2.171a.527.527 0 0 0-.746 0L6.774 8.5 4.49 6.013a.527.527 0 0 0-.746-.031.53.53 0 0 0-.03.747l2.655 2.892a.53.53 0 0 0 .377.17h.012c.14 0 .273-.055.372-.153l6.719-6.719a.53.53 0 0 0 0-.748Z'/%3E%3Cpath fill='%230057ff' stroke='%230057ff' stroke-width='.5' d='M13.722 6.74a.53.53 0 0 0-.527.528c0 3.287-2.667 5.96-5.945 5.96s-5.945-2.673-5.945-5.96 2.667-5.96 5.945-5.96a.528.528 0 0 0 0-1.058c-3.86 0-7 3.148-7 7.018s3.14 7.018 7 7.018 7-3.148 7-7.018a.53.53 0 0 0-.528-.529Z'/%3E%3C/svg%3E");
  background-size: 15px;
  background-repeat: no-repeat;
}


/*******************************
RESPONSIVE
********************************/

@media (max-width: 782px) {
  body.admin-bar {
    min-height: calc(100vh - 46px);
  }
}

/*
3. RESPONSIVE TYPOGRAPHY
*/
@media (max-width:1024px) {
  h1 {
    font-size: 3rem
  }

  h2 {
    font-size: 2rem
  }

  h3 {
    font-size: 1.5rem
  }

  .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .uffizio-footer-top.uffizio-grid-5 {
    grid-template-columns: 15% 13% 27% 10% 30%;
  }
}

@media (max-width:768px) {
  h1 {
    font-size: 2.2rem
  }

  h2 {
    font-size: 1.5rem
  }

  h3 {
    font-size: 1.25rem
  }

  h4 {
    font-size: 1.1rem
  }

  h5 {
    font-size: 1rem
  }

  h6 {
    font-size: .9rem
  }

  p {
    font-size: .95rem
  }

  body {
    font-size: .95rem
  }

  /* Ensure buttons and inputs fit small screens */
  button,
  input,
  select,
  textarea {
    padding: .4rem .8rem;
    font-size: .95rem
  }

  /* Optional wrappers */
  .container,
  .content,
  /* .elementor-widget, .elementor>.elementor-element*/
  .case-study {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width:1200px) {

  .site-header .header-inner,
  .site-header:not(.dynamic-header),
  body:not([class*=elementor-page-]) .site-main {
    max-width: 1360px
  }
}

@media (max-width:1024px) {
  .site-logo img.custom-logo {
    width: 180px;
    height: auto
  }
}

@media (max-width:768px) {
  .site-logo img.custom-logo {
    width: 140px;
    height: auto
  }
}

@media (max-width: 1366px) {

  .uffizio-header,
  .footer-container {
    padding-left: 30px;
    padding-right: 30px;
  }

}

@media (max-width: 768px) {

  .uffizio-header {
    padding-left: 25.5px;
    padding-right: 25.5px;
  }

  .uffizio-header.sticky-header {
    top: -1px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: none !important;
  }
}

/* Mobile menu */
@media (max-width:992px) {

  .uffizio-mobile-menu {
    display: block;
  }

  .header-contact {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
    align-items: center
  }

  .site-header.header-stacked .mobile-menu-toggle {
    justify-content: center
  }

  .mobile-toggle-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    border-radius: 3px;
    border: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent !important
  }

  .mobile-toggle-icon {
    display: block;
    width: 1.25rem;
    border-radius: 3px;
    position: relative;
    transition: all .2s ease-in-out
  }

  .mobile-toggle-icon::before,
  .mobile-toggle-icon::after {
    content: "";
    display: block;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    transition: all .2s ease-in-out
  }

  .mobile-toggle-icon::before {
    box-shadow: 0 .35rem 0 currentColor;
    margin-bottom: .5rem
  }

  .mobile-toggle-button[aria-expanded="true"] .mobile-toggle-icon::before {
    transform: translateY(.35rem) rotate(45deg);
    box-shadow: none
  }

  .mobile-toggle-button[aria-expanded="true"] .mobile-toggle-icon::after {
    transform: translateY(-.35rem) rotate(-45deg)
  }

  /* Dropdown for toggle */
  .mobile-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    transform-origin: top;
    transition: max-height .3s, transform .3s;
    z-index: 10000;
    max-height: 0;
    transform: scaleY(0);
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu-toggle.elementor-active+.mobile-navigation {
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    transform: scaleY(1);
  }

  .mobile-navigation ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #fff
  }

  .mobile-navigation ul.menu li {
    display: block;
    position: relative
  }

  .mobile-navigation ul.menu li a {
    display: block;
    padding: 17px;
    color: #55595c;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .102);

  }

  ul.sub-menu {
    margin-left: 25px;
  }

  .mobile-navigation ul:not(.sub-menu)>li>a {
    font-weight: bold;
  }

  .mobile-navigation ul.menu li.current-menu-item a {
    color: var(--uffizio-color-accent)
  }

  .mobile-navigation ul.menu>li li {
    max-height: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height .3s, transform .3s
  }

  .mobile-navigation ul.menu li.menu-item-open>ul>li {
    max-height: 100vh;
    transform: scaleY(1)
  }

  .menu .menu-item-has-children>a::after {
    content: "+";
    float: right;
    font-weight: bold;
    margin-right: 4%;
  }

  .menu .menu-item-has-children.menu-item-open>.sub-menu,
  .menu .menu-item-has-children:hover>.sub-menu {
    display: block
  }

  .menu .menu-item-has-children.menu-item-open>a::after {
    content: "-"
  }

  .menu li {
    position: relative
  }
}

@media (min-width:768px) {
  .site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .mobile-menu-toggle {
    display: none !important
  }
}

@media (min-width:992px) {
  .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .mobile-menu-toggle {
    display: none !important
  }
}

@media (min-width:576px) and (max-width:767px) {
  .site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation {
    display: none !important
  }
}

@media (max-width:992px) {
  .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation {
    display: none !important
  }
}

@media (max-width:576px) {

  .site-header:not(.header-stacked) .site-navigation,
  .site-header.menu-dropdown-mobile:not(.menu-layout-dropdown) .site-navigation {
    display: none !important
  }

  .product-detail .fa-css-arrow-circle {
    --size: 14px;
  }
}


/* Per-breakpoint adjustments for submenu indicator positioning */
@media (max-width:575px) {
  .uffizio-mega-menu .menu-item-has-children>a::after {
    right: 27px;
    position: absolute
  }
}

@media (min-width:576px) {
  .uffizio-mega-menu .menu-item-has-children>a::after {
    right: 27px;
    position: absolute
  }
}

@media (min-width:768px) {
  .uffizio-mega-menu .menu-item-has-children>a::after {
    right: 26px;
    position: absolute
  }

  .footer-help-section {
    background-color: var(--uffizio-bg-light);
  }
}

@media (min-width:992px) {
  .uffizio-mega-menu .menu-item-has-children>a::after {
    right: 15px;
    position: absolute
  }

  .footer-help-section {
    background-color: var(--uffizio-bg-light);
  }

}


/* help section */
@media (max-width:768px) {
  .help-row {
    grid-template-columns: 1fr;
    row-gap: 20px
  }

  .footer-help-section .help-subtitle {
    font-size: 1rem;
  }

}

@media (max-width: 1024px) {
  .footer-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* Footer mobile accordion for columns with .footer-menu */
@media (max-width: 768px) {

  .uffizio-footer-top.uffizio-grid-4,
  .uffizio-footer-top.uffizio-grid-5 {
    display: flex !important;
    flex-direction: column;
    width: 100%;
  }

  .footer-help-section {
    padding: 50px 25.5px;
  }

  .uffizio-footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 40px 20px
  }

  .footer-column:has(.footer-menu) {
    width: 100%;
    text-align: left
  }

  .footer-column:has(.footer-menu) .footer-title {
    cursor: pointer;
    position: relative;
    font-size: 18px;
    margin-bottom: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none
  }

  .footer-column:has(.footer-menu) .footer-title::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 20px;
    transition: transform .3s
  }

  .footer-column:has(.footer-menu).active .footer-title::after {
    content: '-'
  }

  .footer-column:has(.footer-menu) .footer-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    padding: 0 20px;
    margin: 0
  }

  .footer-column:has(.footer-menu).active .footer-menu {
    max-height: 500px;
    margin-top: 10px
  }

  .footer-column:has(.footer-menu) .footer-menu li {
    margin: 8px 0
  }

  .footer-column:has(.footer-menu) .footer-menu li a {
    display: inline-block;
    color: var(--uffizio-text-white);
    transition: color .3s
  }

  .footer-column:has(.footer-menu) .footer-menu li a:hover {
    color: #ffcc00
  }

  .uffizio-footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 10px 0 20px;
    text-align: center;
  }

  .footer-bottom-menu .menu-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px
  }

  .uffizio-footer p.copyright-text {
    font-size: 14px
  }

  .footer-column:last-child,
  .footer-column {
    text-align: center
  }

  .footer-bottom-menu .menu-wrapper li+li::before {
    content: "|";
    color: var(--uffizio-text-white);
    margin: 0 7px
  }

  .footer-bottom-menu {
    font-size: 11px
  }

  .footer-column.col-4 {
    margin-top: 20px
  }

  .footer-column.col-5 {
    margin-top: 25px
  }

  .footer-logo {
    margin-bottom: 1.5em
  }
}


@media (max-width: 480px) {

  .uffizio-header {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-help-section {
    padding: 50px 20px;
  }

  .help-btn {
    grid-template-columns: 20px auto;
    font-size: 1rem;
    padding: .4rem .6rem
  }

  .elementor-element.uffizio-product-rating {
    display: grid !important;
    --e-con-grid-template-columns: 145px 190px !important;
    /* Elementor variable */
    grid-template-columns: 145px 190px !important;
    gap: 1px !important;
    justify-content: center !important;
  }

  .elementor-element.uffizio-product-rating>* {
    min-width: 0 !important;
  }

  .elementor-element.uffizio-product-rating .rate-three {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .product-page.uffizio-gradient-pattern-two {
    /* margin-inline: 16px; */
    padding-block: 10px !important;
  }

  .product-page.uffizio-gradient-pattern-two .uffizio-title-widget,
  .product-page.uffizio-gradient-pattern-three .uffizio-title-widget {
    padding-inline: 16px;
    margin-bottom: 10px;
  }

  .product-page.uffizio-gradient-pattern-three .uffizio-title-widget {
    padding-inline: 0px;
  }

  .product-page.uffizio-gradient-pattern-two .uffizio-subtitle,
  .product-page.uffizio-gradient-pattern-three .uffizio-subtitle {
    line-height: 23px;
    font-size: 16px;
  }

  .uffizio-feature-video-link {
    margin-top: 0px;
  }

}