/*
Theme Name: VP-Ingredients
Theme URI: https://underscores.me/
Author: Cyberscope
Author URI: http://www.cyberscope.fr
Description: Un super thème optimisé par les meilleurs intés du monde.
Version: 4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starter-theme
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

VP-Ingredients is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/
html {scroll-behavior: smooth;}
body {overflow-x: hidden;}
main{position:relative;overflow-x:clip;}
section {scroll-margin-top: 150px;}
/* main * {will-change: transform, opacity, clip-path;} */
main>header{z-index:1000;}
picture,iframe,img,video{position:relative;display:block;max-width:100%;object-fit:cover}
[class^=text],.fl-rich-text{width:100%;display:flex;row-gap:min(37px,4vw);flex-direction:column}[class^=text]>*{margin-block:0rem}
.text-center{text-align:center;align-items:center}.text-left{text-align:left;align-items:flex-start}.text-right{text-align:right;align-items:flex-end}
:is([class^=text],.fl-rich-text)>*{margin-block:0rem}
:is([class^=text],.fl-rich-text)>p:not([class])+p:not([class]):not(:has([class^="btn-"])) {margin-top:calc(min(37px,4vw) * -.7)}
[class^=container]:not(:is([class*=leaflet])){width:100%;margin-inline:auto;}
.container{max-width:min(975px,85vw)}
.container-xl{max-width:min(1113px,85vw)}
.container-xxl{max-width:min(1346px,85vw)}
.container-xxxl{max-width:min(1410px,85vw)}
.container-max{max-width:min(1920px,95vw)}
[style*="--w"]{width: var(--w);}
.flex,[class^=flex],[class^=row]{display:flex;flex-wrap:wrap}
.y{flex-direction:column;row-gap:min(80px,7vw);flex-wrap:nowrap;}
[class*="-xcenter"]{justify-content:center}[class*="-ycenter"]{align-items:center}
[class*="-xbetween"]{justify-content:space-between;}
.row-reverse {flex-direction:row-reverse;}
:is(section,footer){position:relative}
section :is([class^="row"],[class^="flex"])>:is(.left,.right){flex:1 1 max(350px,40%)}
:is(figure,picture){margin:0;height:100%;display:block;overflow:hidden}
:is(figure,picture)>img{position:relative;width:100%;height:100%;transition:all .4s;object-fit:cover;max-width:inherit}
.cliping{top:0;left:50%;bottom:0;transform:translateX(-50%);width:100vw;clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}
.cliping::after{position:absolute;inset:0;content:"";opacity:.2;background-color:var(--cLBlack)}
.cliping img{position:fixed;inset:0;transition:none}.cliping+*{z-index:1}
/* section:has( .cliping):not(:is(.sc5)){color:var(--cLWhite);}
section:not(:is([class*=bg-],.sc1,.sc5))+section:not(:is([class*=bg-],.sc1,.sc5))>[class*=py-]:not(*~*) { padding-top: 0; } */
a.logo {
    position:relative;
    display:block;
    width:min(152px,22vw);
    & img {display:block;width:100%;}
    @media screen and (1200px < width  < 1880px) {
        & {width: min(120px,22vw);}
    }
}
.py-1{padding-block:var(--sp1)}
.py-2{padding-block:var(--sp2)}
.py-3{padding-block:var(--sp3)}
.py-4{padding-block:var(--sp4)}
.py-5{padding-block:var(--sp5)}
.py-6{padding-block:var(--sp6)}
.py-7{padding-block:var(--sp7)}
.py-8{padding-block:var(--sp8)}
.py-9{padding-block:var(--sp9)}
.py-10{padding-block:var(--sp10)}
.py-11{padding-block:var(--sp11)}
.py-12{padding-block:var(--sp12)}
.py-13{padding-block:var(--sp13)}
.py-14{padding-block:var(--sp14)}
.py-15{padding-block:var(--sp15)}
/* align-items:center; */
.pagination{position:relative;display:flex;column-gap:1rem;justify-content:center}
ul.rs{position:relative;display:flex;column-gap:1rem}
/* other code */
.bg-gLTopToWhite {background: var(--gLTopToWhite);}
.bg-gLBottomToWhite {background: var(--gLBottomToWhite);}
.bg-cLBeigeLight {background-color: var(--cLBeigeLight);}
.bg-cLMintBackground {background-color: var(--cLMintBackground);}
.bg-cLTealStrong {background-color: var(--cLTealStrong);}
.bg-cLTealStrong {color: var(--cLWhite);}
.ban-cLSoftYellow {background-color: var(--cLSoftYellow);}
.ban-cLPeachSoft {background-color: var(--cLPeachSoft);}
.ct-dc:not(section .ct-dc) {z-index: 1999;}

.bg-cLTealStrong :is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) {color:inherit}
@keyframes rotate-center {100% {transform: rotate(360deg);}}
@keyframes rotate-center-rev {100% {transform: rotate(-360deg);}}
.ct-dc {
    position: absolute !important;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}
/* opacity: 0;scale:.8; */
.ct-dc > img {position: absolute;object-fit: contain;transition: none;will-change: transform, opacity, filter; }
.ct-dc > img.leafs-branch {transform-origin: top right;transform: rotate(5deg);}
.ct-dc > .dc1 {
    width: min(309.165px,50vw);
    height: min(462.517px,60vw);
    top: calc(min(96px,4vw) * -1);
    right: calc(min(126px,14vw) * -1);
}
.ct-dc > .dc2 {
    right: -7px;
    display: block;
    width: min(85px,13vw);
    top: min(393px,83vw);
    height: min(533px,85vw);
    object-fit: contain;
}
ul.rs a {
    padding: 10px;
    border-radius: 50%;
    background-color: var(--cLTealStrong);
}
/* .word-child {line-height: 1.3;} */
.word-child {
    display: block;
    line-height: 1;
}
/* .animate-fade,
.animate-1,
.animate-scaleDown,
.animate-scaleUp,
.animate-2 {
    opacity: 0;
    visibility: hidden;
}
.animate-scaleUp {scale: .7;}
.animate-scaleDown {scale: 1.2;}
.animate-from-left {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-40%);
}
.animate-from-right {
    opacity: 0;
    visibility: hidden;
    transform: translateX(40%);
}
.animate-from-bottom {
    opacity: 0;
    visibility: hidden;
    transform: translatey(40%);
}
 .animation-leaf {
    scale: .3;
    opacity: 0;
    transition: none;
    visibility: hidden;
    will-change: opacity,transform;
}
section,
.animation-leaf-2 {
    opacity: 0;
    visibility: hidden;
}
.animate-clip,
:is(.sc-bandeau,.sc1) {& .cliping {clip-path:inset(0% 100% 0% 0% round 0rem);}} */
section {
    opacity: 0;
    visibility: hidden;
}
/* activity */
.grid-activity .listing-activity { 
    display: grid;
    gap: min(2rem,6vw) 2%;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.ct-activity {position: relative;}
.activity {
    position: relative;
    flex: 1 1 max(200px,30%);
}
.activity .inner {
    position: relative;
    width: 100%;
    display: flex;
    row-gap: min(1rem,4vw);
    flex-direction: column;
}
.activity picture {
    position: relative;
    border-radius: min(10px,3vw);
}
.activity [class^=text] {
    row-gap: 5px;
    padding-inline: 1rem;
}
.activity [class^=text] :is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) {
    color: inherit;
    text-transform: uppercase;
}
@media screen and (min-width:1200px) {
    section:has(+.sc21 .grid-activity) {padding-bottom: min(110px,10vw);}
    .sc21 .grid-activity {margin-top: calc(min(110px,10vw) * -1.8);}
   .grid-activity {
        display: grid;
        grid-gap: 0px;
        grid-template-columns: repeat(18, 1fr);
        grid-template-rows: repeat(18, 1fr);
    }

    .grid-activity > [class^="text"] { 
        justify-content: center;
        grid-area: 8 / 6 / 12 / 14; 
        @media screen and (width < 1660px) {
            & .karma {
                font-size: min(89px, 11vw);
            }
        }
    }
    .grid-activity .ct-activity {grid-area: 1 / 1 / 19 / 19; }
    .grid-activity :is(.ct-activity,.listing-activity,.arrows-activity) { 
        position: relative;
        display: grid;
        grid-gap: 0px;
        aspect-ratio: 1/0.85;
        grid-template-columns: repeat(40, 1fr);
        grid-template-rows: repeat(40, 1fr);
    }
    .grid-activity :is(.listing-activity,.arrows-activity) {grid-area: 1 / 1 / 41 / 41;}
    
    .grid-activity .listing-activity > .activity:nth-child(1) {
        position: relative;
        grid-area: 2 / 5 / 18 / 14;
    }
    .grid-activity .listing-activity > .activity:nth-child(2) {
        position: relative;
        grid-area: 20 / 1 / 36 / 10;
    }
    .grid-activity .listing-activity > .activity:nth-child(4) {
        position: relative;
        grid-area: 5 / 32 / 21 / 41; 
    }
    .grid-activity .listing-activity > .activity:nth-child(3) {
        position: relative;
        grid-area: 25 / 26 / 41 / 35; 
    }
    .activity {
        flex: 0 0 auto;
        width: min(280px,100%);
        @media screen and (width < 1660px) {
            & p {
                line-height: 1.4;
                font-size: min(14px,4vw);
            }
        }
    }
    .activity .inner {width: min(280px,100%);}
    .activity picture {
        width: 100%;
        aspect-ratio: 1/1;
        /* height: min(280px,50vw); */
    }
    .arrows-activity {pointer-events: none;}

    .grid-activity .arrows-activity {
        position: absolute;
        inset: 0;
    }
    .arrows-activity > picture {transform: rotate(203deg) rotateX(180deg);}
    .arrows-activity > picture > * {object-fit: contain;width: 100%;}
    .arrows-activity > picture:nth-child(1) { 
        scale: .9;
        grid-area: 1 / 13 / 13 / 33; 
    }
    .arrows-activity > picture:nth-child(1) > img {
        height: 98%;
        object-position: right center;
    }
    .arrows-activity > picture:nth-child(2) { 
        grid-area: 13 / 2 / 21 / 5;
        transform: rotate(37deg) rotateX(180deg); 
    }
    .arrows-activity > picture:nth-child(2) > img {
        height: 100%;
        width: 72%;
        object-position: top center;
    }
    .arrows-activity > picture:nth-child(3) { grid-area: 33 / 9 / 41 / 25; }
    .arrows-activity > picture:nth-child(3) > img {
        height: 96%;
        object-position: left center;
    }
    .arrows-activity > picture:nth-child(4) { 
        grid-area: 16 / 34 / 27 / 41; 
        transform: rotate(68deg) rotateX(180deg);
    }
    .arrows-activity > picture:nth-child(4) > img {
        width: 93%;
        height: 100%;
        object-position: left bottom;
    }
}
/* listing-recettes  */
.listing-recettes {
    position: relative;
    width: 100vw;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    margin-left: -7.5vw;
    color: var(--cLWhite);
    padding-inline: 7.5vw;
    scrollbar-width: none;
    scroll-behavior: smooth;
    font-size: min(16px,3.6vw);
    column-gap: max(1.5rem,2%);
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: transparent transparent;
}
.listing-recettes .recette {
    position: relative;
    width: 30%;
    flex: 0 0 auto;
    overflow: hidden;
    aspect-ratio: 1/1.1;
    width: min(330px,80vw);
    scroll-snap-align: center;
    font-size: min(13px,3.7vw);
    border-radius: min(10px,3vw);
}

.listing-recettes .recette picture {
    position: absolute;
    inset: 0;
}
.listing-recettes .recette picture::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(180deg, var(--cLBlackTransparent13) 0%, rgba(0, 0, 0, 0.50) 100%);
}
.listing-recettes .recette:hover picture > img {scale:1.03;}
.listing-recettes .recette > .text {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: min(1.5rem,3vw);
    justify-content: flex-end;
    row-gap: min(0.5rem,3vw);
}
.listing-recettes .recette :is(h1,h2,h3,h4,h5,h6,[class*="ttl-"]) {color: inherit;}
.listing-recettes .recette .text > p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.listing-recettes .recette .text .wp-cirlce {
    margin-bottom: auto;
    display: flex;
    column-gap: min(.5rem,3vw);
    justify-content: flex-end;
}
.listing-recettes .recette .text .wp-cirlce > span {
    position: relative;
    width: 65px;
    display: flex;
    border-radius: 50%;
    flex-direction: column;
    aspect-ratio: 1/1;
    align-items: center;
    padding: min(10px,3vw);
    justify-content: center;
    text-align: center;
    background-color: var(--cLTealStrong);
}
@media screen and (min-width:1200px) {
    .listing-recettes {
        width: 100%;
        flex-wrap: wrap;
        margin-inline: 0;
        padding-inline: 0;
        gap: min(63px,5vw) 5%;
        justify-content: center;
    }
    .listing-recettes .recette {width: 30%;}
}
/* cards-toggle */
.cards-toggle-plus {
    position: relative;
    display: grid;
    align-items: self-start;
    justify-content: center;
    gap: min(2.2rem,15vw) 2%;
    grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
    & .card {
        position: relative;
        display: grid;
        transition: all .3s;
        padding: min(23px,5vw);
        background-color: var(--th);
        border-radius: min(10px,4vw);
        padding-bottom: min(50px,6vw);
        grid-template-rows: 8em 0fr;
        &.is-open {grid-template-rows: 8em 1fr;}
        & .text {
            row-gap: 5px;
            &.body {
                position: relative;
                overflow: hidden;
                padding-top: min(0.7rem,3vw);
            }
        }
        & [style^="--icn"] {&::before {padding: min(1.825rem,7vw);}}
        & .toggle {
            position: absolute;
            z-index: 2;
            left: 50%;
            width: 34px;
            height: 34px;
            display: grid;
            bottom: -17px;
            cursor: pointer;
            border-radius: 50%;
            align-content: center;
            transform: translateX(-50%);
            border: 1px solid var(--th);
            background-color: var(--cLWhite);
            &::before, &::after {
                position: relative;
                scale: .6;
                width: 100%;
                content: '';
                height: 3px;
                transition: all .3s;
                pointer-events: none;
                background-color: var(--th);
            }
            &::before {
                rotate: -90deg;
                margin-bottom: -3px;
            }
            &:is(.card.is-open &)::before {rotate: 0deg;}
        }
    }
}
/* .cards-toggle .card.active {padding-bottom: min(95px,10vw);transition: padding .2s;} */
/* .cards-toggle .card 
.cards-toggle .card 
.cards-toggle .card 
.cards-toggle .card:not(.active) .toggle::before {
    rotate: 90deg;
} */
/* .cards-toggle .card .toggle::before,
.cards-toggle .card .toggle::after {
    position: absolute;
    content: '';
    width: 60%;
    height: 2px;
    transition: all .3s;
    background-color: var(--th);
} */
/* .cards-toggle .card .body {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: all .4s;
    
}
.cards-toggle  */
/* pagination */
ul.pagination-article {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: min(1rem,4vw);
}
/* loading-page */
.loading-page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cLForestGreenDark);
}
.loading-page.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.loading-page img {
    position: relative;
    display: block;
    width: min(150px,20vw);
    height: min(150px,20vw);
}
/* .loader-progress {
  height: 4px;
  background: var(--cLWhite);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 30px;
}

.progress-bar {
  height: 100%;
  width: 0;
  transition: width 0.3s ease;
  background: var(--cLTealStrong);
} */

@media (prefers-reduced-motion: reduce) {
  .loader-spinner {
    animation: none;
    border: 5px solid var(--cLWhite);
    border-top: 5px solid var(--cLTealStrong);
  }
  
  .page-loader {
    transition: none;
  }
}
body > main {
    opacity: 0;
    visibility: hidden;
}
/* .loading-page ~ main {
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
} */
/* header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1999;
    transition: all .2s;
    color: var(--cLWhite);
    font-size: var(--fs14);
    padding-block: min(17px,5vw);
    background-color: var(--cLForestGreenDark);
}
header .ct-logo {
    position: absolute;
    left: 50%;
    top: -28%;
    transform: translateX(-50%);
}
header .row {
    position: relative;
    column-gap: 4.5%;
    justify-content: space-between;
}
/* 
header .row .center {flex:1 1 max(152px,20%);} */
header .primary {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: min(20px,5vw);
}
header .primary li > * {font-weight: 500;text-transform: uppercase;}
/* header .sub-menu {display: none;} */
header :is(.primary,.menu) li:has( > .up-down) {
    position: relative;
    padding-right: 2rem;
}
/* header :is(.primary,.menu) a:hover {color: inherit;} */
header :is(.primary,.menu) li:is(.current-menu-parent,.current-menu-item) > a {position: relative;}
header :is(.primary,.menu) li:is(.current-menu-parent,.current-menu-item) > a::before {
    position: absolute;
    content: '';
    inset: 0 0 -3px;
    border-bottom: 2px solid var(--cLLightLime);
}
header :is(.primary,.menu) li > .up-down {
    position: absolute;
    right: 0;
    z-index: 2;
    top: .1rem;
    width: 1rem;
    display: flex;
    aspect-ratio: 1/1;
    /* height: var(--h); */
    align-items: center;
    transition: all .2s;
    justify-content: flex-end;
}
header :is(.primary, .menu) li>.up-down::before {
    position: absolute;
    inset: 0;
    content: '';
    display: block;
    pointer-events: none;
    background-color: currentcolor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(assets/images/angle-down.svg);
    mask-image: url(assets/images/angle-down.svg);
}
header .lg {
    position: relative;
    width: max-content;
    display: flex;
    flex: 0 0 auto;
    column-gap: 6px;
    align-items: center;
    @media screen and (1200px < width < 1880px) {
        & {
            position: absolute;
            left: 103%;
            top: 3%;
        }
    }
}
header .lg img {
    width: 25px;
    flex: 0 0 auto;
}
header .lg::after {
    position: relative;
    width: 14px;
    content: '';
    display: block;
    flex: 0 0 auto;
    aspect-ratio: 2/2;
    pointer-events: none;
    background-color: currentcolor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url(assets/images/angle-down.svg);
    mask-image: url(assets/images/angle-down.svg);
}
/* footer */
section:has(+footer):not(:is(.sc28)) {padding-bottom: min(5rem,20vw);}
section:has(+footer) > *:not(:is(.cliping,.ct-dc)) {
    position: relative;
    z-index: 3;
}
footer {
    position: relative;
    display: flex;
    text-align: center;
    color: var(--cLWhite);
    flex-direction: column;
    row-gap: min(50px,8vw);
    justify-content: flex-end;
    background-color: var(--cLForestGreenDark);
    padding-block: min(5rem,10vw) min(26px,5vw);
}
footer .container {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: min(50px,8vw);
}
footer .ct-logo {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: calc(min(10rem,24vw) * -1);
}
footer .ct-logo a.logo {
    filter: drop-shadow(-5px 5px 0 var(--cLWhite)) drop-shadow(5px 5px 0 var(--cLWhite))
            drop-shadow(-5px -5px 0 var(--cLWhite)) drop-shadow(5px -5px 0 var(--cLWhite));
}
footer [class^=row] {row-gap: min(2rem,6vw);}
footer [class^=row] > * {
    position: relative;
    flex: 1 1 200px;
}
footer [style^="--icn"],
footer ul.rs {justify-content: center;}
footer ul.partenaier {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    column-gap: min(41px,5vw);
}
footer .nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-top: min(15px,5vw);
    border-top: 1px solid var(--cLWhiteSemiTransparent);
}
footer .nav > li:not(:last-child)::after {
    position: relative;
    content: '-';
    margin-inline: 5px;
    display: inline-block;
}
@media (max-width:600px) {
}
@media (max-width:1199px) {
    .desk {display: none !important}
    header .row .center {
        position: relative;
        width: 100%;
    }
    header .row .center .flex {align-items: center;}
    header .ct-nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        visibility: hidden;
        pointer-events: none;
        width: min(500px, 100vw);
    }
    header.nav-is-open .ct-nav {
        visibility: visible;
        pointer-events: visible;
    }
    header .ct-nav nav {
        position: relative;
        left: 100%;
        height: 100%;
        transition: .2s;
        text-align: left;
        font-weight: 500;
        font-size: var(--fs16);
        padding: 6rem 5vw 1rem;
        color: var(--cLWhite);
        text-transform: uppercase;
        background-color: var(--cLForestGreenDark);
    }
    header .ct-nav nav ul.menu {
        position: relative;
        display: flex;
        row-gap: .9rem;
        flex-direction: column;
    }
    header .menu li:has( > ul) {
        display: grid;
        transition: all .3s;
        grid-template-rows: 1.5em 0fr;
    }
    header .menu li:has( > ul).open-sub-menu {grid-template-rows: 1.5em 1fr;}
    header .menu li > ul{
        position: relative;
        display: flex;
        row-gap: 1rem;
        overflow: hidden;
        flex-direction: column;
        transition: height .3s, all .3s;
    }
    header .menu li.open-sub-menu > ul {margin-top: 1rem;}
    /* header .menu li ul {
        position: relative;
        height: 0;
        display: flex;
        row-gap: 1rem;
        overflow: hidden;
        width: min(300px,70vw);
        flex-direction: column;
        transition: height .3s, all .3s;
    }
     */
    header :is(.primary,.menu) li.open-sub-menu > .up-down{ rotate: -180deg;}
    header.nav-is-open .ct-nav nav {
        transform: translateX(-100%);
    }
    header .open-nav {
        position: relative;
        z-index: 2;
        height: 28px;
        row-gap: 8px;
        display: flex;
        transition: .2s;
        cursor: pointer;
        margin-right: auto;
        width: max-content;
        align-items: center;
        color: var(--cLWhite);
        flex-direction: column;
        justify-content: center;
    }
    header.nav-is-open .open-nav {
        row-gap: 0;
        transform: rotate(45deg);
    }
    header .open-nav > span {
        width: 1.8rem;
        height: .15rem;
        line-height: 0;
        transition: .3s;
        border-radius: 1rem;
        pointer-events: none;
        background: currentColor;
        transform-origin: 55% center;
    }
    header.nav-is-open .open-nav > span:nth-child(2) {
        display: none;
    }
    header.nav-is-open .open-nav > span:first-child {
        transform: translate(-.1rem, .2rem) rotate(90deg);
    }
}
@media (max-width:1023px) {
    .desk-tab {display: none !important}
}
@media (min-width:1024px) {
    .mob-tab {display: none !important}
}
@media (min-width:1200px) {
    .mob {display: none !important}
    header .ct-logo {
        position: relative;
        left: 0%;
        top: 8%;
        transform: inherit;
    }
    header .row :is(.left,.right) {flex:1 1 min(200px,40%);}
    header .row .center {flex:0 0 auto;}
    header .row .center .flex {justify-content: center;}
    header .row .center .logo {
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
    }
    header .row .right {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        column-gap: min(20px, 5vw);
        flex-wrap: wrap;
    }
    header .row .right .nav {
        position: relative;
        display: flex;
        align-items: center;
        column-gap: min(30px,5vw);
    }
    header .primary li ul {
        position: absolute;
        left: 50%;
        z-index: 2;
        opacity: 0;
        row-gap: 10px;
        display: flex;
        padding: 1rem;
        overflow: initial;
        visibility: hidden;
        flex-direction: column;
        color: var(--cLWhite);
        transform: translateX(-50%);
        width: min(300px, 70vw);
        top: calc(100% + 1rem);
        background-color: var(--cLForestGreenDark);
    }
    header .primary li ul > li {margin-top: -2rem;transition: all .3s;opacity: 0;}
    header .primary li:hover > ul > li {margin-top: 0;opacity: 1;}
    header .primary li ul ul {
        top: 0;
        left: 100%;
        transform: initial;
    }
    header .primary li ul::before {
        position: absolute;
        content: '';
        inset: -1.3rem 0 0;
    }
    header .primary li {
        position: relative;
        text-align: left;
    }
    header .primary li:hover > ul {
        height: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: inherit;
    }
    header .primary :is(li,li.opne-sub-menu) ul {
        height: auto;
    }
    header .primary li:hover > ul > li:not(:first-child) {
        opacity: 1;
        margin-top: 0;
        visibility: visible;
    }
    /* footer */
    section:has(+footer) {
        padding-bottom: 0;
        margin-bottom: -10rem;
    }
    section:has(+footer):is(.sc28) {margin-bottom: -16rem;}
    footer .ct-logo {margin-top: 0;}
    footer {
        text-align: initial;
        min-height: 565px;
        background-color: transparent;
    }
    footer::before {
        position: absolute;
        inset: 0;
        content: '';
        display: block;
        transition: initial;
        pointer-events: none;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center bottom;
        mask-position: center bottom;
        background-color: var(--cLForestGreenDark);
        -webkit-mask-image: url(assets/images/vector-u.webp);
        mask-image: url(assets/images/vector-u.webp);
    }
    footer [class^=row] {
        position: relative;
        justify-content: space-between;
    }
    footer [style^="--icn"] { justify-content: initial;}
    footer ul.rs {justify-content: flex-end;}
}