/*!
Theme Name: blatlapidot
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called blatlapidot, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: blatlapidot
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
blatlapidot is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
- Normalize
- Box sizing
# Base
- Typography
- Elements
- Links
- Forms
## Layouts
# Components
- Navigation
- Posts and pages
- Comments
- Widgets
- Media
- Captions
- Galleries
# plugins
- Jetpack infinite scroll
# Utilities
- Accessibility
- Alignments
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
margin-top: 0 !important;
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
font-size: 1em;
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
color: #404040;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1rem;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
p {
margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", courier, monospace;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
}
/* Elements
--------------------------------------------- */
body {
background: #fff;
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0 3em 1.5em 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-right: 1.5em;
}
dt {
font-weight: 700;
}
dd {
margin: 0 1.5em 1.5em;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
max-width: 100%;
}
img {
height: auto;
max-width: 100%;
}
figure {
margin: 1em 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
}
/* Links
--------------------------------------------- */
a {
color: #4169e1;
}
a:visited {
color: #800080;
}
a.btn:visited {
color: #fff;
}
a:hover,
a:focus,
a:active {
color: #191970;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid;
border-color: #ccc #ccc #bbb;
border-radius: 3px;
background: #e6e6e6;
color: rgba(0, 0, 0, 0.8);
line-height: 1;
padding: 0.6em 1em 0.4em;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
border-color: #ccc #bbb #aaa;
}
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
border-color: #aaa #bbb #bbb;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
color: #111;
}
select {
border: 1px solid #ccc;
}
textarea {
width: 100%;
}
.form-row.form-row-flex {
margin-top: 2rem;
}
.wpcf7-form-control.wpcf7-submit {
height: 60px;
padding: 0;
line-height: 59px;
background: #000;
color: #fff;
border-radius: 58px;
border:none;
}
.page-template-page-services2 .wpcf7-form-control.wpcf7-submit {
background: var(--main-pink);
color: #fff;
min-width: 155px;
height: 45px;
line-height: 44px;
}
.service-form--form {
padding-top: 20px;
}
.wpcf7-spinner {
display: none!important;
}
.form-row-flex p {
display: flex;
justify-content: space-between;
align-items: center;
}
/* בוחרים את ה-label שקיבל class:c-accept */
.c-accept{
--size: 20px; --radius: 6px; --border:#c7c9d1; --border-checked:#0a66ff;
--bg-checked:#0a66ff; --tick:#fff; --focus:2px;
display:inline-flex; align-items:flex-start; gap:.6rem; cursor:pointer; user-select:none;
font-size:14px; line-height:1.5;
}
/* מסתירים את אינפוט המקורי בצורה נגישה */
.c-accept{ position:absolute; inline-size:1px; block-size:1px; margin:-1px; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }
/* יוצרים את התיבה לפני הטקסט של CF7 */
.c-accept + .wpcf7-list-item-label{
position:relative; padding-inline-start:44px;
display:inline-block;
padding-left: 20px;
}
.page-template-page-services2 .c-accept + .wpcf7-list-item-label {
padding-inline-start:32px;
padding-left: 10px;
}
.c-accept + .wpcf7-list-item-label::before,
.c-accept + .wpcf7-list-item-label::after{
content:""; position:absolute; inset-inline-start:0; inset-block-start:.1em;
}
.c-accept + .wpcf7-list-item-label::before{
width: 34px;
height: 34px;
border: 3px solid rgba(0, 0, 0, 0.11);
border-radius: 50%;
}
.page-template-page-services2 .c-accept + .wpcf7-list-item-label::before {
width: 24px;
height: 24px;
}
.c-accept:checked + .wpcf7-list-item-label::before{
}
.c-accept + .wpcf7-list-item-label::after{
background: #000;
width: 18px;
height: 18px;
opacity: 0;
transition: all 0.3s ease;
border-radius: 50%;
top: 9px;
right: 8px;
}
.page-template-page-services2 .c-accept + .wpcf7-list-item-label::after{
width: 12px;
height: 12px;
top: 8px;
right: 6px;
}
.c-accept:checked + .wpcf7-list-item-label::after{ opacity:1 }
.c-accept a{ text-decoration:underline; }
/* RTL */
[dir="rtl"] .c-accept{ flex-direction:row; } /* CF7 כבר ממקם נכון; שומרים על RTL */
/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.main-navigation {
display: block;
width: 100%;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-right: 0;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: right;
position: absolute;
top: 100%;
right: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
right: -999em;
top: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
display: block;
right: auto;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
right: auto;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex;
}
}
.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}
/* Posts and pages
--------------------------------------------- */
.sticky {
display: block;
}
.post,
.page {
margin: 0;
}
.updated:not(.published) {
display: none;
}
.page-content,
.entry-content,
.entry-summary {
margin: 1.5em 0 0;
}
.page-links {
clear: both;
margin: 0 0 1.5em;
}
/* Comments
--------------------------------------------- */
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
}
/* Widgets
--------------------------------------------- */
.widget {
margin: 0 0 1.5em;
}
.widget select {
max-width: 100%;
}
/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure logo link wraps around logo image. */
.custom-logo-link {
display: inline-block;
}
/* Captions
--------------------------------------------- */
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-right: auto;
margin-left: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
.wp-caption-text {
text-align: center;
}
/* Galleries
--------------------------------------------- */
.gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
width: 100%;
}
.gallery-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
grid-template-columns: repeat(6, 1fr);
}
.gallery-columns-7 {
grid-template-columns: repeat(7, 1fr);
}
.gallery-columns-8 {
grid-template-columns: repeat(8, 1fr);
}
.gallery-columns-9 {
grid-template-columns: repeat(9, 1fr);
}
.gallery-caption {
display: block;
}
/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/* Jetpack infinite scroll
--------------------------------------------- */
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
display: none;
}
/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
display: block;
}
/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
right: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
outline: 0;
}
/* Alignments
--------------------------------------------- */
.alignleft {
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
}
.alignright {
float: right;
margin-left: 1.5em;
margin-bottom: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-right: auto;
margin-left: auto;
margin-bottom: 1.5em;
}
:root{
--text: #000;
--bg-1:#17181c; --bg-2:#0f3b3d; --bg-3:#31244f; --bg-4:#3d2a2a;
--text:#000000; --muted:#c6c9cf; --accent:#00d4a6;
--spread: 3px; /* how far dots move on hover */
--duration: 220ms;
--tp-common-black:#000;
--purple-bg:#1A133D;
--main-pink:#F0649F;
font-size: clamp(14px, 0.8vw + 0.3rem, 20px);
/* Design tokens in rem for consistent spacing */
--space-2xs: 0.25rem; /* ~4px */
--space-xs: 0.5rem; /* ~8px */
--space-sm: 0.75rem; /* ~12px */
--space-md: 1rem; /* ~16px */
--space-lg: 1.5rem; /* ~24px */
--space-xl: 2rem; /* ~32px */
--space-2xl: 3rem; /* ~48px */
--radius-sm: 0.5rem;
--radius-md: 1rem;
--radius-lg: 1.5rem;
--max-width: 81rem; /* ~1120px */
--max-width-content: 52rem; /* ~1120px */
--peek-desktop: 120px; /* пики по краям на десктопе */
--peek-tablet: 56px;
--peek-mobile: 24px;
--slide-w-desktop: 540px; /* ширина карточки (auto-режим) */
--slide-w-tablet: 420px;
--slide-w-mobile: 300px;
--gap-desktop: 24px; /* расстояние между слайдами */
--gap-tablet: 20px;
--gap-mobile: 16px;
}
html { font-size: 16px; }
body{
height:100%;
margin:0;
font-family: system-ui, -apple-system, "Noto Sans Hebrew",sans-serif;
font-size: 1rem; /* everything else scales from here */
line-height: 1.41;
color: var(--text);
background: linear-gradient(180deg, #C8BFEF 0%, #FFF 99.69%), #FFF;
}
h1, h2, h3, h4 {
margin: 0;
}
.container {
width: min(100% - 2*var(--space-xl), var(--max-width));
margin-inline: auto;
}
#scrollContainer::before {
content: "";
position: absolute;
top: 0px;
right: 25%;
width: calc(100vw * 6);
height: 100vh;
background: url(https://blatlapidot.customcode.co.il/wp-content/themes/blatlapidot/assets/images/HP@2x.png) no-repeat left / cover;
will-change: transform;
transform: translateX(var(--parallax-x, 0px));
z-index: 1;
pointer-events: none;
}
.section-head {
z-index: 1;
}
.viewport{ position:fixed; inset:0; overflow:hidden; }
.scroll-box{ display:flex; height:100%; will-change:transform; transform:translateX(0); }
.scroll-container {
width: 100%;
height: 100vh;
overflow-x: scroll;
overflow-y: hidden;
scroll-behavior: smooth;
direction: rtl;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scroll-container .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.scroll-container .content.horizontal-enabled {
transform: translateX(calc(-100vw + 300px));
will-change: transform;
position: absolute;
left: 0;
top: 0;
}
section:focus-visible {
outline: none!important;
}
section{ position:relative; flex:0 0 100vw; height:100%; padding:5rem;
box-sizing:border-box; display:grid; grid-template-rows:auto 1fr auto; gap:2rem; }
.page-template section,
.page-template-default:not(.home) section {
padding:0;
}
p {
margin-bottom: 1rem;
}
.s1 {
background: #C8BFEF;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.s2 {
background: linear-gradient(270deg, #C8BFEF 0%, #EDEDEF 100%);
}
.s3, .s4, .s5 {
background: #EDEDEF;
}
.s6 {
background: linear-gradient(270deg, #EDEDEF 0%, #C8BFEF 100%);
}
.section-head h2{ margin:0; line-height: 1; }
.points{ display:grid; gap:1rem; align-content:start; max-width:70ch; padding:0; margin:0; }
.points li{ list-style:none; display:flex; align-items:flex-start; gap:.75rem;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
padding:1rem 1.25rem; border-radius:14px; backdrop-filter:saturate(1.2) blur(2px); }
.points li::before{ content:"•"; font-size:1.25rem; line-height:1; color:var(--accent); margin-top:.15rem; }
.shared-ribbon{ position:absolute; top:12%; right:-8%; padding:.5rem 1rem; border-radius:999px;
border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); white-space:nowrap; pointer-events:none; }
/* твой блок — оставляем, только добавим overflow и переменную для зазора */
.pagination{
position: fixed;
left: 4rem;
bottom: 2.5rem;
display: flex;
flex-direction: row-reverse;
gap: 10px;
z-index: 10;
overflow: visible; /* важно: подсказка может выходить за кнопку */
}
/* базовый буллет */
.pagination button{
width: 7px;
height: 7px;
border-radius: 50%;
border: 0;
background: #000;
cursor: pointer;
padding: 0;
display: block;
position: relative; /* якорь для ::after */
transition: width .2s ease, margin-right .2s ease;
}
/* активный буллет: делаем «пилюлю» и создаём место под подпись справа */
.pagination button[aria-current="true"]{
background: #000;
border-color: #000;
width: 21px; /* как у тебя было */
border-radius: 25px;
margin-right: var(--label-width, 40px); /* по умолчанию 40px */
}
/* подпись из aria-label — справа от активного, по центру по вертикали */
.pagination button[aria-current="true"]::after{
content: attr(aria-label);
position: absolute;
top: -8px;
left: calc(100% + 8px);
white-space: nowrap;
border-radius: 6px;
pointer-events: none;
font-weight: 500;
font-size: 18px;
line-height: 1;
font-family: inherit;
}
.now-title{position: fixed;
right: 0;
top: 0;
z-index: 10;
left: 0;
display: flex;
align-content: center;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 2rem 4rem;flex-direction: row-reverse; transition: all 0.3s ease-in-out}
.now-title.scrolled {
/* White background with 90% opacity (allows text to stay solid) */
background-color: rgba(255, 255, 255, 0.8);
padding: 1rem 4rem;
}
.footerbar{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; z-index:10;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:.4rem; border-radius:12px; }
.footerbar button{ border:0; background:transparent; color:var(--text); padding:.6rem .9rem; border-radius:8px; cursor:pointer; font:inherit; }
.footerbar button:hover{ background:rgba(255,255,255,.08); }
.drag-hint{ position:fixed; inset-inline:0; bottom:0; height:18px; pointer-events:none; background:linear-gradient(to top, rgba(255,255,255,.06), transparent); }
.s1 .section-head h1 {
font-weight: 400;
max-width: 44rem;
}
.s1 .section-head p {
max-width: 38rem;
color: #606060;
}
a {
text-decoration: none;
}
.btn {
color: #FFF;
text-align: center;
font-size: 1.2rem;
border-radius: 50px;
background: #000;
padding: 0px 30px 5px 10px;
display: inline-flex;
align-items: center;
line-height: 1;
min-width: 215px;
justify-content: center;
}
.btn:hover {
color: #FFF;
}
.btn-icon {
width: 55px;
height: 55px;
background: #000;
border-radius: 50%;
line-height: 55px;
text-align: center;
transform: translate(0, 0);
transition: transform 0.6s ease-in-out;
}
.btn:hover .btn-icon {
transform: translate(-50px, 5px);
}
.btn .btn-icon svg {
transform: rotate(0deg);
transition: transform 0.6s ease-in-out;
}
.btn:hover .btn-icon svg {
transform: rotate(-45deg);
}
.parallax-balls {
position: relative;
}
/* общие стили для шаров */
.ball {
position: absolute;
will-change: transform;
pointer-events: none;
}
/* первый шар (ближе, качается быстрее) */
.ball-1 {
top: 18rem;
left: 12rem;
animation: float-xy-1 10s ease-in-out infinite alternate;
z-index: 1;
}
/* второй шар (дальше, качается медленнее) */
.ball-2 {
top: 17rem;
left: 30rem;
animation: float-xy-2 14s ease-in-out infinite alternate;
z-index: 1;
}
.ball-2-2 {
top: 20rem;
left: 8rem;
animation: float-xy-3 14s ease-in-out infinite alternate;
z-index: 1;
}
.ball-3 {
top: 25rem;
right: 20rem;
animation: float-xy-3 16s ease-in-out infinite alternate;
z-index: 1;
}
.ball-4 {
bottom:15%;
left: 20%;
animation: float-xy-3 14s ease-in-out infinite alternate;
z-index: 1;
}
.ball-5 {
top: 22%;
right: 18%;
animation: float-xy-2 16s ease-in-out infinite alternate;
z-index: 1;
}
.ball-6 {
top: 80%;
right: 75%;
animation: float-xy-3 18s ease-in-out infinite alternate;
z-index: 1;
}
.ball-7 {
top: 50%;
right: 24%;
animation: float-xy-1 14s ease-in-out infinite alternate;
z-index: 1;
}
.ball-8 {
top: 78%;
right: 36%;
animation: float-xy-2 16s ease-in-out infinite alternate;
z-index: 1;
}
.ball-9 {
top: 70%;
right: 68%;
animation: float-xy-3 18s ease-in-out infinite alternate;
z-index: 1;
}
/* Анимация для первого шара */
@keyframes float-xy-1 {
0% { transform: translate(0, 0); }
25% { transform: translate(30px, -20px); }
50% { transform: translate(60px, 10px); }
75% { transform: translate(30px, 20px); }
100% { transform: translate(0, 0); }
}
/* Анимация для второго шара */
@keyframes float-xy-2 {
0% { transform: translate(0, 0); }
25% { transform: translate(-25px, 15px); }
50% { transform: translate(-50px, -10px); }
75% { transform: translate(-25px, -25px); }
100% { transform: translate(0, 0); }
}
@keyframes float-xy-3 {
0% { transform: translate(0, 0); }
20% { transform: translate(20px, 25px); }
40% { transform: translate(40px, 10px); }
60% { transform: translate(20px, -20px); }
80% { transform: translate(-10px, -15px); }
100% { transform: translate(0, 0); }
}
.section-content {
z-index: 1;
}
.s2 {
display: flex;
}
.flex-40 {
flex: 0 0 40%;
}
.flex-60 {
flex: 0 0 60%;
}
.flex-50 {
flex: 0 0 50%;
}
.s2 .section-head p {
max-width: 28rem;
}
.s2 .section-content {
padding-right: 20px;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
.relative {
position: relative;
}
.z-index {
z-index: 9;
}
.accordion__header {
font-size: 1.5rem;
font-weight: 400;
background: none;
border: none;
position: relative;
padding-right: 57px;
padding-left: 0;
border-radius: 50px;
cursor: pointer;
font-family: inherit;
margin-right: 25px;
}
.accordion__panel {
border-radius: 1.5rem;
background: #FFF;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
max-width: 19rem;
margin-top: 1rem;
/* анимация и производительность */
overflow: clip; /* лучше hidden для композитинга */
height: 0;
visibility: hidden;
transition: height 0.5s cubic-bezier(.2,.8,.2,1);
will-change: height;
contain: layout paint; /* изолируем раскладку/отрисовку */
backface-visibility: hidden;
z-index: 9;
position: relative;
}
.s2 .accordion__panel {
max-width: 26rem;
}
/* ВНУТРЕННИЙ слой — все паддинги/типографика тут */
.accordion__inner{
padding: 1.5rem 1.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
.accordion__inner p {
margin: 0;
margin-bottom: 10px;
}
.accordion__inner a {
color: #F0649F;
margin-top: 0;
font-weight: 500;
display: block;
}
/* (опционально) плавное появление содержимого, без влияния на замер высоты */
.accordion__panel.opening .accordion__inner,
.accordion__panel.closing .accordion__inner{
transition: opacity .35s ease;
}
.accordion__panel.opening .accordion__inner{ opacity: 1; }
.accordion__panel.closing .accordion__inner{ opacity: .96; } /* лёгкое притухание */
.accordion__icon {
content: "+";
position: absolute;
right: 0;
width: 2.4rem;
height: 2.4rem;
border-radius: 50px;
}
.section-content--accordion .accordion__icon {
background: #F0649F;
}
.section-content--accordion:nth-child(1) {
position: absolute;
top:1rem;
right: 0;
}
.section-content--accordion:nth-child(2) {
position: absolute;
top:5rem;
right: 26rem;
}
.section-content--accordion:nth-child(3) {
position: absolute;
top: 17rem;
right: 0;
}
.section-content--accordion:nth-child(1) .accordion__icon {
z-index: 4;
}
.section-content--accordion:nth-child(2) .accordion__icon {
background: #BAAAFF;
z-index: 3;
}
.section-content--accordion:nth-child(3) .accordion__icon {
background: #3255C3;
z-index: 2;
}
.section-content--accordion:nth-child(4) .accordion__icon {
background: #F8D841;
z-index: 1;
}
.about-values .section-content--accordion:nth-child(1) {
z-index: 4;
}
.about-values .section-content--accordion:nth-child(2) {
z-index: 3;
}
.about-values .section-content--accordion:nth-child(3) {
z-index: 2;
}
.about-values .section-content--accordion:nth-child(4) {
z-index: 1;
}
.section-content--faqs .section-content--accordion .accordion__icon {
background: #000;
right: 0;
}
.section-content--faqs .accordion__header {
border-radius: 100px;
background: transparent;
padding: 0px 65px 0px 0px;
margin-right: 0;
}
.section-content--faqs .section-content--accordion:nth-child(1) {
position: absolute;
top: 3.5rem;
right: -5.5rem;
}
.section-content--faqs .section-content--accordion:nth-child(2) {
position: absolute;
top: 23.25rem;
right: 2rem;
}
.section-content--faqs .section-content--accordion:nth-child(3) {
position: absolute;
top: 15.5rem;
right: 25.5rem;
}
.section-content--faqs .section-content--accordion:nth-child(4) {
position: absolute;
top: 21.5rem;
right: 26rem;
}
.section-content--faqs .section-content--accordion:nth-child(5) {
position: absolute;
top: 30rem;
right: 30rem;
}
.section-content--faqs .section-content--accordion {
background: #fff;
padding: 1.3rem 1.5rem;
border-radius: 100px;
box-shadow: 0 0 40px 0 rgba(200, 191, 239, 0.30);
backdrop-filter: blur(35px);
}
.section-content--faqs .section-content--accordion.opened-acc {
border-radius: 28px;
z-index: 9;
}
.section-content--faqs .accordion__panel {
max-width: 27.5rem;
width: 27.5rem;
padding: 0 1.5rem;
margin: 0px 0;
}
.section-content--faqs .accordion__panel .accordion__panel-inner {
margin: 20px 0;
}
.section-content--accordion .accordion__icon:before {
content: "+";
color: #fff;
font-size: 2.5rem;
font-style: normal;
font-weight: 400;
line-height: 1.8rem;
height: 2.4rem;
}
.section-content--accordion .is-active .accordion__icon:before {
content: "-";
}
.section-content--faqs .accordion__icon {
right: 25px;
top: -4px;
}
.section-content--faqs span.accordion__title {
white-space: nowrap;
display: inline-block;
}
/* only panels inside the FAQ block */
.section-content--faqs .accordion__panel {
overflow: hidden;
visibility: hidden;
width: 0; /* closed */
height: 0; /* closed */
transition: height .5s ease; /* only height */
will-change: height;
background: transparent;
padding: 0;
}
.section-content--faqs .accordion__inner {
padding: 10px 10px;
max-width: 520px;
}
.stats {
display: flex;
gap: 2rem;
justify-content: space-between;
text-align: right;
font-family: system-ui, sans-serif;
left: 0;
}
.stat-number {
display: block;
font-weight: 300;
letter-spacing: -4.092px;
direction: ltr;
}
.stat-label {
letter-spacing: -0.309px;
display: block;
}
.section-content--numbers {
position: absolute;
bottom: 1rem;
right: 0;
left: 0;
max-width: 93%;
}
.s3 .section-head h2 {
color: var(--main-pink);
font-weight: 400;
padding-top: 16rem;
max-width: 60rem;
}
.type-in { position: relative; white-space: pre-wrap; transform: none !important;}
.type-in .char{
display:inline-block;
opacity:0;
transform: translateY(.35em);
filter: blur(2px);
transition: opacity .4s ease, transform .45s cubic-bezier(.2,.7,0,.98), filter .45s;
}
.type-in .char.in{ opacity:1; transform:none; filter:none; }
.type-in .char.space{ width:.25em; }
.s4 .section-head {
max-width: 33%;
position: absolute;
bottom: 50%;
right: 150px;
transform: translateY(50%);
}
.s4 .section-head p {
margin-top: 25px;
margin-bottom: 20px;
}
.s4 .section-content {
margin-right: 42%;
position: relative;
z-index: 9;
}
.s4 .section-head h2 {
font-size: 3.4rem;
line-height: 100%;
}
.s4 .section-content--faq {
min-width: 450px;
border-radius: 28px;
background: #FFF;
box-shadow: 0 0 40px 0 rgba(200, 191, 239, 0.30);
backdrop-filter: blur(35px);
}
.s4 .section-content--faq .accordion__header {
font-size: 1.6rem;
line-height: 157.143%;
}
.s4 .section-content--faq:nth-child(1) {
position: absolute;
top: 95px;
right: 0;
}
.s4 .section-content--faq:nth-child(2) {
position: absolute;
top: 160px;
right: 720px;
}
.s4 .section-content--faq:nth-child(3) {
position: absolute;
top: 470px;
right: 30px;
}
.s4 .section-content--faq:nth-child(4) {
position: absolute;
top: 395px;
right: 460px;
}
.s4 .section-content--faq:nth-child(5) {
position: absolute;
top: 395px;
right: 960px;
}
.s4 .section-content--faq:nth-child(6) {
position: absolute;
top: 705px;
right: 390px;
}
.s4 .section-content--faq:nth-child(7) {
position: absolute;
top: 705px;
right: 1160px;
}
/* отключаем для prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.ball { animation: none; }
}
.logos-section{
position:relative;
margin-right: 32%;
z-index: 9;
}
.clients-link {
display: flex;
justify-content: end;
position: relative;
position: absolute;
bottom: 5rem;
left: 5rem;
z-index: 9;
}
.bubbles{ position:relative; width:100%; height:100%; }
.logo-bubble{
position:absolute; /* абсолютное позиционирование, как в макете */
width:clamp(var(--bubble-min), 8vw, var(--bubble-max));
aspect-ratio:1/1;
border-radius:50%;
background: url(assets/images/bubble-bg.svg);
display:grid; place-items:center;
transform: translateZ(0);
will-change: transform, top, left;
text-decoration:none;
pointer-events: none;
background-size: cover;
}
.tp-techonolgy-capsule-item img{
max-width:70%; max-height:70%; object-fit:contain;
}
/* вспомогательная линия «пола» (можно удалить) */
.floor{
position:absolute; left:0; right:0; bottom:0; height:2px;
background:linear-gradient(90deg,#0000,#ddd,#0000);
opacity:.35; pointer-events:none;
}
.s6 {
display: flex;
justify-content: space-between;
}
.s6 .section-head {
max-width: 55%;
padding-top: 5rem;
}
.s6 .section-content {
display: flex;
align-items: flex-end;
padding-bottom: 35px;
}
.s6 .section-head > p {
max-width: 27rem;
}
.contact-block .social-media {
display: flex;
gap: 18px;
margin-bottom: 30px;
direction: rtl;
}
.contact-block .social-media a {
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #000;
border-radius: 100%;
background: transparent;
transition: all 0.3s ease-in-out;
}
.contact-block .social-media a:hover {
background: #000;
}
.contact-block .social-media a:hover svg path{
fill: #fff;
}
.contact-block {
font-size: 1.2rem;
font-weight: 400;
line-height: 38px;
color: #000;
direction: ltr;
text-align: right;
}
.contact-block a {
color: #000;
}
form.wpcf7-form {
max-width: 38.75rem;
margin-left: auto;
text-align: right;
direction: rtl;
}
form.wpcf7-form input[type="text"], form.wpcf7-form input[type="email"], form.wpcf7-form textarea {
background: transparent;
border-radius: 0px;
border: none;
border-bottom: 1px solid #000;
color: #000;
font-size: 1.3rem;
font-weight: 500;
padding: 0.5rem 0;
width: 100%;
}
.page-template-page-services2 form.wpcf7-form input[type="text"], form.wpcf7-form input[type="email"], form.wpcf7-form textarea {
font-size: 1.1rem;
}
form.wpcf7-form input[type="text"]:focus, form.wpcf7-form textarea:focus,
form.wpcf7-form input[type="text"]:focus-visible, form.wpcf7-form textarea:focus-visible {
color: #000;
border: none;
border-bottom: 3px solid var(--main-pink);
outline: none;
}
form.wpcf7-form input[type="text"]::placeholder,
form.wpcf7-form input[type="email"]::placeholder,
form.wpcf7-form textarea::placeholder {
color: #000;
opacity: 1; /* Firefox делает placeholder полупрозрачным по умолчанию */
}
/* WebKit (Chrome, Safari, новые Edge) */
form.wpcf7-form input[type="text"]::-webkit-input-placeholder,
form.wpcf7-form input[type="email"]::-webkit-input-placeholder,
form.wpcf7-form textarea::-webkit-input-placeholder {
color: #000;
}
/* Firefox старые */
form.wpcf7-form input[type="text"]::-moz-placeholder,
form.wpcf7-form input[type="email"]::-moz-placeholder,
form.wpcf7-form textarea::-moz-placeholder {
color: #000;
opacity: 1;
}
form.wpcf7-form input[type="text"]:-moz-placeholder,
form.wpcf7-form input[type="email"]:-moz-placeholder,
form.wpcf7-form textarea:-moz-placeholder {
color: #000;
opacity: 1;
}
/* IE/старый Edge */
form.wpcf7-form input[type="text"]:-ms-input-placeholder,
form.wpcf7-form input[type="email"]:-ms-input-placeholder,
form.wpcf7-form textarea:-ms-input-placeholder {
color: #000;
}
form.wpcf7-form input[type="text"]::-ms-input-placeholder,
form.wpcf7-form input[type="email"]::-ms-input-placeholder,
form.wpcf7-form textarea::-ms-input-placeholder {
color: #000;
}
form.wpcf7-form .wpcf7-list-item {
margin: 0;
}
form.wpcf7-form .wpcf7-acceptance label {
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px;
display: block;
}
form.wpcf7-form .wpcf7-acceptance {
margin-top: 15px;
}
form.wpcf7-form .wpcf7-acceptance label a {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
color: #000;
}
form.wpcf7-form .form-actions {
display: flex;
justify-content: end;
}
.menu-toggle {
width: 36px;
height: 36px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
cursor: pointer;
transition: transform 0.3s ease;
gap: 12px;
z-index: 9999999999;
cursor: pointer;
position: relative;
color: #fff;
}
.menu-toggle span {
width: 12px;
height: 12px;
background: black;
border-radius: 50%;
display: block;
transition: all 0.3s ease;
}
.menu-container.opened span {
background: #fff;
}
.menu-toggle span:nth-child(1) { /* верхний левый → диагональная полоса */
position: absolute;
top: 0;
right:0;
width: 12px; /* чуть длиннее диагонали */
height: 12px;
border-radius: 50px;
}
.menu-toggle span:nth-child(2) { /* верхний левый → диагональная полоса */
position: absolute;
top: 0;
left:0;
width: 12px; /* чуть длиннее диагонали */
height: 12px;
border-radius: 50px;
}
.menu-toggle span:nth-child(3) { /* верхний левый → диагональная полоса */
position: absolute;
bottom: 0;
right:0;
width: 12px; /* чуть длиннее диагонали */
height: 12px;
border-radius: 50px;
}
.menu-toggle span:nth-child(4) { /* верхний левый → диагональная полоса */
position: absolute;
bottom: 0;
left:0;
width: 12px; /* чуть длиннее диагонали */
height: 12px;
border-radius: 50px;
}
/* --- Открытое состояние --- */
.menu-toggle.open span:nth-child(1) { /* верхний левый → диагональная полоса */
position: absolute;
top: 0;
right:0;
width: 12px; /* чуть длиннее диагонали */
height: 12px;
border-radius: 50px;
}
.menu-toggle.open span:nth-child(4) { /* верхний левый → диагональная полоса */
position: absolute;
bottom: 0;
left:0;
width: 12px; /* чуть длиннее диагонали */
height: 12px;
border-radius: 50px;
}
.menu-toggle.open span:nth-child(2) { /* верхний левый → диагональная полоса */
position: absolute;
top: 50%;
left: 50%;
width: 145%; /* чуть длиннее диагонали */
height: 12px;
border-radius: 100px;
transform: translate(-50%,-50%) rotate(45deg);
}
.menu-toggle.open span:nth-child(3) { /* верхний левый → диагональная полоса */
position: absolute;
top: 50%;
left: 50%;
width: 145%; /* чуть длиннее диагонали */
height: 12px;
border-radius: 100px;
transform: translate(-50%,-50%) rotate(45deg);
right: auto;
}
.menu-toggle.open:hover span:nth-child(1) { /* верхний левый → диагональная полоса */
position: absolute;
top: 0;
left:0;
width: 12px; /* чуть длиннее диагонали */
height: 12px;
border-radius: 50px;
right: auto;
opacity: 0;
}
.menu-toggle.open:hover span:nth-child(4) { /* верхний левый → диагональная полоса */
position: absolute;
bottom: 0;
left:auto;
width: 12px; /* чуть длиннее диагонали */
height: 12px;
border-radius: 50px;
right: 0;
opacity: 0;
}
.menu-toggle.open:hover span:nth-child(2) { /* верхний левый → диагональная полоса */
position: absolute;
top: 50%;
left: 50%;
width: 145%; /* чуть длиннее диагонали */
height: 12px;
border-radius: 100px;
transform: translate(-50%,-50%) rotate(45deg);
}
.menu-toggle.open:hover span:nth-child(3) { /* верхний левый → диагональная полоса */
position: absolute;
top: 50%;
left: 50%;
width: 145%; /* чуть длиннее диагонали */
height: 12px;
border-radius: 100px;
transform: translate(-50%,-50%) rotate(-45deg);
right: auto;
}
/* Menu */
.menu {
position: fixed;
top: 0; right: -100%;
width: 100%;
height: 100%;
padding: 4rem 13rem;
background: rgba(0, 0, 0, 0.90);
max-width: 1000px;
transition: right 0.5s ease-in-out;
display: flex;
align-items: center;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu ul > li {
font-size: 2.7rem;
font-weight: 400;
line-height: 116.667%;
margin-bottom: 10px;
}
.menu ul > li .sub-menu {
/*display: none;*/
margin-top: 10px;
padding-right: 3rem;
}
.menu ul > li > a {
color: #fff;
}
.menu ul > li > a:hover {
color: #F8D841;
}
.menu ul > li.menu-item-has-children > a {
pointer-events: none;
}
.menu ul > li > ul > li {
font-size: 2.25rem;
font-weight: 300;
line-height: 70px;
}
.main-menu .menu-item-has-children.open > .sub-menu {
display: block;
}
.menu.open {
right: 0;
}
/* nice little stagger */
.menu-toggle:hover span:nth-child(1){ transition-delay: 0ms; }
.menu-toggle:hover span:nth-child(2){ transition-delay: 25ms; }
.menu-toggle:hover span:nth-child(3){ transition-delay: 50ms; }
.menu-toggle:hover span:nth-child(4){ transition-delay: 75ms; }
/* move each corner out + subtle scale */
.menu-toggle:hover span:nth-child(1){ /* top-left */
transform: translate(-6px, 6px) scale(1.1);
}
.menu-toggle:hover span:nth-child(2){ /* top-right */
transform: translate(6px, 6px) scale(1.1);
}
.menu-toggle:hover span:nth-child(3){ /* bottom-left */
transform: translate(-6px, -6px) scale(1.1);
}
.menu-toggle:hover span:nth-child(4){ /* bottom-right*/
transform: translate(6px, -6px) scale(1.1);
}
body.tp-magic-cursor #magic-cursor {
display: block;
}
#magic-cursor {
position: absolute;
display: none;
width: 10px;
height: 10px;
pointer-events: none;
z-index: 99999;
opacity: 0;
top: 0;
left: 0;
}
#ball {
position: fixed;
display: flex;
align-items: center;
pointer-events: none;
border-radius: 50%;
color: transparent;
justify-content: center;
mix-blend-mode: difference;
background-color: var(--tp-common-black);
}
.cursor-bg-red #ball {
background-color: var(--tp-theme-secondary) !important;
}
.cursor-bg-red #ball .ball-view {
color: var(--tp-common-white);
}
.cursor-white-bg #ball {
background-color: var(--tp-common-white) !important;
}
.cursor-white-bg #ball .ball-view {
color: var(--tp-common-black);
}
.cursor-black-bg #ball {
background-color: var(--tp-common-black) !important;
}
.cursor-black-bg #ball .ball-view {
color: var(--tp-common-white);
}
.cursor-bg-green #ball {
background-color: var(--tp-theme-1) !important;
}
.cursor-bg-green #ball .ball-view {
color: var(--tp-common-white);
}
/* Ball view
============= */
#ball .ball-view {
position: absolute;
opacity: 0;
visibility: hidden;
padding: 0 5px;
font-size: 16px;
font-weight: 600;
line-height: 1.1;
text-align: center;
transform: scale(0);
font-family: var(--tp-ff-dm);
color: var(--tp-common-black);
}
/* Ball drag
============= */
#ball .ball-drag {
position: absolute;
display: block;
width: 100%;
padding: 0 5px;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
text-align: center;
transition: all 0.3s;
font-family: var(--tp-ff-dm);
color: var(--tp-common-black);
}
#ball .ball-drag::before,
#ball .ball-drag::after {
position: absolute;
top: 50%;
margin-top: -5px;
font-size: 19px;
height: 10px;
line-height: 10px;
font-weight: 900;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
color: var(--tp-common-white);
font-family: "Font Awesome 6 Pro";
-webkit-font-smoothing: antialiased;
}
#ball .ball-drag::before {
content: "\f104";
/* Font Awesome */
left: 0;
transform: translate3d(-30px, 0, 0);
transition: all 0.25s;
}
#ball .ball-drag::after {
content: "\f105";
/* Font Awesome */
right: 0;
transform: translate3d(30px, 0, 0);
transition: all 0.25s;
}
#ball.with-blur {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Ball close
============== */
#ball.ball-close-enabled {
opacity: 1 !important;
}
#ball .ball-close {
position: absolute;
padding: 0 5px;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-align: center;
color: var(--tp-common-black);
}
.tp-magnetic-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.mb-25 {
margin-bottom: 1.25rem;
}
.mb-30 {
margin-bottom: 1.5rem;
}
.mb-35 {
margin-bottom: 1.75rem;
}
.mb-40 {
margin-bottom: 2rem;
}
.mb-50 {
margin-bottom: 2.5rem;
}
.mb-80 {
margin-bottom: 4rem;
}
.mb-120 {
margin-bottom: 6rem;
}
.mb-140 {
margin-bottom: 7rem;
}
.mb-160 {
margin-bottom: 8rem;
}
.mb-220 {
margin-bottom: 11rem;
}
.mt-30 {
margin-top: 1.5rem;
}
.mt-120 {
margin-top: 6rem;
}
.pb-180 {
padding-bottom: 9rem!important;
}
.pb-200 {
padding-bottom: 10rem!important;
}
.pb-220 {
padding-bottom: 11rem!important;
}
.mb-240 {
margin-bottom: 12rem;
}
.pb-240 {
padding-bottom: 12rem!important;
}
.pt-70 {
padding-top: 3.5rem!important;
}
.pb-70 {
padding-bottom: 3.5rem!important;
}
.pt-90 {
padding-top: 4.5rem!important;
}
.pb-90 {
padding-bottom: 4.5rem!important;
}
.pt-100 {
padding-top: 5rem!important;
}
.pt-120 {
padding-top: 6rem!important;
}
.pb-120 {
padding-bottom: 6rem!important;
}
.pt-140 {
padding-top: 7rem!important;
}
.pb-140 {
padding-bottom: 7rem!important;
}
.fs-18 {
font-size: 0.9rem;
}
.fs-20 {
font-size: 1rem;
}
.fs-22 {
font-size: 1.1rem;
}
.fs-24 {
font-size: 1.2rem;
}
.fs-30 {
font-size: 1.4rem;
}
.fs-36 {
font-size: 1.6rem;
}
.fs-40 {
font-size: 1.8rem;
}
.fs-45 {
font-size: 2rem;
}
.fs-50 {
font-size: 2.25rem;
}
.fs-60 {
font-size: 2.7rem;
}
.fs-65 {
font-size: 3rem;
}
.fs-70 {
font-size: 3.1rem;
}
.fs-75 {
font-size: 3.4rem;
}
.fs-80 {
font-size: 3.6rem;
}
.fs-100 {
font-size: 4.5rem;
}
.fs-120 {
font-size: 5.4rem;
}
.ln-1 {
line-height: 1;
}
.lh-112 {
line-height: 1.12;
}
.lh-116 {
line-height: 1.16;
}
.lh-12 {
line-height: 1.2;
}
.lh-128 {
line-height: 1.28;
}
.lh-133 {
line-height: 1.33;
}
.lh-14 {
line-height: 1.4;
}
.lh-155 {
line-height: 1.55;
}
.inner-main h1 {
font-size: 9rem;
font-weight: 800;
line-height: 1;
transform: none !important;
}
.page-template .inner-main,
.blog .inner-main,
.page-template-default:not(.home) .inner-main {
padding-top: 14rem;
}
.blog .inner-main {
padding-bottom: 0;
}
.main-blog {
padding-top: 0;
padding-bottom: 0;
}
.inner-main--content {
width: var(--max-width-content);
}
.blog .inner-main--content {
max-width: 45rem;
}
.inner-services .inner-main--content {
width: 48rem;
}
.inner-services .inner-main--content p {
font-size: 1.6rem;
line-height: 128.571%;
}
.inner-contact .inner-main--content p {
font-size: 2.7rem;
line-height: 116.667%;
letter-spacing: -1.2px;
}
.inner-main--content p {
margin-bottom: 1rem;
margin-top: 0;
font-size: 1.1rem;
line-height: 1.41;
}
.inner-clients .inner-main--content p,
.blog .inner-main--content p {
font-size: 2.7rem;
line-height: 116.667%;
letter-spacing: -1.2px;
}
.blog-post-title {
font-weight: 700;
}
/* Карточка */
.card {
background:#fff;
border-radius:20px;
padding:24px;
text-align:center;
}
.card img { display:block; width:96px; height:96px; border-radius:50%; margin:0 auto 16px; object-fit:cover; }
.card h3 { margin:0 0 8px; font-size:18px; }
.card p { margin:0; font-size:14px; line-height:1.6; }
img.about-curve2 {
position: absolute;
top: 8rem;
width: 100vw;
right: 0;
}
.about-main .ball-1 {
left: 4.5rem;
top: 14rem;
right: auto;
}
.about-main .ball-2 {
left: 20rem;
top: 49rem;
right: auto;
}
.about-main .ball-3 {
right: 22rem;
top: 22rem;
left: auto;
}
.about-main .inner-main--content h2 {
letter-spacing: -0.9px;
font-weight: 400;
font-size: 2rem;
margin-bottom: 1rem;
}
.about-values .section-content--accordions {
display: flex;
justify-content: space-between;
}
.about-values .section-content--accordion {
position: relative!important;
top:auto;
right: auto;
left: auto;
width: 25%;
}
.about-values .section-content--accordion:nth-child(2) {
margin-top: 14rem;
}
.about-values .section-content--accordion:nth-child(3) {
margin-top: -2rem;
}
.about-values .section-content--accordion:nth-child(4) {
margin-top: 12rem;
}
.about-values .accordion__panel {
position: absolute;
}
.about-values span.accordion__title {
font-size: 3rem;
transition: font-size 0.3s ease-in-out;
display: block;
}
.about-values .accordion__header.is-active span.accordion__title {
font-size: 2.5rem;
font-weight: 700;
}
.about-values .accordion__header {
padding-right: 0;
padding-left: 0;
margin-right: 0;
text-align: right;
}
.about-values .accordion__icon {
right: 0;
top: -30px;
text-align: center;
}
:root{
--peek-d: 120px; /* сколько выглядывает по бокам на десктопе */
--peek-t: 56px;
--peek-m: 24px;
}
.slider-wrap{
min-width: 0; /* ключ к жизни во flex-контейнерах */
width: 100%;
}
.slick-track {
display: flex !important;
align-items: flex-end; /* низ всех слайдов в одной линии */
}
.slick-slide {
float: none !important; /* убираем float от Slick */
height: auto !important;
}
.team-slick{ width:100%; } /* базовый размер окна для Slick */
.team-slick .slick-list{
padding: 0 var(--peek-d) !important; /* «пики» */
overflow: visible; /* не обрезать скейл и тени */
}
.team-slick .slick-slide{
margin: 0 12px; /* gap = 24px */
outline: none;
}
.team-card{
background:#fff; border-radius:20px; padding:24px 24px 50px; text-align:right;
box-shadow:0 10px 20px rgba(0,0,0,.08);
display:flex; flex-direction:column; height:100%;
transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease;
transform: scale(1);
}
.team-card--photo {
border-radius: 100%;
margin-top: -10px;
margin-bottom: 1rem;
}
/* базовые стили */
.team-card .team-card--photo {
display:block;
width:10rem;
height:10rem;
margin: 0;
object-fit: cover;
transition: all .3s ease;
margin-top: -75px;
border-radius: 100%;
margin-right: -35px;
padding: 0.6rem;
background: #fff;
}
.slick-active.slick-center .team-card .team-card--photo {
background: linear-gradient(to bottom, #1f9215 0%, #ffffff 100%);
}
.team-card .team-card--photo img {
display:block;
width:100%;
height:100%;
object-fit: cover;
border-radius: 100%;
}
.team-card h3{
font-size:1.8rem;
font-weight: 700;
transition: all .3s ease;
margin-bottom: 1rem;
margin-top: 0.5rem;
}
.team-card p{
margin:0;
font-size:1.2rem;
transition: all .3s ease;
}
.team-card p.team-card--position {
opacity: 0.41;
}
/* 1. The Truncation Logic (Applies to both) */
.team-card--position,
.team-card--text {
display: -webkit-box;
-webkit-line-clamp: 2; /* Max 2 rows */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.3s ease; /* Optional: Smooth transition */
}
/* 2. The Expanded State */
/* When the parent card has the 'is-expanded' class, show all text */
.team-card.is-expanded .team-card--position,
.team-card.is-expanded .team-card--text {
-webkit-line-clamp: unset; /* Removes the line limit */
overflow: visible;
}
/* 3. Button Styling (Basic example) */
.team-card--toggle {
margin-top: 1rem;
cursor: pointer;
background: none;
border:none;
padding: 0px;
color:#000;
text-align: right;
font-size: 1.3rem;
font-weight: 700;
position: relative;
text-decoration: underline;
}
/* центральный (главный) слайд — увеличиваем контент */
.team-slick .team-card {
zoom: 0.8;
transition: all 0.3 ease-in-out;
}
.team-slick .slick-center .team-card {
zoom: 1;
opacity: 1;
}
/* НИКАКИХ padding у .slick-list, не трогаем .slick-track шириной */
.team-slick .slick-list { overflow: visible; } /* чтобы scale/тени не резались */
/* без заданной ширины слайдов — Slick сам посчитает */
.team-slick .slick-slide { outline: none; }
ul.slick-dots button {
width: 7px;
height: 7px;
display: block;
background: #000;
border: none;
border-radius: 100%;
padding: 0;
text-indent: -9999px;
}
ul.slick-dots .slick-active button {
width: 20px;
height: 7px;
border-radius: 20px;
}
ul.slick-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 2.2rem;
}
ul.slick-dots li {
list-style: none;
}
/* адаптивные «пики» */
@media (max-width:1024px){ .team-slick .slick-list{ padding:0 var(--peek-t) !important; } }
@media (max-width:640px){ .team-slick .slick-list{ padding:0 var(--peek-m) !important; } }
.row-flex {
display: flex!important;
}
.align-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.curve {
position: absolute;
left:0;
top:0;
}
.slick-arrow {
width: 3rem;
height: 3rem;
padding: 0;
background-size: cover;
border: none;
transition: all 0.3s ease;
cursor: pointer;
background: transparent;
border: 2px solid #000;
border-radius: 50%;
}
.slick-arrow:hover {
background: #000;
}
.team-slick-arrows {
display: flex;
gap: 1rem;
}
.team-slick-arrows svg path {
fill: #000;
}
.team-slick-arrows .slick-arrow:hover svg path {
fill: #fff;
}
.logos-marquee {
position: relative;
overflow: hidden;
background: var(--purple-bg);
gap: 0;
}
.logos-marquee--inner {
gap: 3.5rem;
position: relative;
display: grid;
}
.logos-row {
display: flex;
overflow: hidden; /* safety */
}
.logos-track {
display: inline-flex;
align-items: center;
gap: 5rem;
}
.logos-track img {
height: var(--logo-h);
width: auto;
filter: brightness(0) saturate(100%) invert(1);
transition: filter 0.2s ease, transform 0.2s ease;
}
.logos-track img:hover {
filter: brightness(0) saturate(100%) invert(24%) sepia(70%) saturate(6836%) hue-rotate(317deg) brightness(93%) contrast(84%);
transform: scale(1.04);
}
@keyframes marquee-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* loop after half track */
}
@keyframes marquee-right {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.dir-left .logos-track {
animation: marquee-left 20s linear infinite;
}
.dir-right .logos-track {
animation: marquee-right 25s linear infinite;
}
/* Speeds (tweak to taste) */
.speed-1 .logos-track { animation-duration: 120s; animation-timing-function: linear; animation-iteration-count: infinite; }
.speed-2 .logos-track { animation-duration: 160s; animation-timing-function: linear; animation-iteration-count: infinite; }
.speed-3 .logos-track { animation-duration: 100s; animation-timing-function: linear; animation-iteration-count: infinite; }
/* Pause on hover */
.logos-marquee:hover .logos-track { animation-play-state: paused; }
/* Responsive tweaks */
@media (max-width: 900px) {
.logos-marquee { --logo-h: 40px; --row-gap: 18px; --fade: 32px; }
.logos-track { gap: 36px; }
}
@media (max-width: 600px) {
.logos-marquee { --logo-h: 34px; --row-gap: 16px; --fade: 24px; }
.logos-track { gap: 28px; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.logos-track { animation: none; }
}
/* 1) Force LTR INSIDE the marquee so our -50% logic holds */
.logos-marquee,
.logos-marquee .logos-row,
.logos-marquee .logos-track {
direction: ltr !important;
}
/* 2) Make sure items never wrap and no flex shrink causes holes */
.logos-row { display: flex; overflow: hidden; }
.logos-track {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
flex: 0 0 auto; /* don't shrink */
will-change: transform;
backface-visibility: hidden;
}
/* 3) Images: block-level to avoid stray whitespace, no shrinking */
.logos-track .logo {
display: block;
max-height: 4rem;
width: auto;
flex: 0 0 auto;
user-select: none;
pointer-events: auto;
transition: filter .2s ease, transform .2s ease;
max-width: 200px;
height: auto;
}
/* 4) Seamless keyframes using translate3d for subpixel stability */
@keyframes marquee-left { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes marquee-right { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
.dir-left .logos-track { animation: marquee-left 120s linear infinite; }
.dir-right .logos-track { animation: marquee-right 120s linear infinite; }
/* Optional: pause on hover */
.logos-marquee:hover .logos-track { animation-play-state: paused; }
.category-filter-tabs {
display: flex;
gap: 6rem;
margin: 0px 0 4rem;
flex-wrap: wrap;
justify-content: flex-start;
}
.tab-btn {
cursor: pointer;
font-weight: 400;
transition: all 0.3s ease-in-out;
font-size: 1.6rem;
letter-spacing: -0.72px;
background: none;
border: none;
}
.tab-btn:hover {
font-weight: 700;
}
.tab-btn.active {
font-weight: 700;
}
/* Loading Overlay */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.spinner {
border: 4px solid rgba(255, 255, 255, 0.1);
border-top: 4px solid #6366f1;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Posts Grid */
.posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 0px;
min-height: 400px;
}
/* Pagination */
.pagination-wrapper {
text-align: center;
padding: 40px 0 80px;
}
.pagination-wrapper .page-numbers {
display: inline-block;
padding: 12px 20px;
margin: 0 5px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #000;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
.pagination-wrapper .page-numbers:hover {
font-weight: 700;
}
.pagination-wrapper .page-numbers.current {
font-weight: 700;
border: 2px solid #F0649F;
border-radius: 50%;
}
.no-posts {
grid-column: 1 / -1;
text-align: center;
padding: 80px 20px;
font-size: 1rem;
color: rgba(255, 255, 255, 0.5);
}
/* Responsive */
@media (max-width: 1200px) {
.posts-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-title {
font-size: 90px;
}
}
@media (max-width: 768px) {
.posts-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.category-filter-tabs {
gap: 8px;
}
.tab-btn {
padding: 10px 20px;
font-size: 14px;
}
}
.blog .ball-1,
.single-post .ball-1 {
left: 5rem;
top: 10rem;
right: auto;
}
.blog .ball-2,
.single-post .ball-2 {
left: 12rem;
top: 60rem;
right: auto;
}
.blog .ball-3,
.single-post .ball-3 {
right: 15rem;
top: -4rem;
left: auto;
}
.blog .ball-4,
.single-post .ball-4 {
left: 30rem;
top: 8rem;
right: auto;
}
.single-post section.inner-main.inner-main--bigp {
padding: 0;
}
.single-post h1 {
font-weight: 400;
}
.blog-card-custom {
position: relative;
height: 28.5rem;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border-radius: 45px;
}
.blog-card-custom:hover {
transform: translateY(-8px);
}
.card-image-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.card-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
.blog-card-custom:hover .card-img {
transform: scale(1.1);
}
/* Placeholder for posts without featured image */
.card-image.placeholder {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.placeholder-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(26, 19, 61, 0.00) 0%, rgba(26, 19, 61, 0.40) 100%);
opacity: 0.9;
}
/* Dark overlay gradient */
.card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(26, 19, 61, 0.00) 0%, rgba(26, 19, 61, 0.40) 100%);
z-index: 1;
transition: opacity 0.3s ease;
}
/* Card Content */
.card-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 50px;
z-index: 2;
color: #fff;
}
.card-title {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 15px 0;
text-align: right;
}
.card-title a {
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
font-size: 2rem;
line-height: 1;
letter-spacing: -0.9px;
font-weight: 400;
}
.blog-card-custom:hover .card-title a {
color: #F0649F;
}
.card-meta {
display: flex;
gap: 10px;
align-items: center;
font-size: 1.1rem;
font-weight: 700;
line-height: 127.273%;
}
.meta-separator {
color: #C9C0EF;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.blog-card-custom {
height: 300px;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 1rem;
}
.card-meta {
font-size: 12px;
}
}
article.testimonials-card {
border-radius: 30px;
background: #FFF;
padding: 2.5rem 2rem 1.5rem;
zoom: 0.9;
transition: all 0.3s ease-in-out;
}
.testimonials-card--column {
min-height: 110px;
}
/* 1. Limit text to 2 rows */
.testimonials-card--text {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.3s ease;
}
/* 2. The Expanded State */
/* When the parent card has 'is-expanded', show full text */
.testimonials-card.is-expanded .testimonials-card--text {
-webkit-line-clamp: unset;
overflow: visible;
}
/* 3. Button Styling */
.testimonials-toggle {
margin-top: 1rem;
cursor: pointer;
background: none;
border:none;
padding: 0px;
color:#000;
text-align: right;
font-size: 1.3rem;
font-weight: 700;
position: relative;
text-decoration: underline;
}
.slick-center article.testimonials-card {
opacity: 1;
zoom: 1;
}
article.testimonials-card p {
margin: 0;
}
.testimonials-card--quote {
color: #F0649F;
font-size: 3rem;
font-weight: 700;
line-height: 0.18;
}
.testimonials-card--row {
display: flex;
gap: 1.5rem;
margin-top: 1.75rem;
margin-bottom: 1.25rem;
flex-direction: row;
flex-wrap: wrap;
}
.testimonials-card--name {
font-weight: 700;
color: #F0649F;
}
.testimonials-card--position {
color: rgba(0, 0, 0, 0.42);
}
.testimonials-card--company {
font-weight: 700;
}
.testimonials-card--photo {
/* display: none; */
width: 6rem;
height: 6rem;
}
.testimonials-card--column {
width: calc(100% - 7.5rem);
}
.testimonials-card--company-logo {
max-width: 130px;
height: 45px;
object-fit: contain;
object-position: right;
}
.slick-center .testimonials-card--photo {
display: block;
}
.page-template-page-clients .inner-main {
background: url(assets/images/clients-bg.svg) no-repeat 0% 180%;
}
/* Footer Styles */
footer {
background-color: #000;
color: #fff;
padding: 5.5rem 0 2.5rem;
position: relative;
}
.footer-container {
max-width: 80rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.footer-container .menu-section li {
margin-bottom: 5px;
}
.footer-container ul.sub-menu {
margin-top: 1rem;
margin-right: 1rem;
}
.footer-container ul.sub-menu li {
margin-bottom: 15px;
}
/*
.footer-container ul.sub-menu li:before {
content: "-";
font-size: 2.25rem;
margin-left: 15px;
}*/
.footer-container ul li a {
display: inline-block;
}
.footer-container ul li a:hover {
color: #F8D841;
}
.footer-container ul li.menu-item-has-children > a {
pointer-events: none;
}
.footer-container ul li.menu-item-has-children > a:hover {
color: #fff;
}
/*
.footer-container ul li a:after {
height: 2px;
width: 0%;
right: 0%;
background: #fff;
padding-bottom: 0em;
transition: all 0.6s cubic-bezier(.7, 0, .3, 1) 0s;
display: block;
content: '';
}*/
.footer-container ul li a:hover:after {
width: 100%;
}
.footer-container ul.sub-menu li a {
/* font-weight: 300; */
font-size: 1.6rem;
}
/* Contact Section (Left) */
.inner-contact .inner-main--content {
max-width: 40rem;
}
.inner-contact .ball-1 {
left: 5rem;
top: 10rem;
right: auto;
}
.inner-contact .ball-2 {
top: 8rem;
left: 30rem;
right: auto;
}
.inner-contact .ball-3 {
top: -2rem;
right: 15rem;
left: auto;
}
.inner-contact .ball-4 {
bottom: 1.5rem;
left: 15rem;
right: auto;
top: auto;
}
.error-page-content .ball-1 {
left: 6.5rem;
top: 21rem;
right: auto;
}
.error-page-content .ball-2 {
right: 15.5rem;
top: 9rem;
left: auto;
}
.contact-section {
flex: 1;
min-width: 250px;
text-align: right;
}
.contact-sidebar {
display: flex;
align-items: flex-end;
}
.phone-number {
margin-bottom: 2rem;
direction: ltr;
text-align: left;
color: #F0649F;
font-size: 2rem;
line-height: 122.727%;
}
.phone-number a {
color: #fff;
transition: all 0.3s ease;
}
.phone-number a:hover {
color: #F0649F;
}
footer .social-links {
display: flex;
gap: 15px;
margin-bottom: 20px;
direction: ltr;
}
footer .social-links a {
display: inline-block;
width: 60px;
height: 60px;
border: 2px solid #F0649F;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
footer .social-links a:hover {
background-color: #F0649F;
color: #000;
}
footer .email {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
line-height: 135.714%;
margin-bottom: 0px;
display: block;
direction: ltr;
text-align: left;
}
footer .address {
font-size: 1.2rem;
line-height: 135.714%;
text-align: left;
}
/* Menu Section (Right) */
.menu-section {
flex: 1;
min-width: 250px;
display: flex;
gap: 6rem;
}
.menu-section ul {
list-style: none;
text-align: right;
margin: 0;
padding: 0;
}
.menu-section li {
margin-bottom: 15px;
}
.menu-section a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
font-size: 2.25rem;
line-height: 120%;
}
.menu-section a:hover {
color: #C9C0EF;
}
/* Logo Section (Bottom Center) */
.logo-section {
width: 100%;
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #333;
}
.logo-container {
display: flex;
align-items: baseline;
gap: 2rem;
justify-content: space-between;
padding-top: 4rem;
flex-direction: row-reverse;
}
.logo-footer {
padding-top: 1rem;
display: flex;
align-items: baseline;
gap: 2rem;
}
.created-by a {
color: #fff;
position: relative;
}
.home .created-by {
position: absolute;
bottom: 2rem;
right: 5rem;
bottom: 2.5rem;
z-index: 9;
}
.home .created-by a {
color: #000;
}
.created-by a:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0px;
height: 1px;
background: #fff;
transition: all 0.3s ease;
}
.home .created-by a:before {
background: #000;
}
.created-by a:hover:before {
width: 100%;
}
.created-by {
display: flex;
gap: 0.5rem;
font-size: 0.8rem;
}
/* Responsive */
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
}
.contact-section,
.menu-section {
width: 100%;
text-align: center;
}
.social-links {
justify-content: center;
}
.email,
.phone-number {
text-align: center;
}
.menu-section ul {
text-align: right;
}
}
/* Updated Back to Top Button Styles */
.back-to-top {
position: fixed;
bottom: 3rem;
right: 0;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
z-index: 1000;
transition: all 0.3s ease;
border-radius: 50%;
/* Скрываем по умолчанию */
opacity: 0;
visibility: hidden;
transform: translateY(20px); /* Небольшой эффект появления снизу */
}
.back-to-top svg path {
/* Меняем цвет иконки на белый */
fill: #000 !important;
}
.back-to-top.on-footer svg path {
/* Меняем цвет иконки на белый */
fill: #ffffff !important;
}
.back-to-top:hover {
background-color: #F0649F;
transform: translateY(-5px); /* Легкий подъем при наведении */
}
/* Класс, который добавляет JS при скролле */
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.inner-clients img.ball.ball-2 {
bottom: auto;
top: 10rem;
left: 5rem;
right: auto;
}
.inner-clients img.ball.ball-1 {
bottom: auto;
right: 60rem;
top: 30rem;
}
.faq-section {
padding: 80px 0;
}
.faq-title {
text-align: center;
font-size: 48px;
font-weight: 700;
color: #333;
margin-bottom: 60px;
font-family: 'Heebo', sans-serif;
}
.faq-wrapper {
max-width: 62rem;
/* margin: 0 auto; */
}
.faq-item {
padding: 0;
transition: all 0.3s ease;
padding: 3.5rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.22);
margin-right: 7rem;
}
.faq-item:hover {
transform: translateY(-2px);
}
/*.faq-item.active .faq-question h3 span {
color: var(--main-pink);
}*/
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
position: relative;
}
.faq-question h3 {
font-size: 2.25rem;
font-weight: 700;
margin: 0;
flex: 1;
text-align: right;
line-height: 1.1;
}
.faq-toggle:hover {
transform: scale(1.1);
box-shadow: 0 5px 15px rgba(255, 107, 157, 0.4);
}
.faq-toggle {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
border: none;
background: #000;
color: #f0649f;
font-size: 3rem; /* הקטן קצת */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
position: absolute;
padding: 0;
line-height: 1; /* חשוב! */
right: -7rem;
top: 0.5rem;
}
.plus-icon {
display: block;
transition: transform 0.3s ease;
transform: translateY(-0.11em); /* כוונון עדין למעלה */
}
.faq-answer {
display: none;
padding: 0;
}
.faq-answer-content {
font-size: 1.8rem;
line-height: 1.25;
text-align: right;
}
.faq-answer-content p {
margin: 0 0 15px 0;
}
.faq-answer-content p:last-child {
margin-bottom: 0;
}
/* Responsive */
@media (max-width: 768px) {
.faq-section {
padding: 60px 0;
}
.faq-title {
font-size: 36px;
margin-bottom: 40px;
}
.faq-question {
padding: 20px;
}
.faq-question h3 {
font-size: 18px;
padding-left: 15px;
}
.faq-toggle {
width: 40px;
height: 40px;
font-size: 24px;
}
.faq-answer {
padding: 0 20px 20px 20px;
}
.faq-answer-content {
padding-right: 55px;
font-size: 15px;
}
}
/* RTL Support */
[dir="rtl"] .faq-question h3 {
padding-left: 0;
}
[dir="rtl"] .faq-answer-content {
padding-left: 0px;
padding-top: 2rem;
}
.inner-projects .ball-1 {
top: 42.75rem;
right: 1rem;
}
.inner-projects .ball-2 {
top: 100rem;
left: 7rem;
right: auto;
}
.inner-projects .ball-3 {
top: 15rem;
left: 26.5rem;
right: auto;
}
.inner-projects .ball-4 {
left: 2rem;
top: 110rem;
}
/* Main Content Grid */
.content-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
/* Left Content Area */
.content-display {
padding-left: 20px;
}
.content-section {
display: none;
animation: fadeIn 0.5s ease;
}
.content-section.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.content-section p, .content-section li {
font-size: 1.1rem;
line-height: 154%;
letter-spacing: -0.44px;
}
.content-section ul, .content-section ol {
padding: 0;
margin-right: 1rem;
}
/* Right Navigation */
.programs-nav {
position: sticky;
top: 40px;
}
.nav-list {
list-style: none;
}
.nav-list li {
margin-bottom: 5px;
}
.nav-link {
color: rgba(0, 0, 0, 0.25);
font-size: 2.5rem;
font-weight: 300;
line-height:116.667%;
letter-spacing: -1.2px;
margin-bottom: 3.5rem;
position: relative;
transition: all 0.3s ease;
display: block;
}
.nav-link::before {
content: '';
position: absolute;
top: -10px;
right: -100%;
width: 30px;
height: 30px;
background: #BAAAFF;
transition: right 0.3s ease;
border-radius: 100%;
}
@media (min-width: 767px) {
.sub-menu li a {
position: relative;
}
.sub-menu li a::before {
content: '';
position: absolute;
top: -0.5rem;
right: -3rem;
width: 3rem;
height: 3rem;
background: url(assets/images/menu-hover.svg) no-repeat;
transition: all 0.3s ease;
background-position: bottom;
background-size: 50%;
opacity: 0;
}
.footer-container .sub-menu li a::before {
top: -1rem;
}
.menu.open .sub-menu li a:hover::before {
opacity: 1;
}
.footer-container ul.sub-menu li a:hover::before {
opacity: 1;
}
.footer-container ul.sub-menu li a {
transform: translateX(0);
transition: all 0.3s ease;
}
.footer-container ul.sub-menu li a:hover {
transform: translateX(-3rem);
}
}
.nav-link:visited {
color: rgba(0, 0, 0, 0.25);
}
.nav-link:hover,
.nav-link.active {
color: #000;
padding-right: 2rem;
}
.nav-link:hover::before,
.nav-link.active::before {
right: 0;
}
.nav-link.active {
color: #000;
}
.nav-link.active:hover {
color: #000;
}
/* Responsive */
@media (max-width: 768px) {
.content-wrapper {
grid-template-columns: 1fr;
}
.programs-nav {
position: static;
margin-bottom: 30px;
order: -1;
}
}
.service1-why {
border-radius: 28px;
border: 2px solid #1A133D;
background: #1A133D;
max-width: calc(100% - 7rem);
margin: 0 auto;
gap: 0;
}
.service1-why .row {
padding: 2rem 9rem 3rem 0rem;
justify-content: space-between;
}
.service1-why--column_number {
color: #F0649F;
}
.service1-why--column_text {
max-width: 17.5rem;
color: #fff;
}
.page-template-page-services2 .service1-why--column_text {
max-width: 21.5rem;
padding-bottom: 2.5rem;
color: #000;
}
.glass-container h1 {
color: #000;
text-align: center;
font-size: 40rem;
font-weight: 500;
}
.glass-container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.error-page-content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.error-page-content h1 {
margin: 0;
position: relative;
z-index: 1; /* Below glass */
margin-top: -10rem;
}
.glass-effect-moving {
position: absolute;
top: calc(50% + 14rem);
left: 50%;
transform: translate(-50%, -50%);
width: 100vh;
height: 100vh;
border-radius: 1000px;
border: 2px solid rgba(255, 255, 255, 0.3); /* More transparent border */
background: rgba(255, 255, 255, 0.08); /* More transparent background */
box-shadow: 0 4px 3.8px 0 rgba(255, 255, 255, 0.3) inset; /* More transparent shadow */
backdrop-filter: blur(15px) saturate(150%);
-webkit-backdrop-filter: blur(15px) saturate(150%);
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother and slower */
will-change: transform;
z-index: 2;
pointer-events: none;
}
.homepage-button {
position: absolute;
bottom: 4rem;
z-index: 3; /* Above glass */
text-decoration: none;
color: #000;
transition: transform 0.2s;
text-align: center;
}
.homepage-button h2 {
color: #000;
text-align: center;
font-size: 2rem;
font-weight: 400;
line-height: 1;
letter-spacing: -0.9px;
}
.homepage-button button {
color: #fff;
font-size: 22px;
font-weight: 400;
border: none;
border-radius: 50px;
background: #F0649F;
cursor: pointer;
padding: 20px 60px;
margin-top: 2.2rem;
display: inline-flex;
gap: 18px;
}
.homepage-button button span {
transition: all 0.3s ease;
}
.homepage-button button:hover span {
transform: rotate(-45deg);
}
.error-page-content .ball-2 {
right: 15%;
bottom: 75%;
}
.service-form .container {
border-top: 3px solid var(--main-pink);
}
.service3-quote--text {
color: #FFF;
font-size: 3.25rem;
line-height: 120%;
position: relative;
}
.service3-quote .service1-why--row.justify-content {
width: fit-content;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
position: relative;
}
.service3-quote--text:before {
content: "\"";
position: absolute;
top: -1rem;
right: -1rem;
color: #F0649F;
font-weight: 700;
font-size: 3rem;
font-family: Noto Sans Hebrew;
}
.service3-quote--text:after {
content: "\"";
position: absolute;
bottom: -3rem;
left: -2rem;
color: #F0649F;
font-weight: 700;
font-size: 3rem;
line-height: 1;
font-family: Noto Sans Hebrew;
}
.service3-quote--name {
color: #FFF;
font-size: 1.2rem;
line-height: 141.667%;
}
section.service3-quote {
padding: 2.75rem 6rem;
}
.inner-services .ball-1 {
top: 17.5rem;
right: auto;
left: 25rem;
}
.inner-services .ball-2 {
top: 42rem;
right: 0rem;
}
.page-template-page-services2 .inner-services .ball-1 {
top: 8rem;
right: auto;
left: 36rem;
}
.page-template-page-services2 .inner-services .ball-2 {
top: 24rem;
left: 11rem;
right: auto;
}
.page-template-page-services2 .inner-services .ball-3 {
top: 42rem;
right: 0rem;
left: auto;
}
.page-template-page-services2 .inner-services .ball-4{
top: 100rem;
right: auto;
left: 12.5rem;
}
.row.service1-why--mistakes.justify-content {
gap: 3rem;
}
.service1-why--mistakes .service1-why--column {
border-bottom: 3px solid #F0649F;
}
.service1-why--column_icon {
height: 160px;
}
.service1-why--column_icon img {
animation: infinite-rotate 5s linear infinite;
}
@keyframes infinite-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*
.page-template-page-services2 .nav-link:hover,
.page-template-page-services2 .nav-link.active {
color: #000;
font-weight: 500;
}
.page-template-page-services2 .nav-link::before {
background: url(assets/images/service2-bullet.webp);
width: 38px;
height: 38px;
background-size: cover;
top: 20px;
}
.page-template-page-services2 .nav-link:hover:before,
.page-template-page-services2 .nav-link.active:before {
right: -15px;
}
*/
.row {
display: grid;
}
.row.xl-2 {
grid-template-columns: repeat(2, 1fr);
}
.row.xl-3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
.row.xs-1 {
grid-template-columns: 1fr;
}
}
.gap-240 {
gap: 12rem;
}
.gap-280 {
gap: 14rem;
}
.main-single-post {
max-width: 45rem;
}
.single-post--content {
max-width: 50rem;
margin-top: -15px;
}
.single-post--meta {
color: #F0649F;
font-size: 1.1rem;
line-height: 127.273%;
display: flex;
gap: 5px;
}
.single-post--content p,
.single-post--content li {
font-size: 1rem;
line-height: 1.5;
letter-spacing: -0.4px;
}
.single-post--content ul {
margin: 0 1rem;
padding: 0;
}
.single-post--content h2 {
font-size: 1.2rem;
}
.single-post--content a {
color: var(--main-pink);
text-decoration: underline;
}
.single-post--content__special {
background: #1A133D;
padding: 2.25rem 3.5rem;
color: #fff;
border-radius: 45px;
margin: 1.5rem 0;
}
.single-post--content__special p {
font-size: 1.4rem;
line-height: 1.56;
letter-spacing: -0.6px;
margin:0;
}
.post-share {
border-top: 1px solid #000;
padding-top: 25px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.post-share a {
border: 2px solid #F0649F;
text-decoration-line: line-through;
text-decoration: none;
width: 2rem;
display: inline-block;
height: 2rem;
text-align: center;
line-height: 1.9rem;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.post-share a:hover {
transform: scale(1.1);
background: var(--main-pink);
}
.type-in-words {
position: relative;
white-space: pre-wrap;
transform: none !important;
}
.type-in-words .word{
display: inline-block;
opacity: 0;
transform: translateY(.35em);
filter: blur(2px);
transition: opacity .4s ease, transform .45s cubic-bezier(.2,.7,0,.98), filter .45s;
}
.type-in-words .word.in{
opacity: 1;
transform: none;
filter: none;
}
.s5 .section-head {
width: 40%;
}
.tp-techonolgy-capsule-wrapper {
height: 75vh;
position: relative;
overflow: hidden;
z-index: 9;
}
[data-tp-throwable-scene] {
max-width: 60%;
margin-right: 35%;
}
.tp-techonolgy-capsule-wrapper .tp-techonolgy-capsule-item-wrapper>p {
position: absolute;
display: inline-block;
margin-bottom: 0;
left: 0;
top: 0;
user-select: none;
pointer-events: auto;
transition: none;
}
.tp-techonolgy-capsule-item {
width: 200px;
height: 200px;
background: url(assets/images/bubble-bg.svg);
background-size: cover;
border-radius: 300px;
-webkit-transform: translate(-50%, -50%) rotate(.01rad);
-moz-transform: translate(-50%,-50%) rotate(.01rad);
-ms-transform: translate(-50%,-50%) rotate(.01rad);
-o-transform: translate(-50%,-50%) rotate(.01rad);
transform: translate(-50%, -50%) rotate(.01rad);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media (max-width: 1680px) {
.section-content--numbers {
max-width: 100%;
}
.inner-projects .ball-4 {
max-width: 15rem;
}
.s6 .section-head {
padding-top: 3rem;
transform: scale(0.8);
transform-origin: top right;
}
.ball {
transform: scale(0.8);
}
}
@media (max-width: 1440px) {
.s2 .ball-3 {
top: 30rem;
right: 15rem;
max-width: 100px;
}
.s2 .ball-2 {
top: 25rem;
left: 45rem;
max-width: 150px;
}
.s2 .ball-2-2 {
max-width: 120px;
}
.section-content--accordion:nth-child(1) {
top:1rem;
}
.section-content--accordion:nth-child(2) {
position: absolute;
top:1rem;
}
.section-content--accordion:nth-child(3) {
position: absolute;
top: 15.5rem;
right: 5rem;
}
.about-values .section-content--accordion {
position: relative !important;
top: auto!important;
right: auto!important;
left: auto!important;
}
.section-content--faqs .section-content--accordion:nth-child(3) {
top: 11.5rem;
}
.section-content--faqs .section-content--accordion:nth-child(2) {
top: 17.25rem;
}
.tp-techonolgy-capsule-item {
zoom: 0.8;
}
.menu ul > li > ul > li {
line-height: 116.667%;
}
.accordion__panel {
width: calc(100vw / 4);
}
.s2 .accordion__panel {
max-width: 32rem;
width: auto;
}
.about-values .section-content--accordions {
padding-top: 2rem;
}
footer {
padding: 5.5rem 0 5.5rem;
}
.back-to-top {
bottom: 1rem;
}
}
@media (max-width: 767px) {
.container {
max-width: 100vw;
width: 100vw;
padding: 0 1rem;
}
.inner-main h1 {
font-size: 5.5rem;
}
.inner-main--content {
width: calc(100vw - 2rem);
padding: 0 1rem;
}
.about-values .section-content--accordions {
flex-direction: column;
}
.about-values .section-content--accordion:nth-child(2), .about-values .section-content--accordion:nth-child(3),
.about-values .section-content--accordion:nth-child(4) {
margin-top: 6rem;
}
.now-title {
padding: 0 1rem;
}
.logo {
max-width: 65%;
}
.logo svg {
max-width: 100%;
}
.menu {
padding: 7rem 3rem;
}
.pb-240 {
padding-bottom: 6rem !important;
}
.row-flex {
flex-direction: column;
}
ul.slick-dots {
margin: 2rem 0;
padding: 0;
}
.menu-section {
gap: 3rem;
justify-content: center;
}
.inner-services .inner-main--content {
width: 100%;
}
.service1-why .row {
padding: 3rem 2.5rem 4rem 2.5rem;
}
.row.xl-3 {
grid-template-columns: repeat(1, 1fr);
}
.service1-why {
max-width: calc(100% - 3rem);
}
.pb-220 {
padding-bottom: 3.5rem !important;
}
.nav-list {
padding: 0;
margin: 0;
}
.nav-link {
font-size: 2rem;
margin-bottom: 3rem;
}
.content-display {
padding-top: 0rem !important;
}
.programs-nav {
margin-bottom: 0;
}
.service1-why {
margin: -3rem auto 7rem;
}
.fs-120 {
font-size: 3.3rem;
}
#scrollContainer::before {
display: none;
}
.stats {
gap: 1rem;
flex-direction: column;
}
.section-content--numbers {
position: relative;
}
.section-content--accordion:nth-child(1),
.section-content--accordion:nth-child(2),
.section-content--accordion:nth-child(3) {
position: relative;
top: auto;
right: auto;
left: auto;
max-width: 100vw;
margin-bottom: 2rem;
}
.accordion__panel {
max-width: 100vw;
width: calc(100vw - 20px);
}
.s6 .section-head {
max-width: 100%;
}
.form-row-flex p {
flex-direction: column;
gap: 1rem;
}
.c-accept + .wpcf7-list-item-label {
padding-left: 0px;
}
.contact-block .social-media {
justify-content: center;
}
.contact-block {
text-align: center;
}
.s2 .section-content {
padding-top: 1rem !important;
padding: 0;
}
.accordion__icon {
top: 5px;
}
.section-content--numbers {
bottom: 0rem;
max-width: 100%;
margin: 1rem 0 4rem;
}
.accordion__header {
margin-right: 0;
font-size: 1.4rem;
padding-right: 32px;
}
.now-title {
top: 10px;
}
.now-title.scrolled {
padding: 1rem;
top: 0;
}
.section-content--accordion .accordion__icon:before {
line-height: 25px;
height: 25px;
font-size: 20px;
transform: translateY(-2px);
display: block;
}
.s4 .section-head {
max-width: 100%;
position: relative;
bottom: auto;
right: auto;
}
.section-content--faqs .section-content--accordion:nth-child(1),
.section-content--faqs .section-content--accordion:nth-child(2),
.section-content--faqs .section-content--accordion:nth-child(3),
.section-content--faqs .section-content--accordion:nth-child(4),
.section-content--faqs .section-content--accordion:nth-child(5),
.section-content--faqs .section-content--accordion:nth-child(6),
.section-content--faqs .section-content--accordion:nth-child(7) {
position: relative;
top: auto;
right:auto;
left: auto;
bottom: auto;
}
.accordion__inner {
padding: 25px 1.5rem;
}
/*
.section-content--accordion:nth-child(1) {
text-align: left;
margin-left: 20px;
}
.section-content--accordion:nth-child(2) {
margin-right: 30px;
}
.section-content--accordion:nth-child(3) {
margin-right: 35%;
}
*/
.s4 .section-content {
margin-right: 0;
margin-top: 30px;
}
.section-content--faqs span.accordion__title {
white-space: normal;
font-size: 18px;
}
.section-content--faqs .accordion__panel {
width: auto!important;
}
.section-content--faqs .accordion__icon {
top: 50%;
transform: translateY(-50%);
}
.section-content--faqs .accordion__header {
text-align: right;
padding: 0px 30px 0px 0px;
}
.section-content--faqs .section-content--accordion .accordion__icon {
text-align: center;
}
.s1 .ball-1 {
top: 8rem;
display: none;
}
.s2 .ball-1 {
display: none;
}
.s2 .ball-2-2 {
display: none;
}
.s2 .section-head p {
font-size: 16px;
}
.accordion__header {
font-size: 1.3rem;
}
.fs-18 {
font-size: 16px;
}
.fs-80 {
font-size: 4.5rem;
}
.s4 .ball-5 {
top: 0%;
right: 60%;
display: none;
}
.s4 .ball-6 {
top: 90%;
right: 20%;
max-width: 80px;
}
.s3 .ball-4 {
bottom: 55%;
left: 5%;
max-width: 80px;
}
.s4 .section-head p {
font-size: 16px;
}
.s4 .section-head h2, .s4 .section-head h2 p {
font-size: 2.75rem;
}
.s2 .ball-2-2 {
top: -5rem;
}
.ball-2 {
top: -40rem;
left: 5rem;
max-width: 100px;
}
.fs-30 {
font-size: 1.3rem;
}
.btn {
font-size: 1.45rem;
padding: 0px 20px 5px 5px;
}
.btn-icon {
width: 45px;
height: 45px;
line-height: 45px;
}
.stat {
text-align: center;
}
.s2 .ball-3 {
max-width: 75px;
left: 1rem;
right: auto;
}
.accordion__icon {
width: 25px;
height: 25px;
}
.s3 .section-head h2 {
font-size: 3rem;
padding: 0;
}
/*
.section-content--faqs .section-content--accordion:nth-child(1) {
margin-right: 20px;
margin-left: auto;
text-align: right;
}
.section-content--faqs .section-content--accordion:nth-child(2) {
margin-left: 20px;
margin-right: auto;
text-align: right;
}
.section-content--faqs .section-content--accordion:nth-child(3) {
margin-right: 0px;
margin-left: auto;
text-align: right;
}
*/
.section-content--faqs .section-content--accordion {
width: 100% !important;
margin-bottom: 35px;
text-align: right;
}
.section-content--faqs .accordion__inner {
padding: 0px 5px;
}
.fs-75 {
font-size: 2.75rem;
}
.s6 .section-head > p {
font-size: 1.3rem;
margin-bottom: 3.5rem;
}
.contact-block .social-media a {
width: 35px;
height: 35px;
}
.contact-block .social-media a svg {
max-width: 15px;
display: block;
max-height: 20px;
}
.about-main .ball-1 {
display: none;
}
.about-values span.accordion__title {
font-size: 2.5rem;
}
.footer-container ul.sub-menu li {
margin-bottom: 5px;
}
.footer-container ul.sub-menu li:before {
content: "-";
font-size: 1.75rem;
margin-left: 5px;
}
.footer-container ul.sub-menu {
margin-top: 5px;
}
.phone-number {
margin-top: 5rem;
}
footer .email {
text-align: center;
}
.service1-why--column_text {
max-width: 100%;
}
.gap-240 {
gap: 2rem;
}
.menu-section a {
font-size: 1.5rem;
}
footer .address {
text-align: center;
}
.logo-container svg {
max-width: 80%;
}
.logo-container {
flex-direction: column;
}
.logo-footer {
flex-direction: column-reverse;
justify-content: center;
text-align: center;
width: 100%;
align-items: center;
}
.created-by {
width: 100%;
justify-content: center;
}
.home .created-by {
right: auto;
left: auto;
}
.back-to-top {
bottom: 10px;
}
footer {
padding: 4.5rem 0 6rem;
}
body {
font-size: 1.1rem;
}
section.service3-quote {
padding: 2.75rem 3rem;
}
.service3-quote--text {
font-size: 2rem;
}
.service3-quote--name {
font-size: 20px;
}
.page-template-page-projects .inner-main h1 {
font-size: 3.5rem;
}
.page-template-page-projects .faq-item {
padding: 2rem 0;
margin-right: 2rem;
}
.page-template-page-projects .faq-toggle {
right: -2rem;
top: 1rem;
}
.page-template-page-projects .inner-projects .ball-4 {
max-width: 100px;
bottom: -25px;
top: auto;
}
.inner-clients .inner-main--content p, .blog .inner-main--content p {
font-size: 1.7rem;
}
.pb-200 {
padding-bottom: 5rem !important;
}
.fs-100 {
font-size: 2.8rem;
}
.inner-clients .inner-main--content p, .blog .inner-main--content p {
font-size: 1.7rem;
}
.main-blog {
padding: 0;
}
.category-filter-tabs {
gap: 1rem;
justify-content: space-between;
}
.tab-btn {
padding: 10px 10px;
font-size: 16px;
}
.single-post section {
padding: 0 20px;
}
.single-post--content p, .single-post--content li {
font-size: 1.1rem;
}
.single-post--content__special {
padding: 2.25rem 2rem;
}
.inner-contact .inner-main--content p {
font-size: 1.7rem;
}
.contact-sidebar {
justify-content: center;
}
.s5 .ball-9,
.s5 .ball-8 {
display: none;
}
.pt-120.about-team {
padding-top: 2rem !important;
}
.content-wrapper {
gap: 10px;
}
.faq-answer-content {
padding-right: 0;
}
.blog .inner-main {
padding-bottom: 0;
padding: 0;
padding-top: 14rem;
}
.single-post--meta {
flex-direction: column;
}
.page-template-page-contact form.wpcf7-form {
width: calc(100vw - 4rem);
margin: 0 auto;
}
}
/* Mobile vertical scroll */
@media (max-width: 1200px) {
.viewport {
overflow-y: auto !important;
overflow-x: hidden !important;
height: auto !important;
}
.scroll-container {
overflow: visible !important;
}
#scrollContainer {
display: block !important;
transform: none !important;
width: 100% !important;
}
#scrollContainer.horizontal-enabled {
display: block !important;
}
.scroll-container--section {
align-items: center;
width: 100% !important;
min-height: 100vh;
margin: 0 !important;
padding: 20px;
height: auto;
flex-direction: column;
justify-content: center;
}
.scroll-container--section.s1 {
justify-content: end;
padding-bottom: 5rem;
height: 100vh;
}
.scroll-container--section.s3 {
justify-content: center;
grid-template-rows: 1fr;
align-items: center;
padding-bottom: 7rem;
}
/* Hide horizontal navigation on mobile */
.pagination {
display: none !important;
}
.drag-hint {
display: none !important;
}
}
@media (max-width: 768px) {
[data-tp-throwable-scene] {
max-width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
width: 100% !important;
}
.tp-techonolgy-capsule-wrapper {
height: 100vh;
width: 100vw !important;
max-width: 100vw !important;
}
.tp-techonolgy-capsule-item {
zoom: 0.5;
}
}
.menu-container {
display: flex;
gap: 1.5rem;
align-items: center;
flex-direction: row-reverse;
}
.menu-container .language a {
color: var(--tp-common-black);
}
.menu-container .language a:hover {
font-weight: 500;
}
@media (max-width: 768px) {
[data-tp-throwable-scene] {
pointer-events: none !important;
touch-action: pan-y !important; /* Allow vertical scrolling */
}
.tp-techonolgy-capsule-wrapper {
pointer-events: none !important;
touch-action: pan-y !important;
}
.tp-techonolgy-capsule-item-wrapper > p {
pointer-events: none !important;
}
.scroll-container--section {
background: none;
}
/*.scroll-container--section.s1 {
background: url(assets/images/Home_Page_frame_1.png) top no-repeat;
background-size: cover;
}
.scroll-container--section.s2 {
background: url(assets/images/Home_Page_frame_2.png) top no-repeat;
background-size: cover;
}
.scroll-container--section.s3 {
background: url(assets/images/Home_Page_frame_3.png) top no-repeat;
background-size: cover;
}
.scroll-container--section.s4 {
background: url(assets/images/Home_Page_frame_4.png) top no-repeat;
background-size: cover;
}
.scroll-container--section.s5 {
background: url(assets/images/Home_Page_frame_5.png) top no-repeat;
background-size: cover;
}
.scroll-container--section.s6 {
background: url(assets/images/Home_Page_frame_6.png) top no-repeat;
background-size: cover;
}*/
#scrollContainer {
background: url(assets/images/BG.jpg) top no-repeat;
background-size: cover;
}
.s2 .ball-2 {
display: none;
}
.scroll-container .content.horizontal-enabled {
position: relative;
}
.scroll-container {
height: 100%;
}
.viewport {
position: relative;
height: 100%;
}
}
.accordion__header {
border: none !important; /* Reset default browser border */
outline: none !important; /* Reset focus outline */
-webkit-appearance: none; /* Reset iOS/Safari default styling */
appearance: none; /* Standard appearance reset */
box-shadow: none !important; /* Prevent default shadows */
}
button.button_change_visibility {
background: #000;
}