/**
Theme Name: Acta
Author: Acta
Author URI: https://actaph.eu/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: actaph
Template: astra
*/

@media (min-width: 922px) {
    #ast-desktop-header .ast-container, .main-header-bar.ast-header-breadcrumb .ast-container {
        max-width: 90%;
        max-width: 1557px;
    }

    /* Inner-page header spacing from the design. */
    /* #ast-desktop-header .site-primary-header-wrap {
        min-height: 0;
        padding-top: 70px;
        padding-bottom: 34px;
    } */

    #ast-desktop-header .main-header-menu > .menu-item {
        line-height: 1.6;
    }

    #ast-desktop-header #ast-hf-menu-1 > .menu-item > .menu-link {
        position: relative;
    }

    #ast-desktop-header #ast-hf-menu-1 > .current-menu-item > .menu-link::after,
    #ast-desktop-header #ast-hf-menu-1 > .current-menu-ancestor > .menu-link::after,
    #ast-desktop-header #ast-hf-menu-1 > .current_page_item > .menu-link::after {
        content: "";
        position: absolute;
        top: calc(50% + 12px);
        right: 1em;
        left: 1em;
        height: 5px;
        background: #2c9cc4;
        border-radius: 10px;
    }
}

/* Keep the complete 1920x759 inner-page hero visible on wide screens. */
@media (min-width: 1025px) {
    .inner-page-hero-full {
        --min-height: auto !important;
        aspect-ratio: 1920 / 759;
    }
}

/* Keep the homepage top container within the available viewport width. */
.top_hp_container {
    max-width: 1557px;
}

@media (max-width: 1557px) {
    .top_hp_container {
        --width: 100% !important;
        width: 100%;
    }
}


/* ========================================================================== 
   [top-animation] - animated spheres over the hero background
   ========================================================================== */

.ta {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Let the overlay span the whole hero section instead of the widget box. */
.elementor-widget-shortcode:has(.ta),
.elementor-shortcode:has(.ta) {
    position: static;
}

.ta-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
}

/**
 * Reproduces background-size:cover / background-position:center for the
 * 1920x980 hero image, so node coordinates match the source pixels.
 */
.ta-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: max(100cqw, calc(100cqh * 1.959184));
    height: max(100cqh, calc(100cqw * 0.510417));
}

.ta-node {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--d);
    aspect-ratio: 1;
    translate: -50% -50%;
    animation: ta-float var(--float, 8s) ease-in-out var(--delay, 0s) infinite alternate;
}

/* White disc with the icon - deliberately not rotating. */
.ta-disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 18px 3px rgba(45, 164, 219, 0.45);
    display: grid;
    place-items: center;
}

/* Glyph-only SVG. The per-node value reproduces its size inside the disc in
 * the Figma export; both dimensions are set to avoid the theme's img clamp. */
.ta-disc img {
    display: block;
    width: var(--icon-size, 60%);
    height: var(--icon-size, 60%);
    max-width: none;
    max-height: none;
    object-fit: contain;
    transform: scale(0.92);
}

.ta-node--dropper {
    --icon-size: 54.3%;
}

.ta-node--blister {
    --icon-size: 57.2%;
}

.ta-node--testtube {
    --icon-size: 55%;
}

.ta-node--bottle {
    --icon-size: 59%;
}

.ta-node--capsules {
    --icon-size: 67.5%;
}

.ta-node--vet {
    --icon-size: 57%;
}

/* Rings orbiting the disc. */
.ta-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: calc(100% * var(--scale));
    height: calc(100% * var(--scale));
    overflow: visible;
    animation: ta-spin var(--spin, 30s) linear infinite;
    will-change: transform;
}

.ta-ring--rev {
    animation-direction: reverse;
}

.ta-ring circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.ta-ring--dashed circle {
    stroke: rgba(173, 225, 255, 0.95);
    stroke-dasharray: 2 3;
}

/* Full circles - rotating them is invisible, so don't pay for it. */
.ta-ring--thin,
.ta-ring--solid,
.ta-ring--bold {
    animation: none;
}

.ta-ring--thin circle {
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 1;
}

/**
 * arc / dot / bold scale with the sphere instead of staying hairlines,
 * so stroke-width is read as a % of the ring diameter.
 */
.ta-ring--bold circle {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 2;
    vector-effect: none;
}

/* Two thick arcs riding the outer ring. pathLength is 120: 10 on + 50 off = 2 arcs of 30deg. */
.ta-ring--arc circle {
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 50;
    vector-effect: none;
}

/* A zero-length dash with a round cap renders as a single orbiting dot. */
.ta-ring--dot circle {
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 0 120;
    vector-effect: none;
}

/* Expanding pulse. */
.ta-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(126, 206, 244, 0.6);
    animation: ta-ping 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) var(--delay, 0s) infinite;
}

@keyframes ta-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ta-float {
    from {
        translate: -50% -50%;
    }
    to {
        translate: -50% calc(-50% - 10px);
    }
}

@keyframes ta-ping {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    70%,
    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

/* The globe is cropped hard on phones - the two smallest nodes fall off it. */
@media (max-width: 767px) {
    .ta-node--vet,
    .ta-node--capsules {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ta-node,
    .ta-ring,
    .ta-halo {
        animation: none;
    }
}


/* ==========================================================================
   [numbers-counter] - 1:1 with the Figma frame "Numbers" (4:39)

   The frame is 1027x54. Every size below is that design pixel value expressed
   in cqw (1027px = 100cqw), so at 1027px wide the block renders at exactly the
   design's measurements and scales proportionally under that.
   ========================================================================== */

.nc {
    position: relative;
    width: 100%;
    max-width: 1027px;
    margin: 0 auto;
    aspect-ratio: 1027 / 54;
    container-type: inline-size;
}

/**
 * Each pair is anchored by the right edge of its figure and sits at y=1442 in a
 * frame starting at y=1419: 23/54 = 42.59%. The 16px the design leaves between
 * a label and its figure is held as a gap, so it survives any text width.
 */
.nc-item {
    position: absolute;
    right: var(--r);
    top: 42.59%;
    translate: 0 -50%;
    display: flex;
    align-items: center;
    gap: 1.558cqw;
    white-space: nowrap;
}

.nc-label,
.nc-value {
    text-align: left;
}

/* 18px / 1027 * 100, line-height 22px. */
.nc-label {
    color: #2c9cc4;
    font-size: 1.753cqw;
    line-height: 2.142cqw;
}

/* 48px / 1027 * 100. Tabular figures keep the width steady while counting. */
.nc-value {
    color: #011f3b;
    font-size: 4.674cqw;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.nc-num {
    font-weight: 700;
}

.nc-suffix {
    font-weight: 400;
}

/* The two 54px vertical rules (4:42, 4:43). */
.nc-rule {
    position: absolute;
    left: var(--l);
    top: 0;
    width: 1px;
    height: 100%;
    background: #d9d9d9;
}

/**
 * Stacked on phones. Holding the 1027x54 proportions on a 390px screen would
 * shrink the figures to ~18px, so the row unwinds into three centred rows with
 * fixed type, and the vertical rules become separators between them.
 */
@media (max-width: 767px) {
    .nc {
        display: flex;
        flex-direction: column;
        aspect-ratio: auto;
        max-width: 420px;
    }

    .nc-item {
        position: static;
        translate: none;
        justify-content: center;
        gap: 12px;
        padding: 16px 0;
    }

    .nc-item + .nc-item {
        border-top: 1px solid #d9d9d9;
    }

    .nc-label {
        font-size: 16px;
        line-height: 20px;
    }

    .nc-value {
        font-size: 34px;
    }

    .nc-rule {
        display: none;
    }
}

/**
 * The <u> some of the buttons wrap their label in carries its own underline, so
 * clearing the link's alone leaves it on screen.
 */
.no_decoration a, .no_decoration, .DUP_no_decoration,
.no_decoration u, .DUP_no_decoration u {
    text-decoration: none !important;
}

.important_links_box {
    background-color: #fff;
    border-radius: 30px;
    /* The pill hangs over the bottom edge, so it needs an anchor and no clip. */
    position: relative;
    overflow: visible;
}


/**
 * The design straddles the button on the card's bottom edge: the card ends at
 * y=3151 and the 40px button runs 3131-3171, so exactly half of it sits outside.
 * Taking it out of flow is what lets it cross the edge - which means the card no
 * longer reserves room for it, so give the card bottom padding if the text below
 * ends up too close.
 */
.important_links_box .box_button {
    position: absolute;
    left: 50%;
    bottom: -20px;
    translate: -50% 0;
    z-index: 1;
    text-align: center;
}

.important_links_box .box_button a,
.important_links_box .box_button .elementor-button,
.important_links_box a.box_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 40px;
    padding: 8px 22px;
    border-radius: 50px;
    background-color: #011f3b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.important_links_box .box_button a:hover,
.important_links_box .box_button a:focus-visible,
.important_links_box .box_button .elementor-button:hover,
.important_links_box .box_button .elementor-button:focus-visible,
.important_links_box a.box_button:hover,
.important_links_box a.box_button:focus-visible {
    background-color: #2c9cc4;
    color: #fff;
}

.contact-form-custom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    max-width: 1045px;
    margin: 0 auto;
}

.contact-form-custom__left,
.contact-form-custom__right {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

/* INPUTS */
.contact-form-custom input[type="text"],
.contact-form-custom input[type="email"],
.contact-form-custom textarea {
    width: 100%;
    background: #f4f9fc;
    border: 1px solid #d9dfe3;
    border-radius: 9px;
    padding: 0 18px;
    font-size: 13px;
    color: #011f3b;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.contact-form-custom input[type="text"],
.contact-form-custom input[type="email"] {
    height: 49px;
}

.contact-form-custom textarea {
    height: 117px;
    min-height: 117px;
    padding-top: 17px;
    resize: none;
}

/* PLACEHOLDER */
.contact-form-custom input::placeholder,
.contact-form-custom textarea::placeholder {
    color: #011f3b;
    opacity: 1;
}

/* FOCUS */
.contact-form-custom input:focus,
.contact-form-custom textarea:focus {
    border-color: #2d9dc3;
}

/* Astra sets its own focus text colour on CF7 fields, so match its specificity. */
.wpcf7 .contact-form-custom input.wpcf7-form-control:not([type="submit"]):focus,
.wpcf7 .contact-form-custom textarea.wpcf7-form-control:focus {
    color: #011f3b;
}

/* SEND BUTTON */
.contact-form-custom input[type="submit"] {
    width: 120px;
    height: 49px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #2e9fc5;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .25s ease;
}

.contact-form-custom input[type="submit"]:hover {
    background: #238caf;
}

/* Align the submit button with the email field in the left column. */
@media (min-width: 768px) {
    .contact-form-custom__right input[type="submit"] {
        margin-top: -8px;
    }
}

/* CF7 SPANS */
.contact-form-custom .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* REMOVE DEFAULT P MARGINS, ако има такива */
.contact-form-custom p {
    margin: 0;
}

/* MOBILE */
@media (max-width: 767px) {
    .contact-form-custom {
        grid-template-columns: 1fr;
        gap: 19px;
    }

    .contact-form-custom textarea {
        height: 130px;
    }

    #important_list_wrapper {
        background-position: top center;
        background-size: cover;
    }
}


/* ==========================================================================
   Footer
   ========================================================================== */

/**
 * footer_bg.jpg (1920x350) is a decorative wave - white above the curve, a flat
 * #f5fafd below it. Pinning it to the top at full width and repeating that same
 * colour underneath keeps the fill seamless however tall the footer grows.
 */
.site-footer {
    background-image: url("/wp-content/uploads/2026/08/footer_bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    background-color: #f5fafd;
    padding-top: 50px;
    padding-bottom: 50px;
}

/**
 * Inner pages get the same wave with the molecule field baked in (1920x465,
 * white above the curve, #f5fafd along the bottom edge), so only the image
 * swaps - the rest of the rule above still holds.
 */
body:not(.home) .site-footer {
    background-image: url("/wp-content/uploads/2026/08/frame-8-1.jpg");
    /**
     * The wave bottoms out at y=202 of the 1920px-wide art - 10.5% of the
     * footer's width - and the art scales with that width, so the content has
     * to clear it proportionally rather than at a fixed offset.
     */
    padding-top: max(50px, 11.5vw);
}

/* Astra paints these rows from the Customizer; let the image through. */
.site-footer .site-above-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap {
    background: transparent;
}

#astra-footer-menu {
    text-transform: uppercase;
    font-weight: 700;
}

/* The button is rendered from the theme; hide the old Elementor HTML widget. */
.elementor-element-9dbf686 {
    display: none;
}

.hero-b2b-button {
    
    position: fixed;
    right: 0;
    bottom: 200px;
    z-index: 1000;

    /* display: flex; */
    display: none !important;
    align-items: center;
    justify-content: flex-start;
    width: 76px;
    height: 70px;
    line-height: 0;
    overflow: hidden;
    background: #2c9cc4;
    border-radius: 35px 0 0 35px;
    transition: transform 0.25s ease;
}

.hero-b2b-button img {
    display: block;
    width: 70px;
    height: 70px;
}

.hero-b2b-button:hover {
    transform: translateX(-6px);
}

@media (max-width: 767px) {
    .hero-b2b-button {
        bottom: 24px;
    }
}


/* Reusable rotating ring. Set the element's width/height where it is used. */
.rotating-ring {
    --rotating-ring-duration: 24s;
    --rotating-ring-image: url("assets/images/rign.png");
    position: relative;
    isolation: isolate;
}

.elementor-element.e-con.rotating-ring {
    display: grid;
    place-items: center;
}

.rotating-ring--blue {
    --rotating-ring-image: url("/wp-content/uploads/2026/08/ring1_2-1.png");
}

.rotating-ring--vision {
    --rotating-ring-image: url("assets/images/ring1_3 1.png");
}

.rotating-ring--team {
    --rotating-ring-image: url("assets/images/ring1_1 1.png");
}

.elementor-element.e-con.rotating-ring.rotating-ring--blue,
.elementor-element.e-con.rotating-ring.rotating-ring--vision {
    --min-height: 0px;
    min-height: 0;
    aspect-ratio: 1;
    flex: 0 0 auto;
    justify-self: center;
}

.elementor-element.e-con.rotating-ring.rotating-ring--blue {
    width: min(320px, 100%);
}

.elementor-element.e-con.rotating-ring.rotating-ring--vision {
    width: min(325px, 100%);
}

.elementor-element.e-con.rotating-ring.rotating-ring--blue > img,
.elementor-element.e-con.rotating-ring.rotating-ring--vision > img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Elementor otherwise stretches this e-con across the whole grid column. */
.elementor-element.e-con.rotating-ring.rotating-ring--team {
    --min-height: 0px;
    width: min(330px, 100%);
    min-height: 0;
    aspect-ratio: 1;
    flex: 0 0 auto;
    justify-self: center;
}

.elementor-element.e-con.rotating-ring.rotating-ring--team > img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    .elementor-element.e-con.rotating-ring.rotating-ring--blue {
        width: min(320px, 66%);
    }

    .elementor-element.e-con.rotating-ring.rotating-ring--vision {
        width: min(325px, 66%);
    }

    .elementor-element.e-con.rotating-ring.rotating-ring--team {
        width: min(330px, 66%);
    }
}

/**
 * The ring's ::before overhangs its element by up to 46%, so it has to be cut
 * off at the viewport edge. Between 768px and 1024px the ring narrows to 66% of
 * its column while rotating-ring--vision sits in the right-hand column, and the
 * overhang then reaches past the page - clip at every width, not just on phones.
 */
.elementor-374 .elementor-element-64fd39b,
.elementor-374 .elementor-element-dcdb5d6,
.elementor-374 .elementor-element-154bd36 {
    overflow-x: clip;
}

@media (max-width: 767px) {
    .elementor-element.e-con.rotating-ring.rotating-ring--blue {
        width: min(320px, 64%);
    }

    .elementor-element.e-con.rotating-ring.rotating-ring--vision {
        width: min(325px, 64%);
    }

    .elementor-element.e-con.rotating-ring.rotating-ring--team {
        width: min(330px, 64%);
    }
}

.rotating-ring--speed-1 {
    --rotating-ring-duration: 20s;
}

.rotating-ring--speed-2 {
    --rotating-ring-duration: 24s;
}

.rotating-ring--speed-3 {
    --rotating-ring-duration: 28s;
}

.rotating-ring--speed-4 {
    --rotating-ring-duration: 32s;
}

.rotating-ring::before,
.elementor-element.e-con.rotating-ring::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: var(--rotating-ring-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: actaph-ring-spin var(--rotating-ring-duration) linear infinite;
    pointer-events: none;
}

/**
 * The design pairs the 485px ring with a 330px image, so the ring overhangs its
 * container by 23.48% of it - kept in CSS rather than as container padding so
 * it tracks the image at every breakpoint instead of per-device Elementor
 * settings. ring1_1's circle also sits ~2.27% left of its own canvas centre
 * (the badge on the right pushed the artwork over), so left/right carry that
 * shift on top of the overhang and the spin runs about the circle's centre.
 */
.rotating-ring--team::before,
.elementor-element.e-con.rotating-ring--team::before {
    top: -23.485%;
    right: auto;
    bottom: auto;
    left: -20.005%;
    width: 146.97%;
    height: 146.97%;
    transform-origin: 47.63% 50%;
}

/* ring1_2 is centred on its canvas: 460px ring around a 320px image. */
.rotating-ring--blue::before,
.elementor-element.e-con.rotating-ring--blue::before {
    top: -21.875%;
    right: auto;
    bottom: auto;
    left: -21.875%;
    width: 143.75%;
    height: 143.75%;
    transform-origin: 50% 50%;
}

/* ring1_3 is 470px around a 325px image. Its circle centre is 52.23% across
   the canvas, so the canvas anchor is shifted left while rotation uses it. */
.rotating-ring--vision::before,
.elementor-element.e-con.rotating-ring--vision::before {
    top: -22.31%;
    right: auto;
    bottom: auto;
    left: -25.53%;
    width: 144.62%;
    height: 144.62%;
    transform-origin: 52.23% 50%;
}

.rotating-ring > * {
    position: relative;
    z-index: 1;
}

@keyframes actaph-ring-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rotating-ring::before,
    .elementor-element.e-con.rotating-ring::before {
        animation: none;
    }
}


/* Check-list layout used in inner-page text sections. */
.inner_page_text ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inner_page_text ul > li {
    position: relative;
    display: block;
    max-width: 100%;
    min-height: 60px;
    margin: 0 0 38px;
    padding: 8px 0 8px 80px;
    font-size: 16px;
    line-height: 1.35;
}

.inner_page_text ul > li:last-child {
    margin-bottom: 0;
}

.inner_page_text ul > li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 60px;
    height: 60px;
    background: url("assets/images/check_mission_icon.svg") center / contain no-repeat;
    transform: translateY(-50%);
}

.inner_page_text ul > li strong {
    display: block;
    font-weight: 700;
}

@media (max-width: 767px) {
    .inner_page_text ul > li {
        min-height: 54px;
        margin-bottom: 24px;
        padding-left: 70px;
        font-size: 15px;
    }

    .inner_page_text ul > li::before {
        width: 54px;
        height: 54px;
    }

    .inner_page_text p, .inner_page_text h2 {
        text-align: center !important;
    }

    .inner_page_text h2 {
        padding-top: 25px;
    }

    .big_h2_mobile h2 {
        font-size: 2.7rem !important;
    }
}

.main-header-bar.ast-header-breadcrumb .ast-container .trail-end {
    font-weight: 700;
}

.main-header-bar.ast-header-breadcrumb .ast-container .trail-items {
    font-size: 12px;
}

@media (min-width: 922px) {
    .main-header-bar {
        border-bottom-width: 0px;
    }
}

.our_mission_container::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 72px;
    clip-path: polygon(0 28%, 50% 100%, 100% 28%, 100% 100%, 0 100%);
}



/* Short accent line above a text widget; follows the widget's text alignment. */
.add_top_style::before {
    content: "";
    display: inline-block;
    width: 60px;
    height: 2px;
    margin-bottom: 20px;
    background-color: #2C9CC4;
}

/* Text aligned inline on the paragraph, not on the widget - mirror it on the wrapper. */
.add_top_style:has(> p[style*="text-align: right"]) {
    text-align: right;
}

.add_top_style:has(> p[style*="text-align: center"]) {
    text-align: center;
}


/* ==========================================================================
   [contact-form-custom2] - stacked contact form on the Contact page
   Sizes taken from the 630x591 design frame.
   ========================================================================== */

.contact-form-custom2 {
    display: flex;
    flex-direction: column;
    gap: 27px;
    max-width: 630px;
    margin: 0 auto;
}

.contact-form-custom2 p {
    margin: 0;
}

.contact-form-custom2 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* INPUTS */
.contact-form-custom2 input[type="text"],
.contact-form-custom2 input[type="email"],
.contact-form-custom2 textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #d9dfe3;
    border-radius: 10px;
    padding: 0 22px;
    font-size: 15px;
    color: #011f3b;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.contact-form-custom2 input[type="text"],
.contact-form-custom2 input[type="email"] {
    height: 56px;
}

.contact-form-custom2 textarea {
    height: 142px;
    min-height: 142px;
    padding-top: 20px;
    resize: none;
}

/* PLACEHOLDER */
.contact-form-custom2 input::placeholder,
.contact-form-custom2 textarea::placeholder {
    color: #011f3b;
    opacity: 1;
}

/* FOCUS */
.contact-form-custom2 input:focus,
.contact-form-custom2 textarea:focus {
    border-color: #2d9dc3;
}

/* Astra sets its own focus text colour on CF7 fields, so match its specificity. */
.wpcf7 .contact-form-custom2 input.wpcf7-form-control:not([type="submit"]):focus,
.wpcf7 .contact-form-custom2 textarea.wpcf7-form-control:focus {
    color: #011f3b;
}

/* SEND BUTTON */
.contact-form-custom2 input[type="submit"] {
    display: block;
    width: 150px;
    height: 56px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #2e9fc5;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .25s ease;
}

.contact-form-custom2 input[type="submit"]:hover {
    background: #238caf;
}


.stric_wrapper {
    position: relative;
}

.stric_wrapper::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 130px;
    background: #fff;
    clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
    z-index: 1;
}


/**
 * [key-figures] - the six figures in a 3x2 grid.
 *
 */
.kf {
    display: grid;
    /* The rules fall at x=750 and x=1168, so the columns are 492/418/569. */
    grid-template-columns: 492fr 418fr 569fr;
    width: 100%;
    max-width: 1479px;
    margin: 0 auto;
    container-type: inline-size;
}

.kf-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: var(--pad);
}

/**
 * Per column: the cell's left inset, then the width that carries the label from
 * its x to the figure's. The design puts label|figure at 106|222, 543|742 and
 * 945|1081, measured from the frame's left edge.
 */
.kf-item--1 {
    --pad: 7.167cqw;
    --lw: 7.843cqw;
}

.kf-item--2 {
    --pad: 3.448cqw;
    --lw: 13.455cqw;
}

.kf-item--3 {
    --pad: 2.366cqw;
    --lw: 9.195cqw;
}

/**
 * The vertical rule, drawn on whichever cells have one to their left. Which
 * cells those are changes with the column count, so it is declared on every
 * item and switched on per layout.
 */
.kf-item::before {
    content: "";
    display: none;
    position: absolute;
    top: 0.473cqw;
    left: 0;
    width: 1px;
    height: 4.598cqw;
    background: #ebebeb;
}

/* The 68px rules (2052:320, 2052:321) sit exactly on the column edges. */
.kf-item--2::before,
.kf-item--3::before {
    display: block;
}

/* 18px / 22px, in a fixed column so every figure starts on the design's x. */
.kf-label {
    flex: 0 0 var(--lw);
    color: #2c9cc4;
    font-size: 1.217cqw;
    line-height: 1.488cqw;
}

.kf-value {
    flex: 1 1 auto;
    min-width: 0;
}

/**
 * 48px. The line-height of 1 is what lands the digits' cap top 2px below the
 * label's, which is the offset the design draws.
 */
.kf-figure {
    display: block;
    color: #011f3b;
    font-size: 3.246cqw;
    line-height: 1;
    font-weight: 700;
}

/* The design leaves ~18px between the last digit and the unit. */
.kf-suffix {
    margin-left: 0.28em;
    font-weight: 400;
}

/* 14px / 18px, starting 3px lower than the figure's line box leaves it. */
.kf-note {
    display: block;
    margin-top: 0.203cqw;
    color: #011f3b;
    font-size: 0.947cqw;
    line-height: 1.217cqw;
    font-weight: 700;
}

/**
 * Line 7 (2052:319) spans 1401 of the frame's 1479 and sits at y=122.5, which
 * puts it 35.5px under the first row and 43.5px over the second - and that gap
 * is what places the second row.
 */
.kf-line {
    grid-column: 1 / -1;
    width: 94.726%;
    height: 1px;
    margin: 2.400cqw 0 2.941cqw;
    background: #ebebeb;
}

/**
 * Two columns from 1200px down. The design's proportions are held in cqw, so
 * three columns in a 900px container put the labels at ~11px and the notes at
 * ~8px - unreadable. Halving the columns buys back the width for fixed type.
 *
 * The cells no longer sit in their design column here, so they drop the per
 * column label widths for one shared width; that is what keeps the figures of
 * each column on a common axis. The row rule follows suit: with no column gap
 * the cell borders meet, so it is drawn per cell instead of as one element.
 */
@media (max-width: 1199.98px) {
    .kf {
        grid-template-columns: 1fr 1fr;
        max-width: 900px;
    }

    .kf-item {
        --lw: 150px;
        gap: 16px;
        padding: 28px 32px 28px 0;
    }

    /**
     * The note carries the design's own line breaks, which only fit the full
     * width frame; in a half width cell they leave it ragged, so let it wrap.
     */
    .kf-note br {
        display: none;
    }

    .kf-item:nth-of-type(even) {
        padding-right: 0;
        padding-left: 32px;
    }

    .kf-item:nth-of-type(n+3) {
        border-top: 1px solid #ebebeb;
    }

    /* The rule now belongs to the right-hand cell of each row. */
    .kf-item::before {
        display: none;
        top: 28px;
        bottom: 28px;
        height: auto;
    }

    .kf-item:nth-of-type(even)::before {
        display: block;
    }

    .kf-label {
        font-size: 15px;
        line-height: 19px;
    }

    .kf-figure {
        font-size: 38px;
    }

    .kf-note {
        margin-top: 2px;
        font-size: 12px;
        line-height: 16px;
    }

    .kf-line {
        display: none;
    }
}

/**
 * One column on phones. The label keeps a fixed width rather than hugging its
 * text, so all six figures start on the same x - centring each pair instead
 * leaves the figures on six different axes, which is what makes the block read
 * as scattered.
 */
@media (max-width: 767px) {
    .kf {
        display: block;
        max-width: 420px;
    }

    .kf-item {
        --lw: 140px;
        gap: 14px;
        padding: 16px 0;
    }

    .kf-item:nth-of-type(even) {
        padding-left: 0;
    }

    .kf-item:not(:first-child) {
        border-top: 1px solid #ebebeb;
    }

    /* No rules between cells once every figure is on its own row. */
    .kf-item::before,
    .kf-item:nth-of-type(even)::before {
        display: none;
    }

    .kf-label {
        font-size: 14px;
        line-height: 18px;
    }

    .kf-figure {
        font-size: 32px;
    }

    .kf-note {
        font-size: 11px;
        line-height: 15px;
    }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .elementor .e-f75e059-a7de036 {
        font-size: 42px !important;
        line-height: 48px !important;
    }

    .elementor .e-3e157d2-b126c44 {
        font-size: 63px !important;
        line-height: 63px !important; 
    }
}

/*
 * Общ мобилен hero за вътрешните страници - една и съща фонова картинка на всяка
 * страница, на която класът `inner_page_mobile_bg` се добави на Elementor
 * контейнера. URL-ът стои тук, защото Elementor не позволява различна фонова
 * картинка по устройство.
 *
 * Белият връх се рисува в CSS, вместо да се разчита на вграден в картинката: при
 * `cover` широка картинка се реже силно настрани, така че вграден връх излиза
 * почти плосък и изместен от центъра. Ъгълът се управлява с --peak-depth.
 */
@media (max-width: 767px) {
    .inner_page_mobile_bg {
        --peak-depth: 56px;
        --peak-color: #fff;
        --min-height: clamp(420px, 60svh, 480px) !important;

        background-color: #eef7fb !important;
        /*
         * Картинката още е пейзажна (1920x600) и на телефон се вижда само ~28%
         * от ширината ѝ. Воалът омекотява преувеличения кадър и вдига контраста
         * на текста. Отпада, когато дойде вертикалната картинка.
         */
        background-image:
            linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.04)),
            url("/wp-content/uploads/2026/09/our_dna_mobile.jpg") !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    .inner_page_mobile_bg::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: var(--peak-depth);
        background: var(--peak-color);
        clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
        pointer-events: none;
        z-index: 1;
    }

    .inner_page_mobile_bg > .e-con-inner {
        position: relative;
        z-index: 2;
    }

    /* .elementor-374 .elementor-element.elementor-element-16fc19b {
        width: 100%;
        padding: 0 24px;
    }
*/
   
    .elementor-374 .elementor-element-16fc19b br {
        display: none;
    } 

    .align_center_on_mobile h1, .align_center_on_mobile p, .align_center_on_mobile div {
        text-align: center !important;
    }

    #hp_top_h4 br {
        display: none;
    }
}

/* Privacy policy content typography and responsive table. */
#pr_policy_cont h2 {
    font-size: 32px;
    line-height: 1.2;
}

#pr_policy_cont h3 {
    font-size: 24px;
    line-height: 1.3;
}

#pr_policy_cont h4 {
    font-size: 20px;
    line-height: 1.35;
}

#pr_policy_cont .privacy-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#pr_policy_cont .privacy-table-scroll table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

#pr_policy_cont .privacy-table-scroll th,
#pr_policy_cont .privacy-table-scroll td {
    padding: 12px 16px;
    vertical-align: top;
}

@media (max-width: 1024px) {
    #pr_policy_cont h2 {
        font-size: 28px;
    }

    #pr_policy_cont h3 {
        font-size: 22px;
    }

    #pr_policy_cont h4 {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    #pr_policy_cont h2 {
        font-size: 24px;
    }

    #pr_policy_cont h3 {
        font-size: 20px;
    }

    #pr_policy_cont h4 {
        font-size: 17px;
    }

    .responsive-nowrap-heading h2,
    h2.responsive-nowrap-heading {
        font-size: clamp(32px, 10vw, 42px) !important;
        line-height: 1.15;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    #home_hero {
        background-position: 25% center !important;
    }
}


@media (orientation: landscape) and (max-width: 960px) and (max-height: 500px) {
    #home_hero {
        --min-height: 560px;
        min-height: 560px;
    }
}

/* #home_hero {
    --min-height: max(100vh, 600px);
} */