/* -------------------------------------------------------

 01. Custom & Google Font style
 02. Basics style
 03. Helper style
 04. Selection style 
 05. Preloader style
 06. Owl-Theme custom style
 07. Section style
 08. Navbar style
 09. Header style
 10. Slider-fade style (Homepage Slider)
 11. Slider style (Inner Page Slider)
 12.Kenburns Slider style
 13. Page Banner Header style
 14. Page Banner Header 2 style
 15. Video Background (Homepage Video)
 16. About style
 17. Team style
 18. Services style
 19. Wedding Date style
 20. Portfolio style
 21. Pricing style
 22. Signup style
 23. Clients style 
 24. Gallery style
 25. Isotope/Masonry Gallery style
 26. Video style
 27. Testimonials style
 28. Accordion Box (for Faqs) style
 29. Blog style
 30. Blog2 style
 31. Post style
 32. Contact style
 33. Buttons style
 34. Coming Soon
 35. 404 Page style
 36. Footer style
 37. toTop Button style
 38. Overlay Effect Bg image style
 39. Responsive (Media Query)

------------------------------------------------------- */

/* Custom & Google Font style */
/* Locally hosted original families; provenance and licenses are in fonts/. */
@font-face {
    font-family: 'Dantina';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Dantina-Lj5y.woff') format('woff');
}
@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/didact-gothic-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/didact-gothic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/didact-gothic-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/didact-gothic-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/didact-gothic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/didact-gothic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/playfair-display.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Main text scale: eight roles. Icon, ornament and 404 sizes are separate.
   Spacing follows a 4/8 scale. Literal image/grid geometry and zero remain
   structural values, not design tokens. Breakpoints use literal CSS values:
   max 575.98 / 767.98 / 991.98 / 1199.98; min 576 / 768 / 992 / 1200. */
:root {
    --font-body: 'Didact Gothic', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-script: 'Dantina', cursive;
    --font-icons: 'Themify';
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --color-text: #262924;
    --color-muted: #555b52;
    --color-accent: #748173;
    --color-accent-strong: #52634f;
    --color-surface: #fff;
    --color-surface-soft: #f7f7f2;
    --color-line: #d9ddd5;
    --color-scrim: #000;
    --color-clear: transparent;
    --color-line-inverse: rgb(255 255 255 / 30%);
    --color-line-inverse-strong: rgb(255 255 255 / 70%);
    --color-line-accent: rgb(116 129 115 / 30%);
    --color-shadow: rgb(38 41 36 / 8%);
    --color-shadow-strong: rgb(38 41 36 / 20%);
    --color-scrim-soft: rgb(0 0 0 / 8%);
    --color-scrim-text: rgb(0 0 0 / 64%);
    --color-scrim-strong: rgb(0 0 0 / 76%);
    --gradient-card: linear-gradient(to bottom, var(--color-clear), var(--color-scrim-text) var(--space-5), var(--color-scrim-strong));
    --gradient-hero: linear-gradient(to bottom, var(--color-scrim-strong) 0, var(--color-scrim-text) 7rem, var(--color-shadow-strong) 18rem, var(--color-scrim-text) 100%);
    --text-small: 0.875rem;
    --text-body: 1rem;
    --text-lead: 1.125rem;
    --text-title-small: 1.375rem;
    --text-title: 1.75rem;
    --text-section: 2.25rem;
    --text-display: 3rem;
    --text-hero: 4rem;
    --text-wordmark-compact: 1.25rem;
    --icon-tiny: 0.5rem;
    --icon-small: 0.75rem;
    --icon-normal: 1rem;
    --icon-medium: 1.25rem;
    --icon-large: 2rem;
    --icon-play: 2.5rem;
    --ornament-quote: 6.875rem;
    --display-error: 11.25rem;
    --display-error-small: 7.5rem;
    --leading-body: 1.75;
    --leading-relaxed: 1.5;
    --leading-heading: 1.25;
    --leading-tight: 1.2;
    --leading-single: 1;
    --leading-display: 0.5;
    --leading-loose: 3;
    --tracking-normal: 0;
    --tracking-subtle: 0.06em;
    --tracking-label: 0.12em;
    --tracking-wide: 0.16em;
    --tracking-display: 0.24em;
    --space-pixel: 1px;
    --space-half: 0.125rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-18: 4.5rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-26: 6.5rem;
    --space-30: 7.5rem;
    --space-32: 8rem;
    --space-star-gap: 0.9em;
    --space-star-bottom: 1.2em;
    --space-rating-bottom: 2em;
    --radius-small: 0.25rem;
    --radius-soft: 0.5rem;
    --radius-pill: 999px;
    --radius-circle: 50%;
    --duration-fast: 180ms;
    --duration-normal: 320ms;
    --duration-slow: 600ms;
    --duration-fold: 850ms;
    --duration-circle: 8s;
    --duration-bounce: 2s;
    --duration-reduced: 0.01ms;
    --delay-none: 0ms;
    --delay-step: 100ms;
    --delay-second: 200ms;
    --ease-standard: cubic-bezier(.2, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-fold: cubic-bezier(.76, 0, .24, 1);
    --image-zoom: 1.04;
    --motion-rise: 1.25rem;
    --motion-reveal: 2.5rem;
    --motion-card-shift: 4.5rem;
    --motion-flip-angle: 180deg;
    --motion-flip-shift: 650px;
    --motion-flip-depth: 60px;
    --motion-flip-scale: .88;
    --motion-line-scale: .25;
    --nav-height: 100px;
    --nav-height-compact: 4.5rem;
    --filter-logo-dark: brightness(0.16);
    --overlay-decoration: 0.24;
    --overlay-text: 0.64;
    --overlay-hero: 0.76;
    --overlay-opaque: 1;
    --hero-nav-space: 8rem;
    --hero-arrow-space: 10rem;
    --duration-caption: 5000ms;
    --hero-vote-delay: 1.1s;
    --motion-focus-blur: 0.375rem;
    --control-leading-34: 2.125rem;
    --control-leading-40: 2.5rem;
    --control-leading-50: 3.125rem;
    --control-leading-90: 5.625rem;
    --control-leading-100: 6.25rem;
    --control-leading-24: 1.5rem;
    --control-leading-27: 1.6875rem;
    --control-leading-37: 2.3125rem;
    --control-leading-20: 1.25rem;
    --control-leading-30: 1.875rem;
    --control-leading-45: 2.8125rem;
}

/* ======= Basic style ======= */
html,
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    list-style: none;
    word-wrap: break-word;
}
body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--color-text);
    background: var(--color-surface);
    overflow-x: clip;
}
/* Site-wide: an overlay thumb leaves the page visible behind the scrollbar track.
   The native scrollbar is hidden only after the enhancement is initialized. */
html.has-page-scrollbar {
    scrollbar-width: none;
}
html.has-page-scrollbar::-webkit-scrollbar {
    display: none;
}
.page-scrollbar {
    position: fixed;
    top: var(--space-half);
    right: var(--space-half);
    bottom: var(--space-half);
    width: var(--space-4);
    z-index: 1040;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    touch-action: none;
    user-select: none;
    transition: opacity var(--duration-fast) var(--ease-standard);
}
.page-scrollbar.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.page-scrollbar-thumb {
    width: 100%;
    border: var(--space-1) solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    background-clip: padding-box;
    cursor: grab;
    transition: background-color var(--duration-fast) var(--ease-standard);
}
.page-scrollbar-thumb:hover,
.page-scrollbar.is-dragging .page-scrollbar-thumb {
    background-color: var(--color-accent-strong);
}
.page-scrollbar.is-dragging .page-scrollbar-thumb {
    cursor: grabbing;
}
@media (max-width: 991.98px) {
    .page-scrollbar {
        right: 0;
        width: var(--space-2);
    }
    .page-scrollbar-thumb {
        border-width: var(--space-half);
    }
}
@media (forced-colors: active) {
    html.has-page-scrollbar { scrollbar-width: auto; }
    html.has-page-scrollbar::-webkit-scrollbar { display: block; }
    .page-scrollbar { display: none; }
}
@media print {
    .page-scrollbar { display: none; }
}
p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-5) 0;
    color: var(--color-text);
}
img {
    width: 100%;
    height: auto;
}
img {

    transition: transform var(--duration-slow) var(--ease-out);
    color: var(--color-surface-soft);
}
span,
a,
a:hover {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}
b {
    font-weight: var(--weight-regular);
    color: var(--color-accent-strong);
}
/* A two-tone ring remains visible on light, dark and photographic surfaces.
   Inset treatment keeps focus visible inside existing clipped cards. */
:focus-visible {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: var(--space-1);
    box-shadow: 0 0 0 6px var(--color-surface);
}
:is(.gallery-box, .item-img-link, .services .item, .portfolio .square-flip,
    .accordion-box .block, .blog .item, .blog2 .item):focus-within {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: calc(-1 * var(--space-1));
    box-shadow: inset 0 0 0 6px var(--color-surface);
}
:is(.gallery-box, .item-img-link, .services .item, .portfolio .square-flip,
    .accordion-box .block, .blog .item, .blog2 .item) :focus-visible,
.item-img-link:focus-visible {
    outline-offset: calc(-1 * var(--space-1));
    box-shadow: inset 0 0 0 5px var(--color-surface);
}
h1, h2, h3, h4, .section-title {
    text-wrap: balance;
    overflow-wrap: anywhere;
}
p { text-wrap: pretty; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-section); }
h3 { font-size: var(--text-title); }
h4 { font-size: var(--text-title-small); }
h5 { font-size: var(--text-lead); }
h6 { font-size: var(--text-body); }
.animated {
    animation-duration: var(--duration-slow);
    animation-timing-function: var(--ease-out);
}

/* text field */

input[type="password"],
input[type="email"],
input[type="text"],
input[type="file"],
textarea {
    max-width: 100%;
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    height: auto;
    background-color: var(--color-clear);
    -webkit-box-shadow: none;
    box-shadow: none;
    display: block;
    width: 100%;
    line-height: var(--leading-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    background-image: none;
    border: 1px solid var(--color-text);
}
input:focus,
textarea:focus {
    border-bottom-width: 1px;
    border-color: var(--color-text);
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: var(--leading-body);

    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
    background: var(--color-clear);
    border: 0px solid var(--color-clear);
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    border: 0px solid var(--color-clear);
}
select {
    padding: var(--space-3);
    border-radius: var(--radius-small);
}

th,
tr,
td {
    padding: var(--space-3);
}
input[type="radio"],
input[type="checkbox"] {
    display: inline;
}
input[type="submit"] {
    font-weight: var(--weight-regular);
    font-family: var(--font-heading);
    text-transform: uppercase;
    background: var(--color-accent-strong);
    color: var(--color-surface);
    padding: var(--space-2) var(--space-6);
    margin: 0;
    position: relative;
    font-size: var(--text-body);
    letter-spacing: var(--tracking-wide);
}
.alert-success {
    background: var(--color-accent-strong);
    color: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: 0;
}
/* placeholder */
::-webkit-input-placeholder {
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
}
:-moz-placeholder {
    color: var(--color-text);
}
::-moz-placeholder {
    color: var(--color-text);
    opacity: 1;
}
:-ms-input-placeholder {
    color: var(--color-text);
}
/* blockquote */
blockquote {
    padding: var(--space-10);
    display: block;
    position: relative;
    border: 1px solid var(--color-accent);
    overflow: hidden;
    margin: var(--space-10) 0;
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--color-text);
}
blockquote p {
    font-family: inherit;
    margin-bottom: 0 !important;
    color: inherit;
    max-width: 650px;
    width: 100%;
    position: relative;
    z-index: 3;
}
blockquote:before {
    content: '\e645';
    font-family: var(--font-icons);
    position: absolute;
    right: 40px;
    bottom: 40px;
    font-size: var(--ornament-quote);
    opacity: 0.07;
    line-height: var(--leading-single);
    color: var(--color-text);
}
blockquote p {
    margin-bottom: 0;
}
blockquote p a {
    color: inherit;
}
blockquote cite {
    display: inline-block;
    font-size: var(--text-body);
    position: relative;
    padding-left: var(--space-16);
    border-color: inherit;
    line-height: var(--leading-single);
    margin-top: var(--space-6);
    font-style: normal;
    color: var(--color-accent-strong);
    font-weight: var(--weight-regular);
}
blockquote cite:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 45px;
    height: 1px;
    border-top: 1px solid;
    border-color: inherit;
    color: var(--color-accent-strong);
}

/* ======= Helper style ======= */
:root {
    scroll-behavior: auto;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-15 {
  margin-top: var(--space-4) !important;
}
.mt-20 {
  margin-top: var(--space-5) !important;
}
.mt-30 {
  margin-top: var(--space-8) !important;
}
.mt-60 {
  margin-top: var(--space-16) !important;
}
.mt-90 {
  margin-top: var(--space-24) !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-30 {
  margin-bottom: var(--space-8) !important;
}
.mb-60 {
  margin-bottom: var(--space-16) !important;
}
.mb-90 {
  margin-bottom: var(--space-24) !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.no-padding {
  padding: 0 !important;
}
/* important */
.o-hidden {
    overflow: hidden;
}
.position-re {
    position: relative;
}
.full-width {
    width: 100%;
}
.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
}
.bg-fixed {
    background-attachment: fixed;
}
.pattern {
    background-repeat: repeat;
    background-size: auto;
}
.bold {
    font-weight: var(--weight-semibold);
}
.count {
    font-family: var(--font-heading);
}
.valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.v-middle {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;

    transform: translate(0%, -50%);
}
.v-bottom {
    position: absolute;
    width: 100%;
    bottom: 5%;
    left: 0;

    transform: translate(0%, -5%);
}
.js .animate-box {
    opacity: 0;
}
.back-position-top {
    background-position: top;
}
.back-position-center {
    background-position: center;
}
.back-position-bottom {
    background-position: bottom;
}
/* background & color */
.bg-black {
    background: var(--color-text);
}
.bg-green {
    background: var(--color-accent-strong);
}
.color-1 {
    color: var(--color-surface);
}
.bg-green,
.bg-green :is(p, h1, h2, h3, h4, h5, h6, .section-title, .section-subtitle,
    .section-title span, .section-subtitle span, .about-name, .about-rol, .tags) {
    color: var(--color-surface);
}
.bg-green :is(input, textarea, select) {
    color: var(--color-surface);
    border-color: var(--color-line-inverse-strong);
}
.bg-green :is(input, textarea)::placeholder { color: var(--color-surface); }

/* star - white  */
.star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--space-star-gap);
  margin-right: var(--space-star-gap);
  margin-bottom: var(--space-star-bottom);
  border-right: 0.3em solid var(--color-clear);
  border-bottom: 0.7em solid var(--color-surface);
  border-left: 0.3em solid var(--color-clear);
  /* Controlls the size of the stars. */
  font-size: var(--icon-tiny);
}
.star:before, .star:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0.6em;
  left: -1em;
  border-right: 1em solid var(--color-clear);
  border-bottom: 0.7em solid var(--color-surface);
  border-left: 1em solid var(--color-clear);
  transform: rotate(-35deg);
}
.star:after {
  transform: rotate(35deg);
}
/* Star rating  */
.star-rating {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--space-star-gap);
  margin-right: var(--space-star-gap);
  margin-bottom: var(--space-rating-bottom);
  border-right: 0.3em solid var(--color-clear);
  border-bottom: 0.7em solid var(--color-accent);
  border-left: 0.3em solid var(--color-clear);
  /* Controlls the size of the stars. */
  font-size: var(--icon-tiny);
}
.star-rating:before, .star-rating:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0.6em;
  left: -1em;
  border-right: 1em solid var(--color-clear);
  border-bottom: 0.7em solid var(--color-accent);
  border-left: 1em solid var(--color-clear);
  transform: rotate(-35deg);
}
.star-rating:after {
  transform: rotate(35deg);
}
/* page list */
.page-list {
    position: relative;
    display: block;
}
.page-list li {
    position: relative;
    display: flex;
    align-items: center;
}
.page-list li+li {
    margin-top: var(--space-3);
}
.page-list-icon {
    display: flex;
    align-items: center;
}
.page-list-icon span {
    font-size: var(--icon-small);
    color: var(--color-accent-strong);
}
.page-list-text {
    margin-left: var(--space-3);
}
.page-list-text p {
    font-size: var(--text-body);
    margin: 0;
}

/* ======= Selection style ======= */
::-webkit-selection {
    color: var(--color-surface);
    background: var(--color-accent-strong);
}
::-moz-selection {
    color: var(--color-surface);
    background: var(--color-accent-strong);
}
::selection {
    color: var(--color-surface);
    background: var(--color-accent-strong);
}

/* ======= Preloader style ======= */
.preloader-bg,
#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-surface);
    z-index: 999999;
}
#preloader {
    display: table;
    table-layout: fixed;
}
#preloader-status {
    display: table-cell;
    vertical-align: middle;
}
.preloader-position {
    position: relative;
    margin: 0 auto;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.loader {
    position: relative;
    width: 55px;
    height: 55px;
    left: 50%;
    top: auto;
    margin-left: calc(-1 * var(--space-6));
    margin-top: var(--space-half);

    animation: rotate var(--duration-slow) infinite linear;
    border: 2px solid var(--color-scrim-soft);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: var(--radius-circle);
}
.loader span {
    position: absolute;
    width: 55px;
    height: 55px;
    top: -2px;
    left: -2px;
    border: 2px solid var(--color-clear);
    border-top: 2px solid var(--color-accent);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: var(--radius-circle);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ======= Owl-Theme custom style ======= */
.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 0;
    line-height: var(--leading-relaxed);
    display: block;

}
.owl-theme .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    margin: 0 var(--space-1);
    border-radius: var(--radius-circle);
    background: var(--color-accent-strong);
    border: 1px solid var(--color-accent);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-text);
    border: 1px solid var(--color-text);
}
.bg-green .owl-theme .owl-dots .owl-dot span {
    background: var(--color-clear);
    border-color: var(--color-surface);
}
.bg-green .owl-theme .owl-dots .owl-dot.active span,
.bg-green .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-surface);
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    outline-offset: var(--space-1);
}

/* === Owl-Carousel nav style  === */
.clients .owl-theme .owl-nav,
.blog .owl-theme .owl-nav,
.pricing .owl-theme .owl-nav,
.testimonials .owl-theme .owl-nav,
.portfolio .owl-theme .owl-nav,
.services .owl-theme .owl-nav {
    position: absolute!important;
    top: 35%!important;
    bottom: auto!important;
    width: 100%;
}
.clients .owl-theme .owl-nav,
.blog .owl-theme .owl-nav,
.pricing .owl-theme .owl-nav,
.testimonials .owl-theme .owl-nav,
.portfolio .owl-theme .owl-nav,
.services .owl-theme .owl-nav{
    position: relative;
    position: absolute;
    bottom: 0;
    left: 50%;

    transform: translateX(-50%);
}
.clients .owl-theme .owl-prev,
.blog .owl-theme .owl-prev,
.pricing .owl-theme .owl-prev,
.testimonials .owl-theme .owl-prev,
.portfolio .owl-theme .owl-prev,
.services .owl-theme .owl-prev {
    left: 10px!important;
}
.clients .owl-theme .owl-next,
.blog .owl-theme .owl-next,
.pricing .owl-theme .owl-next,
.testimonials .owl-theme .owl-next,
.portfolio .owl-theme .owl-next,
.services .owl-theme .owl-next {
    right: 10px!important;
}
.clients .owl-theme .owl-prev,
.clients .owl-theme .owl-next,
.blog .owl-theme .owl-prev,
.blog .owl-theme .owl-next,
.pricing .owl-theme .owl-prev,
.pricing .owl-theme .owl-next,
.testimonials .owl-theme .owl-prev,
.testimonials .owl-theme .owl-next,
.portfolio .owl-theme .owl-prev,
.portfolio .owl-theme .owl-next,
.services .owl-theme .owl-prev,
.services .owl-theme .owl-next {
    color: var(--color-surface);
    position: absolute!important;
    top: 50%;
    padding: 0;
    height: 50px;
    width: 50px;
    border-radius: 0;

    transform: translateY(-50%);
    background: var(--color-text);
    border: 1px solid var(--color-text);
    line-height: 0;
    text-align: center;
    font-size: var(--text-body);
}
.clients .owl-theme .owl-prev>span,
.clients .owl-theme .owl-next>span,
.blog .owl-theme .owl-prev>span,
.blog .owl-theme .owl-next>span,
.pricing .owl-theme .owl-prev>span,
.pricing .owl-theme .owl-next>span,
.testimonials .owl-theme .owl-prev>span,
.testimonials .owl-theme .owl-next>span,
.portfolio .owl-theme .owl-prev>span,
.portfolio .owl-theme .owl-next>span,
.services .owl-theme .owl-prev>span,
.services .owl-theme .owl-next>span {
    position: absolute;
    line-height: 0;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}
.clients .owl-theme .owl-nav [class*=owl-],
.blog .owl-theme .owl-nav [class*=owl-],
.pricing .owl-theme .owl-nav [class*=owl-],
.testimonials .owl-theme .owl-nav [class*=owl-],
.portfolio .owl-theme .owl-nav [class*=owl-],
.services .owl-theme .owl-nav [class*=owl-] {
    width: 40px;
    height: 40px;
    line-height: var(--control-leading-34);
    background: var(--color-clear);
    color: var(--color-surface);
    font-size: var(--icon-small);
    margin-right: var(--space-4);
    margin-left: var(--space-4);
    cursor: pointer;
    border: 1px solid var(--color-line-inverse-strong);
    border-radius: var(--radius-circle);
    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
    transform: scale(1.0);
}
.clients .owl-theme .owl-nav [class*=owl-]:hover,
.blog .owl-theme .owl-nav [class*=owl-]:hover,
.pricing .owl-theme .owl-nav [class*=owl-]:hover,
.testimonials .owl-theme .owl-nav [class*=owl-]:hover,
.portfolio .owl-theme .owl-nav [class*=owl-]:hover,
.services .owl-theme .owl-nav [class*=owl-]:hover {
    transform: scale(var(--image-zoom));
    background: var(--color-clear);
    border: 1px solid var(--color-accent);
    color: var(--color-surface);
}
@media screen and (max-width: 767.98px) {
    .clients .owl-theme .owl-nav,
    .blog .owl-theme .owl-nav,
    .pricing .owl-theme .owl-nav,
    .testimonials .owl-theme .owl-nav,
    .portfolio .owl-theme .owl-nav,
    .services .owl-theme .owl-nav {
        display: none;
    }
}

/* ======= Section style ======= */
.section-padding {
    padding: var(--space-30) 0;
}
.section-padding2 {
    padding: 0 0 var(--space-30) 0;
}
.section-padding h6 {
    color: var(--color-accent-strong);
    font-size: var(--text-title-small);
    margin-bottom: var(--space-5);
}
.section-padding h5 {
    font-size: var(--text-lead);
}
.section-padding h5.em, .section-padding h5 em {
      font-family: var(--font-script);
}
.section-subtitle {
    font-size: var(--text-small);
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    text-transform: uppercase;
    position: relative;
    letter-spacing: var(--tracking-wide);
    margin-bottom: 0;
}
.section-subtitle span {
 color: var(--color-accent-strong);
}
.section-title {
    font-size: var(--text-section);
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    position: relative;
    margin-bottom: var(--space-8);
    line-height: var(--leading-heading);
}
.section-title span {
    color: var(--color-text);
    font-family: var(--font-script);
    letter-spacing: var(--tracking-normal);
}
.section-padding .white,
.section-padding h5.white,
.section-subtitle.white, 
.section-title.white,
.section-title span.white {
    color: var(--color-surface);
}

/* ======= Navbar style ======= */
.navbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: var(--color-clear);
    z-index: 99;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 100px;
    border: none;
}
.navbar-toggler-icon {
    background-image: none;
}
.navbar .navbar-toggler-icon,
.navbar .icon-bar {
    color: var(--color-surface);
}
.navbar .navbar-nav .nav-link {
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    color: var(--color-surface);
    margin: var(--space-pixel);

    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    font-family: var(--font-heading);
}
.navbar .navbar-nav .nav-link.nav-color {
    color: var(--color-surface);
}
.navbar .navbar-nav .nav-link:hover {
    color: var(--color-surface) !important;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: var(--space-2);
}
.navbar .navbar-nav .active {
    color: var(--color-surface) !important;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: var(--space-2);
}
.navbar .navbar-nav .active i {
    color: var(--color-surface) !important;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: var(--space-2);
}
.nav-scroll {
    background: var(--color-text);
    padding: 0 0 0 0;
    position: fixed;
    top: calc(-1 * var(--nav-height));
    left: 0;
    width: 100%;

    transition: transform var(--duration-normal) var(--ease-standard);

    transform: translateY(var(--nav-height));
    border: none;
    height: 90px;
}
.nav-scroll .navbar-toggler-icon,
.nav-scroll .icon-bar {
    color: var(--color-surface);
}
.nav-scroll .navbar-nav .nav-link {
    color: var(--color-surface);
}
.nav-scroll .navbar-nav .active {
    color: var(--color-surface) !important;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: var(--space-2);
}
.nav-scroll .navbar-nav .logo {
    padding: var(--space-4) 0;
    color: var(--color-surface);
}
.nav-scroll .logo-img {
    width: 145px;
}
.nav-scroll .logo-img {
    margin-bottom: 0;
    padding: var(--space-4) 0;
}
.nav-scroll .logo-wrapper .logo h2 {
    font-size: var(--text-title);
    display: block;
    width: 100%;
    position: relative;
    color: var(--color-surface);
    margin-bottom: 0;
}

.logo-wrapper {
    float: left;
}
.logo-wrapper .logo h2 {
    font-size: var(--text-title);
    display: block;
    width: 100%;
    position: relative;
    color: var(--color-surface);
    margin-bottom: 0;
}

.logo {
    padding: 0;
}
.logo-img {
    padding: var(--space-5) 0;
    width: 160px;
    text-align: center;
}
.dropdown .nav-link i {
    padding-left: 0;
    font-size: var(--icon-tiny);
    color: var(--color-surface);
}
.nav-scroll .dropdown .nav-link i {
     color: var(--color-surface);
}
.nav-scroll .navbar-nav .active i {
    color: var(--color-surface) !important;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: var(--space-2);
}

.navbar .dropdown-menu {
    box-shadow: 0 16px 50px var(--color-shadow);
}

.navbar .dropdown-menu .dropdown-item {
    padding: var(--space-2) 0;
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    position: relative;

    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
    background-color: var(--color-clear);
}
.navbar .dropdown-menu .dropdown-item span {
    display: block;
    cursor: pointer;
}
.navbar .dropdown-menu .dropdown-item i {
    padding: var(--space-3) 0 0 var(--space-1);
    font-size: var(--icon-tiny);
    float: right;
}
.navbar .dropdown-menu .dropdown:hover > .dropdown-item,
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:hover {
    color: var(--color-accent-strong);
}
.navbar .dropdown-toggle::after {
    display: none;
}

.navbar .dropdown-menu li:last-child {
   border-bottom: none;
}
.navbar .dropdown-menu .dropdown-menu.pull-left {
    top: 0;
    left: auto;
    right: 100%;
}
/* Navbar Media Query */
@media screen and (min-width: 992px) {
    .navbar .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;

        transform: translateY(var(--motion-rise));
        width: 190px;
        padding: var(--space-4);
        border-radius: 0;
        border: 0;
        background-color: var(--color-surface);

        transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
        border-bottom: 1px solid var(--color-scrim-soft);

}
    .navbar .dropdown-menu .dropdown-menu {
        left: auto;
        top: -10px;
        right: calc(100% + var(--space-1));
        min-width: 190px;
        transform: translateY(0);
    }
    .navbar .dropdown:hover > .dropdown-menu,
    .navbar .dropdown:focus-within > .dropdown-menu,
    .navbar .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }    
}
@media screen and (max-width: 991.98px) {
    .navbar {
        padding-left: 0;
        padding-right: 0;
        background: var(--color-clear);
        padding-top: 0;
        padding-bottom: 0;
    }
    .nav-scroll {
        background: var(--color-text);
    }
    .logo-wrapper {
        float: left;
        padding: var(--space-5) 0 var(--space-5) var(--space-4);
    }
    .nav-scroll .logo-wrapper {
        padding: 0 var(--space-4);
        background-color: var(--color-clear);
    }
    .nav-scroll .logo-img {
        width: 145px;
    }
    .navbar .logo {
        text-align: left;
        margin-left: 0;
    }
    .logo-img {
        margin-bottom: 0;
        width: 160px;
        padding: 0;
    }
    .navbar button {
        margin-right: 0;

        background: var(--color-clear);
        margin-top: var(--space-3);
        border: none;
    }
    .navbar button:hover {
        background: var(--color-clear);
    }
    .navbar button:active,
    .navbar button:focus,
    .navbar button:hover {
        background: var(--color-clear);

        color: var(--color-surface);
    }
    .navbar .container {
        max-width: 100%;
        padding: 0;
    }
    .navbar .nav-link {
        margin: 0 auto !important;
    }
    .navbar .navbar-nav .nav-link {
        color: var(--color-text);
    }
    .nav-scroll .navbar-collapse .nav-link {
        color: var(--color-text) !important;
    }
    .nav-scroll .navbar-collapse .active {
        color: var(--color-accent-strong) !important;
    }   
    .navbar .dropdown-menu .dropdown-item {
        padding: 0 var(--space-4);
        font-size: var(--text-body);
        line-height: var(--control-leading-40);
    }
    .navbar .dropdown-menu .dropdown-item.dropdown-toggle {
        font-weight: var(--weight-medium);
    }
    .navbar .dropdown-submenu .dropdown-toggle::after {
        right: 15px;
        font-size: var(--icon-small);
    }
    .navbar .dropdown-submenu:hover > .dropdown-toggle::after {
        transform: rotate(0deg);
    }
    .navbar .dropdown-submenu .dropdown-toggle.show::after {
        transform: rotate(90deg);
    }
    .navbar .dropdown-menu {
        border: none;
        padding: 0;
        border-radius: 0;
        margin: 0;
        background: var(--color-surface);
        box-shadow: none;
    }
    .navbar .dropdown-submenu .dropdown-menu {
        margin: 0;
        padding: 0 0 0 var(--space-5);
    }
    .navbar .dropdown-menu li a {
        padding: 0 var(--space-4);
    }
    .navbar .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 0;
    }
    .navbar .navbar-collapse {
        max-height: calc(100vh - var(--nav-height) - var(--space-1));
        max-height: calc(100dvh - var(--nav-height) - var(--space-1));
        overflow: auto;
        overscroll-behavior: contain;
        background: var(--color-surface);
        text-align: left;
        padding: var(--space-5);
    }
    .dropdown .nav-link i,
    .nav-scroll .dropdown .nav-link i {
     color: var(--color-muted);
    }
}

@media screen and (max-width: 991.98px) {
    .navbar .navbar-collapse .navbar-nav .nav-link:hover,
    .navbar .navbar-collapse .navbar-nav .active,
    .nav-scroll .navbar-collapse .navbar-nav .active,
    .navbar .navbar-collapse .navbar-nav .active i {
        color: var(--color-accent-strong) !important;
    }
}

/* ======= Shared navigation ======= */
/* The shared bar carries the hero card's stationery motif: spaced small caps, hairline
   states, an ivory bar once scrolled that steps aside while reading down. */
.site-chrome .navbar {
    transition: background-color var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-out);
}
.site-chrome .navbar .logo-img {
    transition: width var(--duration-normal) var(--ease-out), padding var(--duration-normal) var(--ease-out), filter var(--duration-normal) var(--ease-standard);
}
.site-chrome .navbar .navbar-nav .nav-link {
    display: block;
    position: relative;
    font-family: var(--font-body);
    font-size: var(--text-small);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.site-chrome .navbar .dropdown-item { display: block; }
.site-chrome .navbar .navbar-nav :is(.nav-link, .nav-link:hover, .active, .active i) { text-decoration: none; }
.site-chrome .nav-scroll {
    height: var(--nav-height-compact);
    background: var(--color-surface-soft);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 var(--space-2) var(--space-6) calc(-1 * var(--space-2)) var(--color-shadow-strong);
}
.site-chrome .nav-scroll.nav-hidden { transform: translateY(0); }
.site-chrome .nav-scroll .logo-img {
    width: 120px;
    padding: var(--space-3) 0;
    filter: var(--filter-logo-dark);
}
.site-chrome .nav-scroll .navbar-nav :is(.nav-link, .nav-link:hover, .active, .active i),
.site-chrome .nav-scroll .dropdown .nav-link i { color: var(--color-text) !important; }
.site-chrome .navbar .navbar-toggler {
    padding: var(--space-4) var(--space-3);
    color: var(--color-surface);
}
.site-chrome .nav-scroll .navbar-toggler { color: var(--color-text); }
.site-chrome .nav-burger {
    position: relative;
    display: block;
    width: var(--space-6);
    height: var(--space-3);
}
.site-chrome .nav-burger::before,
.site-chrome .nav-burger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: var(--space-half);
    background: currentColor;
    transition: transform var(--duration-normal) var(--ease-out);
}
.site-chrome .nav-burger::before { top: 0; }
.site-chrome .nav-burger::after { bottom: 0; }
.site-chrome .navbar-toggler[aria-expanded="true"] .nav-burger::before { transform: translateY(calc((var(--space-3) - var(--space-half)) / 2)) rotate(45deg); }
.site-chrome .navbar-toggler[aria-expanded="true"] .nav-burger::after { transform: translateY(calc((var(--space-half) - var(--space-3)) / 2)) rotate(-45deg); }
@media screen and (min-width: 992px) {
    .site-chrome .navbar .navbar-nav { align-items: center; }
    .site-chrome .navbar .navbar-nav .nav-link::before {
        content: '';
        position: absolute;
        left: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-1);
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--duration-normal) var(--ease-out);
    }
    .site-chrome .navbar .navbar-nav :is(.nav-link:hover, .nav-link:focus-visible, .nav-link.show, .active)::before { transform: scaleX(1); }
    .site-chrome .navbar .dropdown .nav-link i {
        display: inline-block;
        margin-left: var(--space-1);
        transition: transform var(--duration-fast) var(--ease-out);
    }
    .site-chrome .navbar .dropdown:is(:hover, :focus-within) > .nav-link i { transform: rotate(180deg); }
    .site-chrome .navbar .navbar-nav .nav-cta {
        margin-left: var(--space-3);
        padding: var(--space-2) var(--space-5);
        border: 1px solid var(--color-line-inverse-strong);
        border-radius: var(--radius-pill);
        transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
    }
    .site-chrome .navbar .navbar-nav .nav-cta::before { display: none; }
    .site-chrome .navbar .navbar-nav .nav-cta:is(:hover, :focus-visible) {
        background: var(--color-surface);
        border-color: var(--color-surface);
        color: var(--color-text) !important;
    }
    /* Once the hero card has scrolled away, the contact pill takes over as the primary action. */
    .site-chrome .nav-scroll .navbar-nav .nav-link.nav-cta {
        background: var(--color-accent-strong);
        border-color: var(--color-accent-strong);
        color: var(--color-surface) !important;
    }
    .site-chrome .nav-scroll .navbar-nav .nav-link.nav-cta:is(:hover, :focus-visible) {
        background: var(--color-text);
        border-color: var(--color-text);
    }
    .site-chrome .navbar .dropdown-menu {
        padding: var(--space-5);
        border: 1px solid var(--color-line);
        background-color: var(--color-surface-soft);
        box-shadow: 0 var(--space-4) var(--space-10) calc(-1 * var(--space-3)) var(--color-shadow-strong);
        transform: translateY(var(--space-2));
        transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
    }
}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .site-chrome .navbar .navbar-nav .nav-link {
        padding-right: var(--space-2);
        padding-left: var(--space-2);
    }
    .site-chrome .navbar .navbar-nav .nav-link::before {
        left: var(--space-2);
        right: var(--space-2);
    }
    .site-chrome .navbar .navbar-nav .nav-cta {
        margin-left: var(--space-2);
        padding: var(--space-2) var(--space-4);
    }
}
@media screen and (max-width: 991.98px) {
    .site-chrome .navbar:has(.navbar-collapse:is(.show, .collapsing)) { background: var(--color-surface-soft); }
    .site-chrome .navbar:has(.navbar-collapse:is(.show, .collapsing)) .logo-img { filter: var(--filter-logo-dark); }
    .site-chrome .navbar:has(.navbar-collapse:is(.show, .collapsing)) .navbar-toggler { color: var(--color-text); }
    .site-chrome .navbar .collapsing { transition: height var(--duration-normal) var(--ease-out); }
    .site-chrome .navbar .navbar-collapse {
        max-height: calc(100dvh - var(--nav-height) + var(--space-pixel));
        margin-top: calc(-1 * var(--space-pixel));
        padding: var(--space-6) var(--space-6) var(--space-8);
        border-top: 1px solid var(--color-line);
        background: var(--color-surface-soft);
    }
    .site-chrome .navbar .navbar-collapse .navbar-nav {
        min-height: calc(100dvh - var(--nav-height) - var(--space-6) - var(--space-8));
    }
    .site-chrome .navbar .navbar-nav .nav-link {
        padding: var(--space-2) 0;
        font-family: var(--font-heading);
        font-size: var(--text-title);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-normal);
        text-transform: none;
    }
    .site-chrome .navbar .navbar-collapse .nav-link,
    .site-chrome .navbar .navbar-collapse .nav-link:hover,
    .site-chrome .navbar .navbar-collapse .dropdown .nav-link i { color: var(--color-text) !important; }
    .site-chrome .navbar .navbar-collapse .navbar-nav .nav-link.active { color: var(--color-accent-strong) !important; }
    .site-chrome .navbar .dropdown-menu { background: var(--color-clear); }
    .site-chrome .navbar .nav-item-cta {
        margin-top: auto;
        padding-top: var(--space-8);
    }
    .site-chrome .navbar .navbar-collapse .navbar-nav .nav-link.nav-cta {
        display: flex;
        justify-content: center;
        padding: var(--space-4);
        border-radius: var(--radius-pill);
        background: var(--color-accent-strong);
        color: var(--color-surface) !important;
        font-family: var(--font-body);
        font-size: var(--text-small);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
    }
    .site-chrome .navbar-collapse:is(.show, .collapsing) .navbar-nav > .nav-item {
        animation: nav-item-in var(--duration-slow) var(--ease-out) both;
        animation-delay: calc(var(--nav-i, 0) * var(--delay-step) / 2);
    }
    .site-chrome .navbar-nav > .nav-item:nth-child(2) { --nav-i: 1; }
    .site-chrome .navbar-nav > .nav-item:nth-child(3) { --nav-i: 2; }
    .site-chrome .navbar-nav > .nav-item:nth-child(4) { --nav-i: 3; }
    .site-chrome .navbar-nav > .nav-item:nth-child(5) { --nav-i: 4; }
    .site-chrome .navbar-nav > .nav-item:nth-child(6) { --nav-i: 5; }
    .site-chrome .navbar-nav > .nav-item:nth-child(7) { --nav-i: 6; }
    .site-chrome .navbar-nav > .nav-item:nth-child(8) { --nav-i: 7; }
    .site-chrome .navbar-nav > .nav-item:nth-child(9) { --nav-i: 8; }
}
@keyframes nav-item-in {
    from { opacity: 0; transform: translateY(var(--space-2)); }
}
/* Home page bar: a typeset wordmark, the inquiry and one toggle. The toggle folds the live
   page away into a tilted card on a sage table, and four prints are dealt out of it. */
@property --px { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --py { syntax: '<number>'; inherits: false; initial-value: 0; }
.page-home {
    --nav-gutter: clamp(var(--space-8), 3vw, var(--space-16));
    --card-x: 22vw;
    --card-y: 2vh;
    --card-ry: -16deg;
    --card-rz: 1.5deg;
    --card-scale: .56;
    --print-w: 15vw;
    --print-border: .6vw;
    --print-active: 2.6;
}
.page-home .navbar { --nav-bar: var(--nav-height); }
.page-home .navbar.nav-scroll { --nav-bar: var(--nav-height-compact); }
.page-home .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-home .navbar .logo-wrapper {
    display: flex;
    align-items: center;
    height: var(--nav-bar);
    padding-top: 0;
    padding-bottom: 0;
}
/* Wordmark: the name in Dantina, the place in plain caps below it. Sizes step down because the script runs wide (about 12.8px per px of font size). */
.nav-wordmark {
    --wordmark-size: var(--text-title);
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    line-height: var(--leading-single);
    white-space: nowrap;
    color: var(--color-surface);
    transition: color var(--duration-normal) var(--ease-standard);
}
/* Element and class on purpose: outranks the global a:hover, which would otherwise change the display value on hover.
   Only the display value lives here, so the breakpoint sizes further down still win over the base size. */
a.nav-wordmark { display: inline-flex; }
.nav-wordmark:hover { color: var(--color-surface); }
.nav-wordmark-name {
    font-family: var(--font-script);
    font-size: var(--wordmark-size);
}
/* The indent clears the long stems of the H and stops short of the descenders of s and f. */
.nav-wordmark-place {
    margin: var(--space-1) 0 0 calc(var(--wordmark-size) * 2.2);
    font-family: var(--font-body);
    font-size: var(--text-small);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
/* The compact bar is too low for the full size: the H would touch its top edge. */
.site-chrome .nav-scroll .nav-wordmark {
    --wordmark-size: var(--text-title-small);
    color: var(--color-text);
}
/* Pages still on the eight-item template menu: smaller mark, spacing formerly held by the logo image. */
.site-chrome:not(.page-home) .navbar .nav-wordmark {
    --wordmark-size: var(--text-title-small);
    padding: var(--space-5) 0;
}
.site-chrome:not(.page-home) .nav-scroll .nav-wordmark { padding: var(--space-3) 0; }
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .site-chrome:not(.page-home) .navbar .nav-wordmark { --wordmark-size: var(--text-body); }
}
@media screen and (max-width: 991.98px) {
    .site-chrome .navbar:has(.navbar-collapse:is(.show, .collapsing)) .nav-wordmark { color: var(--color-text); }
}
@media screen and (max-width: 575.98px) {
    .nav-wordmark,
    .site-chrome .nav-scroll .nav-wordmark,
    .site-chrome:not(.page-home) .navbar .nav-wordmark { --wordmark-size: var(--text-wordmark-compact); }
}
@media screen and (max-width: 399.98px) {
    /* The burger alone leaves room for the mark; the word stays available to screen readers. */
    .page-home .push-toggle-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
@media screen and (max-width: 339.98px) {
    .nav-wordmark,
    .site-chrome .nav-scroll .nav-wordmark,
    .site-chrome:not(.page-home) .navbar .nav-wordmark { --wordmark-size: var(--text-lead); }
}
.page-home .push-actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}
.page-home .push-cta,
.page-home .push-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: var(--text-small);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-surface);
    transition: color var(--duration-normal) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.page-home .push-cta {
    padding: 0 var(--space-5);
    border: 1px solid var(--color-line-inverse-strong);
    border-radius: var(--radius-pill);
}
.page-home .push-cta:is(:hover, :focus-visible) {
    background: var(--color-surface);
    border-color: var(--color-surface);
    color: var(--color-text);
}
.page-home .nav-scroll .push-cta {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: var(--color-surface);
}
.page-home .nav-scroll .push-cta:is(:hover, :focus-visible) {
    background: var(--color-text);
    border-color: var(--color-text);
}
.page-home .push-toggle {
    gap: var(--space-3);
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    cursor: pointer;
}
.page-home .nav-scroll .push-toggle { color: var(--color-text); }
.page-home .push-toggle[aria-expanded="true"] .nav-burger::before { transform: translateY(calc((var(--space-3) - var(--space-half)) / 2)) rotate(45deg); }
.page-home .push-toggle[aria-expanded="true"] .nav-burger::after { transform: translateY(calc((var(--space-half) - var(--space-3)) / 2)) rotate(-45deg); }
/* Desktop: across the full width, wordmark left, toggle on the bar's true centre, inquiry
   right. The equal side columns hold the centre although the wordmark and the inquiry differ
   in width. The inquiry names its column because the no-script version hides the toggle.
   The important flag answers the site-wide .container limit, which is important itself. */
@media screen and (min-width: 992px) {
    .page-home .navbar .container {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        max-width: none !important;
        padding: 0 var(--nav-gutter);
    }
    .page-home .push-actions { display: contents; }
    .page-home .push-cta {
        grid-column: 3;
        justify-self: end;
    }
    /* An invisible copy of the closed toggle sizes the centre column. The real toggle hangs
       from that column's right edge, so the burger and the X share one spot and the longer
       "Schließen" grows to the left. Absolute grid items need both lines of their area. */
    .page-home .push-actions::before {
        content: "Menü";
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        padding: 0 calc(var(--space-2) + var(--space-3) + var(--space-6)) 0 var(--space-2);
        font-family: var(--font-body);
        font-size: var(--text-small);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        visibility: hidden;
    }
    .page-home .push-toggle {
        position: absolute;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
}
.page-home .nav-skip:focus {
    position: fixed;
    top: var(--space-2);
    left: var(--space-4);
    z-index: 1100;
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent-strong);
    color: var(--color-surface);
}
.page-home :is(#inhalt, #preise):focus { outline: none; box-shadow: none; }

/* On the table the bar goes transparent and white. */
.page-home.push-open .navbar,
.page-home.push-open .navbar.nav-scroll {
    background: var(--color-clear);
    border-bottom-color: var(--color-clear);
    box-shadow: none;
}
.page-home.push-open .navbar .nav-wordmark,
.page-home.push-open .navbar .push-toggle { color: var(--color-surface); }
.page-home.push-open .navbar .push-cta {
    opacity: 0;
    visibility: hidden;
}
/* Named elements, not a bare :focus-visible: that would restyle the whole page when the menu opens. */
.page-home.push-open .navbar :is(a, button):focus-visible,
.push-menu :focus-visible {
    outline-color: var(--color-surface);
    box-shadow: none;
}

/* While the table is out the document keeps its height and scroll offset, but cannot move. */
html.push-locked { overflow: hidden; }
.push-active .progress-wrap,
.push-active .progress-wrap.active-progress {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.push-active .page-scrollbar { display: none; }
.push-ground {
    position: fixed;
    inset: 0;
    z-index: 0;
    visibility: hidden;
    background: var(--color-accent-strong);
}
.push-active .push-ground { visibility: visible; }

/* The page itself. Identity transform first, so both ends of the move share one function list. */
.page-shell.is-fixed {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: var(--color-surface);
    /* Falls outside the viewport while the page fills it, so it appears with the fold without repainting. */
    box-shadow: 0 2.5rem 6rem -1rem var(--color-scrim-text);
    transform: perspective(1600px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    transform-origin: 50% 50%;
    will-change: transform;
}
.page-shell.is-moving { transition: transform var(--duration-fold) var(--ease-fold); }
/* Moving the card would otherwise lay out the rotating SVG text again on every frame. */
.page-shell.is-moving #circle svg { animation-play-state: paused; }
.page-shell.is-fixed.is-open {
    transform: perspective(1600px) translate3d(var(--card-x), var(--card-y), 0) rotateX(calc(var(--py, 0) * -4deg)) rotateY(calc(var(--card-ry) + var(--px, 0) * 6deg)) rotateZ(var(--card-rz)) scale(var(--card-scale));
}
.shell-return {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    border: 0;
    background: var(--color-clear);
    cursor: pointer;
}
.page-shell.is-open .shell-return { display: block; }
.shell-return span {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: var(--space-5) var(--space-10);
    border-radius: var(--radius-pill);
    background: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-title);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-surface);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity var(--duration-fast) var(--ease-standard);
}
.shell-return:is(:hover, :focus-visible) span { opacity: 1; }

/* The prints start behind the middle of the card and are dealt to its corners. */
.push-print {
    --rx: 0;
    --ry: 0;
    --r: 0deg;
    --i: 0;
    --depth: 16;
    position: fixed;
    top: calc(50vh + var(--card-y));
    left: calc(50vw + var(--card-x));
    z-index: 3;
    width: var(--print-w);
    margin: 0;
    border: var(--print-border) solid var(--color-surface-soft);
    background: var(--color-surface-soft);
    box-shadow: 0 var(--space-4) var(--space-10) calc(-1 * var(--space-2)) var(--color-scrim-text);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.5);
    translate: calc(var(--px, 0) * var(--depth) * 1px) calc(var(--py, 0) * var(--depth) * 1px);
    transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
}
/* Painted but transparent from the first frame: the deal then runs on the compositor, in step
   with the card, and the images are decoded before they show. */
.push-active .push-print { visibility: visible; }
.push-print img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--color-line);
}
.push-print:nth-of-type(2) img { object-position: 50% 12%; }
.push-print:nth-of-type(1) { --rx: -22vw; --ry: -27vh; --r: -9deg; --depth: 22; }
.push-print:nth-of-type(2) { --rx: 23vw; --ry: -30vh; --r: 7deg; --i: 1; --depth: 34; }
.push-print:nth-of-type(3) { --rx: 24vw; --ry: 25vh; --r: -6deg; --i: 2; --depth: 28; }
.push-print:nth-of-type(4) { --rx: -21vw; --ry: 31vh; --r: 8deg; --i: 3; --depth: 40; }
.push-open .push-print {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--rx), var(--ry)) rotate(var(--r)) scale(1);
    transition: transform var(--duration-fold) var(--ease-out), opacity var(--duration-fast) var(--ease-standard);
    transition-delay: calc(var(--duration-normal) + var(--i) * var(--delay-step));
}
.push-open.push-dealt .push-print { transition-delay: var(--delay-none); }
.push-open .push-print.is-active {
    z-index: 4;
    transform: translate(-50%, -50%) rotate(-1.5deg) scale(var(--print-active));
}

/* The destinations stay above everything on the table. */
.push-menu {
    position: fixed;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 var(--nav-gutter);
    padding: calc(var(--nav-height) + var(--space-6)) 0 var(--space-10);
    pointer-events: none;
}
.push-menu[hidden] { display: none; }
.push-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.push-list li {
    opacity: 0;
    transform: translateY(var(--space-10));
    transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
}
.push-open .push-list li {
    opacity: 1;
    transform: none;
    transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-fold) var(--ease-out);
    transition-delay: calc(var(--duration-normal) + var(--i, 0) * var(--delay-step));
}
.push-list li:nth-child(2) { --i: 1; }
.push-list li:nth-child(3) { --i: 2; }
.push-list li:nth-child(4) { --i: 3; }
.push-list a {
    display: inline-block;
    padding: var(--space-1) 0;
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 5.6vw, 6rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--color-surface);
    pointer-events: auto;
    transition: color var(--duration-normal) var(--ease-standard), transform var(--duration-slow) var(--ease-out);
}
.push-list:is(:hover, :focus-within) a { color: var(--color-line-inverse-strong); }
.push-list a:is(:hover, :focus-visible, .is-current) {
    color: var(--color-surface);
    transform: translateX(var(--space-5));
}
.push-foot {
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-standard);
}
.push-open .push-foot {
    opacity: 1;
    transition: opacity var(--duration-slow) var(--ease-standard) var(--duration-slow);
}
.push-foot p {
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-relaxed);
    color: var(--color-surface);
}
.push-foot .push-place {
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.push-foot .push-contact { color: var(--color-line-inverse-strong); }
.site-chrome .push-foot .push-foot-cta {
    margin-top: var(--space-5);
    background: var(--color-surface-soft);
    color: var(--color-text);
    pointer-events: auto;
}
.site-chrome .push-foot .push-foot-cta:is(:hover, :focus-visible) {
    background: var(--color-surface);
    color: var(--color-text);
}

@media screen and (max-width: 991.98px) {
    .page-home {
        --card-x: 16vw;
        --card-y: 32vh;
        --card-ry: 0deg;
        --card-rz: -4deg;
        --card-scale: .5;
        --print-w: 30vw;
        --print-border: 1.4vw;
        --print-active: 1.9;
    }
    .page-home .push-cta { display: none; }
    .page-home .push-actions { margin-right: var(--space-2); }
    .push-print:nth-of-type(1) { --rx: -26vw; --ry: -20vh; }
    .push-print:nth-of-type(2) { --rx: 22vw; --ry: -22vh; }
    .push-print:nth-of-type(3) { --rx: 26vw; --ry: 7vh; }
    .push-print:nth-of-type(4) { --rx: -30vw; --ry: 5vh; }
    .push-menu {
        justify-content: flex-start;
        margin: 0 var(--space-5);
        padding: calc(var(--nav-height) + var(--space-2)) 0 0;
    }
    .push-list {
        flex: none;
        justify-content: flex-start;
    }
    .push-list a { font-size: clamp(2.25rem, 10vw, 3.5rem); }
    .push-foot { margin-top: var(--space-4); }
    .site-chrome .push-foot .push-foot-cta {
        justify-content: center;
        width: 100%;
        margin-top: var(--space-4);
    }
}
/* Short landscape phones keep the destinations and the inquiry in view. */
@media screen and (max-width: 991.98px) and (max-height: 540px) {
    .page-home {
        --card-x: 30vw;
        --card-y: 6vh;
        --card-scale: .42;
    }
    .push-print { display: none; }
    .push-list a { font-size: var(--text-title); }
    .site-chrome .push-foot .push-foot-cta {
        width: auto;
        margin-top: var(--space-2);
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-shell.is-fixed { transform: none; }
    .page-shell.is-fixed.is-open { transform: translate3d(var(--card-x), var(--card-y), 0) scale(var(--card-scale)); }
}

/* ======= Header style ======= */
.header {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}
.header .caption .o-hidden {
    display: inline-block;
}
.header .caption .slider-text {
    display: table;
/*    opacity: 0;*/
    min-height: 100vh;
    padding: var(--space-4) var(--space-4);
    z-index: 9;
}
.header .caption .slider-text > .slider-text-inner {
    display: table-cell;
    vertical-align: middle;
    min-height: 700px;
    position: relative;
}
.header .caption .slider-text > .slider-text-inner .desc {
    position: absolute;
    bottom: 45px;
    left: 0;
    padding: var(--space-12);
    background: var(--color-surface);

    animation-delay: var(--delay-none);
}
.header .caption .slider-text > .slider-text-inner h4 {
    font-family: var(--font-body);
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    margin-bottom: var(--space-1);

    animation-delay: var(--delay-none);
}
.header .caption .slider-text > .slider-text-inner h1 {
    position: relative;
    margin-bottom: var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--text-section);
    line-height: var(--leading-heading);

    animation-delay: var(--delay-step);
    color: var(--color-text);
    font-weight: var(--weight-regular);
}
.header .caption .slider-text > .slider-text-inner p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    margin-bottom: 0;
    color: var(--color-text);

    animation-delay: var(--delay-second);
}
.header .caption .slider-text > .slider-text-inner p span {
    font-family: var(--font-script);
    color: var(--color-text);
    margin: 0 var(--space-1);
    padding-right: var(--space-4);
    position: relative;
}
.header .caption .slider-text > .slider-text-inner p span:last-child {
    padding: 0;
}
.header .caption .slider-text > .slider-text-inner p span:last-child:after {
    display: none;
}
.header .caption .slider-text > .slider-text-inner p span:after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background: var(--color-text);
    position: absolute;
    top: 10px;
    right: 0;
    opacity: .5;
}
.header .caption .butn-light {

    animation-delay: var(--delay-second);
}
.header .caption .butn-dark {

    animation-delay: var(--delay-second);
}
.header .social a {
    color: var(--color-surface-soft);
    font-size: var(--text-title-small);
    margin: var(--space-3) var(--space-4);
}
hr {
    margin-top: var(--space-1);
    margin-bottom: var(--space-5);
    border: 0;
    border-top: 1px solid var(--color-line-inverse);
}

/* ======= Slider-fade style (Homepage Slider) ======= */
.slider-fade .owl-item {
    height: 100vh;
    position: relative;
}
.slider-fade .item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}
.slider-fade .item .caption {
    z-index: 9;
}
/* slider-fade owl-nav next and prev */
.slider-fade .owl-nav {
    position: absolute;
    bottom: 7%;
    right: 12%;
}
.slider-fade .owl-prev {
    float: left;
}
.slider-fade .owl-next {
    float: right;
}
.slider-fade .owl-theme .owl-nav [class*=owl-] {
    width: 40px;
    height: 40px;
    line-height: var(--control-leading-40);
    background: var(--color-clear);
    border-radius: var(--radius-circle);
    color: var(--color-surface);
    font-size: var(--icon-tiny);
    margin-right: var(--space-1);
    cursor: pointer;
    border: 1px solid var(--color-line-inverse);
    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
    transform: scale(1.0);
}
.owl-theme .owl-nav [class*=owl-]:hover {
    transform: scale(var(--image-zoom));
    background: var(--color-clear);
    border: 1px solid var(--color-surface);
    color: var(--color-surface);
}
@media screen and (max-width: 767.98px) {
    .slider-fade .owl-nav {
        display: none;
    }
}
/* owl-dots for slider */
.slider-fade .owl-dots {
    position: absolute;
    text-align: center;
    top: 50%;
    right: 5%;

    transform: translateY(-50%);
    width: 40px;
    text-align: right !important;
}
.slider-fade .owl-dots .owl-dot span {
    background: var(--color-clear);
    display: none;
}
.slider-fade .owl-dots .owl-dot {
    height: 12px;
    width: 12px;
    border: 1px solid var(--color-surface);
    display: block;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-circle);
}
.slider-fade .owl-dots .owl-dot.active {
    border-color: var(--color-surface);
    background: var(--color-surface);
}

/* ======= Slider style (Inner Page Slider) ======= */
.slider .owl-item {
    height: 100vh;
    position: relative;
}
.slider .item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}
.slider .item .caption{
    z-index: 9;
}
.slider .owl-theme .owl-dots {
    position: absolute;
    width: 100%;
    bottom: 3%;
    right: 12%;
    text-align: right;
}
.slider .owl-theme .owl-dots .owl-dot span {
    width: 13px;
    height: 13px;
    margin: 0 var(--space-1);
    border-radius: var(--radius-circle);
    background: var(--color-clear);
    border: 1px solid var(--color-line-inverse-strong);
}
.slider .owl-theme .owl-dots .owl-dot.active span,
.slider .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--color-accent-strong);
    border: 1px solid var(--color-accent);
}
/* bounce */
.header .arrow {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
    z-index: 8;
}

.header .arrow.bounce {
    animation: bounce var(--duration-bounce) infinite;
}
.header .arrow i {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: var(--control-leading-50);
    color: var(--color-surface);
    font-size: var(--text-body);
    border: 1px solid var(--color-line-inverse);
    border-radius: var(--radius-circle);
}
.header .arrow i:hover {
    border: 1px solid var(--color-surface);
}
.header .arrow i:hover:after {

    transform: scale(var(--image-zoom));
    opacity: 0;

    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);

}

/* ===== Kenburns Slider style ===== */
.kenburns-section {
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  min-height: 100vh;
  position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.kenburns-section::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  background: var(--color-text);
}

.kenburns-section .slider-text {
    display: table;
    /* opacity: 0; */
    min-height: 100vh;
    padding: var(--space-4) var(--space-4);
    z-index: 9;
}

.kenburns-inner {
  position: relative;
  z-index: 15;
}

.kenburns-inner .slider-text-inner {
    display: table-cell;
    vertical-align: middle;
    min-height: 700px;
    position: relative;
}

.kenburns-inner .desc {
    position: absolute;
    bottom: 40px;
    left: 0;
    padding: var(--space-10);
    background: var(--color-surface);

    animation-delay: var(--delay-none);
}
.kenburns-inner .caption {
    position: relative;
}
.kenburns-inner .caption h4 {
    font-family: var(--font-body);
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    margin-bottom: var(--space-1);

    animation-delay: var(--delay-none);
}
.kenburns-inner .caption h1 {
    position: relative;
    margin-bottom: var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--text-section);
    line-height: var(--leading-heading);

    animation-delay: var(--delay-step);
    color: var(--color-text);
    font-weight: var(--weight-regular);
}
.kenburns-inner .caption p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    margin-bottom: 0;
    color: var(--color-text);

    animation-delay: var(--delay-second);
}
.kenburns-inner .caption p span {
    font-family: var(--font-script);
    color: var(--color-text);
    margin: 0 var(--space-1);
    padding-right: var(--space-4);
    position: relative;
}

/* ======= Page Banner Header style ======= */
.banner-header {
    height: 100vh;
}
.banner-header h1 {
    font-size: var(--text-section);
    color: var(--color-surface);
    position: relative;
}
.banner-header h1 span {
    font-family: var(--font-script);
}
.banner-header h5 {
    color: var(--color-surface);
    font-size: var(--text-small);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-5);
}
.banner-header h5 a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}
.banner-header p {
    font-size: var(--text-body);
    margin-bottom: 0;
    color: var(--color-surface);
}
.banner-header p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}
.banner-header .slider-text {
    display: table;
/*    opacity: 0;*/
    min-height: 100vh;
    padding: var(--space-4) var(--space-4);
    z-index: 9;
}
.banner-header .slider-text > .slider-text-inner {
    display: table-cell;
    vertical-align: middle;
    min-height: 700px;
    position: relative;
}
.banner-header .slider-text > .slider-text-inner .desc {
    position: absolute;
    bottom: 40px;
    left: 0;
    padding: var(--space-10);
    background: var(--color-surface);

    animation-delay: var(--delay-none);
}
.banner-header .slider-text > .slider-text-inner h4 {
    font-family: var(--font-body);
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    margin-bottom: var(--space-1);

    animation-delay: var(--delay-none);
}
.banner-header .slider-text > .slider-text-inner h1 {
    position: relative;
    margin-bottom: var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--text-section);
    line-height: var(--leading-heading);

    animation-delay: var(--delay-step);
    color: var(--color-text);
    font-weight: var(--weight-regular);
}
.banner-header .slider-text > .slider-text-inner p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    margin-bottom: 0;
    color: var(--color-text);

    animation-delay: var(--delay-second);
}
.banner-header .slider-text > .slider-text-inner p span {
    font-family: var(--font-script);
    color: var(--color-text);
    margin: 0 var(--space-1);
    padding-right: var(--space-4);
    position: relative;
}
.banner-header .slider-text > .slider-text-inner p span:last-child {
    padding: 0;
}
.banner-header .slider-text > .slider-text-inner p span:last-child:after {
    display: none;
}
.banner-header .slider-text > .slider-text-inner p span:after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background: var(--color-text);
    position: absolute;
    top: 10px;
    right: 0;
    opacity: .5;
}
/* bounce */
.banner-header .arrow {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
    z-index: 8;
}

.banner-header .arrow.bounce {
    animation: bounce var(--duration-bounce) infinite;
}
.banner-header .arrow i {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: var(--control-leading-50);
    color: var(--color-surface);
    font-size: var(--text-body);
    border: 1px solid var(--color-line-inverse);
    border-radius: var(--radius-circle);
}
.banner-header .arrow i:hover {
    border: 1px solid var(--color-surface);
}
.banner-header .arrow i:hover:after {

    transform: scale(var(--image-zoom));
    opacity: 0;

    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);

}

/* ======= Page Banner Header 2 style ======= */
.banner-header2 {
    height: 60vh;
}
.banner-header2 h1 {
    font-size: var(--text-section);
    color: var(--color-surface);
    position: relative;
}
.banner-header2 h1 span {
    font-family: var(--font-script);
}
.banner-header2 h6 {
    color: var(--color-surface);
    font-size: var(--text-small);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-1);
}
.banner-header2 h6 a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}
.banner-header2 p {
    font-size: var(--text-body);
    margin-bottom: 0;
    color: var(--color-surface);
}
.banner-header2 p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}
.banner-header2 .author .avatar {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: var(--radius-circle);
    margin-right: var(--space-1);
    border: 1px solid var(--color-accent);
}
.banner-header2 .post {
    margin-top: var(--space-5);
}
.banner-header2 .post div {
    display: inline-block;
}
.banner-header2 .post .author {
    margin-right: var(--space-5);
    font-size: var(--text-small);
}
.banner-header2 .post .date-comment {
    position: relative;
    font-size: var(--text-small);
    color: var(--color-surface);
    margin-right: var(--space-5);
}
.banner-header2 .post .date-comment i {
    color: var(--color-surface);
    font-size: var(--text-lead);
    margin-right: var(--space-1);
}
.banner-header2 .post .date-comment:last-of-type {
    margin-right: 0;
}
@media screen and (max-width: 767.98px) {


    .banner-header2 h1 {
        font-size: var(--text-title);
    }
}
.banner-header2 .slider-text {
    display: table;
/*    opacity: 0;*/
    min-height: 100vh;
    padding: var(--space-4) var(--space-4);
    z-index: 9;
}
.banner-header2 .slider-text > .slider-text-inner {
    display: table-cell;
    vertical-align: middle;
    min-height: 700px;
    position: relative;
}
.banner-header2 .slider-text > .slider-text-inner .desc {
    position: absolute;
    bottom: 40px;
    left: 0;
    padding: var(--space-10);
    background: var(--color-surface);

    animation-delay: var(--delay-none);
}
.banner-header2 .slider-text > .slider-text-inner h4 {
    font-family: var(--font-body);
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    margin-bottom: var(--space-1);

    animation-delay: var(--delay-none);
}
.banner-header2 .slider-text > .slider-text-inner h1 {
    position: relative;
    margin-bottom: var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--text-section);
    line-height: var(--leading-heading);

    animation-delay: var(--delay-step);
    color: var(--color-text);
    font-weight: var(--weight-regular);
}
.banner-header2 .slider-text > .slider-text-inner p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    margin-bottom: 0;
    color: var(--color-text);

    animation-delay: var(--delay-second);
}
.banner-header2 .slider-text > .slider-text-inner p span {
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    margin: 0 var(--space-1);
    padding-right: var(--space-4);
    position: relative;
}
.banner-header2 .slider-text > .slider-text-inner p span:last-child {
    padding: 0;
}
.banner-header2 .slider-text > .slider-text-inner p span:last-child:after {
    display: none;
}
.banner-header2 .slider-text > .slider-text-inner p span:after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background: var(--color-text);
    position: absolute;
    top: 10px;
    right: 0;
    opacity: .5;
}
@media screen and (max-width: 767.98px) {
    .banner-header2 .slider-text > .slider-text-inner {
        text-align: center;
    } 
}

/* =======  Video Background (Homepage Video)  ======= */
.video-fullscreen-wrap {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}
.video-fullscreen-video {
    position: absolute !important;
    inset: 0;
    background: var(--color-text) url('../img/slider/1.webp') center / cover no-repeat;
}
.video-fullscreen-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-fullscreen-wrap .video-fullscreen-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.video-lauch-wrapper {
    border: none;
    background: none;
    width: 100%;
    padding: 0;
}
.video-fullscreen-wrap .overlay {
    grid-area: 1 / 1;
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--hero-nav-space) 0 var(--hero-arrow-space);
    margin: 0;
    display: flex;
    align-items: center;
    opacity: 1;
    z-index: 4;
}
.video-fullscreen-wrap .overlay .slider-text {
    display: block;
    height: auto !important;
    min-height: 0;
    padding: var(--space-4);
}
.video-fullscreen-wrap .overlay .slider-text > .slider-text-inner {
    display: block;
    min-height: 0;
}
/* The hero card reads as printed stationery: ivory stock with an inset hairline frame. */
.video-fullscreen-wrap .overlay .slider-text > .slider-text-inner .desc {
    position: relative;
    inset: auto;
    width: 100%;
    padding: var(--space-12) var(--space-12) var(--space-10);
    background: var(--color-surface-soft);
    color: var(--color-text);
    box-shadow: 0 var(--space-6) var(--space-16) calc(-1 * var(--space-4)) var(--color-scrim-text);
}
.video-fullscreen-wrap .overlay .slider-text > .slider-text-inner .desc::before {
    content: '';
    position: absolute;
    inset: var(--space-3);
    border: 1px solid var(--color-line-accent);
    pointer-events: none;
}
.video-fullscreen-wrap .overlay .slider-text > .slider-text-inner h1 {
    margin-bottom: var(--space-5);
    font-size: var(--text-display);
    line-height: var(--leading-tight);
    text-wrap: balance;
}
.video-fullscreen-wrap .overlay .slider-text > .slider-text-inner p {
    max-width: 34em;
    color: var(--color-muted);
}
.video-fullscreen-wrap .overlay .slider-text > .slider-text-inner p span {
    font-size: var(--text-lead);
    color: var(--color-accent-strong);
}
/* Captions share one grid cell, so the card keeps its size while the text changes. */
.hero-captions { display: grid; }
.hero-caption {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    filter: blur(var(--motion-focus-blur));
    transition: opacity var(--duration-normal) var(--ease-standard) var(--delay-step), filter var(--duration-normal) var(--ease-standard) var(--delay-step), visibility 0s linear calc(var(--duration-normal) + var(--delay-step));
}
.hero-caption.is-active {
    opacity: 1;
    visibility: visible;
    filter: none;
    transition: none;
}
.hero-caption.is-active :is(h1, p) {
    animation: hero-caption-enter var(--duration-slow) var(--ease-out) both;
}
.hero-caption.is-active h1 { animation-delay: var(--delay-none); }
.hero-caption.is-active p { animation-delay: var(--delay-step); }
/* A focus pull: each caption sharpens into place like a lens finding its subject. */
@keyframes hero-caption-enter {
    from { opacity: 0; filter: blur(var(--motion-focus-blur)); transform: translateY(calc(var(--motion-rise) / 2)); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.hero-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-8);
}
.site-chrome .home-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-pill);
    background: var(--color-accent-strong);
    color: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--text-small);
    line-height: var(--control-leading-20);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    transition: background-color var(--duration-fast) var(--ease-standard);
}
.site-chrome .home-cta i {
    font-size: var(--icon-small);
    transition: transform var(--duration-fast) var(--ease-out);
}
.site-chrome .home-cta:is(:hover, :focus-visible) {
    background: var(--color-text);
    color: var(--color-surface);
}
.site-chrome .home-cta:is(:hover, :focus-visible) i { transform: translateX(var(--space-1)); }
/* The progress line is the caption clock; JS advances the text when a segment fills. */
.hero-progress {
    display: none;
    gap: var(--space-2);
}
.hero-card.is-rotating .hero-progress { display: flex; }
.hero-progress span {
    position: relative;
    width: var(--space-8);
    height: var(--space-half);
    overflow: hidden;
    background: var(--color-line);
}
.hero-progress span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-accent-strong);
    transform: scaleX(0);
    transform-origin: left;
}
.hero-progress span.is-done::after { transform: scaleX(1); }
.hero-card.is-rotating .hero-progress span.is-active::after {
    animation: hero-progress var(--duration-caption) linear forwards;
}
.hero-card.is-rotating:is(:hover, :focus-within) .hero-progress span.is-active::after { animation-play-state: paused; }
@keyframes hero-progress {
    to { transform: scaleX(1); }
}
.video-fullscreen-wrap .butn-dark a { color: var(--color-surface); }
.position-relative { position: relative !important; }
@media screen and (max-width: 991.98px) {
    .video-fullscreen-wrap .overlay .slider-text > .slider-text-inner h1 {
        font-size: var(--text-section);
    }
}
@media screen and (max-width: 767.98px) {
    .video-fullscreen-wrap .overlay .slider-text > .slider-text-inner .desc {
        padding: var(--space-10) var(--space-8) var(--space-8);
    }
    .video-fullscreen-wrap .overlay .slider-text > .slider-text-inner .desc::before {
        inset: var(--space-2);
    }
    .hero-progress span { width: var(--space-5); }
}
/* TEST: card in the middle of the window, text centred. Delete this block to restore the default card. */
.video-hero .overlay { padding-block: var(--hero-nav-space); }
.video-hero .overlay > .container > .row { justify-content: center; }
/* Love-note box: decorative, so hidden from assistive tech and not clickable. The tick is drawn like a pen stroke: a slow dip, then a quick flick out of the box. */
.hero-vote {
    align-self: flex-end;
    pointer-events: none;
}
.hero-vote-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-script);
    font-size: var(--text-title-small);
    line-height: var(--leading-single);
    color: var(--color-text);
}
.hero-vote-box {
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-text);
    border-radius: 2px;
}
.hero-vote-box.is-ticked { animation: hero-vote-pop var(--duration-slow) var(--ease-standard) var(--hero-vote-delay) both; }
.hero-vote-tick {
    position: absolute;
    top: -15px;
    left: -3px;
    width: 36px;
    height: 36px;
    overflow: visible;
    fill: none;
    stroke: var(--color-accent-strong);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-vote-tick path {
    stroke-dasharray: 1 1;
    animation: hero-vote-draw var(--duration-slow) linear var(--hero-vote-delay) both;
}
@keyframes hero-vote-draw {
    0% { stroke-dashoffset: 1; opacity: 0; }
    1% { opacity: 1; }
    45% { stroke-dashoffset: .72; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes hero-vote-pop {
    0%, 45%, 100% { transform: none; }
    75% { transform: scale(1.12) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-vote-box.is-ticked,
    .hero-vote-tick path { animation: none; }
}
.video-hero .hero-card { text-align: center; }
.video-hero .overlay .slider-text > .slider-text-inner p { margin-inline: auto; }
.video-hero .hero-card-footer { flex-direction: column; }
@media screen and (min-width: 992px) {
    .video-hero .overlay .slider-text {
        width: 48rem;
        padding: 0;
    }
}

/* ======= About style ======= */
.about p {
    color: var(--color-surface);
}
/* about list */
.about-list {
    position: relative;
    display: block;
}
.about-list li {
    position: relative;
    display: flex;
    align-items: center;
}
.about-list li + li {
    margin-top: var(--space-3);
}
.about-list-icon {
    display: flex;
    align-items: center;
}
.about-list-icon span {
    font-size: var(--icon-small);
    color: var(--color-surface);
    background-color: var(--color-accent-strong);
    border-radius: var(--radius-circle);
    padding: var(--space-3);
}
.about-list-text {
    margin-left: var(--space-4);
}
.about-list-text p {
    font-size: var(--text-body);
    margin: 0;
}
/* about2 */
.about2 h5 {
    color: var(--color-accent-strong);
    font-size: var(--text-lead);
    line-height: var(--leading-body);
}
.about2 h5 span {
    color: var(--color-accent-strong);
}
.about2 .about-img img:hover {
    transform: scale(var(--image-zoom));
}
.about2 .about-img {
    position: relative;
}
.about2 .about-img .img {
    padding: 0 var(--space-8) var(--space-8) var(--space-4);
    position: relative;
}
.about2 .about-img .img:before {
    content: '';
    position: absolute;
    top: 30px;
    right: 0;
    left: 45px;
    bottom: 0;
    background-color: var(--color-accent);
}
.about2 .about-img .img:after {
    content: '';
    width: 50%;
    position: absolute;
    top: -6%;
    bottom: 60%;
    left: -3%;
    background-image: url(../img/dots.webp);
    background-repeat: repeat;
    z-index: -1;
}
.about2 .about-img .img img {
    position: relative;
    z-index: 2;
    background: var(--color-clear);
}
/* circle */
.about2 .img-exp { position: relative; }
.about2 #circle {
  position: absolute;
  top: 200px;
  right: 40%;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: .99;
  z-index: 2;
}
.about2 #circle text {
    fill: var(--color-muted);
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    letter-spacing: 6px;
    text-transform: uppercase;
}
.about2 #circle svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 300px;
    animation: rotate var(--duration-circle) linear infinite reverse;
    transform-origin: 50% 50%;
}

/* signature */
.about-bottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: var(--space-8) 0;
}
.image.about-signature {
    margin-right: var(--space-8);
    width: 80px;
}
.about-name {
    color: var(--color-text);
    font-size: var(--text-lead);
}
.about-rol {
    color: var(--color-accent-strong);
    font-size: var(--text-body);
}
hr.border {
    border-top: 1px solid var(--color-line);
}

.about2 .about-img,
.about2 .about-img .img { max-width: 100%; }
.about2 .about-img img { display: block; }
.about-list-text { min-width: 0; }
@media screen and (max-width: 575.98px) {
    .about2 .about-img .img:after { left: 0; }
    .about-bottom { flex-wrap: wrap; gap: var(--space-4); }
}

/* ======= Team style ======= */
.team .img {
  position: relative;
    overflow: hidden;
}
.team .img:hover img {
    -webkit-filter: none;
    filter: none;

    transform: scale(var(--image-zoom));

    transition: transform var(--duration-slow) var(--ease-out);
}
.team .img {

    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.team .img {
    padding: 0 var(--space-8) var(--space-8) var(--space-4);
    position: relative;
}
.team .img img {
    position: relative;
    z-index: 2;
    background: var(--color-clear);
}
.team .img img:hover {
    transform: scale(var(--image-zoom));
}
.team .img:before {
    content: '';
    position: absolute;
    top: 30px;
    right: 0;
    left: 45px;
    bottom: 0;
    background-color: var(--color-accent);
}
.team .content {
  width: 100%;
  padding: var(--space-8);
}
.team .content .cont {
  display: table-cell;
  vertical-align: middle;
}
.team .content .cont h4 {
    margin: 0 0 var(--space-5) 0;
    font-size: var(--text-title);
    color: var(--color-text);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
}
.team .content .cont h4 span {
    font-family: var(--font-script);
}
.team .content .cont p {
    color: var(--color-text);
}
@media screen and (max-width: 991.98px) {
    .order2 {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
    .order1 {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }  
}

/* ======= Services style ======= */
.services .item {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-8);
}
.services .item:hover img {
    -webkit-filter: none;
    filter: none;

    transform: scale(var(--image-zoom));

    transition: transform var(--duration-slow) var(--ease-out);
}
.services .item:hover .con {
    transform: translateY(0);
}
.services .item img {

    transition: transform var(--duration-slow) var(--ease-out);
}
.services .item .category {
  position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    writing-mode: vertical-rl;

    transform: rotate(180deg);
    text-orientation: mixed;
    text-transform: uppercase;
    color: var(--color-surface);
    font-size: var(--text-small);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-label);
    background: var(--color-accent-strong);
    border: 1px solid var(--color-accent);
    font-family: var(--font-body);
    padding: var(--space-3) var(--space-1);
    line-height: var(--leading-body);
}
.services .item .category a {
    color: var(--color-surface);
}
.services .item .category:hover {
    color: var(--color-surface);
}
.services .item .con {
    padding: var(--space-5);
    position: absolute;
    bottom: 0;
    transform: translateY(var(--motion-reveal));
    left: 0;
    width: 100%;

    transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
    text-align: left;
    z-index: 20;
    height: auto;
    box-sizing: border-box;

    background: var(--gradient-card);
}
.services .item .con h6,
.services .item .con h6 a {
    position: relative;
    color: var(--color-surface);
    font-size: var(--text-body);
    font-family: var(--font-script);
    display: inline;
    margin-bottom: 0;
}
.services .item .con h6 i {
    font-size: var(--icon-tiny);
    margin-right: var(--space-half);
}
.services .item .con h5,
.services .item .con h5 a {
    position: relative;
    color: var(--color-surface);
    font-size: var(--text-title-small);
    font-weight: var(--weight-regular);
    margin-top: 0;
    margin-bottom: var(--space-3);
}
.services .item .con h5 span, 
.services .item .con h5 a span {
    font-family: var(--font-script);
}
.services .item .con p {
    color: var(--color-surface);
    font-size: var(--text-title-small);
}
.services .item .con i {
    color: var(--color-surface);
    font-size: var(--text-lead);
}
.services .item .con i:hover {
    color: var(--color-surface);
}
.services .item .con .butn-light {
    margin-left: 0;
    border-radius: var(--radius-pill);
    border-color: var(--color-text);
    padding: var(--space-3) var(--space-8);
}
.services .item .con .butn-light:hover {
    border-color: var(--color-accent);
}
/* line animation */
.services .item .line {
    height: 1px;
    width: 100%;
    background-color: var(--color-line-inverse);
    transform: scaleX(var(--motion-line-scale));
    transform-origin: left;
    transition: transform var(--duration-normal) var(--ease-standard);
    margin: auto 0 var(--space-5);
}
.services .item:hover .line {
    transform: scaleX(1);
}
/* facilities */
.services .facilities ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.services .facilities ul li {
  color: var(--color-surface);
  font-size: var(--text-small);
  text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  padding-bottom: var(--space-5);
    float: left;
}
.services .facilities ul li i {
  margin-right: var(--space-3);
}
/* permalink */
.services .item .con .permalink {
    font-family: var(--font-body);
    font-size: var(--text-small);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-surface);
    height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
    display: inline;
}
.services .item .con .permalink a {
    color: var(--color-surface);
    text-align: right;
}
.services .item .con .permalink i {
   font-size: var(--icon-small);
    text-align: right;
}
.services .item .con .permalink a:hover,
.services .item .con .permalink i:hover {
    color: var(--color-surface);
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}
/* hr style */
hr {
    margin-top: var(--space-1);
    margin-bottom: var(--space-5);
    border: 0;
}
hr.border-1 {
    border-top: 1px solid var(--color-line);
}
hr.border-2 {
    border-top: 1px solid var(--color-line);
}

/* ======= Wedding Date style ======= */
.wedding-date-table{
    width: 100%;
    text-align: center;
}
.wedding-date-table h6 {
    color: var(--color-surface);
    margin-bottom: 0;
    font-size: var(--text-lead);
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    text-align: right;
    padding-right: var(--space-5);
}
.wedding-date-table p {
    font-family: var(--font-script);
    font-size: var(--text-body);
    color: var(--color-surface);
    margin-bottom: var(--space-1);
    text-align: left;
    padding-left: var(--space-5);
    font-weight: var(--weight-regular);
    font-style: normal;
}
.wedding-date-table span {
    color: var(--color-surface);
    margin-bottom: 0;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-small);
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    text-align: right;
}
.wedding-date-table tr {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-line-inverse);
}
.wedding-date-table tr:last-child {
    padding: var(--space-3);
    border-bottom: 0px solid var(--color-surface);
}
.wedding-date-table tr td.vr{
    position: absolute;
    margin: 0;
    border: 0;
    border-left: 1px solid;
    border-color: var(--color-text);
    width: 1px;
    height: 100%;
    z-index: 10;
    top: -2px;
}
.wedding-date-table tr td.hr{
    width: 100px;
    border-top: 1px solid var(--color-text);
    margin: 0 0 var(--space-5) 0;
}
@media screen and (max-width: 575.98px) {
    .wedding-date-table { table-layout: fixed; }
    .wedding-date-table td { padding: var(--space-3) var(--space-1); }
    .wedding-date-table td:first-child { width: 60%; }
    .wedding-date-table h6 { padding-right: var(--space-2); }
    .wedding-date-table p { padding-left: var(--space-2); }
    .wedding-date-table :is(h6, p, span) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* ======= Portfolio style ======= */
.portfolio {
    color: var(--color-surface);
}
.portfolio .square-flip {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;

    transform: perspective(1000px);

    transform-style: preserve-3d;
    position: relative;
    background-size: cover;
    background-position: center center;
}
.portfolio .square-flip {
    min-height: 450px;
    margin-bottom: var(--space-8);
}
.portfolio .square,
.portfolio .square2 {
    width: 100%;
    height: 100%;
}
.portfolio .square {
    background-size: cover;
    background-position: center center;

    transition: transform var(--duration-slow) var(--ease-out);

    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.portfolio .square .category {
  position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    writing-mode: vertical-rl;

    transform: rotate(180deg);
    text-orientation: mixed;
    text-transform: uppercase;
    color: var(--color-surface);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-wide);
    background: var(--color-clear);
    border: 1px solid var(--color-line-inverse-strong);
    font-family: var(--font-body);
    padding: var(--space-3) var(--space-1);
    line-height: var(--leading-body);
}
.portfolio .square .category a {
    color: var(--color-surface);
}
.portfolio .square .category:hover {
    color: var(--color-surface);
}
.portfolio .square h4 {
    color: var(--color-surface);
    font-size: var(--text-title);
    text-align: left;
    margin-bottom: 0;
    display: inline-flex;
}
.portfolio .square h4 span {
    font-family: var(--font-script);
}
.portfolio .square h6, .portfolio .square h6 a {
    position: relative;
    color: var(--color-surface);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    font-family: var(--font-body);
    line-height: var(--leading-relaxed);
}
.portfolio .square-flip .square {

    transform: rotateY(0deg);

    transform-style: preserve-3d;
    z-index: 1;
}
.portfolio .square-flip:hover .square {

    transform: rotateY(calc(-1 * var(--motion-flip-angle)));

    transform-style: preserve-3d;
}
.portfolio .square2 {
    background: var(--color-surface-soft);
    background-size: cover;
    background-position: center center;

    transition: transform var(--duration-slow) var(--ease-out);

    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.portfolio .square2.bg-white {
    background: var(--color-surface);
}
.portfolio .square2.bg-green {
    background: var(--color-accent-strong);
}
.portfolio .square2:before {
    top: 25px;
    left: 15px;
    right: 15px;
    bottom: 25px;
}
.portfolio .square2 h4 {
    font-family: var(--font-heading);
    font-size: var(--text-title);
    color: var(--color-surface);
    line-height: var(--leading-relaxed);
}
.portfolio .square2 h4 span {
    font-family: var(--font-script);
}
.portfolio .square2 h6 {
    position: relative;
    color: var(--color-surface);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    font-family: var(--font-body);
}
.portfolio .square2 p {
    font-size: var(--text-body);
    color: var(--color-surface);
}
.portfolio .square2 .icon img {
    width: 60px;
    color: var(--color-surface);
    margin-bottom: var(--space-5);
}
.portfolio .btn-line a {
    border-bottom: 1px solid var(--color-surface);
    color: var(--color-surface);
}
.portfolio .btn-line a:hover {
    border-bottom: 1px solid var(--color-accent);
    color: var(--color-surface);
}
.portfolio .square-flip .square2 {

    transform: rotateY(var(--motion-flip-angle));

    transform-style: preserve-3d;
    z-index: 1;
}
.portfolio .square-flip:hover .square2 {

    transform: rotateY(0deg);

    transform-style: preserve-3d;
}
.portfolio .square-container {
    padding: var(--space-10);
    text-align: right;
    height: 450px;
    position: relative;

    transition: transform var(--duration-slow) var(--ease-out);

    transform: translateX(0px) scale(1);

    transform-style: preserve-3d;
    z-index: 2;
}
.portfolio .square-container .box-title {
    /*	width: 100%;*/
}
.portfolio .square-flip:hover .square-container {

    transform: translateX(calc(-1 * var(--motion-flip-shift))) scale(var(--motion-flip-scale));
}
.portfolio .square-container2 {
    padding: var(--space-8);
    text-align: left;
    position: relative;
    top: 50%;

    transition: transform var(--duration-slow) var(--ease-out);

    transform: translateY(-50%) translateX(var(--motion-flip-shift)) translateZ(var(--motion-flip-depth)) scale(var(--motion-flip-scale));

    transform-style: preserve-3d;
    z-index: 2;
}
.portfolio .square-flip:hover .square-container2 {

    transform: translateY(-50%) translateX(0px) translateZ(0px) scale(1);
}
.portfolio .flip-overlay {
    display: block;
    background: var(--color-scrim);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .2;
}
@media screen and (max-width: 991.98px) {
    .portfolio .square-flip {
        margin-bottom: var(--space-8);
    }
    .portfolio {
        padding-bottom: var(--space-18);
    }
}
/* list */
.portfolio-list .wrap {
    background: var(--color-text);
    padding: var(--space-8);
}
.portfolio-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.portfolio-list ul li {
  color: var(--color-surface);
  font-size: var(--text-body);
  padding-bottom: 0;
}
.portfolio-list ul li i {
    margin-right: var(--space-3);
    color: var(--color-surface);
    font-size: var(--text-body);
}

/* ======= Pricing style  ======= */
.pricing {
    position: relative;
}
.pricing:last-child {
    margin-bottom: var(--space-5);
}
.pricing figure {
    margin: 0;
    position: relative;
    width: 66.666667%;
    margin-left: auto;
}
.pricing.left figure {
    margin-left: 0;
    margin-right: auto;
}
.pricing .caption {
    background: var(--color-accent-strong);
    position: absolute;
    left: 0;
    top: 50%;
    width: 50%;
    padding: var(--space-16);

    transform: translate(0, -50%);
}
.pricing.left .caption {
    left: auto;
    right: 0;
    background: var(--color-accent-strong);
}
.pricing .caption.padding-left {
    padding-left: var(--space-16);
}
.pricing.left .caption.padding-left {
    padding-right: var(--space-16);
}
.pricing .name {
    line-height: var(--leading-single);
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-title);
    color: var(--color-surface);
    margin-bottom: var(--space-4);
}
.pricing .name span {
    font-family: var(--font-script);
}
.pricing .subname {
    line-height: var(--leading-single);
    margin: 0;
    font-size: var(--text-small);
    text-transform: uppercase;
    color: var(--color-surface);
    margin-bottom: var(--space-5);
    letter-spacing: var(--tracking-wide);
}
.pricing .amount {
    margin: 0;
    padding-top: var(--space-3);
    line-height: var(--leading-single);
    font-size: var(--text-title-small);
    margin-bottom: var(--space-5);
    color: var(--color-surface);
}
.pricing .amount span {
    font-size: var(--text-small);
    color: var(--color-surface);
    margin-left: var(--space-1);
}
.pricing .list {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}
.pricing .list li {
  position: relative;
    font-size: var(--text-body);
    color: var(--color-surface);
    padding-left: var(--space-8);

}
.pricing .list li+li {
  margin-top: var(--space-1);
}
.pricing .list li i {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: var(--text-body);
    color: var(--color-surface);
}
.pricing .list li i.unavailable {
  color: var(--color-surface);
}
@media (max-width: 991.98px) {
    .pricing figure {
        width: auto;
        margin: 0;
    }
    .pricing .caption {
        position: relative;
        left: 0;
        top: 0;
        width: auto;
        padding: var(--space-12) var(--space-5);

        transform: translate(0, 0);
    }
}

/* ======= Signup style ======= */
.signup .img {
  position: relative;
    overflow: hidden;
}
.signup .img:hover img {
    -webkit-filter: none;
    filter: none;

    transform: scale(var(--image-zoom));

    transition: transform var(--duration-slow) var(--ease-out);
}
.signup .img img {

    transition: transform var(--duration-slow) var(--ease-out);
}
.signup .content {
  width: 100%;
  padding: var(--space-8) var(--space-24);
}
.signup .content .date {
  display: table-cell;
  position: relative;
  width: 80px;
  z-index: 2;
}
.signup .content .date h3 {
    font-size: var(--text-hero);
    font-weight: var(--weight-medium);
    color: var(--color-accent-strong);
    margin-bottom: 0;
}
.signup .content .date h6 {
    font-size: var(--text-small);
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    text-transform: uppercase;
    position: relative;
    letter-spacing: var(--tracking-wide);
    margin-bottom: 0;
}
.signup .content .cont {
  display: table-cell;
  vertical-align: middle;
}
.signup .content .cont h4 {
    margin: 0 0 var(--space-5) 0;
    font-size: var(--text-title);
    color: var(--color-text);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
}
.signup .content .cont h4 span {
    font-family: var(--font-script);
}
.signup .content .cont p {
    font-size: var(--text-body);
    color: var(--color-text);
}
.signup .content .cont p span {
    font-family: var(--font-script);
}
.signup .content .cont .more {
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-strong);
  padding-left: var(--space-10);
  position: relative;
}
.signup .content .cont .more:after {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--color-accent);
  position: absolute;
  top: 50%;
  left: 0px;
}
.signup .content .cont .more:hover {
   color: var(--color-text);
}
.signup .content .cont h6 {
    font-size: var(--text-small);
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    text-transform: uppercase;
    position: relative;
    letter-spacing: var(--tracking-wide);
    margin-bottom: 0;
}
.signup .content .info .tags {
  color: var(--color-accent-strong);
}
.signup input[type="password"], 
.signup input[type="email"], 
.signup input[type="text"], 
.signup input[type="file"], 
.signup textarea {
    margin-bottom: var(--space-4);
}
@media screen and (max-width: 991.98px) {
    .signup .content .cont h4 {
        line-height: var(--leading-body);
        font-size: var(--text-title-small);
    }
    .order2 {
    -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
            order: 2 !important;
  }
    .order1 {
    -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
            order: 1 !important;
  }  
}
@media screen and (max-width: 575.98px) {
    .signup .content .date {
    width: 60px;
  }
    .signup .content .info .tags {
    margin: var(--space-1) 0 0;
  }
    .signup .content .date h3 {
    font-size: var(--text-section);
  }
}

/* ======= Clients style ======= */
.clients {
    background: var(--color-accent-strong);
}
.clients .owl-carousel {
    margin: var(--space-5) 0;
}
.clients .clients-logo {
    opacity: 1;
    line-height: 0;
}
.clients .clients-logo:hover {
    opacity: 1;
}
.clients img {
    -webkit-filter: none;
    filter: none;
}
.clients img:hover {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);

    transition: transform var(--duration-slow) var(--ease-out);
}

/* ======= Gallery style ======= */
.gallery-item {
    position: relative;
    padding-top: var(--space-5);
}
.gallery-box {
    overflow: hidden;
    position: relative;
}
.gallery-box .gallery-img {
    position: relative;
    overflow: hidden;
}
.gallery-box .gallery-img:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0;
    transition: background-color var(--duration-normal) var(--ease-standard);
}
.gallery-box .gallery-img > img {
    transition: transform var(--duration-slow) var(--ease-out);
    border-radius: 0;
}
.gallery-box .gallery-detail {
    opacity: 0;
    color: var(--color-surface);
    width: 100%;
    padding: var(--space-5);
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    overflow: hidden;
    transition: opacity var(--duration-normal) var(--ease-standard);
}
.gallery-box .gallery-detail h4 {
    font-size: var(--text-lead);
}
.gallery-box .gallery-detail p {
    color: var(--color-muted);
    font-size: var(--text-small);
}
.gallery-box .gallery-detail i {
    color: var(--color-text);
    padding: var(--space-2);
}
.gallery-box .gallery-detail i:hover {
    color: var(--color-text);
}
.gallery-box:hover .gallery-detail {
    top: 50%;
    transform: translate(0, -50%);
    opacity: 1;
}
.gallery-box:hover .gallery-img:after {
    background: var(--color-scrim-text);
}
.gallery-box:hover .gallery-img > img {
    transform: scale(var(--image-zoom));
}
.gallery-box:focus-within .gallery-detail { opacity: 1; }
.gallery-box:focus-within .gallery-img:after { background: var(--color-scrim-text); }
.gallery-box .gallery-detail :is(h4, p, i) { color: var(--color-surface); }

/* magnific popup custom */
.mfp-figure button {
    border: 0px solid var(--color-clear);
}
button.mfp-close,
button.mfp-arrow {
    border: 0px solid var(--color-clear);
    background: var(--color-clear);
}

/* ======= Isotope/Masonry Gallery style ======= */
.florya-masonry-wrapper {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--space-8);
}
.florya-gallery-items .col-md-6:nth-child(2) {
    margin-top: 0;
}
.florya-gallery-filter {
    width: 100%;
    padding-bottom: var(--space-8);
    padding-left: 0;
    position: relative;
}
.florya-gallery-filter li {
    margin-right: var(--space-4);
    display: inline-block;
    font-size: var(--text-title-small);
    cursor: pointer;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
}
.florya-gallery-filter li:last-child {
    margin-right: 0;
}
.florya-gallery-filter li.active {
    color: var(--color-accent-strong);
    content: "";
    left: 0;
    bottom: -4px;
    border-bottom: 2px solid;

    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.florya-gallery-filter li:hover {
    color: var(--color-accent-strong);
}
.florya-masonry-wrapper .item-img-link {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.florya-masonry-wrapper .item-img-link:hover .item-img {

          transform: translateY(calc(-1 * var(--motion-reveal)));
}
.florya-masonry-wrapper .item-img-link:hover .item-img:after {
  opacity: 0.3;
}
@media only screen and (max-width: 767.98px) {
   .florya-masonry-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
   .florya-gallery-items .col-md-6:nth-child(2) {
        margin-top: 0;
    }
}
@media all and (max-width: 575.98px) {
    .florya-gallery-items .single-item {
        padding-bottom: var(--space-8);
    }
    .florya-gallery-filter li {
        margin-right: var(--space-3);
        font-size: var(--text-body);
    }
    .florya-gallery-filter li:last-child {
        margin-right: 0;
    }
    .florya-gallery-items .single-item {
        padding-bottom: var(--space-8);
    }

}
@media only screen and (max-width: 575.98px) {
  .florya-masonry-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ======= Video style ======= */
/* latest wedding video  */
.vid-area h5 {
    font-size: var(--text-title);
    font-weight: var(--weight-regular);
    color: var(--color-surface);
    margin-bottom: var(--space-8);
}
.play-button {
    position: relative;
    margin: auto;

    transform: scale(var(--image-zoom));
    z-index: 4;
}
.play-button svg {
    position: absolute;
    width: 100%;
    height: 100%;
}
.circle-fill circle {
    opacity: 1;
    fill: var(--color-line-accent);
}
.polygon {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: var(--control-leading-90);
    font-size: var(--text-section);
    z-index: 2;
}
.play-button svg.circle-fill {
    z-index: 1;
    stroke-dasharray: 322;
    stroke-dashoffset: 322;

    transition: stroke-dashoffset var(--duration-normal) var(--ease-standard);

    transform: rotate(-90deg);
}
.play-button:hover svg.circle-fill {
    stroke-dashoffset: 38.5;
}
.play-button svg.circle-track {
    z-index: 0;
}
.play-button.color {
    color: var(--color-accent-strong);
}
.play-button.color .circle-fill circle {
    fill: var(--color-accent);
}
.video-wrapper {
    min-height: 500px;
}
.video-wrapper .vid {
    position: relative;
    z-index: 8;
}
.video-wrapper .vid .vid-butn:hover .icon {
    color: var(--color-surface);
}
.video-wrapper .vid .vid-butn:hover .icon:before {

    transform: scale(0);
}
.video-wrapper .vid .vid-butn .icon {
    color: var(--color-surface);
    width: 100px;
    height: 100px;
    border: 2px solid var(--color-line-inverse);
    border-radius: var(--radius-circle);
    line-height: var(--control-leading-100);
    text-align: center;
    font-size: var(--icon-play);
    position: relative;

    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.video-wrapper .vid .vid-butn .icon:after {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-circle);
    z-index: -1;
}
.video-wrapper .vid .vid-butn .icon:before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    background: var(--color-clear);
    border-radius: var(--radius-circle);
    z-index: -1;

    transition: transform var(--duration-normal) var(--ease-standard);
}
/* video gallery */
.video-gallery-button {
    position: relative;
    margin: auto;

    transform: scale(var(--image-zoom));
    z-index: 4;
    margin-left: var(--space-4);
    float: right;
}
.video-gallery-polygon {
    z-index: 2;
    padding-left: var(--space-1);
    display: inline-block;
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: var(--color-clear);
    border-radius: var(--radius-circle);
    border: 1px solid var(--color-line-inverse-strong);
    color: var(--color-surface);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2);
    line-height: 0;
}
.video-gallery-polygon:hover {
    background: var(--color-surface);
    border: 1px solid var(--color-surface);
    color: var(--color-accent-strong);
}

/* ======= Testimonials style ======= */
.testimonials-box {
    position: relative;
    background: var(--color-clear);
    padding: var(--space-8);
    margin-bottom: var(--space-24);
}
.testimonials-box .head-box h6 {
    font-family: var(--font-body);
    color: var(--color-surface);
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    margin-bottom: var(--space-3);
}
.testimonials-box .head-box h4 {
    font-size: var(--text-title);
    font-weight: var(--weight-regular);
    color: var(--color-surface);
    margin-bottom: var(--space-5);
}
.testimonials-box .head-box h4 span {
    color: var(--color-surface);
    font-family: var(--font-script);
}
.line {
    width: 60px;
    border-top: 1px solid var(--color-line-inverse) !important;
    margin-bottom: var(--space-5);
}
.testimonials h5 {
    color: var(--color-surface);
    font-size: var(--text-title-small);
    margin-bottom: var(--space-8);
}
@media screen and (max-width: 991.98px) {
    .testimonials-box {
        margin-bottom: var(--space-24);
        padding: var(--space-8) var(--space-5);
    }
}
.testimonials .item {
    margin-bottom: var(--space-8);
    position: relative;
}
.testimonials .item .quote {
    position: absolute;
    right: 20px;
    top: 90px;
    width: 70px;
    margin: 0 auto var(--space-8);
    opacity: .1;
}
.testimonials .item p {
    color: var(--color-surface);
}
.testimonials .item h5 {
    color: var(--color-surface);
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--text-title-small);
}
.testimonials .item .info {
    margin: var(--space-8) 0 var(--space-4) 0;
}
.testimonials .item .info .author-img {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-circle);
    overflow: hidden;
    margin: auto;
    margin-bottom: var(--space-5);
}
.testimonials .item .info .cont {
/*    margin-left: 85px;*/
}
.testimonials .item .info h6 {
    font-size: var(--text-body);
    margin-bottom: 0;
    padding-top: 0;
    font-weight: var(--weight-regular);
    font-family: var(--font-body);
    color: var(--color-surface);
    line-height: var(--leading-single);
}
.testimonials .item .info h6 i {
    font-size: var(--text-body);
    color: var(--color-surface);
    margin-left: var(--space-1);
    margin-right: var(--space-1);
    font-style: normal;
}
.testimonials .item .info h6 span a {
  text-decoration: underline;
}
.testimonials .item .info h6 span a:hover {
  text-decoration: none;
}
@media screen and (max-width: 767.98px) {
    .testimonials-box {
        padding: 0;
    }
}

/* ======= Accordion Box (for Faqs) style ======= */
.accordion-box {
  position: relative;
}
.accordion-box .block {
  position: relative;
  background: var(--color-surface);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.accordion-box .block.active-block {
  background-color: var(--color-surface);
}
.accordion-box .block:last-child {
  margin-bottom: 0;
}
.accordion-box .block .acc-btn {
    position: relative;
    font-size: var(--text-lead);
    line-height: var(--control-leading-24);
    font-weight: var(--weight-regular);
    cursor: pointer;
    padding: var(--space-5) var(--space-10);
    padding-right: var(--space-16);
    color: var(--color-text);
    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
    font-family: var(--font-heading);
}
.accordion-box .block .acc-btn .count {
  color: var(--color-accent-strong);
  padding-right: var(--space-1);
}
.accordion-box .block .acc-btn:before {
  position: absolute;
    right: 35px;
    top: 20px;
    height: 30px;
    font-size: var(--icon-small);
    font-weight: var(--weight-regular);
    color: var(--color-accent-strong);
    line-height: var(--control-leading-27);
    content: "\e61a";
    font-family: var(--font-icons);
    transition: opacity var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
}
.accordion-box .block .acc-btn.active {
  background-color: var(--color-surface);
    color: var(--color-text);
}
.accordion-box .block .acc-btn.active:before {
  color: var(--color-accent-strong);
  content: "\e622";
}
.accordion-box .block .acc-content {
  position: relative;
  display: none;
}
.accordion-box .block .content {
  position: relative;
    padding: 0 var(--space-10) var(--space-8);
    background-color: var(--color-surface);
    color: var(--color-text);
}
.accordion-box .block .acc-content.current {
  display: block;
}
.accordion-box .block .content .text {
  display: block;
  position: relative;
  top: 0px;
  display: block;
}

/* ======= Blog style ======= */
.blog .item {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-8);
}
.blog .item:hover img {
    -webkit-filter: none;
    filter: none;

    transform: scale(var(--image-zoom));

    transition: transform var(--duration-slow) var(--ease-out);
}
.blog .item:hover .con {
    transform: translateY(0);
}
.blog .item img {

    transition: transform var(--duration-slow) var(--ease-out);
}
.blog .item .date {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-scrim-text);
    border: 1px solid var(--color-surface);
    color: var(--color-surface);
    padding: var(--space-1) var(--space-3);
    text-align: center;
}
.blog .item .date span {
    font-family: var(--font-body);
    display: block;
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-subtle);
    color: var(--color-surface);
}
.blog .item .date i {
    font-family: var(--font-heading);
    display: block;
    font-size: var(--text-title);
    font-style: normal;
    color: var(--color-surface);
    line-height: var(--leading-display);
}
.blog .item .con {
    margin: calc(-1 * var(--space-32)) var(--space-8) var(--space-24);
    padding: var(--space-8);
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-surface);
    border-radius: 0;
    overflow: hidden;

    transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
    bottom: 0;
    transform: translateY(var(--motion-card-shift));
    position: relative;
}
.blog .item .con .category {
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-regular);
    margin-bottom: var(--space-1);
}
.blog .item .con .category a {
    margin-right: var(--space-1);
    position: relative;
    color: var(--color-accent-strong);
    font-family: var(--font-body);
}
.blog .item .con .category a:hover {
    color: var(--color-text);
}
.blog .item .con .category a:last-child {
    margin-right: 0;
}
.blog .item .con .category a:last-child:after {
    display: none;
}
.blog .item .con h5,
.blog .item .con h5 a {
    color: var(--color-text);
    font-size: var(--text-title-small);
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    margin-bottom: 0;
    line-height: var(--leading-relaxed);
}
.blog .item .con h5 span, 
.blog .item .con h5 a span {
    font-family: var(--font-script);
}
.blog .item .con h5:hover,
.blog .item .con h5 a:hover {
    color: var(--color-text);
}
.blog .item .con p {
    color: var(--color-muted);
    font-size: var(--text-body);
}
.blog .item .con i {
    color: var(--color-text);
    font-size: var(--icon-medium);
}
/* blog pagination */
.blog-pagination-wrap {
    padding: 0;
    margin: 0;
    text-align: center;
}
.blog-pagination-wrap li {
    display: inline-block;
    margin: 0 var(--space-1);
}
.blog-pagination-wrap li a {
    background: var(--color-clear);
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: var(--control-leading-37);
    text-align: center;
    color: var(--color-surface);
    font-weight: var(--weight-regular);
    border: 1px solid var(--color-accent);
    font-size: var(--text-body);
    border-radius: var(--radius-circle);
}
.blog-pagination-wrap li a i {
    font-size: var(--icon-small);
}
.blog-pagination-wrap li a:hover {
    opacity: 1;
    text-decoration: none;
    background: var(--color-clear);
    border: 1px solid var(--color-surface);
    color: var(--color-surface);
}
.blog-pagination-wrap li a.active {
    background-color: var(--color-clear);
    border: 1px solid var(--color-surface);
    color: var(--color-surface);
}
@media screen and (max-width: 767.98px) {
    .blog-pagination-wrap {
        padding: 0;
        margin: 0;
        text-align: center;
    }
}

/* ======= Blog 2 style ======= */
.blog2 .item {
    margin-bottom: var(--space-8);
}
.blog2 .post-img {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-8);
}
.blog2 .post-img:hover img {
    -webkit-filter: none;
    filter: none;

    transform: scale(var(--image-zoom));

    transition: transform var(--duration-slow) var(--ease-out);
}
.blog2 .post-img a {
    display: block;
}
.blog2 .post-img img {

    transition: transform var(--duration-slow) var(--ease-out);
}
.blog2 .post-img .date {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-scrim-text);
    border: 1px solid var(--color-surface);
    color: var(--color-surface);
    padding: var(--space-1) var(--space-3) var(--space-4) var(--space-3);
    text-align: center;
}
.blog2 .post-img .date span {
    font-family: var(--font-body);
    display: block;
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: var(--tracking-subtle);
    color: var(--color-surface);
}
.blog2 .post-img .date i {
    font-family: var(--font-heading);
    display: block;
    font-size: var(--text-title);
    font-style: normal;
    color: var(--color-surface);
    line-height: var(--leading-display);
}
.blog2 .post-cont {
    padding: 0 0 var(--space-8) 0;
}
.blog2 .post-cont span.category {
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-regular);
    margin-bottom: 0;
}
.blog2 .post-cont span.category a {
    margin-right: var(--space-1);
    position: relative;
    color: var(--color-accent-strong);
    font-family: var(--font-body);
}
.blog2 .post-cont span.category a:hover {
    color: var(--color-text);
}
.blog2 .post-cont span.category a:last-child {
    margin-right: 0;
}
.blog2 .post-cont span.category a:last-child:after {
    display: none;
}
.blog2 .post-cont h5 {
    font-size: var(--text-title);
}
.blog2 .post-cont h5 a {
    color: var(--color-text);
}
.blog2 .post-cont h5 a:hover {
    color: var(--color-text);
}
.blog2 .post-cont .date {
    font-family: var(--font-heading);
    margin-top: 0;
    font-size: var(--text-small);
    text-align: right;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	margin-bottom: var(--space-1);
}
.blog2 .post-cont .date a {
    color: var(--color-accent-strong);
}
.blog2 .post-cont i {
    color: var(--color-line);
	margin: 0 var(--space-3);
	font-size: var(--icon-small);
}
/* blog sidebar */
.blog2-sidebar .widget {
    background: var(--color-accent-strong);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    overflow: hidden;
}
.blog2-sidebar .widget ul {
    margin-bottom: 0;
    padding: 0;
}
.blog2-sidebar .widget ul li {
    margin-bottom: var(--space-4);
    color: var(--color-surface);
    font-size: var(--text-body);
    line-height: var(--leading-heading);
}
.blog2-sidebar .widget ul li a {
    color: var(--color-surface);
}
.blog2-sidebar .widget ul li a.active {
    color: var(--color-surface);
}
.blog2-sidebar .widget ul li a:hover {
    color: var(--color-surface);
}
.blog2-sidebar .widget ul li:last-child {
    margin-bottom: var(--space-5);
}
.blog2-sidebar .widget ul li i {
    font-size: var(--icon-small);
    margin-right: var(--space-3);
}
.blog2-sidebar .widget .recent li {
    display: block;
    overflow: hidden;
}
.blog2-sidebar .widget .recent .thum {
    width: 90px;
    overflow: hidden;
    float: left;
}
.blog2-sidebar .widget .recent a {
    display: block;
    margin-left: var(--space-26);
}
.blog2-sidebar .widget .recent a:hover {
    color: var(--color-surface);
}
.blog2-sidebar .widget-title {
    margin-bottom: var(--space-5);
}
.blog2-sidebar .widget-title h6 {
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-line-inverse);
    font-size: var(--text-title-small);
    line-height: var(--leading-body);
    margin-bottom: var(--space-4);
    color: var(--color-surface);
}
.blog2-sidebar .search form {
    position: relative;
}
.blog2-sidebar .search form input {
    width: 100%;
    padding: var(--space-3);
    border: 0;
    background: var(--color-surface);
	margin-bottom: 0;
}
.blog2-sidebar .search form button {
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--color-clear);
    color: var(--color-text);
    border: 0;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
}
.blog2-sidebar .tags li {
    margin: var(--space-1) !important;
    padding: var(--space-2) var(--space-5);
    background-color: var(--color-surface);
    border: 1px solid var(--color-surface);
    color: var(--color-text) !important;
    float: left;
}
.blog2-sidebar ul.tags li a {
    font-size: var(--text-small);
    color: var(--color-text);
}
.blog2-sidebar ul.tags li:hover,
.blog2-sidebar ul.tags li:focus-within,
.blog2-sidebar ul.tags li a:hover {
    background-color: var(--color-accent-strong);
    color: var(--color-surface);
}
.blog2-sidebar ul.tags li:hover a,
.blog2-sidebar ul.tags li:focus-within a {
    color: var(--color-surface);
}
/* blog2 pagination */
.blog2-pagination-wrap {
    padding: 0;
    margin: 0;
    text-align: center;
}
.blog2-pagination-wrap li {
    display: inline-block;
    margin: 0 var(--space-1);
}
.blog2-pagination-wrap li a {
    background: var(--color-clear);
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: var(--control-leading-37);
    text-align: center;
    color: var(--color-text);
    font-weight: var(--weight-regular);
    border: 1px solid var(--color-text);
    font-size: var(--text-body);
    border-radius: var(--radius-circle);
}
.blog2-pagination-wrap li a i {
    font-size: var(--icon-small);
}
.blog2-pagination-wrap li a:hover {
    opacity: 1;
    text-decoration: none;
    background: var(--color-accent-strong);
    border: 1px solid var(--color-accent);
    color: var(--color-surface);
}
.blog2-pagination-wrap li a.active {
    background-color: var(--color-accent-strong);
    border: 1px solid var(--color-accent);
    color: var(--color-surface);
}
@media screen and (max-width: 767.98px) {
    .blog2-pagination-wrap {
        padding: 0;
        margin: 0;
        text-align: center;
    }
}

/* ======= Post style ======= */
.blog-post-section {
    padding-top: var(--space-30);
}
.post-comment-section {
    margin-top: var(--space-16);
}
.post-comment-section h3 {
    font-size: var(--text-title-small);
    color: var(--color-text);
    font-family: var(--font-heading);
    margin-bottom: var(--space-1);
}
.post-comment-section h3 span {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-text);
    margin-left: var(--space-4);
}
.blog-post-caption h1 {
    margin-bottom: var(--space-5);
    font-size: var(--text-section);
    text-transform: uppercase;
}
.blog-post-comment-wrap {
    display: flex;
    margin-bottom: var(--space-16);
}
.post-user-comment {
    margin-right: var(--space-5);
    flex: 0 0 auto;
}
.post-user-comment img {
    border-radius: var(--radius-circle);
    width: 100px;
}
.post-user-content {
    margin-right: var(--space-6);
}
.post-repay {
    font-size: var(--text-small);
    color: var(--color-accent-strong);
    margin: 0;
    font-weight: var(--weight-regular);
}

/* ======= Contact style ======= */
.contact h3 {
    font-size: var(--text-title-small);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}
.google-map {
	width: 100%;
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
    height: calc(100% + 30px);
    overflow: hidden;
}
.contact-info {
    display: flex;
    align-items: center;
}
.contact-info .icon {
    position: relative;
    top: 3px;
}
.contact-info .icon span {
    font-size: var(--icon-play);
    color: var(--color-accent-strong);
}
.contact-info .icon.color-1 span {
    font-size: var(--icon-play);
    color: var(--color-accent-strong);
}
.contact-info .text {
    margin-left: var(--space-5);
}
.contact-info .text p {
    font-size: var(--text-body);
    margin: 0;

}
.contact-info .text a {
    font-size: var(--text-title-small);
    color: var(--color-text);
    font-family: var(--font-heading);
}
.contact-info .text a.color-1 {
    color: var(--color-surface);
}

/* ======= Buttons style ======= */
/* dark button */
.butn-dark {
  display: inline-block;
  height: auto;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-pill);
  background-color: var(--color-clear);

  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  color: var(--color-text);
  line-height: var(--control-leading-20);
  font-weight: var(--weight-medium);
  text-align: center;
}
.butn-dark:hover {
  border: 1px solid var(--color-text);
  background-color: var(--color-text);
  color: var(--color-surface);
}
/* light button */
.butn-light {
  display: inline-block;
  height: auto;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: var(--color-surface);

  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  color: var(--color-text);
  line-height: var(--control-leading-20);
  font-weight: var(--weight-medium);
  text-align: center;
}
.butn-light:hover {
  border: 1px solid var(--color-surface);
  background: var(--color-clear);
  color: var(--color-surface);
}

/* ====== Coming Soon ======= */
.comming{
	min-height: 100vh;
	height: auto;
	position: relative;
	background-blend-mode: overlay;
	background: var(--color-scrim-strong);
	background-image: url("../img/slider/17.webp");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: var(--color-surface);
}
@media (max-width: 767.98px){
	.comming{
		min-height: 120vh;
	}
}
.comming .item {
    background: var(--color-clear);
    border: 1px solid var(--color-line-inverse);
    padding: var(--space-4) var(--space-4) var(--space-6) var(--space-4);
    margin-bottom: 0;
}
.comming h6 {
    color: var(--color-surface);
    font-size: var(--text-small);
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    text-transform: uppercase;
    margin-bottom: var(--space-8);
    letter-spacing: var(--tracking-wide);
}
.comming h3 {
    font-size: var(--text-display);
    color: var(--color-surface);
    position: relative;
    text-transform: uppercase;
    letter-spacing: var(--tracking-normal);
    margin-bottom: 0;
    line-height: var(--leading-tight);
}
.comming h2 {
    font-size: var(--text-title);
    font-weight: var(--weight-regular);
    color: var(--color-surface);
    position: relative;
}
.comming h1 {
    font-size: var(--display-error);
    font-weight: var(--weight-regular);
    margin-bottom: 0;
    position: relative;
    color: var(--color-clear);
    -webkit-text-stroke: 1px var(--color-surface);
    opacity: .8;
    line-height: var(--leading-tight);
}
.comming p {
	color: var(--color-surface);
	font-size: var(--text-body);
}
/* coming form */
.comming form {
  margin-top: var(--space-8);
  position: relative;
}
.comming form input {
    width: 100%;
    padding: var(--space-3) var(--space-12) var(--space-3) var(--space-5);
    background-color: var(--color-clear);
    border: 1px solid var(--color-accent);
    border-radius: 0;
    color: var(--color-surface);
    margin-bottom: var(--space-4);

}
.comming form input::placeholder {
    color: var(--color-surface);
}
.comming form button {
    background-color: var(--color-accent-strong);
    padding: var(--space-2) var(--space-6);
    border-radius: 0;
    color: var(--color-surface);
    border: 0;
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);

}
.comming form button:hover {
  background-color: var(--color-text);
  color: var(--color-surface);

}
/* go home */
.go-back{
	margin-top: var(--space-4);
}
.go-back a {
	color: var(--color-surface);
	display: inline-block;
    font-family: var(--font-body);
	font-size: var(--text-body);
}
.go-back a:hover {
	color: var(--color-surface);
}
.go-back a span{
	transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.go-back a span i {
	color: var(--color-surface);
	font-size: var(--icon-small);
}
.go-back a:hover span {
    transform: translateX(var(--space-3));
}

/* ======= 404 Page style ======= */
.error-form {
  position: relative;
  max-width: 520px;
  margin: var(--space-12) auto 0;
}
.error-form form {
  position: relative;
}
.error-form .form-group {
  position: relative;
  margin: 0;
}
.error-form .form-group input[type="text"],
.error-form .form-group input[type="search"],
.error-form .form-group input[type="email"] {
  position: relative;
  width: 100%;
  line-height: var(--control-leading-30);
  padding: var(--space-5) var(--space-16) var(--space-5) var(--space-8);
  height: 70px;
  display: block;
 font-family: var(--font-heading);
  font-size: var(--text-body);
  background: var(--color-surface-soft);
  color: var(--color-text);
  border-radius: var(--radius-soft);
  border: 1px solid var(--color-surface-soft);
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.error-form .form-group input[type="text"]:focus,
.error-form .form-group input[type="email"]:focus,
.error-form .form-group input[type="search"]:focus {
  border-color: var(--color-surface-soft);
}
.error-form .form-group input::-webkit-input-placeholder {
    color: var(--color-muted);
}
.error-form .form-group .theme-btn {
      position: absolute;
    right: 20px;
    top: 10px;
    width: 40px;
    height: 40px;
    line-height: var(--control-leading-40);
    font-size: var(--text-title-small);
    background: none;
    color: var(--color-text);
}
.error-form .form-group .theme-btn span {
  vertical-align: middle;

}

/* ======= Footer style ======= */
.footer {
  position: relative;
  display: block;
}
.footer-top {
  position: relative;
  display: block;
  background-color: var(--color-text);
  padding: var(--space-24) 0 var(--space-16) 0;
  z-index: 1;
}
.footer-top .footer-column {
    margin-bottom: var(--space-8);
}
.footer-title {
  font-size: var(--text-title-small);
  color: var(--color-surface);
  margin-bottom: var(--space-5);
}
.footer-title span {
    font-family: var(--font-script);
}
.footer-about-text {
  font-size: var(--text-body);
  color: var(--color-surface);
  margin: 0;
}
.footer-about-text em {
    font-family: var(--font-script);
  color: var(--color-surface);
  margin: 0;
}
.footer-about-social-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center;
  margin-top: var(--space-5);
}
.footer-about-social-list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
      justify-content: center;
  text-align: center;
  color: var(--color-surface);
  font-size: var(--text-body);
  background-color: var(--color-clear);

  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.footer-about-social-list a + a {
  margin-left: var(--space-4);
}
.footer-about-social-list a:hover {
  background-color: var(--color-clear);
  color: var(--color-surface);
}
.footer-explore-list li + li {
  margin-top: var(--space-1);
}
.footer-explore-list li a {
  position: relative;
  display: block;
  font-size: var(--text-body);
  color: var(--color-surface);

  transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.footer-explore-list li a:hover {
    transform: translateX(var(--space-3));
    color: var(--color-surface);
}
.footer-explore-list li a:before {
  position: absolute;
  top: 55%;
  left: 0;
  bottom: 0;
  width: 6px;
  height: 6px;
  content: "";
  background-color: var(--color-accent-strong);

          transform: translateY(-50%);
  opacity: 0;
  border-radius: var(--radius-circle);

  transition: opacity var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
}
.footer-explore-list li a:hover:before {
  opacity: 1;
}
.footer-contact {
  position: relative;
  display: block;
}
.footer-contact .footer-title {
  margin-bottom: var(--space-5);
}
.footer-contact-text {
  font-size: var(--text-body);
  margin: 0;
  color: var(--color-surface);
  padding-bottom: var(--space-5);
}
.footer-contact-info p {
  margin: 0;
}

.footer-contact-info p span {
  margin-right: var(--space-3);
}
.footer-contact-phone {
    font-family: var(--font-body);
    font-size: var(--text-title-small);
    color: var(--color-surface);
    font-weight: var(--weight-regular);
    display: block;

    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.footer-contact-phone:hover {
    color: var(--color-surface);
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}
.footer-contact-mail {
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  color: var(--color-surface);
  position: relative;
  display: inline-block;

  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.footer-contact-mail:hover {
    color: var(--color-surface);
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}
.footer-contact-mail:before {
  position: absolute;
  bottom: 9px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-accent);
  content: "";

  transition: opacity var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
}
.footer-contact-mail:hover:before {
  background-color: var(--color-accent-strong);
}
/* language */
.footer-language {
    width: 160px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-top: var(--space-8);
}
.footer-language i {
    position: absolute;
    right: 30px;
    top: 17px;
    font-size: var(--text-body);
    opacity: 0.6;
    color: var(--color-surface);
}
.footer-language select {
    height: 50px;
    background: var(--color-clear);
    color: var(--color-surface);
    border: 1px solid var(--color-line-accent);
    border-radius: 0;
}
.footer-language select option {
    color: var(--color-text);
    background: var(--color-surface);
}
select {
    width: 160px;
    max-width: 100%;
    height: 70px;
    padding: 0 var(--space-8);
    border: 1px solid var(--color-text);
    color: var(--color-text);
    -webkit-appearance: none;
    -moz-appearance: none;
}
.footer-bottom {
  position: relative;
  display: block;
  background-color: var(--color-text);
  padding: var(--space-8) 0;
    border: none;
    border-top: 1px solid var(--color-line-accent);
}
.footer-bottom-inner {
  position: relative;
  display: block;
  text-align: center;
}
.footer-bottom-copy-right {
  font-size: var(--text-small);
  color: var(--color-surface);
  margin: 0;
}
.footer-bottom-copy-right a {
    color: var(--color-surface);
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}
.footer-bottom-copy-right a:hover {
    color: var(--color-surface);
    text-decoration: underline;
    text-underline-offset: var(--space-1);
}

/* ======= Shared footer ======= */
/* The page closes the way it opens: one invitation, then calm reference columns. */
.footer-site {
    padding-top: var(--space-30);
    background: var(--color-text);
    color: var(--color-line-inverse-strong);
}
.footer-site a {
    color: var(--color-surface);
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
    transition: background-size var(--duration-normal) var(--ease-out);
}
.footer-site a:is(:hover, :focus-visible) {
    color: var(--color-surface);
    background-size: 100% 1px;
}
.footer-closing { padding-bottom: var(--space-20); }
/* Dantina's descenders fall well below the line box, so the mail line keeps its distance. */
.footer-closing-title {
    margin-bottom: var(--space-18);
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    color: var(--color-surface);
}
.footer-closing-title span {
    display: block;
    margin-left: 1em;
    font-family: var(--font-script);
    font-size: 1.15em;
    line-height: var(--leading-single);
    color: var(--color-accent);
}
.footer-site .footer-closing-mail {
    font-size: var(--text-title-small);
    background-size: 100% 1px;
    background-image: linear-gradient(var(--color-line-inverse), var(--color-line-inverse));
}
.footer-site .footer-closing-mail:is(:hover, :focus-visible) {
    background-image: linear-gradient(currentColor, currentColor);
}
.footer-closing-action { text-align: right; }
.footer-site .home-cta { background-size: auto; }
.footer-site .home-cta:is(:hover, :focus-visible) {
    background: var(--color-surface);
    color: var(--color-text);
}
.footer-info {
    padding: var(--space-16) 0;
    border-top: 1px solid var(--color-line-inverse);
}
.footer-info .footer-wordmark {
    --wordmark-size: var(--text-title-small);
    margin-bottom: var(--space-6);
    font-family: var(--font-script);
    font-size: var(--wordmark-size);
    line-height: var(--leading-single);
    white-space: nowrap;
    color: var(--color-surface);
}
.footer-wordmark span {
    display: block;
    margin: var(--space-1) 0 0 calc(var(--wordmark-size) * 2.2);
    font-family: var(--font-body);
    font-size: var(--text-small);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-line-inverse-strong);
}
.footer-info p {
    color: var(--color-line-inverse-strong);
}
.footer-site .footer-label {
    margin-bottom: var(--space-5);
    font-size: var(--text-small);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-line-inverse-strong);
}
.footer-links li {
    margin-bottom: var(--space-3);
    line-height: var(--leading-relaxed);
}
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-line-inverse);
    font-size: var(--text-small);
}
.footer-legal p {
    margin: 0;
    color: var(--color-line-inverse-strong);
}
@media screen and (max-width: 991.98px) {
    .footer-site { padding-top: var(--space-20); }
    .footer-closing-title { font-size: var(--text-display); }
    .footer-closing-action {
        margin-top: var(--space-10);
        text-align: left;
    }
    .footer-info-brand { margin-bottom: var(--space-10); }
    .footer-info [class*="col-6"] { margin-bottom: var(--space-8); }
}
@media screen and (max-width: 575.98px) {
    .footer-closing-title { font-size: var(--text-section); }
}

/* ======= toTop Button style ======= */
/* Keep the progress ring inset from the disc so independently antialiased edges
   do not overlap at the button's outer contour. */
.progress-wrap {
    position: fixed;
    background-color: var(--color-surface);
    bottom: var(--space-8);
    right: var(--space-8);
    height: var(--space-12);
    width: var(--space-12);
    cursor: pointer;
    display: block;
    border-radius: var(--radius-pill);
    z-index: 100;
    opacity: 0;
    visibility: hidden;

    transform: translateY(var(--motion-rise));

    transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
}
.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;

    transform: none;
}
.progress-wrap::after {
    position: absolute;
    font-family: var(--font-icons);
    content: '\e648';
    inset: 0;
    display: grid;
    place-items: center;
    line-height: var(--leading-single);
    font-size: var(--icon-small);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    cursor: pointer;
    z-index: 1;

    transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
}
.progress-wrap svg {
    position: absolute;
    inset: var(--space-half);
    width: calc(100% - var(--space-1));
    height: calc(100% - var(--space-1));
    display: block;
    overflow: visible;
    shape-rendering: geometricPrecision;
}
.progress-wrap svg path {
    fill: none;
}
.progress-wrap svg.progress-circle path {
    stroke: var(--color-shadow-strong);
    stroke-width: var(--space-half);
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    transition: stroke var(--duration-normal) var(--ease-standard);
}
.progress-wrap::after {
    color: var(--color-accent-strong);
}
.progress-wrap svg.progress-circle path {
    stroke: var(--color-accent);
}
.progress-wrap svg.progress-circle path.progress-track {
    fill: none;
    stroke: var(--color-line);
}
/* The SVG disc clips the track and oversized progress stroke together. Only
   this shared clip draws the outer edge; the inner disc draws the inner edge. */
.progress-wrap.progress-wrap-disc {
    background: none;
}
.progress-wrap svg.progress-disc {
    inset: 0;
    width: 100%;
    height: 100%;
}
.progress-wrap svg.progress-disc .progress-track {
    fill: var(--color-line);
}
.progress-wrap svg.progress-disc path {
    stroke-width: 8;
    vector-effect: none;
    stroke-linecap: butt;
}
.progress-wrap svg.progress-disc .progress-surface {
    fill: var(--color-surface);
}

/* =======  Overlay Effect Bg image style  ======= */
[data-overlay-dark],
[data-overlay-darkgray],
[data-overlay-light] {
  position: relative;
}
[data-overlay-dark] .container,
[data-overlay-darkgray] .container,
[data-overlay-light] .container {
  position: relative;
  z-index: 2;
}
[data-overlay-dark]:before,
[data-overlay-darkgray]:before,
[data-overlay-light]:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-overlay-dark]:before {
  background: var(--color-scrim);
}
[data-overlay-darkgray]:before {
  background: var(--color-scrim);
}
[data-overlay-light]:before {
  background: var(--color-surface);
}
[data-overlay-dark] h1,
[data-overlay-dark] h2,
[data-overlay-dark] h3,
[data-overlay-dark] h4,
[data-overlay-dark] h5,
[data-overlay-dark] h6,
[data-overlay-dark] span {
  color: var(--color-surface);
}
[data-overlay-darkgray] h1,
[data-overlay-darkgray] h2,
[data-overlay-darkgray] h3,
[data-overlay-darkgray] h4,
[data-overlay-darkgray] h5,
[data-overlay-darkgray] h6,
[data-overlay-darkgray] span {
  color: var(--color-surface);
}
[data-overlay-light] h1,
[data-overlay-light] h2,
[data-overlay-light] h3,
[data-overlay-light] h4,
[data-overlay-light] h5,
[data-overlay-light] h6,
[data-overlay-light] span {
  color: var(--color-muted);
}
[data-overlay-dark] p {
  color: var(--color-surface);
}
[data-overlay-darkgray] p {
    color: var(--color-surface);
}
[data-overlay-light] p {
    color: var(--color-text);
}
[data-overlay-dark="0"]:before,
[data-overlay-darkgray="0"]:before,
[data-overlay-light="0"]:before {
  opacity: 0;
}
[data-overlay-dark="1"]:before,
[data-overlay-darkgray="1"]:before,
[data-overlay-light="1"]:before {
  opacity: var(--overlay-decoration);
}
[data-overlay-dark="2"]:before,
[data-overlay-darkgray="2"]:before,
[data-overlay-light="2"]:before {
  opacity: var(--overlay-decoration);
}
[data-overlay-dark="3"]:before,
[data-overlay-darkgray="3"]:before,
[data-overlay-light="3"]:before {
  opacity: var(--overlay-text);
}
[data-overlay-dark="4"]:before,
[data-overlay-darkgray="4"]:before,
[data-overlay-light="4"]:before {
  opacity: var(--overlay-text);
}
[data-overlay-dark="5"]:before,
[data-overlay-darkgray="5"]:before,
[data-overlay-light="5"]:before {
  opacity: var(--overlay-hero);
}
[data-overlay-dark="6"]:before,
[data-overlay-darkgray="6"]:before,
[data-overlay-light="6"]:before {
  opacity: var(--overlay-hero);
}
[data-overlay-dark="7"]:before,
[data-overlay-darkgray="7"]:before,
[data-overlay-light="7"]:before {
  opacity: var(--overlay-hero);
}
[data-overlay-dark="8"]:before,
[data-overlay-darkgray="8"]:before,
[data-overlay-light="8"]:before {
  opacity: var(--overlay-hero);
}
[data-overlay-dark="9"]:before,
[data-overlay-darkgray="9"]:before,
[data-overlay-light="9"]:before {
  opacity: var(--overlay-hero);
}
[data-overlay-dark="10"]:before,
[data-overlay-darkgray="10"]:before,
[data-overlay-light="10"]:before {
  opacity: var(--overlay-opaque);
}

.services .item:focus-within .con,
.blog .item:focus-within .con { transform: translateY(0); }
.services .item:focus-within .line { transform: scaleX(1); }
.portfolio .square-flip:focus-within .square { transform: rotateY(calc(-1 * var(--motion-flip-angle))); }
.portfolio .square-flip:focus-within .square2 { transform: rotateY(0); }
.portfolio .square-flip:focus-within .square-container { transform: translateX(calc(-1 * var(--motion-flip-shift))) scale(var(--motion-flip-scale)); }
.portfolio .square-flip:focus-within .square-container2 { transform: translateY(-50%); }

/* Text over photographs uses a contrast-safe scrim, including weak legacy values.
   White caption cards retain their own dark text rules in their sections. */
[data-overlay-dark]:not([data-overlay-dark="0"]):before,
[data-overlay-darkgray]:not([data-overlay-darkgray="0"]):before {
    opacity: var(--overlay-text);
}
[data-overlay-dark="5"]:before,
[data-overlay-darkgray="5"]:before,
.video-fullscreen-video[data-overlay-dark]:before { opacity: var(--overlay-hero); }
.header [data-overlay-dark]:not([data-overlay-dark="0"]):before {
    background: var(--gradient-hero);
    opacity: var(--overlay-opaque);
}
[data-overlay-light]:before { opacity: var(--overlay-hero); }
[data-overlay-light] :is(h1, h2, h3, h4, h5, h6, span, p) { color: var(--color-text); }
.portfolio .flip-overlay { opacity: var(--overlay-text); }

/* ======= Responsive style ======= */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px !important;
    }
}
@media screen and (max-width: 991.98px) {
    .bg-fixed {
        background-attachment: scroll !important;
        background-position: center;
    }
    .header {
        background-attachment: scroll !important;
        background-position: 50% 0% !important;
    }
    .header .caption h1 {
        font-size: var(--text-section);
    }
}
@media screen and (max-width: 767.98px) {
    .banner-header .slider-text > .slider-text-inner .desc,
    .kenburns-inner .desc,
    .header .caption .slider-text > .slider-text-inner .desc {
        padding: var(--space-10) var(--space-8);
    }
    .header .caption .slider-text > .slider-text-inner h1 {
        font-size: var(--text-title);
    } 

    .kenburns-inner .caption h1 {
        font-size: var(--text-title);
    } 
    .banner-header .slider-text > .slider-text-inner h1 {
        font-size: var(--text-title);
    }
    .section-title {
        font-size: var(--text-title);
    }
    .testimonials .item h5 {
        font-size: var(--text-title-small);
    }
    .about2 #circle {
        display: none;
    }
    .portfolio .square2 h4 {
        font-size: var(--text-title-small);
    }
    .pricing.left .caption.padding-left {
        padding-right: var(--space-5);
    }
    .pricing .caption.padding-left {
        padding-left: var(--space-5);
    }
    .blog .item .con {
        margin: calc(-1 * var(--space-32)) var(--space-4) var(--space-24);
        padding: var(--space-5);
    }
    .blog2 .post-cont h5 {
        font-size: var(--text-title);
    }
    .signup .content {
        width: 100%;
        padding: var(--space-12) var(--space-5);
    }
    .team .content .cont h4 {
        font-size: var(--text-title-small);
    }
    .accordion-box .block .acc-btn {
        padding: var(--space-5) var(--space-5);
    }
    .accordion-box .block .acc-btn:before {
        right: 20px;
    }
    .accordion-box .block .content {
        padding: 0 var(--space-5) var(--space-8);
    }
    .footer-bottom-inner {
        text-align: left;
    }
    .comming .item {
        background: var(--color-clear);
        border: 1px solid var(--color-clear);
        padding: 0;
        margin-bottom: var(--space-8);
    }
    .comming h1 {
        font-size: var(--display-error-small);
    }
    .comming h3 {
        font-size: var(--text-title);
    }
    .comming h6 {
        font-size: var(--text-small);
        letter-spacing: var(--tracking-normal);
    }

}

/* Motion preference is a visibility contract as well as a duration setting.
   Do not reset positioning transforms (v-middle, pricing, slider arrows). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: var(--duration-reduced) !important;
        animation-delay: var(--delay-none) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--duration-reduced) !important;
        transition-delay: var(--delay-none) !important;
        scroll-behavior: auto !important;
    }
    .hero-progress { display: none !important; }
    .animate-box, .animated, .hero-caption.is-active :is(h1, p) {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    .about2 #circle svg,
    .vegas-slide-inner, .vegas-slide, .vegas-wrapper,
    .about2 .about-img img, .team .img img, .signup .img img,
    .services .item img, .blog .item img, .blog2 .item img,
    .gallery-box .gallery-img > img, .florya-masonry-wrapper .item-img,
    .arrow.bounce, .banner-header .arrow.bounce {
        animation: none !important;
        transform: none !important;
    }
    .owl-theme .owl-nav [class*=owl-]:hover,
    .header .arrow i:hover:after,
    .banner-header .arrow i:hover:after,
    .play-button,
    .video-gallery-button,
    .video-wrapper .vid .vid-butn:hover .icon:before {
        transform: none !important;
    }
    .video-fullscreen-wrap video { opacity: 0; }
    .services .item .con, .blog .item .con,
    .footer-explore-list li a:hover, .go-back a:hover span { transform: none; }
    .portfolio .square-flip,
    .portfolio .square-flip .square,
    .portfolio .square-flip .square2,
    .portfolio .square-flip .square-container { transform: none !important; }
    .portfolio .square-flip .square2 {
        opacity: 0;
        pointer-events: none;
    }
    .portfolio .square-flip:hover .square,
    .portfolio .square-flip:focus-within .square {
        opacity: 0;
        pointer-events: none;
    }
    .portfolio .square-flip:hover .square2,
    .portfolio .square-flip:focus-within .square2 {
        opacity: 1;
        pointer-events: auto;
    }
    .portfolio .square-flip .square-container2 { transform: translateY(-50%) !important; }
    .loader, .loader span { animation: none; }
    .bg-fixed, .comming { background-attachment: scroll !important; }
}