.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.embedBlok {display: block; width: 100%;}

#in_message {
    position: absolute;
    left: -9999em;
    top: 0;
}

body                                            { display: block !important; }

/*------------------------RESET---------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {

	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}

article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }

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

.PKCKStitle { color:black; }
.PKCKS-content { color:black; }

.noslash li::after { display:none !important; }

.news-detail { max-width:750px; margin:0px auto; padding:10px; border:1px solid white; }

:root                                           {

                                                --font1:          'proxima-nova', sans-serif; /* 400, 700, 800 */



                                                --color0:       #1b2c44;

                                                --color0b:      #2c4e7d;

                                                --color1:       #bdccff;

                                                --color1b:      #e1e8ff;

                                                --color2:       #23dfc7;

                                                --color2b:      #03c5ab;

                                                --color3:       rgba(255,255,255,0.1);

                                                --color3b:      rgba(255,255,255,0.18);

                                                

                                                --wrapper:          6.5vw;

                                                --wrapper-wide:     1600px;

                                                --wrapper-max-width:76rem;



                                                --border-radius1:   1.5em;

                                                --gap1:             1em;

                                                --gap2:             1.6em;

                                                --gap3:             2.2em;



                                                --section-padding:  min(7rem, calc(2rem + 5vw));

                                                --swiper-button:    3em;                                                   

                                                }

  @media screen and (min-width: 1081px)         {

  :root                                         {--header: 7rem;} 

  }

  @media screen and (max-width: 1080px)         {

  :root                                         {--header: 5rem;} 

  }



button                                          {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;}



html, body, form                                {width: 100%;}

html                                            {background: var(--color0); overflow-X: hidden}

html:before                                     {display: block; width: 100vw; height: 100vw; background-image: radial-gradient(white, transparent 60%); position: fixed; left: 0; top: -5rem; content: ""; opacity: 0.15; transform: scaleY(0.5); transform-origin: center top;}

body                                            {margin: 0 auto; font-family: var(--font1); font-size: min(17px, calc(10px + 1vw)); color: white; font-weight: 400; line-height: 1.55; letter-spacing: 0.02em; position: relative; overflow-x: hidden;}

form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}

  @media screen and (max-width: 1080px)         {

  html:before                                   {width: calc(50rem + 50vw); margin-inline: calc(50% - 25rem - 25vw); transform: scaleY(1.8);}

  }



body.fixed                                      {overflow-y: hidden;}

body.fixed :is(.main, .footer)                  {opacity: 0.1; filter: blur(5px);}

.wrapper                                        {display: flex; width: calc(100vw - 2 * var(--wrapper)); max-width: var(--wrapper-max-width); flex-wrap: wrap; margin-inline: auto; position: relative;}

  @media screen and (min-width: 1081px)         {

  .wrapper.narrow                               {max-width: calc(0.6 * var(--wrapper-max-width));}

  .wrapper.medium                               {max-width: calc(0.8 * var(--wrapper-max-width));}

  .wrapper.medium2                              {max-width: calc(0.88 * var(--wrapper-max-width));}

  }

  @media screen and (max-width: 1080px)         {

  .wrapper                                      {--wrapper-max-width: 48rem;}

  }



body:has(.hero) .header                         {position: absolute;}

body:not(.hp) .header                           {margin-bottom: -1.5rem;}



.header                                         {display: block; width: 100%; height: var(--header); position: relative; z-index: 9990; --logo-width: 11rem;}



.header .wrapper                                {max-width: 90rem; height: 100%; justify-content: space-between; align-items: center;}

.header .logo                                   {display: block; width: var(--logo-width); position: relative; z-index: 10;}    

.header .logo img                               {display: block; width: 100%;}    

.header .collapse                               {display: flex; position: absolute; top: 0; box-sizing: border-box;}

.header nav                                     {display: flex;}

.header nav > ul                                {display: flex;}

.header nav > ul > li                           {display: flex; align-items: center; position: relative;}

.header nav > ul > li > a                       {display: flex; height: 2.2em; align-items: center; font-size: 0.95em; color: var(--color1); font-weight: 700; background: rgba(255,255,255,0.08); padding-inline: 1.25em; border-radius: 1.1em; border: solid 0.12em transparent; box-sizing: border-box; transition: .15s ease-in-out;}

.header nav > ul > li > a[href]:hover           {color: white; background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2);}

.header nav > ul > li > a[aria-current="page"]  {color: white !important; border-color: var(--color2);}

.header .elements                               {display: flex; align-items: center; gap: 1.5rem;}                         

  @media screen and (min-width: 1081px)         {

  .header #navicon                              {display: none;}

  .header .collapse                             {width: calc(100% - var(--logo-width)); height: 100%; justify-content: center; right: 0; padding-right: calc(1.5rem + var(--logo-width));}

  .header nav                                   {height: 100%;} 

  .header nav > ul                              {height: 100%; gap: 0.6em;}

  .header nav > ul > li                         {height: 100%;}

  .header .elements                             {height: 100%; position: absolute; top: 0; right: 0;}

  .header .lang                                 {display: block; height: var(--lang-size); --lang-size: 1.8em; overflow: hidden; position: relative; margin-inline: -0.5em; transition: .15s ease-in-out;}

  .header .lang ul                              {display: block; height: var(--lang-size); overflow: hidden; border-radius: 0.25em; border: solid 1px transparent; box-sizing: border-box;}

  .header .lang ul li                           {display: block; height: var(--lang-size); box-sizing: border-box; position: relative; order: 1; transition: .15s ease-in-out;}

  .header .lang ul li a                         {display: flex; width: 100%; height: 100%; align-items: center; font-size: 1em; font-weight: 700; color: white; padding-inline: 0.4em; box-sizing: border-box; transition: .15s ease-in-out;}

  .header .lang ul li a:hover                   {color: var(--color1); cursor: pointer;}

  .header .lang ul li.sel a                     {color: white;}

  .header .lang ul li:not(.sel) a:hover         {background: var(--color2); color: var(--color0);}

  .header .lang.hover                           {overflow: visible;}

  .header .lang.hover ul                        {height: auto; background: rgba(0,0,0,0.7); backdrop-filter: blur(3px);}

  .header .lang.hover ul li                     {opacity: 1;}         

  }

  @media screen and (max-width: 1080px)         {

  .header                                       {--header-height: 5em; --logo-width: 8.5em;}

  .header .collapse                             {width: 100%; height: calc(100vh - var(--header)); justify-content: space-between; padding: 3rem 13%; overflow-y: auto; position: fixed; left: -9999px; top: var(--header-height); box-sizing: border-box; opacity: 0; transform: scale(1.15); transition: opacity .5s ease-in-out, transform .5s ease-in-out;} 

  .header nav                                   {align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8rem 0; margin-bottom: 2rem;} 

  .header nav > ul                              {flex-wrap: wrap; gap: 0.8rem; align-items: flex-start; align-content: flex-start;}

  .header nav > ul > li                         {width: 100%; flex-wrap: wrap;}

  .header nav > ul > li > a                     {font-size: 1em;}

  .header .elements                             {flex-direction: column; justify-content: space-between; align-items: flex-end;}

  .header .lang                                 {display: block; order: -1;}

  .header .lang ul                              {display: flex; align-items: center; padding: 0 0.4rem;}

  .header .lang ul li                           {display: block; order: 1; transition: .15s ease-in-out;}

  .header .lang ul li a                         {display: flex; width: 2.4em; height: 2.4em; justify-content: center; align-items: center; font-size: 0.9em; font-weight: 500; color: white; opacity: 0.6; transition: .15s ease-in-out;}

  .header .lang ul li a:hover                   {opacity: 1; cursor: pointer;}

  .header .lang ul li.sel a                     {color: var(--color1); font-weight: 700; opacity: 1;}

  .header #navicon                              {display: flex; width: 1.55em; height: 14px; font-size: 1em; cursor: pointer; margin-right: calc(2.3rem + var(--wrapper)); position: relative; z-index: 10; transform: var(--skew);}

  .header #navicon:after                        {display: flex; height: 100%; align-items: center; font-size: 1.2em; color: white; font-weight: 700; position: absolute; left: 1.8em; top: 0; content: "MENU";}

  .header #navicon span                         {display: block; width: 100%; height: 0.16em; background: var(--color2); position: absolute; transition: .2s ease-in-out;}

  .header #navicon:hover span                   {background: var(--color1);}

  .header #navicon span:nth-child(1)            {top: 0;}

  .header #navicon span:nth-child(2),

  .header #navicon span:nth-child(3)            {top: calc(50% - 0.08em);}

  .header #navicon span:nth-child(4)            {bottom: 0;}

  .header #navicon div                          {display: none; width: 6em; height: 2em; position: absolute; left: 0; top: calc(50% - 1em); z-index: 2;}

  .header.show #navicon span:nth-child(2)       {transform: rotate(45deg);}

  .header.show #navicon span:nth-child(3)       {transform: rotate(-45deg);}

  .header.show #navicon span:nth-child(1), 

  .header.show #navicon span:nth-child(4)       {opacity: 0 !important;}

  .header.show #navicon div                     {display: block;}

  .header.show .collapse                        {left: 0; opacity: 1; transform: scale(1);}

  .header.show.hide .collapse                   {opacity: 0; transform: scale(1.15);}

  }



.footer                                         {display: block; width: 100%; padding-block: var(--section-padding);}

.footer .wrapper                                {justify-content: space-between; gap: 2em 0;}

.footer nav                                     {display: block;}

.footer nav a                                   {display: block; font-size: 1em; color: var(--color1); font-weight: 700; transition: .15s ease-in-out;}

.footer nav a:hover                             {color: white;}

.footer .elements                               {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2em 3em;}

.footer .logo                                   {display: block; width: 9em;}    

.footer .logo img                               {display: block; width: 100%;}    

.footer .links                                  {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em 1em;}

.footer .links li                               {display: block; font-size: 0.75em; font-weight: 700; color: var(--color1);}

.footer .links li a                             {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}

.footer .links li a:hover                       {color: var(--color1b); text-decoration-color: transparent;}

  @media screen and (min-width: 1081px)         {

  .footer nav                                   {column-count: 2; column-gap: 3em; margin-bottom: -0.5rem;}

  .footer nav a                                 {margin-bottom: 0.5rem;}

  .footer .elements                             {width: 34em; justify-content: flex-end;}

  .footer .links                                {width: 100%; justify-content: flex-end;}

  }

  @media screen and (max-width: 1080px)         {

  .footer                                       {padding-bottom: 1.5em;}

  .footer .elements                             {width: 100%; flex-direction: column; align-items: center;}

  .footer nav                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em 1em;}

  .footer .soc                                  {width: 100%; justify-content: center;}

  }



.soc                                            {display: flex; gap: 0.45em;}

.soc a                                          {display: flex; width: 1.8em; height: 1.8em; justify-content: center; align-items: center; background: rgba(255,255,255,0.08); border-radius: 100%; transition: .15s ease-in-out;}

.soc a img                                      {display: block; width: 50%; transition: .15s ease-in-out;}

.soc a:hover                                    {background: rgba(255,255,255,0.2);}

.soc a:hover img                                {filter: brightness(2);}



strong                                          {font-weight: 800;}

em                                              {font-style: italic;}



h1, h2, h3                                      {display: block; width: 100%; font-weight: 800; line-height: 1.1; box-sizing: border-box; position: relative;}

h1                                              {font-size: min(3.5rem, calc(1rem + 7vw));}

h2                                              {font-size: min(2.6rem, calc(0.5rem + 6vw)); margin-bottom: 1rem;}

h3                                              {font-size: min(1.5rem, calc(0.9rem + 7vw));}



.hp h2                                          {font-size: min(4rem, calc(0.5rem + 7vw)); margin-bottom: 1.3rem;}



.main                                           {display: flex; width: 100%; flex-direction: column; flex-grow: 1; flex-wrap: wrap; margin: 0 auto; box-sizing: border-box; position: relative; transition: .3s ease-in-out;}

.main :is(p, li)                                {font-size: 1em;}

.main p                                         {display: block; width: 100%; box-sizing: border-box;}

.main p.large                                   {font-size: min(1.6em, calc(0.9em + 1vw));}

.main p a, .main li a, .main td a               {text-decoration: underline; color: inherit; text-decoration-color: var(--color2); transition: .15s ease-in-out;}

.main p a:hover, .main li a:hover, .main td a:hover

                                                {color: var(--color2); text-decoration-color: transparent;}



h2 + .subheadline                               {display: block; width: 100%; text-align: center; font-size: min(1.8rem, calc(0.1rem + 6vw)); color: var(--color2); line-height: 1.2;}



.txt-color2                                     {color: var(--color2);}

.txt-white                                      {color: white;}



.padding-inline                                 {padding-inline: var(--gap1); box-sizing: border-box;}



.section                                        {display: block; width: 100%; position: relative; padding-block: var(--section-padding); overflow-y: visible;}

.section.padding-top-0                          {padding-top: 0;}

.section.padding-bottom-0                       {padding-bottom: 0;}

.section.gradient                               {background-image: linear-gradient(to bottom, var(--color2), transparent);}



.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em;}



.button                                         {display: flex; height: 2em; justify-content: center; align-items: center; gap: 0.4em; font-size: 1em; font-weight: 700; white-space: nowrap; padding: 0 1.4em; border: none; outline: none; border-radius: 1em; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .15s ease-in-out;}

.button img                                     {display: block; height: 0.8em; width: auto; position: relative; top: -0.04em; transition: .15s ease-in-out;}

.button.color0                                  {background: var(--color0); color: white;}

.button.color0:hover                            {background: var(--color0b);}

.button.color2                                  {background: var(--color2); color: var(--color0) !important;}

.button.color2:hover                            {background: var(--color2b);}

.button.border1                                 {color: white; border: solid 0.1em var(--color1);}

.button.border1:hover                           {border-color: var(--color2); background: rgba(255,255,255,0.08);}



.section:has(.page-head, .article)              {padding-top: min(5vw, calc(0.5 * var(--section-padding)));}

.page-head                                      {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--gap1) var(--gap2); margin-bottom: var(--gap3);}

  @media screen and (min-width: 769px)          {  

  .page-head h1                                 {width: auto;}

  }



.breadcrumbs                                    {display: block;}

.breadcrumbs ul                                 {display: flex; flex-wrap: wrap; gap: 1.8em; margin: 0; padding: 0 !important;}

.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; font-size: 0.9em; position: relative; padding: 0; margin: 0;}

.breadcrumbs ul li:before                       {display: none;}

.breadcrumbs ul li:not(:last-child):after       {display: inline-block; width: 0.09em; height: 1.6em; background: var(--color1); position: absolute; right: -1em; top: 0; content: ""; transform: skew(-9deg);}

.breadcrumbs ul li:last-child:after             {display: none;}

.breadcrumbs ul li a                            {display: block; color: var(--color1); text-decoration: underline; font-weight: 400; border: none; transition: .15s ease-in-out;}

.breadcrumbs ul li:last-child a                 {color: white; text-decoration: none; font-weight: 800;}

.breadcrumbs ul li a[href]:hover                {opacity: 0.7; text-decoration-color: transparent;}

  @media screen and (max-width: 768px)          {  

  .breadcrumbs                                  {overflow-x: auto; scrollbar-width: none;}

  .breadcrumbs::-webkit-scrollbar               {display: none;}

  .breadcrumbs ul                               {flex-wrap: nowrap;}

  .breadcrumbs ul li a                          {white-space: nowrap;}

  } 



.pagination                                     {display: flex; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 0.25em; margin-top: var(--gap3);}

.pagination a                                   {display: flex; width: 2.2em; height: 2.2em; justify-content: center; align-items: center; font-size: 0.9em; line-height: 1em; color: var(--color1); font-weight: 700; background: var(--color3); border-radius: 100%; box-sizing: border-box; transition: .2s ease-in-out;}

.pagination a:hover                             {background: var(--color3b);}

.pagination a.sel                               {color: var(--color0); background: var(--color2);}

  @media screen and (max-width: 1080px)         {

  .pagination a                                 {font-size: 0.9em;}

  }



.panning                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; background: url("images/panning.webp") no-repeat center top; background-size: auto min(100%, 50rem);}



.infographics                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; row-gap: var(--gap3);}

.infographics > div                             {display: flex; flex-direction: column; align-items: center; position: relative;}  

.infographics > div:before                      {display: block; width: 7em; height: 7em; background-image: linear-gradient(to bottom, var(--color3), transparent); border-radius: 100%; position: absolute; left: calc(50% - 3.5em); top: 0; content: "";}

.infographics > div img                         {display: block; width: 3em; margin-block: 2em 1.4em;}

.infographics > div span                        {display: block; width: 100%; text-align: center; font-size: 0.9em;}

  @media screen and (min-width: 769px)          {

  .infographics                                 {column-gap: 8%;}

  .infographics > div                           {width: 28%;}

  }

  @media screen and (max-width: 768px)          {

  .infographics                                 {column-gap: 10%;}

  .infographics > div                           {width: 45%;}

  }



.cta1                                           {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: var(--gap2) 0; background: var(--color1); padding: min(2.5rem, calc(1rem + 4vw)); border-radius: var(--border-radius1); box-sizing: border-box; position: relative;}

.cta1 .text                                     {display: flex; flex-direction: column; gap: var(--gap1);}

.cta1 .text :is(h2, p)                          {color: var(--color0);}

.cta1 .text h2                                  {text-align: left; font-size: min(2.8rem, calc(0.4rem + 7vw)); margin-bottom: -0.15em;}

.cta1 > img                                     {display: block;}

  @media screen and (min-width: 1081px)         {

  .cta1                                         {justify-content: space-around; padding-block: 0;}

  .cta1 .text                                   {width: 45%; align-items: flex-start; padding-block: min(2.5rem, calc(1rem + 4vw));}

  .cta1 > img                                   {width: 42%; transform: scale(1.15);}

  }

  @media screen and (max-width: 1080px)         {

  .cta1                                         {justify-content: center; padding-top: 0; margin-top: 3em;}

  .cta1 .text                                   {max-width: 26em; align-items: center;}

  .cta1 .text :is(h2, p)                        {text-align: center;}

  .cta1 > img                                   {width: 85%; max-width: 26em; margin-top: -3em; order: -1;}

  }



.anim                                           {transition-delay: 2s; opacity: 0; transform: scale(0.9,0.9); transition: .6s ease-in-out;}

.anim.play                                      {opacity: 1; transform: scale(1,1);}



.section:has(.hero)                             {background: url("images/hero-bike.webp") no-repeat center top; background-size: min(90rem, 90vw); position: relative;}  

.electricity                                    {display: flex; position: absolute; inset: 0; overflow: hidden; opacity: 0.25;}

.electricity span                               {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}

.electricity span img                           {display: block; width: 100%; height: 100%; position: absolute; inset: 0; opacity: 1 /* 0 */;  animation: electricity 0.3s linear infinite;}

.electricity span img:nth-child(2)              {animation-delay: 0.1s;}

.electricity span img:nth-child(3)              {animation-delay: 0.2s;}

.hero                                           {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap2) 0;}

.hero .side                                     {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap2) var(--gap1);}

.hero .image                                    {display: block;}

.hero .image .inner                             {display: block; width: 100%; padding-top: 100%; position: relative;}

.hero .image .inner > div                       {display: block; position: absolute; inset: 0;}

.hero .image .inner > div img                   {display: block; width: 100%; height: 100%; object-fit: contain;}

.hero h1                                        {margin-top: -0.2em;}

  @media screen and (min-width: 1081px)         {

  .hero                                         {justify-content: space-between; padding-block: 1rem 3rem;}

  .hero .side                                   {width: 28%; flex-direction: column; container-type: inline-size;}

  .hero .side.s1                                {align-items: flex-end;}

  .hero .side.s2                                {align-items: flex-start;}

  .hero .side.s2 .button:nth-of-type(1)         {display: none;}

  .hero .image                                  {width: 40%;}

  .hero h1                                      {text-align: right; font-size: 10.5cqw;}

  .hero P                                       {font-size: 4.7cqw;}

  }

  @media screen and (max-width: 1080px)         {

  .section:has(.hero)                           {background-size: min(80rem, 190vw) auto;}

  .electricity                                  {height: min(40rem, 90vw); justify-content: center; left: 0; top: 0;}

  .electricity span                             {width: 100rem; margin-inline: calc(50% - 50rem); position: relative; inset: auto;}

  .hero                                         {padding-bottom: 8rem;}

  .hero .image                                  {width: 90%; max-width: 34rem; order: -1; margin-bottom: -6%;}

  .hero :is(h1, p)                              {text-align: center;}

  .hero h1                                      {font-size: min(2.5rem, calc(1rem + 3vw));}

  .hero .side.s1 .button                        {display: none;}

  }



/*

@keyframes electricity                          {

                                                0%    {opacity: 0;}

                                                10%   {opacity: 1;}

                                                30%   {opacity: 1;}

                                                40%   {opacity: 0;} 

}

*/



.swiper                                         {width: 100%;}

.swiper-slide                                   {display: flex; height: auto; position: relative; overflow: hidden; flex-shrink: 0;}



.swiper-button                                  {display: flex; width: var(--swiper-button); height: var(--swiper-button); justify-content: center; align-items: center; background: var(--color2); font-size: 1em; border-radius: 100%; position: absolute; top: calc(50% - var(--swiper-button) / 2); z-index: 100; margin: 0; cursor: pointer; transition: .15s ease-in-out;}                                

.swiper-button-prev                             {transform: rotate(180deg);}

.swiper-button img                              {display: block; width: 40%; height: auto;}

.swiper-button:after                            {display: none;}

.swiper-button-disabled                         {opacity: 0 !important;}

.swiper-button:hover                            {background: var(--color2b);}



.swiper-pagination                              {display: flex; flex-wrap: wrap; gap: 0.3em;}

.swiper-pagination-bullet                       {display: block; width: 0.6em; height: 0.6em; background: white; margin: 0 !important;}

.swiper-pagination-bullet-active                {background: var(--color2);}



.carousel                                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1); position: relative; padding-inline: calc(0.5 * var(--swiper-button)); box-sizing: border-box;}

.carousel .inner                                {display: block; width: 100%; box-sizing: border-box; overflow: hidden;}

.carousel .swiper-slide > *                     {width: 100%;}

.carousel .swiper-button-prev                   {left: 0;}

.carousel .swiper-button-next                   {right: 0;}

  @media screen and (max-width: 1080px)         {

  .carousel .swiper-button-prev                 {left: 0.5em;}

  .carousel .swiper-button-next                 {right: 0.5em;}

  }



.gallery-slider .inner                          {border-radius: var(--border-radius1); padding: 1em; background: var(--color3); backdrop-filter: blur(3px); filter: drop-shadow(0 0 1em rgba(0,0,0,0.8));}

.gallery-slider .swiper                         {border-radius: calc(0.5 * var(--border-radius1));}

.gallery-slider .swiper-slide a                 {display: block; width: 100%; padding-top: 75%; position: relative; transition: .15s ease-in-out;}

.gallery-slider .swiper-slide a span            {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}

.gallery-slider .swiper-slide a span img        {display: block; width: 100%; height: 100%; object-fit: cover;}

.gallery-slider .swiper-slide a:hover           {filter: brightness(1.15);}



.hp-gallery                                     {background-image: linear-gradient(to top, white, transparent); overflow: visible;}

.hp-gallery .carousel                           {margin-top: -6rem;}



.section:has(.hp-why)                           {background: white;}

.hp-why                                         {display: block; width: 100%; position: relative; z-index: 1;}

.hp-why .text                                   {display: block; width: 100%; box-sizing: border-box; position: relative;}

.hp-why .text h2                                {color: var(--color0);}

.hp-why .text .items                            {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2); counter-reset: item;}

.hp-why .text .items > div                      {display: flex; width: 100%; flex-wrap: wrap; gap: 0.4em; box-sizing: border-box; position: relative; counter-increment: item;}

.hp-why .text .items > div h3                   {font-size: 1.3em; color: var(--color0); margin: 0}

.hp-why .text .items > div p                    {color: var(--color0)}

.hp-why .text .items > div .button              {margin-top: 0.6em;}

.hp-why .text .items > div:before               {display: block; font-size: 2.5em; color: var(--color2); font-weight: 800; position: absolute; content: counter(item, decimal-leading-zero);}

  @media screen and (min-width: 1081px)         {

  .hp-why .why-img                              {display: block; width: 38em; height: 38em; background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; z-index: -1;}

  .hp-why .why-img.i1                           {left: -17em; top: -12em; background-image: url("images/product/img2.webp");}

  .hp-why .why-img.i2                           {right: -17em; bottom: -19em; background-image: url("images/product/img3.webp");}

  .hp-why .text                                 {padding-inline: 10%;}

  .hp-why .text h2,

  .hp-why .text .items > div                    {width: 70%;}

  .hp-why .text .items > div                    {padding-left: 4em;}

  .hp-why .text .items > div:before             {left: 0; top: -0.36em;}

  .hp-why .text h2,

  .hp-why .text .items > div:nth-of-type(-n+2)  {margin-left: 30%;}

  }

  @media screen and (max-width: 1080px)         {

  .hp-why .text :is(h2, h3, p)                  {text-align: center;}

  .hp-why .text .items > div                    {justify-content: center; padding-top: 3.3em;}

  .hp-why .text .items > div:before             {width: 3em; text-align: center; left: calc(50% - 1.5em); top: 0;}

  }



.hp-blog                                        {display: flex; width: 100%; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--gap2) 0; position: relative; z-index: 2;}

.hp-blog .text                                  {display: flex; flex-direction: column; gap: var(--gap1);}

.hp-blog .text h2                               {text-align: center; margin: 0;}

  @media screen and (min-width: 1081px)         {

  .section:has(.hp-blog)                        {padding-top: 0;}

  .section:has(.hp-blog):after                  {display: block; width: 100%; height: 3em; background: white; position: absolute; left: 0; top: 0; content: "";}

  .hp-blog .text                                {width: 15em; align-items: flex-end; margin-bottom: var(--gap1);}

  .hp-blog .text h2                             {text-align: right;}

  .hp-blog .text .swiper-pagination             {width: auto; position: relative; inset: auto; margin: 0.3em 0.3em 0.6em 0;}

  .hp-blog .text .button                        {font-size: 0.85em;}

  .hp-blog .carousel                            {width: calc(100% - 19em);}

  }

  @media screen and (min-width: 1081px) and (max-width: 1800px){

  .hp-blog .carousel                            {width: calc(100% - 19em + 50VW - 50%); margin-right: calc(50% - 50vw); padding-right: 0;}

  .hp-blog .carousel .inner                     {padding-right: 16%;}

  .hp-blog .carousel .swiper                    {overflow: visible;}

  .hp-blog .carousel .swiper-button-next        {right: calc(16% - 12px - 0.5 * var(--swiper-button));}

  }  

  @media screen and (max-width: 1080px)         {

  .section:has(.hp-blog)                        {overflow: hidden;}

  .hp-blog                                      {padding-bottom: 6em;}

  .hp-blog .text                                {width: 100%; align-items: center;}

  .hp-blog .text .swiper-pagination             {width: 100%; justify-content: center; font-size: 1.14em; position: absolute; left: 0; bottom: 3.3em;}

  .hp-blog .text .button                        {width: 10em; position: absolute; left: calc(50% - 5em); bottom: 0;}

  .hp-blog .carousel .inner                     {overflow: visible;}

  .hp-blog .swiper                              {overflow: visible;}

  .hp-blog .swiper-slide                        {opacity: 0.25; transition: opacity .25s ease-in-out;}

  .hp-blog .swiper-slide-active                 {opacity: 1;}

  }

  @media screen and (min-width: 641px) and (max-width: 1080px){

  .hp-blog .swiper-slide-next                   {opacity: 1;}

  }



.article-preview                                {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 1.2rem; background: rgba(255,255,255,0.07); padding: 1.15em 1.15em 1.4em; box-sizing: border-box; border: solid 0.1em rgba(0,0,0,0.1); border-radius: var(--border-radius1); position: relative; transition: .15s ease-in-out;}

.article-preview .img                           {display: flex; width: 100%; aspect-ratio: 4/3; justify-content: center; align-items: center; overflow: hidden; border-radius: calc(0.6 * var(--border-radius1)); position: relative; transition: .15s ease-in-out;}

.article-preview .img img                       {display: block; width: 120%; height: 120%; object-fit: cover; transform: var(--skew-rev);}

.article-preview > div                          {display: flex; width: 100%; flex-direction: column; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8rem; padding-inline: 0.5em; box-sizing: border-box;}

.article-preview > div > *                      {display: block; width: 100%; text-align: left; color: var(--color1);transition: .15s ease-in-out;}

.article-preview .title                         {font-size: min(1.4rem, calc(0.6rem + 2vw)); font-weight: 700; line-height: 1.2;}

.article-preview .date                          {font-size: min(0.8rem, calc(0.3rem + 2vw)); font-weight: 400; line-height: 1;}

.article-preview:hover                          {background: var(--color3); border-color: var(--color1);}

.article-preview:hover .img                     {filter: brightness(1.1);}

.article-preview:hover .title                   {color: var(--color2);}

.article-preview > a                            {display: block; position: absolute; inset: 0; z-index: 5;}                   



.blog                                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.9rem;}

  @media screen and (min-width: 1081px)         {

  .blog .article-preview                        {width: calc(33.33% - 0.6rem);}

  }

  @media screen and (min-width: 641px) and (max-width: 1080px){

  .blog .article-preview                        {width: calc(50% - 0.45rem);}

  }



.faq                                            {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 0.4em;}

.faq > div                                      {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 0.4em; padding: 1.5em 2em 1.4em; background: rgba(266,255,255,0.1); backdrop-filter: blur(3px); border-radius: 0.6em; border: solid 0.1em transparent; box-sizing: border-box;}

.faq :is(dt, dd)                                {display: block; width: 100%; text-align: left; box-sizing: border-box;}

.faq dt                                         {font-size: 1.2em; font-weight: 700; line-height: 1.4; padding-right: 1.5em; cursor: pointer; position: relative; transition: .15s ease-in-out;}                                             

.faq dt:after                                   {display: flex; width: 1em; height: 1em; justify-content: center; align-items: center; color: white; font-size: 0.9em; font-weight: 500; border: solid 0.12em white; box-sizing: border-box; border-radius: 100%; position: absolute; right: 0; top: 0.2em; content: "+"; transition: .15s ease-in-out;}

.faq dt:hover                                   {color: var(--color2);}

.faq dd                                         {display: none; width: 100%; padding-block: 0.2em;}

.faq dd p                                       {font-size: 0.9em;}

.faq dd p:not(:first-child)                     {margin-top: 0.65em;}

.faq > div.sel                                  {border-color: var(--color1);}

.faq > div.sel dt:after                         {background: var(--color2); border-color: var(--color2); color: var(--color0); padding-bottom: 0.2em; content: "-";}

  @media screen and (max-width: 640px)          {

  .faq > div                                    {padding: 1.2em 1.6em 1.1em;}

  .faq dt:after                                 {top: 0.3em;}

  }



.story                                          {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2);}

.story > div                                    {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem; padding-left: 2.8em; position: relative; box-sizing: border-box; overflow: hidden;}

.story > div h2                                 {width: 2.8em; text-align: right; font-size: 1.6em; color: var(--color2); margin: 0; position: absolute; left: -3em; top: 0.25em; transform: rotate(-90deg); transform-origin: right top;}

.story > div h2:before                          {display: block; width: 10000px; height: 0.03em; background: var(--color1); position: absolute; right: 100%; top: 50%; content: "";}



.section:has(.team)                             {overflow: hidden;}

.section:has(.team):before                      {display: block; width: 120rem; height: 120rem; position: absolute; left: calc(50% - 60rem); top: -60rem; background-image: radial-gradient(rgba(0,0,0,0.2), transparent 50%); content: "";}

.section:has(.team, .logos) h2                  {text-align: center; color: var(--color2); margin-top: 0;} 

.section:has(.team, .logos) .wrapper > p        {max-width: 40rem; text-align: center; margin: 0 auto var(--gap2);} 



.team                                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.75rem;}

.team > div                                     {display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.5em; background: var(--color3); border-radius: 1em; padding: 2em; box-sizing: border-box; box-shadow: 0 0 0.5em rgba(0,0,0,0.5);}

.team > div .img                                {display: block; width: 6em; height: 6em; border-radius: 100%; overflow: hidden; /*background: url("images/icon-avatar-color1.svg") no-repeat center center, var(--color3);*/ background-size: 55% auto;}

.team > div .img img                            {display: block; width: 100%; height: 100%; object-fit: cover;}

.team > div span                                {display: block; width: 100%; text-align: center;}

.team > div .name                               {font-size: 1.35em; font-weight: 800; line-height: 1.2; margin-block: 0.7rem -0.65rem;}

.team > div .post                               {color: var(--color2); font-weight: 700;}

.team > div .info                               {display: block; width: 100%;}

.team > div .info span                          {font-size: 0.75em; color: var(--color1);}

.team > div .info span:not(:first-child):before {display: block; width: 3em; height: 0.1em; background: var(--color1); margin: 0.6em auto; content: "";}

  @media screen and (min-width: 1081px)         {

  .team > div                                   {width: calc(33.33% - 0.5rem);}

  }

  @media screen and (min-width: 641px) and (max-width: 1080px){

  .team > div                                   {width: calc(50% - 0.375rem);}

  }



.logos                                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.4em;}        

.logos a                                        {display: block; width: calc(50% - 0.2em); max-width: 12em; aspect-ratio: 1.7; background: white; border-radius: 1em; box-shadow: 0 0 0.3m rgba(0,0,0,0.3);}

.logos a span                                   {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; padding: 12% 15%; box-sizing: border-box;}

.logos a span img                               {display: block; height: 100%; width: auto;}

  @media screen and (min-width: 1081px)         {

  .logos a                                      {width: calc(20% - 0.32em);}

  }

  @media screen and (min-width: 641px) and (max-width: 1080px){

  .logos a                                      {width: calc(25% - 0.3em);}

  }



.grants                                         {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 2em; background: var(--color3); padding: min(3em, calc(1em + 5vw)); border-radius: var(--border-radius1); box-sizing: border-box; box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.5);}

.grants h2                                      {text-align: center; font-size: 2.2em; color: var(--color2); margin: 0;}

.grants > div                                   {display: flex; width: 16em; flex-direction: column; align-items: center; gap: 1em;}

.grants > div .img                              {display: block; width: auto; height: 4.6em;}

.grants > div .img img                          {display: block; width: auto; height: 100%;}

.grants > div span                              {display: block; text-align: center; font-size: 0.75em; color: var(--color1);}

.grants > div span a                            {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}

.grants > div span a:hover                      {color: white; text-decoration-color: transparent;}



.article                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap1); margin-top: 1rem;}

.page-head + .article                           {margin-top: 0;}



.article-styles                                 {gap: 1rem;}

.article-styles *                               {text-align: left;}

.article-styles h1                              {font-size: min(2.8rem, calc(1rem + 5vw));}

.article-styles .date                           {display: flex; width: 100%; align-items: center; gap: 0.45em; font-size: 0.95em; font-weight: 400; line-height: 1;}

.article-styles .date svg                       {display: block; width: 0.95em; height: 0.95em; fill: var(--color2); position: relative; top: -0.02em;}

.article-styles :is(h2, h3)                     {margin-block: 0.75em 0;}

.article-styles h2                              {font-size: 2em;}

.article-styles h3                              {font-size: 1.45em; color: var(--color2);}

.article-styles .large                          {font-size: 1.2em;}

.article-styles .image                          {display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; box-sizing: border-box; margin-block: 0.8rem; border-radius: 1rem; overflow: hidden; box-shadow: 0 0 1em rgba(0,0,0,0.3); transition: .15s ease-in-out;} 

.article-styles .image img                      {display: block; width: 100%; height: 100%; object-fit: cover;}

.article-styles .image:hover                    {filter: brightness(1.15);}

.article-styles ul, ol                          {display: flex; flex-wrap: wrap; gap: 0.2em; padding: 0 0 0 1em; margin: -0.15em 0 0;}

.article-styles ul li, ol li                    {width: 100%; padding-left: 1.3em; position: relative; box-sizing: border-box;}

.article-styles li:before                       {display: block; position: absolute; content: "";}

.article-styles ul li:before                    {width: 0.5em; height: 0.16em; background: var(--color2); left: 0.1em; top: 0.77em; transform: var(--skew);}

.article-styles ol                              {list-style-type: none; counter-reset: li;}

.article-styles ol li                           {counter-increment: li;}

.article-styles ol li:before                    {color: var(--color2); font-weight: 700; left: -0.05em; top: 0; content: counter(li)".";}

.article-styles .highlight                      {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem;; padding: 1.8em 1.8em 1.6em; background: var(--color3); border-radius: 1rem; margin-block: 0.5rem; box-shadow: 0 0 0.6em rgba(0,0,0,0.4); box-sizing: border-box;}

.article-styles .highlight > *:first-child      {margin-top: 0 !important;}

.article-styles .highlight2                     {display: flex; width: 100%; flex-wrap: wrap; gap: 0.8rem; padding-left: 3em; box-sizing: border-box; position: relative; margin-block: 0.5rem;}

.article-styles .highlight2:before              {display: block; width: 0.15em; height: calc(100% - 0.2em); background: var(--color2); position: absolute; left: 1.45em; top: .15em; content: "";}

.article-styles .highlight2 > *:first-child     {margin-top: 0 !important;}

.article-styles .highlight2 .button             {transform: var(--skew);}

.article-styles .iframe-map                     {display: block; width: 100%; height: 20rem; border-radius: 0.5em; overflow: hidden;}

.article-styles .embed iframe                   {display: block; width: 100%; height: 100%;}

.article-styles .embed                          {display: block; width: 100%; background: white; border-radius: 0.5em; overflow: hidden;}

.article-styles .embed iframe                   {display: block; width: 100%;}

.article-styles .gallery-slider                 {width: calc(100% + var(--swiper-button)); margin: 0.4rem calc(-0.5 * var(--swiper-button));}

.article-styles .contact-form                   {margin: 0.8rem 0;}

.article-styles .contact-form > *:first-child   {margin-top: 0;}

  @media screen and (min-width: 725px)          {

  .article-styles .contact-form                 {width: 110%; margin-inline: -5%; padding: 8%;}

  }



.cta2 > div                                     {display: flex; width: 100%; flex-wrap: wrap; gap: 0.3em;}

.cta2 > div h3                                  {font-size: 1.25em; margin: 0;}

.cta2 > div p                                   {font-size: 0.85em;}



.info-block1                                    {display: flex; width: 100; flex-wrap: wrap; gap: 0.5rem; background: var(--color1); padding: 1.8rem 2.8rem; border-radius: 1.2em; box-sizing: border-box; position: relative; box-shadow: 0 0 0.5em rgba(0,0,0,0.5);}

.info-block1 *                                  {color: var(--color0);}

.info-block1 h2                                 {font-size: 1.45em; margin: 0;}

.info-block1 p:nth-of-type(2)                   {font-size: 0.9em;}

.info-block1 .img                               {display: block; background-repeat: no-repeat; background-size: contain;}

  @media screen and (min-width: 769px)          {

  .info-block1                                  {width: calc(100% + 5.6rem); padding-right: 23rem; margin: 1.4rem -2.8rem;}

  .info-block1 .img                             {width: 23rem; height: 110%; background-image: url("images/img-money.webp"); background-position: right center; position: absolute; right: -3%; top: -5%;}

  }

  @media screen and (max-width: 768px)          {

  .info-block1                                  {margin-block: 3rem 0.8rem;}

  .info-block1 *                                {text-align: center;}

  .info-block1 .img                             {width: 130%; height: 10rem; margin: -4rem -15% 1rem; order: -1; background-image: url("images/img-money-mobile.webp"); background-position: center center;}

  }



.about-page                                     {display: flex; width: 100%; flex-wrap: wrap; gap: calc(2 * var(--gap3));}

.about-page .panning                            {gap: calc(2 * var(--gap3));}

.about-page > h2,

.about-page .panning > h2                       {text-align: center; margin-bottom: -0.65em;}

.about-page > h2 + p,

.about-page .panning > h2 + p                   {max-width: 38rem; text-align: center; margin: -1.6em auto 0;}



.about-hero                                     {display: flex; width: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; gap: var(--gap2); background: var(--color3); border-radius: var(--border-radius1); box-sizing: border-box; box-shadow: 0 0 0.8em rgba(0,0,0,0.5); position: relative;}

.about-hero > *                                 {display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap2);}

.about-hero .note                               {display: flex; align-items: center; gap: 0.8em; color: var(--color2); font-weight: 700; line-height: 1.4; background: var(--color3); box-sizing: border-box;}

.about-hero .note img                           {display: block; width: 2.4em; position: relative; top: -0.08em;}

.about-hero .img                                {position: relative;}

.about-hero .img > img                          {display: block; width: 100%;}

.about-hero .img .note2                         {display: flex; width: 14em; height: 4em; align-items: center; gap: 0.5em; font-size: min(0.9em, calc(0.2em + 2vw)); color: var(--color0); font-weight: 700; line-height: 1.2; background: var(--color2); padding: 0 1.2em; border-radius: 2em; position: absolute; right: 5%; bottom: 20%;}

.about-hero .img .note2 img                     {display: block; width: 2.2em; position: relative; top: -0.08em;}

  @media screen and (min-width: 1081px)         {

  .about-hero                                   {width: calc(100% + 6rem); justify-content: space-between; margin-inline: -3rem; padding: 3rem;}

  .about-hero > div                             {width: 52%;}

  .about-hero > div p:first-child               {margin-bottom: 5.5rem;}

  .about-hero .note                             {width: 52%; padding: 1.5rem 3rem; border-radius: 0 1em 0 var(--border-radius1); position: absolute; bottom: 0; left: 0;}

  .about-hero .img                              {width: 40%; margin-block: -5rem;}

  .about-hero .img img                          {transform: scale(1.3);}

  }

  @media screen and (max-width: 1080px)         {

  .about-hero                                   {padding: 0 10% 10%;}

  .about-hero > div                             {width: 100%; justify-content: center;}

  .about-hero .note                             {padding: 1.2em; border-radius: 1em;}

  .about-hero .img                              {order: -1; max-width: 30rem; margin-block: -3rem 1rem;}

  .about-hero .img img                          {transform: scale(1.3);}

  }



.txt-large                                      {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0;}

.txt-large p:nth-child(2)                       {font-size: 1.8em; color: var(--color2); line-height: 1.2; position: relative; top: -0.09em;}             

  @media screen and (min-width: 769px)          {

  .txt-large p:nth-child(1)                     {width: 54%;}

  .txt-large p:nth-child(2)                     {width: 38%;}

  }



.full-images                                    {display: flex; width: 100%; flex-wrap: wrap;}  

.full-images a                                  {display: block; width: 33.33%;}

.full-images a span                             {display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; transition: .15s ease-in-out;}

.full-images a span img                         {display: block; width: 100%; height: 100%; object-fit: cover;}

.full-images a span:hover                       {filter: brightness(1.15);}

  @media screen and (min-width: 1801px)         {

  .full-images                                  {width: calc(100% + 6rem); margin: 0 -3rem; background: var(--color3); padding: 1em; box-sizing: border-box; border-radius: var(--border-radius1); box-shadow: 0 0 0.5em rgba(0,0,0.0.5);}

  .full-images a:first-child span               {border-radius: 0.6em 0 0 0.6em;}

  .full-images a:last-child span                {border-radius: 0 0.6em 0.6em 0;}

  }

  @media screen and (min-width: 681px) and (max-width: 1800px){

  .full-images                                  {width: 100vw; margin: 0 calc(50% - 50VW);}

  }

  @media screen and (max-width: 680px)          {

  .full-images a:nth-child(1)                   {width: 100%;}

  .full-images a:nth-child(n+2)                 {width: 50%;}

  }

  @media screen and (min-width: 441px) and (max-width: 680px){

  .full-images                                  {background: var(--color3); padding: 1em; box-sizing: border-box; border-radius: var(--border-radius1); box-shadow: 0 0 0.5em rgba(0,0,0.0.5);}

  .full-images a:nth-child(1) span              {border-radius: 0.6em 0.6em 0 0;}

  .full-images a:nth-child(2) span              {border-radius: 0 0 0.6em 0;}

  .full-images a:nth-child(3) span              {border-radius: 0 0 0 0.6em;}

  }

  @media screen and (max-width: 440px)          { 

  .full-images                                  {width: 100vw; margin: 0 calc(50% - 50VW);}

  }



.why                                            {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-top: calc(0px - var(--gap3));}

.why > div                                      {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 0.4em; background: var(--color3); padding: 2em 1.5em; border-radius: 1em; box-sizing: border-box;}

.why > div span                                 {text-align: center; font-size: 0.8em;}

.why > div .num                                 {font-size: 3em; color: var(--color2); font-weight: 700; margin-bottom: -0.1em;}

.why > div .title                               {font-size: 1.3em; font-weight: 700; line-height: 1.2; margin-bottom: 0.2em;}

  @media screen and (min-width: 1081px)         {

  .why > div                                    {width: calc(25% - 0.45rem);}

  }

  @media screen and (min-width: 441px) and (max-width: 1080px){

  .why > div                                    {width: calc(50% - 0.3rem);}

  }  



.how                                            {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-top: calc(0px - var(--gap2));}

.how > div                                      {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 0.5em; background: var(--color3); padding: 2em 1.5em; border-radius: 1em; box-sizing: border-box;}

.how > div img                                  {display: block; width: 100%; max-width: 9rem; margin-block: -1em;}

.how > div span                                 {text-align: center; font-size: 0.8em;}

.how > div .title                               {font-size: 1.3em; font-weight: 700; line-height: 1.2; margin-bottom: 0.2em;}

.how > div .note                                {display: flex; height: 2.2em; align-items: center; font-size: 0.7em; padding: 0 1.2em; border-radius: 1.1em; border: solid 0.09em white; box-sizing: border-box; margin-block: -0.2em 0.2em;}

.how > p                                        {max-width: 38rem; text-align: center; color: var(--color2); font-weight: 700; margin-top: var(--gap2);}

  @media screen and (min-width: 1081px)         {

  .how > div                                    {width: calc(25% - 0.45rem);}

  }

  @media screen and (min-width: 441px) and (max-width: 1080px){

  .how > div                                    {width: calc(50% - 0.3rem);}

  }  



.contact-page                                   {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1);}  

.contact-page > *                               {display: flex; width: 100%; flex-wrap: wrap; background: var(--color3); padding: min(3em, calc(1em + 4vw)); border-radius: 1em; box-sizing: border-box; box-shadow: 0 0 0.5em rgba(0,0,0,0.4);}

  @media screen and (min-width: 1081px)         {

  .contact-page > *:nth-child(1)                {width: 42%;}

  .contact-page > *:nth-child(2)                {width: calc(58% - var(--gap1));}

  }



.contacts1                                      {color: var(--color0); background: var(--color2);}



.contacts2                                      {gap: 1.5em 2em;}

.contacts2 ul                                   {display: flex; flex-direction: column; gap: 0.6em;}

.contacts2 ul li                                {display: block;}

.contacts2 ul li a                              {display: flex; align-items: center; gap: 0.4em; color: white; font-weight: 700; text-decoration: none; transition: .15s ease-in-out;}

.contacts2 ul li a span                         {display: flex; width: 1.6em; height: 1.6em; justify-content: center; align-items: center; background: var(--color3); border-radius: 100%; position: relative; top: -0.04em; transition: .15s ease-in-out;}

.contacts2 ul li a span img                     {display: block; width: 50%; transition: .15s ease-in-out;}

.contacts2 ul li a:hover                        {color: var(--color2);}

.contacts2 ul li a:hover span                   {background: rgba(255,255,255,0.2);}

.contacts2 ul li a:hover img                    {filter: brightness(2);}



.contact-form                                   {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1rem 0; background: var(--color3); padding: min(6em, calc(1em + 4vw)); --form-item-height: 2.4rem; border-radius: 1em; box-sizing: border-box; box-shadow: 0 0 0.5em rgba(0,0,0,0.4);}

.contact-form h2                                {padding-inline: 1.3rem; box-sizing: border-box; color: var(--color2);}



input, textarea                                 {display: block; width: 100%; height: var(--form-item-height); font-size: 1em; font-weight: 700; color: white; background: var(--color0); padding: 0 1.3rem; border: solid 0.1em rgba(0,0,0,0.05); border-radius: calc(0.5 * var(--form-item-height)); outline: none; box-sizing: border-box; font-family: var(--font1); transition: .2s ease-in-out;}

textarea                                        {padding: 1rem;}

input:focus, textarea:focus                     {border-color: var(--color2);}



.form-items                                     {display: flex; width: 100%; justify-content: space-between; align-items: center; align-content: center; flex-wrap: wrap; gap: 1.2rem var(--form-items-gap); --form-item-height: 3.4rem; --form-items-gap: 1rem;}

.form-item                                      {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.35rem; position: relative;}

.form-item label                                {display: block; width: 100%; text-align: left; font-size: 0.75em; color: var(--color1); font-weight: 700; padding: 0 1.3rem; box-sizing: border-box;}

.form-item:has(textarea)                        {width: 100%;}

.form-item input                                {height: var(--form-item-height);}

.form-item textarea                             {height: 11em;}

.form-item input:focus,

.form-item textarea:focus                       {outline-color: var(--color1);}

.permission                                     {display: block; width: 100%; font-size: 0.7em; color: var(--color1); margin-top: 0.45rem;}

.permission a                                   {color: var(--color1); text-decoration: underline; font-weight: 500;}

.permission a:hover                             {color: white; text-decoration: none;}

.contact-form .button                           {margin-top: 0.8rem; transform: var(--skew);}

  @media screen and (min-width: 725px)          {

  .form-item                                    {width: calc(33.33% - var(--form-items-gap) * 2 / 3);}

  .permission                                   {width: 20rem; padding-left: 1.3rem; box-sizing: border-box;}

  }

  @media screen and (max-width: 724px)          {

  .contact-form                                 {justify-content: flex-end;}

  .form-item                                    {width: 100%;}

  .permission                                   {text-align: left;}

  .contact-form .button                         {width: 100%;}

  }



.buy-page                                       {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2);}

.buy-page .product                              {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8em; margin-bottom: var(--gap1);}

.buy-page .product .img                         {display: block; width: 100%; background: rgba(0,0,0,0.1); border-radius: 1em; margin-bottom: 1.2em;}

.buy-page .product .img img                     {display: block; width: 100%; margin-block: -18%;}

.buy-page .product > div                        {display: flex; width: 100%; flex-wrap: wrap; gap: 0.3em; padding-inline: 10%; box-sizing: border-box;}

.buy-page .product > div span                   {display: block; text-align: left; font-size: 0.9em;}

.buy-page .product > div .title                 {font-size: 1.6em; font-weight: 800;}

.buy-page .product > div .price                 {font-size: 0.7em; color: var(--color1); line-height: 1.3; margin-top: 0.2em;}

.buy-page .product > div .price strong          {display: block; font-size: 1.6em; font-weight: 700;}

  @media screen and (min-width: 1081px)         {

  .buy-page .contact-form                       {width: 60%; padding: 3.2rem;}

  .buy-page .contact-form .w50                  {width: calc(50% - 0.5 * var(--form-items-gap));}

  .buy-page .contact-form .w100                 {width: 100%;}

  .buy-page .product                            {width: calc(40% - var(--gap2));}

  }

  @media screen and (max-width: 1080px)         {

  .buy-page .product                            {order: -1;}

  }

  @media screen and (min-width: 581px) and (max-width: 1080px){

  .buy-page .product                            {align-items: center;}

  .buy-page .product .img                       {width: 16em; margin-block: 0.8em;}

  .buy-page .product > div                      {width: calc(100% - 16em - var(--gap2)); padding: 0;}

  }