/*------------------------------------------------------------------*\
    5. Pages - Services
\*------------------------------------------------------------------*/

/* Subtitle vertical */
.miv-subtitle {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Icon list — text and icon fluid */

.section-icon-list .elementor-heading-title {
    font-size: var(--fluid-step-title) !important;
}

.section-icon-list .elementor-icon-list-text {
    font-size: var(--fluid-step-desc) !important;
}

.section-icon-list .elementor-icon-list-icon {
    font-size: var(--fluid-step-desc) !important;
}

.section-icon-list .elementor-icon-list-icon svg {
    width: clamp(0.4271rem, 0.6771vw, 1.625rem) !important;   /* 6.83px @390 → 13px @1920 → 26px @3840 */
    height: clamp(0.4922rem, 0.7813vw, 1.875rem) !important;  /* 7.88px @390 → 15px @1920 → 30px @3840 */
}


/* Highlight text */
.services-highlight-text {
    color: var(--color-accent);
}

/* Page overflow */
.page-template-default {
    overflow-x: hidden;
}

/* Card container */


.uc_box_content {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 247px;
        padding: 85px 24px 103px;
        box-sizing: border-box;
        justify-content: start;
}

@media screen and (min-width: 1025px) {
    .uc_box_content {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 400px;
        padding: 85px 24px 103px;
        box-sizing: border-box;
        justify-content: start;
        gap: 14px;
    }
}

.uc_title {
    --uc-title-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-size: var(--uc-title-size);
    font-weight: 700;
}

@media screen and (max-width:767px) {
    .uc_title {
        width: 80%;
    }
}

/* Hidden content - next to title */
.uc_hidden_content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 90%;
}

/* Description */
.uc_description {
    line-height: 1.6;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

/* Description animation on hover */
.uc_box_content:hover .uc_description {
    transform: translateY(0);
}

/* Button + arrow container - fixed 85px from bottom */


.ue_btn_container {
    position: absolute;
    bottom: 29px;
    left: 35px;
}

@media screen and (min-width: 1025px) {
    .ue_btn_container {
        position: absolute;
        bottom: 85px;
        left: 141.92px;
    }
}

/* Button */
.uc_btn {
    text-decoration: none;
    font-weight: 500;
}

/* Arrow with circle - positioned right side of card, aligned with button */

.uc_box_content::after {
        content: "";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 49px;
        height: 49px;
        border: 2px solid #CCCCCC;
        border-radius: 50%;
        background-image: url('/makeitvisually/wp-content/uploads/2026/02/service-arrow-right-icon.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px 15px;
        font-size: 20px;
        transition: all 0.3s ease;
    }

.uc_box_content::after {
    position: absolute;
    bottom: 25px;
    right: 65px;
}

@media screen and (min-width: 1025px) {
    .uc_box_content::after {
        position: absolute;
        bottom: 85px;
        right:65px;
    }
}

@media screen and (min-width: 1025px) {
    .uc_box_content::after {
        position: absolute;
        right: 141.92px;
        bottom: 85px;
    }
}

@media screen and (max-width: 767px) {
    .uc_long_content_box_holder .uc_long_content_box_box .uc_box_content .uc_hidden_content {
        overflow: visible !important;
    }
}

/* Arrow hover */
.uc_box_content:hover::after {
    background-color: var(--e-global-color-primary);
    background-size: 15px 15px;
    color: #fff;
    border-color: var(--e-global-color-primary);
}

/* Disable hover effect on hidden content */
.uc_long_content_box_holder .uc_long_content_box_box .uc_box_content .uc_hidden_content {    
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    transition: none !important;
}

/* Overlay with multiply effect */
.uc_overlay {
    mix-blend-mode: multiply;
}

/* Step connection lines */
.section-steps > .e-con-inner {
  position: relative;
}

@media screen and (max-width:767px) {
    .section-steps .e-con-inner:first-child::before {
        content: '';
        position: absolute;
        top: 15px !important;
        left: -100vw; /* Extends outside container to the left */
        right: calc(100% - 35px) !important; /* Ends before the number */
        height: 2px;
        background-color: var(--color-accent);
        z-index: 0;
    }  
    
    .section-steps .e-con::after {
    }
}

.section-steps .e-con-inner:first-child::before{
    content: '';
    position: absolute;
    top: 45px;
    left: -100vw; /* Extends outside container to the left */
    right: calc(100% + 25px); /* Ends before the number */
    height: 2px;
    background-color: var(--color-primary);
    z-index: 0;
}

.section-steps .e-con {
    --steps-gap: 5px; /* column gap set in Elementor */
}

.section-steps .e-con::after {
    content: '';
    position: absolute;
    top: 45px;
    left: 24%;
    right: calc(-10% - var(--steps-gap));
    height: 2px;
    background-color: var(--color-primary);
    z-index: 0;
}

.section-steps .e-con:last-child::before {
  display: none;
}

.section-steps .e-con:last-child::after {
  display: none;
}

.section-steps .elementor-icon-box-icon {
  position: relative;
  z-index: 1;
}

/* Step card hover */
.card-step {
    display: flex;
    flex-direction: column;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Push only the form to the bottom of the card */
.card-step > .e-con:has(.elementor-widget-form),
.card-step > .elementor-widget-form {
    margin-top: auto;
}

/* 90px gap below the second child of the card */
.card-step > .e-con:nth-child(2) {
    margin-bottom: 90px;
}

.card-step :is(.elementor-heading-title, .elementor-icon-box-title) {
    transition: color 0.35s ease;
}

.card-step .elementor-icon-box-icon {
    transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
    .card-step:hover {
        transform: scale(1.12);
    }

    .card-step:hover :is(.elementor-heading-title, .elementor-icon-box-title) {
        color: var(--color-accent);
    }

    .card-step:hover .elementor-icon-box-icon {
        color: var(--color-accent);
        transform: scale(1.08);
    }
}

@media screen and (min-width: 1367px) {
    .section-steps .elementor-icon-box-description {
        width: 90%;
    }
}

/* ---- Mobile ≤768px ---- */
@media (max-width: 768px) {

    .uc_box_content {
        padding: 17px 20px;
    }

    .uc_btn {
        font-size: 9px;
    }

    .uc_box_content::after {
        width: 19px;
        height: 19px;
        background-size: 8px 8px;
    }

    /* Hide desktop step lines */
    .section-steps .e-con-inner:first-child::before,
    .section-steps .e-con::after {
        display: none;
    }

    /* Clip step lines within viewport */
    .section-steps,
    .section-steps > .e-con-inner,
    .section-steps > .e-con-inner > .e-con {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    /* Odd steps (01, 03, 05): line to the LEFT */
    .section-steps > .e-con-inner > .e-con:nth-child(odd) .elementor-icon-box-icon::before {
        content: '';
        position: absolute;
        top: 50%;
        right: calc(100% + 16px);
        width: 48vw;
        height: 2px;
        background-color: var(--color-accent);
    }

    /* Even steps (02, 04, 06): line to the RIGHT */
    .section-steps > .e-con-inner > .e-con:nth-child(even) .elementor-icon-box-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: calc(100% - 146px);
        width: 48vw;
        height: 2px;
        background-color: var(--color-accent);
    }
}

/* Base .services-highlight-title lives in components/highlight-title.css */

.service-heading .elementor-heading-title {
    display: flex;
    gap: 10px;
}

.section-steps .elementor-icon svg {
    transition: transform 0.6s ease;
}

.section-steps .elementor-icon svg path {
    transition: fill 0.6s ease;
}

.section-steps .elementor-icon:hover svg {
    transform: translateY(-6px);
}

.section-steps .elementor-icon:hover svg path {
    fill: var(--color-accent);
}

.section-intro h3.elementor-heading-title::before {
    content: "";
    display: inline-block;
    width: 0.14em;
    height: 0.11em;
    margin-right: 0.12em;
    vertical-align: baseline;
    background-color: var(--color-accent);
}