/*
Theme Name: lavina Child
Theme URI: https://aqlix.com/
Template: lavina
Author: Aqlix IT Solutions
Author URI: https://aqlix.com/
Description: Aqlix IT Solutions
Tags: custom-background,custom-logo,custom-menu,featured-images,threaded-comments,translation-ready
Version: 1.0.0.1789973727
Updated: 2026-09-21 06:55:27

*/

/* Accordion wrapper */
/* =========================================
   PREVENT PAGE SCROLL JUMP ON HOVER
========================================= */

.service-grid {
    overflow-anchor: none;
}

.service {
    overflow-anchor: none;
    scroll-margin: 0 !important;
}

.service-content {
    overflow-anchor: none;
}
.work-accordion {
    width: 100%;
}
.mt-100 {
    margin-top: 100px;
}
.mb-0 {
    margin-bottom: 0;
}
/* Accordion item */
.work-accordion-item {
    width: 100%;
    border-bottom: 1px solid var(--line);
}

/* Clickable row */
.work-accordion .work-accordion-trigger {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1.5fr 1fr 1.2fr 24px;
    align-items: center;
    gap: 20px;

    padding: 24px 0;
    margin: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Remove default button styling */
.work-accordion-trigger:focus {
    outline: none;
}

.work-accordion-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Arrow animation */
.work-accordion-trigger .row-arrow {
    display: inline-block;
    text-align: center;
    transition: transform 0.3s ease;
}
/* Accordion panel */
.work-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.35s ease,
        opacity 0.3s ease;
}

/* Open panel */
.work-accordion-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Panel content */
.work-accordion-content {
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

/* Open content spacing */
.work-accordion-panel.is-open .work-accordion-content {
    padding-bottom: 28px;
}

/* Links inside panel */
.work-accordion-content a {
    display: inline-block;
    margin-top: 10px;
}
section.wide.hero.inner-hero {
    padding-top: 0;
    max-height: 610px;
	overflow: hidden;
	    border-radius: 12px;
}
section.wide.hero.inner-hero {
    position: relative;
}

section.wide.hero.inner-hero:after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #372838cb, #37283835);
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
}
section.wide.hero.inner-hero {
	margin-top: 0;
}
.hero-data {
    position: absolute;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 0 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
section.wide.hero.inner-hero img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    max-height: 610px;
}
section.wide.hero.inner-hero img.hero-image {
    margin: 0;
}
header.header.inner-pages-header {
    padding: 28px 14px 20px 26px;
}
.hero-content {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 70px;
    align-items: start;
}
.hero-content .label {
    margin-bottom: 25px;
    display: block;
    color: #ffd6ca;
    text-transform: uppercase;
}
.hero-content h1 {
    font-size: clamp(45px, 4.9vw, 76px);
    line-height: 1.03;
    max-width: 750px;
    color: #FFFCF5;
    padding: 0;
    margin: 0;
}

.hero-content h1 span {
    color: var(--coral);
}
.hero-description {
    max-width: 280px;
    padding-top: 42px;
    font-size: 16px;
    line-height: 1.6;
	    color: var(--paper);
}
.wrap.hero-bottom {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 70px;
    align-items: center;
    margin-top: 70px;
}
.hero-index {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 12px;
	    color: var(--paper);
}
.hero-index:before {
    content: '';
    width: 33px;
    height: 1px;
    background: var(--coral);
}
a.text-link.white-btn {
    color: var(--paper);
    width: auto;
        width: fit-content;
    border-color: var(--paper);
}
.intro {
    padding: 95px 0 75px;
}
.intro-heading {
                display: flex;
                align-items: end;
                justify-content: space-between;
                gap: 40px;
                margin-bottom: 50px
            }

            .intro-heading h2 {
                font-size: clamp(37px,4vw,58px);
                line-height: 1.04;
                max-width: 660px
            }

            .intro-heading .label {
                display: block;
                color: var(--muted);
                margin-bottom: 20px
            }

            .text-link {
                display: inline-flex;
                gap: 25px;
                align-items: center;
                border-bottom: 1px solid var(--coral);
                padding: 10px 0;
                font-size: 16px;
                white-space: nowrap
            }

            .cards {
                display: grid;
                grid-template-columns: repeat(3,1fr);
                gap: 45px
            }

            .card {
                height: 365px;
                position: relative;
                isolation: isolate;
                transition: transform .35s
            }

            .card:hover {
                transform: translateY(-7px)
            }

            .card>img {
                position: absolute;
                right: 0;
                top: 0;
                width: 67%;
                height: 100%;
                object-fit: cover;
                border-radius: 9px
            }

            .card-face {
                position: relative;
                width: 53%;
                height: 100%;
                padding: 28px 23px;
                background: var(--ink);
                color: var(--paper);
                border-radius: 9px;
                display: flex;
                flex-direction: column;
                justify-content: space-between
            }

            .card-face svg {
                width: 44px;
                height: 44px;
                fill: none;
                stroke: var(--coral);
                stroke-width: 1
            }

            .card-face h3 {
                font-size: 24px;
                line-height: 1.09;
                letter-spacing: -.035em;
                margin-top: 11px
            }

            .card-face .label {
                font-size: 11px;
                color: #d4bfcc
            }

            .card-arrow {
                position: absolute;
                right: 20px;
                bottom: 23px;
                background: var(--paper);
                border-radius: 50%;
                width: 34px;
                height: 34px;
                display: grid;
                place-items: center;
                font-size: 20px
            }

            .showcase {
                position: relative;
                height: 360svh;
                background: var(--paper)
            }

            .stage {
                position: sticky;
                top: 0;
                height: 100svh;
                min-height: 620px;
                overflow: clip;
                display: flex;
                flex-direction: column;
                justify-content: center
            }

            .stage-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-top: 1px solid var(--line);
                padding-top: 20px;
                position: absolute;
                top: 35px;
                left: 0;
                right: 0
            }

            .stage-top .label {
                color: var(--muted)
            }

            .stage-count {
                font-size: 13px;
                letter-spacing: .05em
            }

            .stage-count span {
                color: #b47d73
            }

            .panels {
                position: relative;
                height: min(66vh,650px);
                margin-top: 35px
            }

            .panel {
                position: absolute;
                inset: 0;
                display: grid;
                grid-template-columns: 1fr 1.1fr;
                gap: 65px;
                align-items: center;
                pointer-events: none
            }

            .panel.active {
                pointer-events: auto
            }

            .service-art {
                width: 100%;
                aspect-ratio: 1;
                object-fit: contain;
                will-change: transform,opacity
            }

            .service-copy {
                will-change: transform,opacity
            }

            .service-copy .label {
                color: #af6258;
                margin-bottom: 21px;
                display: block
            }

            .service-copy h2 {
                font-size: clamp(40px,4.2vw,64px);
                line-height: 1.02;
                margin-bottom: 23px
            }

            .service-copy>p {
                font-size: 17px;
                line-height: 1.6;
                color: var(--muted);
                max-width: 480px;
                margin-bottom: 26px
            }

            .service-points {
                list-style: none;
                padding: 0;
                margin: 0;
                display: grid;
                gap: 12px
            }

            .service-points li {
                font-size: 15px;
                display: flex;
                gap: 12px;
                align-items: start
            }

            .service-points li:before {
                content: '↗';
                color: #b15f54
            }

            .service-copy .text-link {
                margin-top: 23px
            }

            .stage-bottom {
                position: absolute;
                bottom: 30px;
                left: 0;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 35px
            }

            .service-nav {
                display: flex;
                gap: 27px
            }

            .service-nav button {
                padding: 13px 0;
                border: 0;
                border-top: 2px solid var(--line);
                background: none;
                text-align: left;
                font-size: 12px;
                color: var(--muted);
                transition: color .2s,border-color .2s;
                min-width: 125px
            }

            .service-nav button.active {
                color: var(--ink);
                border-color: var(--ink)
            }

            .service-nav button span {
                color: #b47d73;
                margin-right: 8px
            }

            .scroll-note {
                font-size: 11px;
                letter-spacing: .09em;
                color: var(--muted)
            }

            .testimonial {
                position: relative;
                min-height: 510px;
                border-radius: 12px;
                overflow: hidden;
                isolation: isolate;
                display: grid;
                grid-template-columns: 1.1fr 1fr;
                gap: 80px;
                align-items: end;
                padding: 70px;
                color: var(--paper)
            }

            .testimonial:after {
                content: '';
                position: absolute;
                inset: 0;
                background: #37283844;
                z-index: -1
            }

            .testimonial .banner-image {
                object-position: center 70%
            }

            .quote-card {
                background: var(--ink);
                padding: 38px;
                border-radius: 8px;
                min-height: 255px;
                display: flex;
                flex-direction: column;
                justify-content: center
            }

            .quote-mark {
                font-size: 62px;
                color: var(--coral);
                line-height: .8;
                letter-spacing: -.12em;
                margin-bottom: 25px
            }

            .quote-card p {
                font-size: 18px;
                line-height: 1.5;
                max-width: 425px
            }

            .quote-card small {
                margin-top: 25px;
                color: #dbc4d0;
                font-size: 12px
            }

            .quote-card .placeholder {
                color: #ffbcaf;
                font-size: 10px;
                letter-spacing: .08em;
                text-transform: uppercase;
                margin-bottom: 12px
            }

            .testimonial h2 {
                font-size: clamp(39px,4.2vw,61px);
                line-height: 1.03;
                max-width: 420px
            }

            .testimonial-side>p {
                font-size: 14px;
                margin-top: 22px;
                max-width: 300px
            }

            .testimonial-bottom {
                margin-top: 32px;
                display: flex;
                align-items: end;
                justify-content: space-between;
                gap: 20px
            }

            .slide-dot {
                border: 1px solid #fffcf57a;
                width: 35px;
                height: 35px;
                border-radius: 50%;
                display: grid;
                place-items: center;
                font-size: 12px
            }

            .quote-word {
                font-size: 20px;
                letter-spacing: -.04em
            }

            .process {
                padding: 100px 0
            }
.wrap {
    width: calc(100% - 100px);
    max-width: 1110px;
    margin: auto;
}
.wide {
    width: calc(100% - 36px);
    max-width: 1550px;
    margin: auto;
}
.form-div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.page-form input {
    width: 100%;
    height: 55px;
    background: transparent;
    outline: none;
    border: 0;
    border-bottom: 1px solid #382838;
    margin-bottom: 20px;
    color: #382838;
    font-size: 16px;
}
.page-form textarea {
     width: 100%;
    height: 120px;
    background: transparent;
    outline: none;
    border: 0;
    border-bottom: 1px solid #382838;
    margin-bottom: 20px;
    color: #382838;
    font-size: 16px;
}
button.wpcf7-submit {
    border: 0;
    display: inline-flex;
    gap: 25px;
    align-items: center;
    border-bottom: 1px solid var(--coral);
    padding: 10px 0;
    font-size: 17px;
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
}

button.wpcf7-submit span {
    display: inline-block;
    transition: transform 0.2s ease;
}

button.wpcf7-submit:hover span {
    transform: translate(3px, -3px);
}
button.wpcf7-submit br {
    display: none;
}
section.map-area iframe {
    height: 600px;
    filter: brightness(70%) contrast(150%) saturate(0%) blur(0px) hue-rotate(100deg);
    width: 100%;
    border-radius: 20px;
}
.office-info-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.info-box {
    background: #ffe9df;
    color: var(--plum);
    padding: 20px;
    min-height: 200px;
    border-radius: 20px;
}
.form-div {
    align-items: end;
}
.info-box {
    margin-bottom: 20px;
}
.form-side {
    margin-left: 15%;
}
.info-label {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
}
.info-box a {
    display: block;
    margin-bottom: 10px;
}
.form-title {
    margin-bottom: 40px;
}
/* Responsive */
.convert-band {
    background: url(/wp-content/uploads/2026/10/band-bg.webp)no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 25px;
    padding: 50px 20px;
}

.convert-band-inner {
    display: flex;
    justify-content: center;
	align-items: center;
}
/* Circular Magnetic Button */
.biuro-default-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 140px;
    height: 140px;
    min-width: 140px;
    min-height: 140px;
    padding: 0;

    border-radius: 50%;
    background: #fffcf5;
    color: var(--coral);
    text-decoration: none;

    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;

    transition: color 0.4s ease;
    will-change: transform;
}
.contact-img {
    max-width: 500px;
    border-radius: 20px;
    overflow: hidden;
}
/* Button Background */
.button-deco {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border-radius: 50%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

/* White Fill - Bottom to Top */
.button-deco-filler {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background: var(--coral);
    border-radius: 50%;

    transform: scaleY(0);
    transform-origin: bottom center;

    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Hover Animation */
.biuro-default-button:hover .button-deco-filler {
    transform: scaleY(1);
}

/* Text Color */
.biuro-default-button:hover {
    color: #000000;
}

/* Button Text */
.button-text {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* Prevent unwanted link styling */
.biuro-default-button,
.biuro-default-button:hover,
.biuro-default-button:focus {
    text-decoration: none;
}
.section-heading.p-0 {
    padding: 0 !important;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .biuro-default-button,
    .button-deco-filler {
        transition: none;
    }
}
.biuro-title {
    font-size: min(112px, 4vw);
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -0.03em;
    color: #fffcf5;
}
.biuro-title.link-hover-wave a {
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.biuro-title.link-hover-wave .link-wave {
    position: absolute;
    padding: .01em 0;
    top: .04em;
    left: 0;
    right: initial;
    pointer-events: none;
    fill: none;
    stroke: currentColor;
    stroke-width: .02em;
    -webkit-transition: transform 0.7s cubic-bezier(0, .25, .5, 1);
    transition: transform 0.7s 
}
.biuro-title.link-hover-wave a:hover .link-wave {
    transform: translate3d(-66.6%, 0, 0);
}
.bottom-f-inner {
    display: flex;
    gap: 60px;
    justify-content: space-between;
}
.footer-label {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
}

.ftr-menu a {
    display: block;
    margin-bottom: 10px;
}
.footer-divider {
    background: var(--line);
    width: 100%;
    height: 1px;
    margin: 60px 0;
}
.ftr-menu {
    margin-bottom: 60px;
}
.footer-logo a {
    font-size: 50px;
}
.social-icons {
    display: flex;
    align-items: center;
    gap: 25px;
}

.social-icons a {
    font-size: 20px;
}
.real-identities img {
    background: #ffffff;
    padding: 14px;
    border-radius: 12px;
}
.video-container video {
    width: 100%;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
}
section.video-section .section-wrap {
    padding-bottom: 0;
}
.another-section-bg {
    background: #ffe9df;
}
.project-copy dt {
    color: #000000;
    font-weight: 700;
}

/* Word-by-word section heading animation */

.section-heading h2 .word,
.about-copy h2 .word,
.contact-title-wrap h2 .word {
    display: inline-block;
/*     overflow: hidden; */
    vertical-align: top;
}

.section-heading h2 .word-inner,
.about-copy h2 .word-inner,
.contact-title-wrap h2 .word-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(110%);
    will-change: transform, opacity;
}

.section-heading h2.is-visible .word-inner,
.about-copy h2.is-visible .word-inner,
.contact-title-wrap h2.is-visible .word-inner {
    animation: headingWordReveal 0.75s
        cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--word-delay, 0s);
}

@keyframes headingWordReveal {
    from {
        opacity: 0;
        transform: translateY(110%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .section-heading h2 .word-inner,
    .about-copy h2 .word-inner,
    .contact-title-wrap h2 .word-inner {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

}
.service-content p {
    min-height: 100px;
}
.copy-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}
.section-wrap.for-copy {
    padding-top: 0;
    padding-bottom: 0;
}
.copy-bar p {
    margin-bottom: 0;
}
.thinking-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.thinking-step {
    position: relative;
}
.steps-number {
    color: #ff897b;
    font-size: 110px;
}

.step-number-wrapper {
    position: relative;
}

.step-number-label {
    position: absolute;
    top: 71px;
    background: #fffcf5;
    font-size: 17px;
    z-index: 1;
    left: 40px;
}
.step-title {
    font-size: 28px;
    margin-bottom: 24px;
    font-weight: 600;
    line-height: 1;
}
.step-description p:nth-child(2) {
    margin-top: 12px;
}
.step-description p:nth-child(1) {
    font-weight: 600;
}
.step-line {
    background: #ff8a7d;
    width: 1px;
    height: 225px;
    margin-bottom: 30px;
}

.step-number-wrapper {
    display: flex;
    gap: 50px;
}
.step-description p:nth-child(2) {
    margin-top: 12px;
    font-size: .9375rem;
    color: var(--muted);
    line-height: 1.6;
    max-width: 258px;
}
.outline-type {
    letter-spacing: 10px;
	text-transform: uppercase;
	position: relative;
}
.experience-number:after {
    content: '';
}

.outline-type:after {
    content: '';
    background: #ff897b;
    width: 100%;
    height: 1px;
    display: block;
    margin: 0 auto;
    opacity: 0.3;
    
}
.work-accordion-content .project {
    margin-bottom: 60px;
}
section.industry.section-wrap {
    padding-top: 0;
}

/* Testimonial Slider - Additional CSS Only */

.testimonial-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.testimonial-slider .quote-card {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.testimonial-slider .quote-card.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.testimonial .slide-dot {
    transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-slider .quote-card {
        transition: none;
    }
}

@media only screen and (max-width: 1550px) {  
header.header.inner-pages-header {
    padding: 28px 33px 20px 44px;
}
}
@media only screen and (max-width: 1300px) {  
 header.header.inner-pages-header {
    padding: 28px 39px 20px 50px;
}
}
@media only screen and (max-width: 1024px) { 
.thinking-row {
    grid-template-columns: repeat(2, 1fr);
}
	section.wide.hero.inner-hero img {
    max-height: 100%;
}
	.hero-data {
    padding: 0;
}
}
@media only screen and (max-width: 767px) {
	.step-line {
        display: none;
    }
	    .work-accordion .work-accordion-trigger {
        grid-template-columns: 30px 1fr 24px;
        gap: 12px;
        padding: 20px 0;
    }

    .work-accordion .row-industry,
    .work-accordion .row-scope {
        grid-column: 2;
    }

    .work-accordion .row-arrow {
        grid-column: 3;
        grid-row: 1;
    }
	.real-identities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
	.copy-bar {
    flex-direction: column;
    padding: 16px 0;
}
.bottom-f-inner {
    gap: 0;
    flex-direction: column;
}
.ftr-menu {
    margin-bottom: 30px;
}
.biuro-default-button {
    width: 90px;
    height: 90px;
    min-width: 90px;
    min-height: 90px;
	        font-size: 14px;
}
	    .convert-band {
        padding: 40px 30px;
    }
	.step-number-wrapper {
    gap: 22px;
}
	.steps-number {
    font-size: 80px;
}
	.step-number-label {
    top: 50px;
    left: 15px;
}
	.step-line {
    height: 150px;
}
	.step-title {
    font-size: 21px;
    margin-bottom: 8px;
}
	section.wide.hero.inner-hero {
    max-height: 100%;
}
	    header.header.inner-pages-header {
        padding: 16px 18px;
        background: var(--coral);
        margin: 10px;
    }
.office-info-box {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }
	.form-div {
    grid-template-columns: repeat(1, 1fr);
}
	.form-side {
    margin-left: 0;
}
	section.map-area iframe {
    height: 400px;
}
	.biuro-title.link-hover-wave a {
    font-size: 20px;
}
	.service-details {
    visibility: visible;
}
}
.step-number-label {
    background: #ffe9df;
}