@font-face {
  font-family: 'Century-Gothic';
  src: url('centurygothic.ttf');
}

body {
  background-color: black!important;
  color: #cfe0e4!important;
  font-family: Century-Gothic, sans-serif;
  margin: 0px;
}

header {
  box-shadow: rgba(113, 150, 171, 0.2) 0px 60px 80px -7px;
  border-bottom: 1px solid rgba(80, 80, 80, 0.21);
}

#info, #top, #tuv {
  height: 100vh;
}

a {
  text-decoration: none!important;
  color: #cfe0e4!important;
}

img, svg {
  vertical-align: middle;
}

@keyframes buredText {
  0% {filter: blur(5px);}
  100% {filter: blur(0px);}
}

#top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
}

.pentagon {
  width: 100%;
  max-width: 1200px;
  display: flex;
  padding: 3em;
}

.p-img-d {
  max-width: 180px;
  width: 100%;
  height: 83px;
}

.group-img-d {
  height: 250px;
}

@property --ccs-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.pentagon-border {
  --b:2px; /* control the border thickness */
  width: 100%;
  max-width: 1000px;
  height: 563px;
  aspect-ratio: 2;
   clip-path: polygon(0 0,100% 0,100% calc(100% - 150px),50% 100%,0 calc(100% - 150px));
  /*--ccs-angle: 0deg;*/
  background-image: conic-gradient(from var(--ccs-angle), #a6cade, #0e0f10, #a6cade, #212529, #acd0e3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.pentagon-body {
  --b:2px;
  width: 100%;
  max-width: 998px;
  height: 560px;
  aspect-ratio: 2;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 150px),50% 100%,0 calc(100% - 150px));
  background-color: #000000;
}

.pen-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  gap: 2em;
}

.pen-item {
  width: 100%;
  text-align: center;
  /*border: 1px solid #595959;*/
}

.pen-item img {
  padding: 0.5em;
  border-radius: 6px;
  transition: 0.5s;
}

.pen-item img:hover {
  box-shadow: rgb(242, 242, 242) 0px 0px 5px 0px, rgb(242, 242, 242) 0px 0px 1px 0px;
}

.centerd-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  padding: 1rem;
}

.c-text {
  width: 100%;
  max-width: 1200px;
  text-align: center;
  font-size: 30px;
  animation-name: buredText;
  animation-duration: 2s;
}

.centered {
  display: flex;
  justify-content:center;
  padding: 3em;
}

#tuv {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tuv-wrap {
  text-align: center;
  font-size: 30px;
}

.t-img {
  margin-bottom: 2em;
}

.t-img-bg {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  border-radius: 20%;
  background: #ffffff;
  width: 250px;
  height: 250px;
  background: linear-gradient(194deg,rgba(255, 255, 255, 1) 14%, rgba(145, 145, 145, 1) 100%);

}

.t-img-bg img {
  width: 100%;
  transition: 0.5s;
}

.t-img-bg img:hover {
  width: 95%;
}

#con-services {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.services {
  overflow: visible;
}

.h-wraper {
  display: flex;
  justify-content:space-between;
  margin: 0 1em 0 1em;
  padding: 1em;
}

.h-col {
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
  filter: grayscale(100%);
}

.g-wrapper {
  display: flex;
  flex-direction: row;
  align-items:stretch;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  top: 0px;
}

.tab {
  height: 100vh;
  position: sticky;
  top: 12%;
}

#openenergy {
  z-index: 1;
}

#exoikonomo {
  z-index: 2;
}

#consulting {
  z-index: 3;
}

#contact {
  padding: 3rem 0 3rem;
  font-size: 14px;
}

img, svg {
    vertical-align: middle;
}

*, ::after, ::before {
    box-sizing: border-box;
}

@keyframes zoom-in {
0% {
transform: translateZ(-1000px);
opacity: 0;
filter: blur(5px);
}
50% {
transform: translateZ(0px);
opacity: 1;
filter: blur(0px);
}
100% {
transform: translateZ(1000px);
opacity: 0;
filter: blur(5px);
}
}

.stuck-grid {
block-size: 100svh;
perspective: 1000px;
transform-style: preserve-3d;

display: grid;
grid: repeat(4, 25dvh) / repeat(4, 25dvw);;
place-items: center;

position: sticky;
top: 0;

overflow: clip;

> .grid-item {
transform-style: preserve-3d;

font-size: 5vmin;
font-weight: lighter;

text-wrap: nowrap;

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom-in linear both;
    animation-timeline: scroll(root block);
    will-change: transform, opacity, filter;
  }
}

&.special.special {
  grid-row: 2 / span 2;
  grid-column: 2 / span 2;
}

> b {
  font-size: 15vmin;
}

&:nth-of-type(1)  { animation-range: 40% 50% }
&:nth-of-type(2)  { animation-range: 20% 30% }
&:nth-of-type(3)  { animation-range: 52% 62% }
&:nth-of-type(4)  { animation-range: 50% 60% }
&:nth-of-type(5)  { animation-range: 45% 55% }
&:nth-of-type(6)  { animation-range: 10% 20% }
&:nth-of-type(7)  { animation-range: 90% 100% }
&:nth-of-type(8)  { animation-range: 30% 40% }
&:nth-of-type(9)  { animation-range: 80% 90% }
&:nth-of-type(10) { animation-range: 70% 80% }
&:nth-of-type(11) { animation-range: -10% 50% }
&:nth-of-type(12) { animation-range: 52% 62% }
&:nth-of-type(13) { animation-range: 15% 25% }
&:nth-of-type(14) { animation-range: 7% 17% }
&:nth-of-type(15) { animation-range: 75% 85% }
&:nth-of-type(16) { animation-range: 3% 13% }
&:nth-of-type(17) { animation-range: 87% 97% }
&:nth-of-type(18) { animation-range: 42% 52% }
&:nth-of-type(19) { animation-range: 57% 67% }
&:nth-of-type(20) { animation-range: 37% 47% }
&:nth-of-type(21) { animation-range: 12% 22% }
&:nth-of-type(22) { animation-range: 8% 18% }
&:nth-of-type(23) { animation-range: 84% 94% }
&:nth-of-type(24) { animation-range: 33% 43% }
&:nth-of-type(25) { animation-range: 48% 58% }
&:nth-of-type(26) { animation-range: 13% 23% }
&:nth-of-type(27) { animation-range: 78% 88% }
&:nth-of-type(28) { animation-range: 62% 72% }
&:nth-of-type(29) { animation-range: 31% 41% }
&:nth-of-type(30) { animation-range: 8% 18% }
&:nth-of-type(31) { animation-range: 4% 14% }
&:nth-of-type(32) { animation-range: 74% 84% }
&:nth-of-type(33) { animation-range: 61% 71% }
&:nth-of-type(34) { animation-range: 26% 36% }
&:nth-of-type(35) { animation-range: 63% 73% }
&:nth-of-type(36) { animation-range: 11% 21% }
&:nth-of-type(37) { animation-range: 89% 99% }
&:nth-of-type(38) { animation-range: 33% 43% }
&:nth-of-type(39) { animation-range: 88% 98% }
&:nth-of-type(40) { animation-range: 22% 32% }
&:nth-of-type(41) { animation-range: 16% 26% }
&:nth-of-type(42) { animation-range: 26% 36% }
&:nth-of-type(43) { animation-range: 66% 76% }
&:nth-of-type(44) { animation-range: 3% 13% }
&:nth-of-type(45) { animation-range: 44% 54% }
&:nth-of-type(46) { animation-range: 11% 21% }
&:nth-of-type(47) { animation-range: 23% 33% }
&:nth-of-type(48) { animation-range: 39% 49% }
&:nth-of-type(49) { animation-range: 59% 69% }
&:nth-of-type(50) { animation-range: 6% 16% }

@supports (animation-timeline: scroll()) {

  &:nth-of-type(1) { grid-area: 1/1 }
  &:nth-of-type(2) { grid-area: 1/2 }
  &:nth-of-type(3) { grid-area: 1/3 }
  &:nth-of-type(4) { grid-area: 1/4 }
  &:nth-of-type(5) { grid-area: 2/1 }
  &:nth-of-type(6) { grid-area: 2/2 }
  &:nth-of-type(7) { grid-area: 2/3 }
  &:nth-of-type(8) { grid-area: 2/4 }
  &:nth-of-type(9) { grid-area: 3/1 }
  &:nth-of-type(10) { grid-area: 3/2 }
  &:nth-of-type(11) { grid-area: 3/3 }
  &:nth-of-type(12) { grid-area: 3/4 }
  &:nth-of-type(13) { grid-area: 4/1 }
  &:nth-of-type(14) { grid-area: 4/2 }
  &:nth-of-type(15) { grid-area: 4/3 }
  &:nth-of-type(16) { grid-area: 4/4 }
  &:nth-of-type(17) { grid-area: 2/1 }
  &:nth-of-type(18) { grid-area: 2/2 }
  &:nth-of-type(19) { grid-area: 2/3 }
  &:nth-of-type(20) { grid-area: 2/4 }
  &:nth-of-type(21) { grid-area: 3/1 }
  &:nth-of-type(22) { grid-area: 3/2 }
  &:nth-of-type(23) { grid-area: 3/3 }
  &:nth-of-type(24) { grid-area: 3/4 }
  &:nth-of-type(25) { grid-area: 1/1 }
  &:nth-of-type(26) { grid-area: 1/2 }
  &:nth-of-type(27) { grid-area: 1/3 }
  &:nth-of-type(28) { grid-area: 1/4 }
  &:nth-of-type(29) { grid-area: 4/1 }
  &:nth-of-type(30) { grid-area: 4/2 }
  &:nth-of-type(31) { grid-area: 4/3 }
  &:nth-of-type(32) { grid-area: 4/4 }
  &:nth-of-type(33) { grid-area: 2/1 }
  &:nth-of-type(34) { grid-area: 2/2 }
  &:nth-of-type(35) { grid-area: 2/3 }
  &:nth-of-type(36) { grid-area: 2/4 }
  &:nth-of-type(37) { grid-area: 3/1 }
  &:nth-of-type(38) { grid-area: 3/2 }
  &:nth-of-type(39) { grid-area: 3/3 }
  &:nth-of-type(40) { grid-area: 3/4 }
  &:nth-of-type(41) { grid-area: 1/1 }
  &:nth-of-type(42) { grid-area: 1/2 }
  &:nth-of-type(43) { grid-area: 1/3 }
  &:nth-of-type(44) { grid-area: 1/4 }
  &:nth-of-type(45) { grid-area: 4/1 }
  &:nth-of-type(46) { grid-area: 4/2 }
  &:nth-of-type(47) { grid-area: 4/3 }
  &:nth-of-type(48) { grid-area: 4/4 }
  &:nth-of-type(49) { grid-area: 3/1 }
  &:nth-of-type(50) { grid-area: 3/2 }
  &:nth-of-type(51) { grid-area: 3/3 }
  &:nth-of-type(52) { grid-area: 3/4 }
}
}
}

@layer support {
  .scroll-effect {
    min-block-size: 400vh;
    color: #ffffff;
    color-scheme: light dark;
  }
}

.wrap-1, .wrap-2, footer {
  border-top: 1px solid rgba(80, 80, 80, 0.21);
}

.wrap-1, .wrap-2{
  border-radius: 25px;
  padding: 4em 1em 2em 1em;
}

.wrap-1 {
  flex-grow: 1;
  max-width: 500px;
  background-color: #1f1f1f;
}

.wrap-2 {
  background-color: #010a11;
  flex-grow: 2;
  object-fit: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.shape {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 380px;

}

.info-circle {
  position: absolute;
  display: flex;
  flex-direction:column;
  align-items:center;
  border: 2px solid #ffffff;
  width: 109px;
  height: 109px;
  padding: 0.7em;
  font-size: 14px;
  color: #ffffff;
  background: rgba(164, 164, 164, 0.11);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10.4px);
  -webkit-backdrop-filter: blur(10.4px);
}

.c1 {
  top: 1px;
  left: 136px;
  border-radius: 50%;
}

.c2 {
  bottom: 1px;
  left: 136px;
  border-radius: 100%;
}

.c3 {
  bottom: 136px;
  left: 1px;
  border-radius: 100%;
}

.c4 {
  bottom: 136px;
  right: 1px;
  border-radius: 100%;
}

.wrap-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 0 4em 0 4em;
}

.w-header, .s-info, .action {
  color: #cfe0e4;
}

.desc {
  font-size: 14px;
}

.thumnail {
  padding: 0 1em 0 1em;
  border-radius: 20px;
  width: 100%;
  object-fit: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.thumnail img {
  border-radius: 20px;
  height: 130px;
  width: 100%;
}

.a-wrapper {
  margin: 1em 0 1em 0;
}

.action-btn {
  display: flex;
  justify-content: center;
}

.icon-arrow {
  border: solid #ffffff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  }

.a-btn {
  display: flex;
  flex-direction: row;
  background-color: #3f4547;
  border-radius: 10px;
  align-items: center;
  padding: 3px;
  text-decoration: none;
  color: inherit;
}

.a-arrow {
  width: 40px;
  height: 40px;
  padding: 0.5em;
  background-color: #f1aa29;
  border-radius: 12px;
  transition: 0.2s;
}

.a-btn:hover {
  > .a-arrow {padding-right: 0.1em;}
}

.a-l-title {
font-size: 14px;
margin: 0 1.5em 0 0.5em;
}

.wrap-2-inner {
padding-left: 2em;
}

.inner-i {
  display: flex;
  align-items: center;
  padding: 1em;
  margin-top: 2em;
  width: 500px;
}


.inner-icon {
  border-radius: 50%;
  border: 2px solid #ffffff;
  padding: 1.5em;
  background: rgba(0, 0, 0, 0.11);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10.4px);
  -webkit-backdrop-filter: blur(10.4px);
}

.inner-info {
  color: #ffffff;
  padding-left: 10px;
}


.s-info .service {
  padding: 1em 1.5em 1em 1.5em;
  border-top: 1px solid #3f4547;
}
.service span {
  font-size: 21px;
}

.wrap-3-inner {
  display: flex;
  align-items:center;
  justify-content:center;
}

.t-area {
  position: relative;
  padding: 4em;
  transform:
    rotateX(51deg)
    rotateZ(43deg);
  transform-style: preserve-3d;
  border-radius: 32px;
  transition:
    .4s ease-in-out transform,
    .4s ease-in-out box-shadow;
}

.t-area:hover {
  transform:
      translate3d(0px, -16px, 0px)
      rotateX(51deg)
      rotateZ(43deg);
}

.d-tablet {
  display: flex;
  align-items:center;
  justify-content:center;
  width: 350px;
  height: 400px;
  background: rgb(42 92 128 / 54%);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.top-tab, .left-tab-1, .left-tab-2, .left-tab-3, .right-tab-1, .right-tab-2 {
  position: absolute;
  z-index: 1;
  padding: 0.5em;
  background: rgba(85, 143, 185, 0.54);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: bold;
  color: #cfe0e4;
}

.top-tab {
  top: 0;
  left: 35%;
}

.left-tab-1 {
  left: 0px;
  top: 25%;
}


.right-tab-1 {
  right: 0px;
  top: 30%;
}

.right-tab-2 {
  right: 0px;
  top: 45%;
}

.t-view {
  width: 200px;
  height: 200px;
}

.t-content {
  text-align: center;
  width: 130px;
}

#pie-example-3 {
  width: 190px;
  margin: 0 auto;
}

#area-example-2 {
  width: 100px;
  margin: 0 auto;
}
#area-example-2 .area {
  --aspect-ratio: 16 / 9;
}

#stacked-example-4 {
  padding-top: 1em;
  width: 100%;
  margin: 0 auto;
}

#stacked-example-4 .column {
  --color-1: rgba(0, 138, 230, 0.5);
  --color-2: rgba(102, 194, 255, 0.5);
  --color-3: rgba(153, 201, 255, 0.5);
  --color-4: rgba(204, 229, 255, 0.5);
  --aspect-ratio: 1 / 1;
}

#stacked-example-4 .column caption {
  font-weight: bold;
  padding-block-end: 1rem;
}

#line-example-4 {
  width: 100%;
  margin: 0 auto;
}

#line-example-4 .line {
  --aspect-ratio: 21 / 9;
  background-color: inherit;
}

footer {
  margin-top: 2em;
  box-shadow: rgba(113, 150, 171, 0.2) 0px 0px 80px -7px;
}

.c-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content:center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.c-wrap {
  flex-grow: 1;
}

.con {
  text-wrap: pretty;
}

.con-info {
  padding-top: 1em;
}

.con-info div:last-child {
  padding-top: 0.5em;
}

.c-s span:first-child {
  padding-left: 0em;
}

.c-s span {
  padding-left: 1em;
}

.m-logo {
display: none;
}

.mobile-h {
  display: none;
}

.m-h-body {
  padding: 0 0.8em 0 0.8em;
  max-width: 768px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:center;
}

.m-flaf {
  padding: 4px;
}

.menu-btn {
  height: 3em;
  width: 3em;
  padding: 4px;
}

.sidenav-m {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.nav-items {
  padding: 8px 8px 8px 32px;
}

.m-item {
  margin-bottom: 2em;
}

.sidenav-m a {
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
}

.sidenav-m span {
  font-size: 1rem;
  color: #bdbdbd;
}

.m-socials {
  display: flex;
  flex-direction: row;
  justify-content: start;
  gap: 20px;
}

.sidenav-m .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

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

  section {
    margin-bottom: 10px;
  }

  .thumnail {
    padding: 0px;
  }

  .thumnail img {
    border-radius: 20px;
    height: 130px;
    width: 255px;
  }

  .inner-i {
    flex-direction: column;
    padding: 0em;
    margin-top: 0.7em;
    width: 500px;
    text-align: center;
  }

  .inner-icon {
    width: 70px;
    height: 70px;
    padding: 0.8em;
  }

  .g-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .tab-w {
    position: sticky;
    top: 0px;
  }

  .tab {
    height: 200vh;
    position: static;
  }

  .wrap-1, .wrap-2{
    width: 100%;
    max-width: 1000px;
    padding: 1em;
    height: 100vh;
  }

  .wrap-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
  }


  .wrap-2-inner {
  padding-left: 0em;
  }

}


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

  section {
    margin-bottom: 0px;
  }

  .wrap-1, .wrap-2 {
    border-radius: 0px;
  }

  .g-wrapper {
    gap: 0px;
  }

  .t-area {
    padding: 1em;
    transform: rotateX(0deg) rotateZ(0deg);
    transform-style: preserve-3d;
  }

  .d-tablet {
    display: none;
  }

  .top-tab, .left-tab-1, .right-tab-1, .right-tab-2 {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 200px;
    margin-bottom: 1em;
  }

  .t-content {
    width: 100%;
  }

  .f-row {
    flex-direction: column;
    align-items: center;
  }

  .f-col {
    text-align: center;
  }

}

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

  #navigation {
    display: none;
  }

  #header {
    display: none;
  }

  .mobile-h {
    display: block;
  }

  .m-logo {
    display: block;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }

  .c-wrapper {
    flex-direction: column;
  }

  .c-wrap {
    text-align: center;
    margin-bottom: 2rem;
  }

  .con-info, .s-item {
    border-bottom: 0;
  }

  .c-text, .t-text {
    font-size: 16px;
  }

}

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

  .container-xl {
    padding: 0px!important;
  }


  .inner-i {
    width: 200px;
  }


  .inner-info {
  font-size: 14px;
}


}

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


  .centerd-text {
    padding: 0px;
  }

  .t-img-bg {
    width: 190px;
    height: 190px;
  }

  .wrap-inner{
    margin: 0 1em 0 1em;
  }

  .shape{
    width: 270px;
    height: 270px;
  }

  .shape svg {
    width: 270px;
    height: 270px;
  }

  .info-circle {
    font-size: 12px;
    width: 77px;
    height: 77px;
  }

   .c-i img {
    width: 2em;
    height: 2em;
  }

  .c1 {
    top: 1px;
    left: 96.5px;
  }

  .c2 {
    bottom: 1px;
    left: 96.5px;
  }

  .c3 {
    bottom: 97px;
    left: 0.7px;
  }

  .c4 {
    bottom: 97px;
    right: 0.7px;
  }

  .service span {
    font-size: 17px;
  }

  footer {
    font-size: 14px;
  }

}