@keyframes revealImage {
    0% {
        clip-path: inset(0 0 100% 0);
        /* Start fully hidden from the top */
    }

    100% {
        clip-path: inset(0 0 0 0);
        /* Fully reveal the image from top to bottom */
    }
}

/*hero*/
.logo-watermark {
    position: absolute;
    top: 0;
    z-index: -1;
}

.logo-watermark img {
    max-width: none;
    width: 106vw;
    opacity: .4;
    clip-path: inset(0 0 100% 0);
    /* Initially hides the image from top */
    animation: revealImage 5s ease-in-out .8s forwards;
}

h1,
.h1-like {
    font-family: 'PF BeauSans ProSemiBold';
    line-height: 3.625rem;
}

.hero-container {
    position: relative;
    overflow-x: clip;
}

.first-title {
    color: #E8E8E3;
    margin-bottom: 88px;
}

.second-title {
    margin-left: 10%;
    margin-bottom: 88px;
    color: var(--wp--preset--color--regulargrey);
}

.third-title-container {
    margin-block-start: 0;
    display: flex;
    height: 83px;
    background-color: #E8E8E3;
    position: relative;
}

p.third-title {
    position: relative;
    padding-left: 25.5%;
    line-height: 69%;
    /* letter-spacing: 2.77px; */
}

p.third-title.h1-like:after {
    content: '';
    background-color: #E8E8E3;
    width: 100%;
    display: inline-block;
    max-height: 87%;
    height: 5vw;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.subtitle {
    text-align: right;
    font-size: 1rem;
    padding-right: 12%;
    margin-top: 49px;
}


.button-heading {
    font-size: 3rem;
    font-weight: 400;
    text-align: center;
    line-height: 1.2;
    font-family: 'PF BeauSans ProLight';
}

.after-gird-heading-container {
    padding-top: 308px;
    padding-bottom: 317px;
    background-color: #E8E8E3;
    border-radius: var(--radius-border);
    margin-top: 60px;
    width: calc(100% - 88px);
    margin-left: auto;
    margin-right: auto;
    margin-block-end: 151px !important;
}

.button-heading mark:nth-of-type(1) {
    font-size: 1.292rem;
    font-family: 'PF BeauSans ProSemiBold';
    border-radius: 56px;
    padding: 9px 24px;
    white-space: nowrap;
    position: relative;
    top: -13px;
    border: 1px solid var(--wp--preset--color--secondary);

}

.button-heading mark:nth-of-type(1) a {
    color: var(--wp--preset--color--base);
    text-decoration: none;
}

.button-heading mark:nth-of-type(1):hover {
    background-color: var(--wp--preset--color--secondbuttonbg) !important;

}

.button-heading mark:nth-of-type(1):hover a {
    color: var(--wp--preset--color--contrast) !important;
}

.text-image-container:nth-of-type(1) {
    margin-top: 380px;
}

.text-image-container {
    background-color: var(--wp--preset--color--base);
    margin-bottom: 285px;
    padding-left: 10.34%;
    padding-right: 9.5%;
    gap: 5%;
}

.text-image-container.reverse {
    flex-direction: row-reverse;
    padding-left: 18.34%;
    padding-right: 1.97%;

}

.last-text-image {
    margin-bottom: 138px;
}

.text-image-container .wp-block-group {
    width: 69%;
}

.text-image-container h2 {
    font-size: 3rem;
    font-family: 'PF BeauSans ProSemiBold';
    line-height: 1.2;
}

.text-image-container h2 sup {
    font-size: 1rem;
    font-family: 'PF BeauSans ProRegular';
    position: relative;
    top: -12px;
    left: 3px;
    font-weight: 400;
}

.text-image-container p {
    font-size: 1rem;
    margin-block-start: 12px;
}

.text-image-container figure {
    width: 26%;
    border-radius: 44px;
    overflow: hidden;
}



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

    h1,
    .h1-like {
        font-size: clamp(3.61rem, 7.21vw, 6rem);
    }

    .parallax-container.before-footer {
        margin-bottom: 0 !important;
    }

}

@media screen and (min-width: 2400px) {
    .project-thumbnail-container {
        width: 14vw;
        height: 14vw;
        bottom: -13px;
        right: 1%;
    }
}

@media screen and (min-width: 2050px) {
    .the-menu .content-container {
        max-width: 2050px !important;
    }

    h1.first-title,
    .second-title {
        max-width: 2050px;
        margin-left: auto;
        margin-right: auto;
    }

    p.third-title {
        padding-left: 31.5% !important;
    }

    .subtitle {
        padding-left: 46%;
        max-width: 754px;
    }

    .second-title {
        padding-left: 8.4%;
    }
}

@media screen and (max-width: 1456px) {
    .text-image-container h2 {
        font-size: 2.4rem;
    }

    .text-image-container {
        padding-left: 5.34%;
        padding-right: 6.5%;
    }

    .text-image-container.reverse {
        padding-left: 13.34%;
    }
}

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

    h1,
    .h1-like {
        line-height: 2.8rem;
    }

    .second-title {
        margin-left: 12%;
    }

    p.third-title {
        padding-left: 20.5%;
    }

    h1,
    .h1-like {
        font-size: clamp(3.2rem, 7.21vw, 6rem);
        line-height: 2rem;
    }

    .subtitle {
        margin-top: 39px;
    }

    .after-gird-heading-container {
        padding-top: 127px;
        padding-bottom: 111px;
    }

    .button-heading {
        font-size: 1.5rem;
    }


    .button-heading mark:nth-of-type(1) {
        font-size: 1rem;
        padding: 5px 21px;
        top: -5px;
    }

}

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

    h1,
    .h1-like {
        font-size: 2.4rem;
        line-height: 3.8rem;
    }

    .first-title {
        margin-bottom: -10px;

    }

    .second-title {
        margin-bottom: 7px;
        margin-top: 0;
    }

    .third-title {
        margin-top: 0;
    }

    .subtitle {
        padding-right: 16px;
        font-size: .8rem;
        margin-top: 20px;
    }

    .parallax-container.before-footer {
        margin-bottom: 29px !important;
    }

    .after-gird-heading-container {
        padding-top: 72px;
        padding-bottom: 72px;
        margin-top: 40.2px;
        margin-bottom: 40px;
        width: calc(100% - 16px);
        margin-left: auto;
        margin-right: auto;
        margin-block-end: 113px !important;
    }

    .text-image-container:nth-of-type(1) {
        margin-top: 80px;
    }

    .text-image-container,
    .reverse.text-image-container {
        flex-direction: column;
        background-color: transparent;
        padding-left: 0;
        padding-right: 0;
        position: relative;
        margin-bottom: 0;
        max-width: 364px;
    }

    .reverse.text-image-container figure {
        text-align: left;
    }



    .text-image-container .wp-block-group {
        width: 100%;
    }

    .text-image-container figure {
        width: calc(100% - 27px);
        text-align: right;
        position: relative;
        top: -113px;
        border-radius: 13px;
    }

    .text-image-container h2 {
        padding-left: 16px;
        padding-right: 16px;
        font-size: 1.8rem;
    }

    .text-image-container h2 sup {
        font-size: .8rem;
        font-family: 'PF BeauSans ProRegular';
        line-height: 32px;
        top: -1px;
    }

    .text-image-container p {
        font-size: .8rem;
        background-color: var(--wp--preset--color--base);
        padding-top: 26px;
        padding-bottom: 145px;
        padding-left: 16px;
        padding-right: 17%;
    }

    .text-image-container figure img {
        width: 43.4vw;
        height: 43.4vw;
        max-width: 300px;
        max-height: 300px;
    }




}

@media screen and (max-width: 767px) {
    .button-heading {
        font-size: 1.167rem;
    }


    .button-heading mark:nth-of-type(1) {
        font-size: 0.583rem;
        padding: 5px 21px;
        top: -5px;
    }
}

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

    h1,
    .h1-like {
        font-size: 1.17rem;
        line-height: 2.5rem;
    }

    .second-title {
        margin-left: 18%;
    }

    p.third-title {
        padding-left: 41.5%;
    }

    .text-image-container h2 {
        font-size: 1.17rem;
    }

    .text-image-container h2 sup {
        font-size: .7rem;
    }

    .text-image-container p {
        padding-bottom: 90px;
        font-size: .6rem;
        padding-right: 12%;

    }

    .text-image-container figure {
        position: relative;
        top: -65px;
    }
}

@media screen and (max-width: 480px) {
    .second-title {
        margin-left: 11%;
    }

    p.third-title {
        padding-left: 20%;
    }

    .subtitle {
        font-size: .6rem;
        padding-left: 52%;
        text-align: left;
    }

}

.parallax-inner video {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  z-index: -1 !important;
  pointer-events: none !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width: 768pxpx) {
  .parallax-inner video {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    top: 0 !important;
    left: 0 !important;
    right: unset !important;
    bottom: unset !important;
    position: fixed !important;  /* Κράτα το fixed! */
    z-index: -1 !important;
  }
  .parallax-inner, .parallax-container.before-footer {
    min-height: 100vh !important;
    min-height: 100svh !important;
  }
}