/* 
 Theme Name:   Maxman
 Theme URI:    https://www.haipeweb.ro/
 Description:  Railway components
 Author:       Diana Nechita
 Author URI:   https://www.haipeweb.ro/
 Template:     hello-elementor
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

h1 { font-size: clamp(56px, 7.4vw, 120px) !important; }
h2 {     font-size: clamp(40px, 5.2vw, 82px) !important; }


.mxmbg:after {
    content: "MAXMAN";
    color: rgba(255, 255, 255, 0.043);
    letter-spacing: -0.07em;
    font-size: 18vw;
    font-weight: 800;
    line-height: 1;
    position: absolute;
    bottom: -30px;
    right: 0;
}

.time-list:before {
    content: "";
    background: #E10010;
    width: 3px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 11px;
}

.mxmstr b {
    color: #e10010;
    text-transform: uppercase;
    font-family: 'IBM Plex Mono';
    font-weight: 400;
    width: 150px;
    display: inline-block;
}
.mxmstr span.elementor-icon-list-icon {
    display: none !important;
}

.lite-bg {
        background-image: linear-gradient(#34398d1c 1px, #0000 1px), linear-gradient(90deg, #34398d1c 1px, #0000 1px);
    background-size: 56px 56px;
    background-color: #fff;
}

.prod-li ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prod-li ul li {
  position: relative;
  padding-left: 1.75em;
  margin-bottom: 0.5em;
  line-height: 1.5;
      padding-top: 20px;
    padding-bottom: 20px;
}
.prod-li ul li:after {
    content: " ";
    background: #000;
    width: 80%;
    height: 0.5px;
    display: block;
    position: absolute;
    top: 70px;
    left: -5px;
}

.prod-li ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;                       /* nudge to align with first text line */
  width: 1em;
  height: 1em;
  background-color: var(--e-global-color-accent); 
  -webkit-mask: var(--prod-icon) no-repeat center / contain;
          mask: var(--prod-icon) no-repeat center / contain;
}

.prod-li {
  --prod-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z'/%3E%3C/svg%3E");
}


/* labels */
.mxm-form .ff-el-input--label {
  margin-bottom: 10px;
}
.mxm-form .ff-el-input--label label {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 500;
  color: #8b93a7;
}

/* inputs and textarea: underline only */
.mxm-form .ff-el-form-control {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  padding: 10px 0;
  font-size: 15px;
  width: 100%;
}
.mxm-form .ff-el-form-control::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.mxm-form .ff-el-form-control:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: #e10010;
}
.mxm-form textarea.ff-el-form-control {
  resize: vertical;
  min-height: 120px;
}

/* GDPR checkbox row */
.mxm-form .ff_tc_label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.mxm-form .ff_tc_checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #e10010;
}
.mxm-form .ff_t_c {
  color: #c3c8d4;
  font-size: 14px;
}

/* submit: release the forced full width so it sits left like the mockup */
.mxm-form form.fluent_form_1 .wpf_has_custom_css.ff-btn-submit, .mxm-form form.fluent_form_1 .wpf_has_custom_css.ff-btn-submit:hover {
  min-width: auto;
  padding: 16px 34px;
  letter-spacing: 0.04em;
}

.tilt-img img {
    transform-origin: 50% center;
    transform: rotateY(0deg) rotateX(0deg);
    box-shadow: rgba
#080d233d
(8, 13, 35, 0.24) 0px 30px 65px;
    transition: transform 0.38s, box-shadow 0.38s;
}

.tilt-img:hover img {
    transform: rotateY(-7deg) rotateX(2deg) translateY(-8px);
    box-shadow: rgba(8, 13, 35, 0.28) 28px 34px 80px;
}

/* MAXMAN brochure stack */
.brochure-stack {
    position: relative !important;
    display: block !important;
    width: 100%;
    min-height: 640px;
    overflow: visible !important;
    perspective: 1300px;
}

.brochure-stack > .elementor-widget-image {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: min(310px, 31vw) !important;
    max-width: none !important;
    margin: 0 !important;
    aspect-ratio: 3 / 4;
    transform-style: preserve-3d;
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
    will-change: transform;
}

.brochure-stack .elementor-widget-container {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.brochure-stack img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    box-shadow: 0 28px 62px rgba(5, 8, 18, 0.4);
}

/* Individual brochure positions */
.brochure-stack > .elementor-widget-image:nth-child(1) {
    z-index: 1;
    transform: translate(-90%, -48%) rotate(-9deg);
}

.brochure-stack > .elementor-widget-image:nth-child(2) {
    z-index: 3;
    transform: translate(-48%, -53%) rotate(2deg);
}

.brochure-stack > .elementor-widget-image:nth-child(3) {
    z-index: 2;
    transform: translate(0, -46%) rotate(10deg);
}

@media (min-width: 700px) {
.e-loop-item:nth-child(even of .e-loop-item) .altr-row {
  --flex-direction: row-reverse;
  flex-direction: row-reverse;
}
}

/* Desktop hover movement */
@media (hover: hover) {
    .brochure-stack > .elementor-widget-image:nth-child(1):hover {
        z-index: 5;
        transform: translate(-90%, -53%) rotate(-6deg);
    }

    .brochure-stack > .elementor-widget-image:nth-child(2):hover {
        z-index: 5;
        transform: translate(-48%, -58%) rotate(0);
    }

    .brochure-stack > .elementor-widget-image:nth-child(3):hover {
        z-index: 5;
        transform: translate(0, -51%) rotate(7deg);
    }
}

@media (max-width: 1000px) {
    .menu-fix nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: absolute;
    right: 10px;
    top: 40px;
}
}