.section-spacing { padding-top: 120px; padding-bottom: 120px; }
@media only screen and (max-width: 1919px) { .section-spacing { padding-top: 100px; padding-bottom: 100px; } }
@media only screen and (max-width: 1399px) { .section-spacing { padding-top: 80px; padding-bottom: 80px; } }
@media only screen and (max-width: 1199px) { .section-spacing { padding-top: 60px; padding-bottom: 60px; } }

.section-spacing-top { padding-top: 120px; }
@media only screen and (max-width: 1919px) { .section-spacing-top { padding-top: 100px; } }
@media only screen and (max-width: 1399px) { .section-spacing-top { padding-top: 80px; } }
@media only screen and (max-width: 1199px) { .section-spacing-top { padding-top: 60px; } }

.section-spacing-bottom { padding-bottom: 120px; }
@media only screen and (max-width: 1919px) { .section-spacing-bottom { padding-bottom: 100px; } }
@media only screen and (max-width: 1399px) { .section-spacing-bottom { padding-bottom: 80px; } }
@media only screen and (max-width: 1199px) { .section-spacing-bottom { padding-bottom: 60px; } }

.container { --bs-gutter-x: 30px; max-width: 1350px; }
@media (min-width: 1600px) {
  .container.full-hd { max-width: 1920px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
}

.text-invert > div {
  background-image: linear-gradient(to right, var(--primary) 50%, #CDC9C6 51%);
  background-size: 200% 100%; background-position-x: 100%; color: transparent; background-clip: text; -webkit-background-clip: text;
}

.offcanvas-overlay {
  position: fixed; height: 100%; width: 100%; background: #000; z-index: 900; top: 0; right: 0; opacity: 0; visibility: hidden; transition: all 0.5s;
}
.offcanvas-overlay.overlay-open { opacity: 0.5; visibility: visible; }

.side-info-close {
  font-size: 20px; padding: 0; transition: all 0.3s linear; background-color: transparent; color: var(--black); width: 40px; height: 40px; border: 1px solid var(--black); border-radius: 50%; line-height: 38px;
}
.dark .side-info-close { border-color: var(--white); color: var(--white); }
.side-info-close:hover { transform: rotate(90deg); }

.side-info {
  background: var(--white) none repeat scroll 0 0; padding: 40px 45px; position: fixed; right: 0; top: 0; width: 500px; height: 100%; transform: translateX(calc(100% + 80px)); transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; z-index: 9999; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none;
}
.dark .side-info { background-color: #1F1F1F; }
@media only screen and (max-width: 1199px) { .side-info { width: 460px; } }
@media (max-width: 575px) { .side-info { width: 100%; padding: 30px 20px; } }
.side-info ::-webkit-scrollbar { display: none; }
.side-info.info-open { opacity: 1; transform: translateX(0); }

.offset-header { display: flex; justify-content: space-between; align-items: center; }
.offset-logo { width: 120px; }
@media (max-width: 575px) { .offset-logo { width: 95px; } }
.offset-logo img { width: 100%; }
.offset-button { margin-top: 40px; }
@media (min-width: 576px) { .offset-button { display: none; } }