@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: 17.4%;
    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: 35.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: 44px;
    margin-top: 49px;
    text-align: left;
    padding-left: 53%;
    margin-block-end: 113px !important;
    line-height: 29px;
}


.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-only-container {
    max-width: 1216px;
    margin: auto;
    width: 80%;
}

.text-only-container p {
    font-size: 1rem;
    line-height: 29px;
}


@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;
        margin-top: 100px !important;
    }

}

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

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

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

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

    .text-only-container {
        max-width: 1700px;
        margin: auto;
        width: 80%;
    }

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

    .after-gird-heading-container {
        max-width: 2050px;
    }
}

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

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

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

    p.third-title {
        padding-left: 37.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: 54px;
        padding-left: 37%;
        text-align: left;
        margin-block-end: 52px !important;
    }

    .parallax-container.before-footer {
        margin-bottom: 29px !important;
        margin-top: 50px !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-only-container {
        width: 97%;
    }

    .text-only-container p {
        font-size: .6rem;
        line-height: 17px;
    }

}

@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.7rem;
    }

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

    p.third-title {
        padding-left: 41.5%;
        font-size: 1.69rem;
    }
}

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

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

    .subtitle {
        font-size: .6rem;
        padding-left: 30%;
        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;
  }
}