@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

*{margin: 0px;padding: 0px;box-sizing: border-box;}

html, body{margin: 0px;padding: 0px;font-family: 'Manrope';background-color: var(--white-color);color: var(--black-color);}
body.noscroll{
  overflow: hidden;
}


:root{--black-color: #fff;--blue-color: #0000ee;--white-color: #000;}

h1 {
  font-size: clamp(2.125rem, 4.8vw, 3.25rem); /* 34px → 52px */
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.625rem); /* 28px → 42px */
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.015em;
}

h3 {
  font-size: clamp(1.75rem, 3.6vw, 2.225rem); /* 28px → 42px */
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.015em;
}

h4 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); /* 20px → 24px */
  line-height: 1.35;
  font-weight: 500;
}

h5 {
  font-size: clamp(1.125rem, 1.8vw, 1.25rem); /* 18px → 20px */
  line-height: 1.4;
  font-weight: 500;
}

p {
  font-size: clamp(1rem, 1.6vw, 1.125rem); /* 16px → 18px */
  line-height: 1.65;
  font-weight: 400;
}


.pagewrap{width: 100%;position: relative;padding: 0px 20px;}

.grid-2-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;row-gap: 40px;}
.grid-2-elements-right-big{width: 100%;position: relative;display: grid;grid-template-columns: 0.4fr 1fr;gap: 20px;}
.grid-2-elements-left-big{width: 100%;position: relative;display: grid;grid-template-columns: 1fr 0.4fr;gap: 20px;}
.grid-3-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(3,1fr);gap: 20px;row-gap: 40px;}
.flex-elements{width: 100%;display: flex;justify-content: space-between;gap: 20px;}

.section{position: relative;padding-top: 150px;}
.section-subtitle{max-width: 385px;}
.section-subtitle p{font-size: 16px;line-height: 24px;font-weight: 400;}

.black-line{width: 100%;position: relative;background-color: var(--black-color);height: 1px;margin-bottom: 20px;}
.black-big-button{width: 140px;height: 140px;background-color: var(--black-color);display: flex;flex-direction: column;justify-content: center;align-items: center;transition: 0.2s ease;}
.black-big-button:hover{border-radius: 140px;transition: 0.2s ease;}
.black-big-button img{width: 40px;}

.button{width: 220px;height: 55px;background: var(--black-color);padding: 0px 20px;display: flex;justify-content: space-between;align-items: center;color: #000;text-decoration: none;font-weight: 500;transition: 0.2s ease;}
.button p{font-weight: 600;}
.button img{width: 25px;}
.button:hover{border-radius: 80px;transition: 0.2s ease;}

.top-button{width: 55px;height: 55px;background-color: var(--black-color);padding: 10px;display: flex;transition: 0.2s ease;}
.top-button img{transform: rotate(-90deg);}
.top-button:hover{border-radius: 40px;transition: 0.2s ease;}

.content{width: 100%;position: relative;display: flex;flex-direction: column;gap: 20px;}

/* Header code starts */
header{width: 100%;position: fixed;top: 0px;padding: 20px 0px;z-index: 100;}
header .flex-elements{width: 100%;position: relative;display: flex;justify-content: space-between;gap: 20px;}
.header-right ul{list-style: none;display: flex;gap: 10px;}
.header-right ul li{text-align: right;}
.header-left a, .header-right ul li a{font-size: 18px;line-height: 26px;font-weight: 600;color: var(--black-color);text-decoration: none;transition: 0.2s ease}
.header-left a p{font-size: 18px;font-weight: 600;}
.header-left a:hover, .header-right ul li a:hover{opacity: 0.7;transition: 0.2s ease}
.header-right .desktop-elements{display: block;}
.header-right .mobile-element{display: none;position: relative;}
.header-button{width: 50px;height: 30px;display: flex;flex-direction: column;gap: 5px;justify-content: center;align-items: center;cursor: pointer;transition: 0.4s ease;}
.header-button span{width: 50px;height: 2px;background-color: var(--black-color);transition: 0.4s ease;}

header.backgroundBlack{background-color: rgba(0,0,0,0.7);color: var(--white-color)!important;}
header.backgroundBlack .header-button span{background-color: var(--white-color);}
header.backgroundBlack .header-left a p, header.backgroundBlack a{color: var(--white-color)!important;}

.header-button span:nth-child(2){
  opacity: 1;
  transition: 0.4s ease;
}

.header-button.active span:nth-child(1){
  transform: translateY(4px) rotate(45deg);
  transition: 0.4s ease;
}

.header-button.active span:nth-child(2){
  opacity: 0;
  transition: 0.4s ease;
}

.header-button.active span:nth-child(3){
  transform: translateY(-10px) rotate(-45deg);
  transition: 0.4s ease;
}


/* Header code ends */

/* Landing Hero code starts */
.landing-hero{
  width: 100%;
  height: 100svh;
  position: fixed;
  inset: 0;
  background: var(--white-color);
  z-index: 1000;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: clamp(16px, 3vw, 40px);
  overflow: hidden;
}

.landing-hero .flex-element h1{
  font-size: clamp(2.15rem, 7vw, 10rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--black-color);
}

/* OUTER wrapper (mask) */
.landing-hero .flex-element h1 .word{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;

  /* αυτό αποτρέπει να κόβονται descenders/τελείες */
  padding-bottom: 0.08em;
}

/* INNER που κινείται */
.landing-hero .flex-element h1 .word .word-inner{
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* Landing Hero code ends */

.super-hero{width: 100%;position: relative;height: 100dvh;display: flex;justify-content: end;align-items: end;padding: 20px;}

.super-hero .center-element{
  width: 100%;
  padding: 0px 20px;
  max-width: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--black-color);
  opacity: 0; /* start hidden */
}

/* SplitText lines wrapper */
.super-hero .center-element h3 .h3-line{
  display: block;
  overflow: hidden;           /* mask */
  padding-bottom: 0.12em;     /* avoids cutting descenders */
}

/* Inner line that moves */
.super-hero .center-element h3 .h3-line-inner{
  display: block;
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}


.reveal-mask{height: 55px;}
#revealText{font-size: clamp(34px, 5vw, 50px);line-height: 1.1;font-weight: 500;}
.hero-line{
  display:flex;
  gap:14px;
  align-items: baseline;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#phraseFront, #phraseBack{width: 100%;text-align: start;}

.static-word, #phrase{
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* τα δύο layers κάθονται στο ίδιο σημείο */
.phrase{
  display: inline-block;
  white-space: nowrap;
  position: relative;
}

/* το wipe (σαν “κουρτίνα”) */
.phrase::after{
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);          /* ξεκινά κλειστό */
  /* βάλε εδώ το χρώμα φόντου της περιοχής για να μοιάζει wipe */
  background: #fff;
  pointer-events: none;
}






.super-hero .bottom-element{width: 100%;position: relative;display: flex;gap: 20px;justify-content: space-between;}
.super-hero .bottom-element .bottom-element-left{max-width: 300px;display: flex;}
.super-hero .bottom-element .bottom-element-left p{font-size: 14px;line-height: 18px;display: flex;align-items: end;}
.super-hero .bottom-element .bottom-element-right p{padding-bottom: 7px;font-size: 16px;font-weight: 600;color: var(--black-color);}
.super-hero .bottom-element .project-card{max-width: 300px;position: relative;display: flex;gap: 10px;padding: 10px;align-items: end;}
.super-hero .bottom-element .project-card .project-card-titles{padding: 0px;}
.super-hero .bottom-element .project-card:before,
.super-hero .bottom-element .project-card:after{content: "";position: absolute;inset: 0;pointer-events: none;}
.super-hero .bottom-element .project-card::before {
    background:
        linear-gradient(#fff, #fff) top left,
        linear-gradient(#fff, #fff) top right,
        linear-gradient(#fff, #fff) bottom left,
        linear-gradient(#fff, #fff) bottom right;
    background-size: 10px 2px, 2px 10px;
    background-repeat: no-repeat;
}

.super-hero .bottom-element .project-card::after {
    background:
        linear-gradient(#fff, #fff) top left,
        linear-gradient(#fff, #fff) top right,
        linear-gradient(#fff, #fff) bottom left,
        linear-gradient(#fff, #fff) bottom right;
    background-size: 2px 10px, 10px 2px;
    background-repeat: no-repeat;
}

.hero-section{width: 100%;position: relative;margin-top: 120px;}
.project-card-titles{width: 100%;position:relative;padding: 10px 0px;}
.project-card-titles .flex-elements{display: flex;justify-content: start;gap: 30px;}
.project-card-titles h5{text-transform: uppercase;font-size: 17px;line-height: 24px;}
.project-card-titles h5:nth-child(2){font-weight: 600;color: var(--blue-color);}
.project-card-titles h5 a{font-weight: 600;text-transform: uppercase;color: var(--black-color);text-decoration: none;transition: 0.2s ease;}
.project-card-titles h5 a:hover{color: var(--blue-color);transition: 0.2s ease;}
.project-image{width: 100%;height: auto;aspect-ratio: 1920/1280;display: block;overflow: hidden;transition: 0.2s ease}
.project-image a{width: 100%;height: 100%;transition: 0.2s ease}
.project-image img{width:100% ;height: 100%;object-fit: cover;transition: 0.2s ease}
.project-image:hover img{transform: scale(1.1);transition: 0.2s ease;}

.about-section .hl {position: relative;display: inline-block;}

.about-section .hl::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 10%;
  height: 35%;
  transform: scaleX(0);
  transform-origin: left;
  background: rgba(0,0,0,0.08);
  will-change: transform;
}


.awards-elements{width: 100%;position: relative;padding-top: 100px;}
.award-element{width: 100%;position: relative;border-top: 1px solid var(--black-color);padding: 10px 0px;}
.award-element h5, .award-element p{text-transform: uppercase;margin: auto 0px;}
.award-element h5{font-weight: 700;}
.award-element p:last-child{text-align: right;}
.awards-section .more-button{margin: 50px 0px 0px 0px;display: flex;justify-content: end;}
.awards-section{display: none;}
.awards-section:has(h5){display: block;}

.service-elements{width: 100%;position: relative;display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;padding-top: 100px;}
.service-element{width: 100%;position: relative;overflow: hidden;transition: 0.4s ease;}
.service-element-top{width: 100%;height: auto;position: relative;aspect-ratio: 800/1024;overflow: hidden;transition: 0.4s ease;}
.service-element-top img{width: 100%;height: 100%;object-fit: cover;transition: 0.4s ease;}
.service-element-bottom h5{color: var(--black-color);text-transform: uppercase;padding-top: 10px;font-weight: 600;transition: 0.4s ease;}
.service-element-bottom h5 a{color: var(--black-color);text-decoration: none;transition: 0.2s ease;}
.service-element-bottom h5 a:hover{opacity: 0.7;transition: 0.2s ease;}
.services-section .more-button{margin: 50px 0px 0px 0px;display: flex;justify-content: end;}
.service-element-top img:hover{transform: scale(1.1);transition: 0.4s ease;}

.service-inside-element{width: 100%;position: relative;margin-top: 100px;}
.service-inside-element:nth-child(1){margin-top: 0px;}
.service-inside-element .service-inside-element-top{padding-bottom: 20px;}
.service-inside-element .service-inside-element-top h5{font-weight: 700;}
.service-inside-element:nth-child(1) .service-inside-element-bottom ul{padding-left: 20px;display: grid;grid-template-columns: repeat(4,1fr);gap: 20px;}
.service-inside-element:nth-child(1) .service-inside-element-bottom ul li{border-bottom: 1px solid var(--black-color);padding: 10px 0px;}
.service-inside-element .service-inside-element-bottom{max-width: 1200px;}

#single-project .grid-2-elements-left-big{position: relative;grid-template-columns: 1fr 0.6fr;}
.single-post #single-project .grid-2-elements-left-big{position: relative;grid-template-columns: 1fr 1fr;}
#single-project .project-title h1, .hero-section h1{font-size: clamp(47px, 10vw, 100px) !important;line-height: clamp(57px, 10vw, 100px) !important;font-weight: 700;text-transform: uppercase;}
#single-project .project-category p{text-transform: uppercase;}
#single-project .project-one-image,
#single-project .project-two-images{width: 100%;position: relative;padding-top: 20px;}
#single-project .project-two-images{display: flex;gap: 20px;}
#single-project .project-one-image img,
#single-project .project-two-images img{width: 100%;height: auto;object-fit: cover;}
#single-project .project-elements-right{padding-top: 20px;}
#single-project .project-informations{max-width: 800px;position: sticky;top: 10px;display: flex;flex-direction: column;gap: 30px;}
#single-project .project-informations .project-info-top{padding-bottom: 5px;}
#single-project .project-informations .project-info-top p{font-size: 14px;line-height: 20px;font-weight: 700;}
#single-project .button{width: 270px;}

.blog-section{width: 100%;position: relative;padding-top: 40px;}

.project-categories{width: 100%;position: relative;display: flex;gap: 20px;padding-bottom: 40px;}
.project-categories .tab-button{cursor: pointer;}
.project-categories .tab-button.active h5{font-weight: 700;}
.tabcontent{display: none;}
.project-filter .tabcontent:nth-child(1){display: block;}

.contact-element{width: 100%;position: relative;margin-top: 100px;}
.contact-section .contact-element:nth-child(1){margin-top: 0px;}
.contact-section .grid-3-elements{display: grid;grid-template-columns: 0.5fr 1fr 0.5fr;}
.contact-section .contact-element-top h5{font-weight: 700;}
.contact-section .contact-element-bottom{max-width: 800px;}
.contact-section .contact-element-bottom ul{list-style: none;}
.contact-section .contact-element-bottom ul li{font-size: 16px;text-transform: uppercase;padding-bottom: 5px;}
.contact-section .contact-element-bottom ul li a{font-size: 16px;text-transform: uppercase;color: var(--black-color);position: relative;text-decoration: none;}
.contact-section .contact-element-bottom ul li a:after{content: "";position: absolute;bottom: 0px;left: 0px;width: 0%;height: 1px;background-color: var(--black-color);transition: 0.3s ease;}
.contact-section .contact-element-bottom ul li a:hover:after{width: 100%;transition: 0.3s ease;}

/* Form code starts */
.ff-default .ff-el-form-control{border-left: 0px!important;border-right: 0px!important;border-bottom: 1px solid var(--black-color)!important;border-top: 0px!important;border-radius: 0px!important;font-size: 16px!important;color: var(--black-color)!important;background-color: var(--white-color)!important;}
.ff-default .ff_btn_style{background-color: var(--black-color)!important;padding: 12px 35px!important;font-weight: 500!important;color: var(--white-color)!important;}

/*Overlay code*/
#overlay{
  width: 100%;
  height: 100dvh;              /* μην το μηδενίζεις */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;        /* σημαντικό */
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 99;
}

#overlay.open{
  pointer-events: auto;
}

.overlay-inside{width: 100%;height: 100%;position: relative;display: flex;flex-direction: column;justify-content: space-between;gap: 40px;}
.overlay-inside-top{width: 100%;height: 100%;margin-top: 100px;padding: 0px 20px;}
.overlay-inside-top ul{list-style: none;}
.overlay-inside-top ul li a{font-size: 50px;color: var(--black-color);font-weight: 500;text-decoration: none;transition: 0.2s ease;}
.overlay-inside-top ul li a:hover{opacity: 0.7;transition: 0.2s ease;}


.infinite-cta{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  padding:18px 0;
  text-decoration:none;
  white-space:nowrap;
}

.infinite-cta__marquee{
  display:flex;
  width:max-content;          /* κρίσιμο: να μην “σπάει” */
  will-change:transform;
  animation: marquee 14s linear infinite;
}

.infinite-cta__group{
  display:inline-flex;
  gap:48px;
  padding-right:48px;         /* “αναπνοή” μεταξύ group A και B */
}

.infinite-cta__item{
  font-size: 50px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity: 1;
  color: var(--black-color);
}

.infinite-cta:hover .infinite-cta__marquee{
  animation-play-state:paused;
}

.infinite-cta__label{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:50px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity 200ms ease;
  color: var(--black-color);
}

.infinite-cta:hover .infinite-cta__label{ opacity:1; }
.infinite-cta:hover .infinite-cta__item{ opacity:.15; }

/* KEY: επειδή έχεις ΔΥΟ ίδιες ομάδες,
   στο -50% επιστρέφεις ακριβώς στο ίδιο οπτικό σημείο */
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .infinite-cta__marquee{ animation:none; }
}


/* Footer code starts */
footer{width: 100%;position: relative;margin-top: 200px;margin-bottom: 20px;}
.footer-top img{width: 100%;}
.footer-top-info{padding-top: 10px;}
.footer-top-info ul{list-style: none;display: flex;gap: 10px;}
.footer-top-info ul li a{color: var(--black-color);font-size: 18px;line-height: 26px;font-weight: 400;text-transform: uppercase;text-decoration: none;transition: 0.2s ease;}
.footer-top-info ul li a:hover{color: var(--blue-color);transition: 0.2s ease;}
.footer-top-info .footer-top-info-right{margin: 0px 0px 0px auto;}
.footer-bottom{padding-top: 70px;}
.footer-bottom-top{padding-bottom: 70px;}
.footer-bottom-bottom p, .footer-bottom-bottom p a{font-size: 14px!important;line-height: 20px;color: var(--black-color);font-weight: 400;text-decoration: none;transition: 0.1s ease;}
.footer-bottom-bottom p a:hover{color: var(--blue-color);transition: 0.1s ease;}
/* Footer code ends */

@media screen and (max-width: 800px) and (min-width: 200px){
	.header-right .desktop-elements{display: none;}
	.header-right .mobile-element{display: block;}
}

@media screen and (max-width: 600px) and (min-width: 200px){
	.super-hero{flex-direction: column;width: 100%;}
	.super-hero .center-element{width: 100%;position: relative;top: 0px;left: auto;transform: translate(0px,0px);margin: 150px 0px;padding: 250px 0px 0px 0px;}
	.super-hero .bottom-element{flex-direction: column;}
	.super-hero .bottom-element .bottom-element-left{width: 100%;max-width: 100%;}
	.super-hero .bottom-element .project-card{max-width: 100%;}

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

@media screen and (max-width: 1070px) and (min-width: 601px){
	.hero-section .grid-3-elements, .blog-section .grid-3-elements{grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width: 600px) and (min-width: 200px){
	.hero-section .grid-3-elements, .blog-section .grid-3-elements{grid-template-columns: repeat(1,1fr);}
}

@media screen and (max-width: 630px) and (min-width: 200px){
	.award-element .flex-elements{display: grid;grid-template-columns: repeat(2,1fr);}
	.award-element h5{grid-column: 1/3;}
	.black-big-button{width: 120px;height: 120px;}
}
@media screen and (max-width: 1313px) and (min-width: 580px){
	.service-elements{grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width: 579px) and (min-width: 200px){
	.service-elements{grid-template-columns: repeat(1,1fr);}
}
@media screen and (max-width: 510px) and (min-width: 200px){
  .project-categories{flex-direction: column;gap: 10px;}
}
@media screen and (max-width: 900px) and (min-width: 200px){
	.awards-section .black-line{display: none;}
	.awards-section .grid-2-elements-right-big{grid-template-columns: 1fr;}
	.awards-elements{padding-top: 70px;}

	.services-section .grid-2-elements-right-big{grid-template-columns: 1fr;}
	.service-elements{padding-top: 70px;}
}

@media screen and (max-width: 900px) and (min-width: 200px){
	#single-project .grid-2-elements-left-big{grid-template-columns: 1fr;}
	#single-project .project-elements-right{order: 0;}
	#single-project .project-elements-left{order: 1;}
}

@media screen and (max-width: 600px) and (min-width: 200px){
	#single-project .project-two-images{flex-direction: column;}	
}

@media screen and (max-width: 1000px) and (min-width: 834px){
  .service-inside-element:nth-child(1) .service-inside-element-bottom ul{grid-template-columns: repeat(3,1fr);}
  .service-inside-element-bottom.service-projects .grid-3-elements{grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width: 833px) and (min-width: 200px){
  .service-inside-element .grid-2-elements-right-big{grid-template-columns: 1fr;}
  .service-inside-element:nth-child(1) .service-inside-element-bottom ul{grid-template-columns: repeat(3,1fr);}
  .service-inside-element-bottom.service-projects .grid-3-elements{grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width: 620px) and (min-width: 200px){
  .service-inside-element-bottom.service-projects .grid-3-elements{grid-template-columns: 1fr;}
  .service-inside-element:nth-child(1) .service-inside-element-bottom ul{grid-template-columns: repeat(1,1fr);}
}

@media screen and (max-width: 862px) and (min-width: 592px){
	.contact-section .contact-element.form .grid-2-elements-right-big{grid-template-columns: 1fr;}
}
@media screen and (max-width: 591px) and (min-width: 200px){
	.contact-element .grid-2-elements-right-big, .contact-section .contact-element.form .grid-2-elements-right-big{grid-template-columns: 1fr;}
}

@media screen and (max-width: 688px) and (min-width: 490px){
	.footer-top-info .footer-top-info-right ul{flex-direction: column;text-align: right;}
	.footer-bottom-bottom .flex-elements{flex-direction: column;gap: 10px;}
}
@media screen and (max-width: 489px) and (min-width: 200px){
	.footer-top-info .grid-2-elements{grid-template-columns: 1fr;row-gap: 10px;}
	.footer-top-info .footer-top-info-right{margin: 0px;}
	.footer-top-info .footer-top-info-right ul{flex-direction: column;text-align: left;}
	.footer-bottom-bottom .flex-elements{flex-direction: column;gap: 10px;}
	.footer-bottom-top .button{width: 200px;}
}

@media screen and (max-width: 680px) and (min-width: 200px){
	.section{padding-top: 70px;}
  .service-inside-element{margin-top: 70px;}
  .project-elements .section{padding-top: 100px;}
}