body {
font-family: "Ubuntu", sans-serif;
overflow-x: hidden;
}


.c-top-right-info {
display: flex;
gap: 20px;
justify-content: flex-end;
}

.c-top-right-info span{
color: #fb002c;
}

/*TOP MENU*/

#topmenu {
    border-radius: 40px;
}

div.topmenu ul li:hover {
    border-radius: 30px;
}

div.topmenu ul li:nth-child(2):hover {
border-radius: 30px 30px 0px 0px;
}


#topmenu ul ul {
border-radius: 0px 30px 30px 30px;
}

div.topmenu ul ul li:hover {
    border-radius: 20px;
}



/*END OF TOP MENU*/


/*COPYINFO*/

#copyinfo {
border-radius: 20% 20% 0px 0px;
}

/*END OF COPYINFO*/




/*PRODUCTS*/
div.horizontalitems div.itemcontent {
    border-radius: 30px;
    overflow: hidden;
}

div.items div.photos img {
    border-radius: 40px;
margin: 0 auto;
}

div.contentboxy div.textbox div.value {
    line-height: 2em;
}.c-newlogo {
    background-image: url('/cache/files/a67ca0e0ad1471da8486a34f7f95f00f5faf8c79.svg');
    background-position: center;
    background-size: contain;
background-repeat: no-repeat;
}


a.mobile-header-startlink {
    background-image: url('/cache/files/a67ca0e0ad1471da8486a34f7f95f00f5faf8c79.svg');
    background-position: center;
    background-size: contain;
background-repeat: no-repeat;
width: 220px;
    transform: translate(-50%, 0%);
}

.side-nav__header {
    background-color: white;
    background-image: url('/cache/files/a67ca0e0ad1471da8486a34f7f95f00f5faf8c79.svg') !important;
    color: #333;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    margin-left: 8vh;
    margin-right: 8vh;
}.c-button-1 {
    display: inline-block;
    border: 1px solid #121212;
    padding: 15px 25px;
    border-radius: 30px;
    color: #121212;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 14px;
   box-shadow: 2px 2px #d10327;
    transition: all 0.6s ease;
text-decoration: none;
}

.c-button-1:hover {
background-color: #d10327;
color: #fff;
    border: 1px solid #d10327;
   box-shadow: 2px 2px #121212;
}


.c-button-2 {
    display: inline-block;
    background-color: #d10327;
    padding: 15px 25px;
    border-radius: 0px 30px 30px 30px;
    color: #fff;
    font-weight: 900;
   box-shadow: 2px 2px #121212;
    transition: all 0.6s ease;
text-decoration: none;
letter-spacing: 1px;
}

.c-button-2:hover {
background-color: #fff;
color: #121212;
}






.c-button-3 {
display: inline-block;
    padding: 12px 18px;
    border-radius: 30px;
    color: #121212;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 12px;
    box-shadow: 3px 3px #121212;
    transition: all 0.6s ease;
    text-decoration: none;
    background-color: #fff;
    width: 180px;
}

.c-button-3:hover {
background-color: #121212;
color: #fff;
   box-shadow: 2px 2px #fff;
}#my-footer {
background: linear-gradient(to bottom, #f1f1f1 0px, #f1f1f1 100px, #ffffff 100px, #ffffff 100%);
position: relative;
}


@media (max-width: 912px) {
#my-footer {
background: #fff;
position: relative;
}
}

.c-footer {
max-width: 90vw;
margin: 0 auto;
    display: flex;
    gap: 4vh;
    justify-content: space-between;
align-items: flex-start;
padding-bottom: 100px;
position: relative;
}

@media (max-width: 912px) {
.c-footer {
gap: 0vh;
max-width: 100%;
flex-direction: column;
align-items: center;
}
}

.c-footer-info-container {
margin-top: 100px;
padding: 5vh;
width: 100%;
}

@media (max-width: 912px) {
.c-footer-info-container {
margin-top: 0px;
}
}

.c-footer-info-line {
display: flex;
gap: 15px;
position: relative;
margin-bottom: 4vh;
}

.c-footer-info-line p{
font-weight: 600;
margin-bottom: 0px;
}

.c-footer-info-line-image {
height: 35px;
width: 35px;
position: relative;
display: flex;
    align-items: center;
    justify-content: center;
min-width: 35px;
}

.c-footer-info-line-image img {
height: 20px;
width: auto;
position: relative;
}

.c-footer-info-line-image:before {
position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    background-color: #121212;
    height: 35px;
    width: 35px;
    border-radius: 80px 0px 80px 80px;
    z-index: 0;
}


.c-logo-social-line {
display: flex;
    gap: 20px;
align-items: flex-start;
    justify-content: space-between;
margin-bottom: 4vh;
}

@media (max-width: 1024px) {
.c-logo-social-line {
align-items: flex-start;
    flex-direction: column;
}
}

@media (max-width: 912px) {
.c-logo-social-line {
    flex-direction: row;
}
}

@media (max-width: 670px) {
.c-logo-social-line {
align-items: flex-start;
    flex-direction: column;
}
}


.c-social-buttons {
display: flex;
gap: 20px;
align-items: center;
margin-top: 60px;
}

@media (max-width: 1024px) {
.c-social-buttons {
margin-top: 0px;
margine-left: 20px;
}
}


.c-social {
height: 55px;
width: 55px;
position: relative;
display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
}

.c-social img{
height: 30px;
width: auto;
position: relative;
}



.c-social:before {
position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    background-color: #d10327;
    height: 55px;
    width: 55px;
    border-radius: 80px 80px 0px 80px;
box-shadow: -2px -2px #121212;
    z-index: 0;
    transition: all 0.6s ease;
}

.c-social:hover {
height: 65px;
width: 65px;
}
.c-social:hover:before {
    height: 65px;
    width: 65px;
}







.c-footer-form-container {
background-color: #121212;
color: #fff;
padding: 6vh;
border-radius : 0px 80px 80px 80px;
box-shadow: 4px 3px #d10327;
}

.c-footer-form-title {
font-size: clamp(1.375rem, 1.046rem + 1.316vw, 2.625rem); /*22-42*/
font-weight: 900;
line-height: 1.1em;
}






/*FORM*/

.contactform {
    padding-bottom: 15px;
    width: 500px;
}

@media (max-width: 600px) {
.contactform {
    width: 100%;
}

}

.contactform input, .contactform textarea {
    width: 100%;
}

.contactform p.notrequired select, .contactform p.notrequired textarea, .contactform p.notrequired input, .contactform p.required select, .contactform p.required textarea, .contactform p.required input {
    padding: 4px;
    font-size: 18px;
    border: 1px solid #ffffff;
    border-radius: 20px;
}



.c-footer-form-container .contactform button {
    margin-top: 2vh;
    display: inline-block;
    padding: 15px;
    background-color: #d10327;
    border: 1px solid #d10327;
    color: white;
    text-decoration: none;
    min-width: 150px;
    text-align: center;
    font-weight: 900;
    font-size: 16px;
    border-radius: 0px 30px 30px 30px;
    box-shadow: 2px 2px #fff;
}

.c-footer-form-container .contactform button:hover {
    background-color: white;
    box-shadow: 2px 2px #d10327;
color: #d10327;
    transition: all 0.6s ease;
}




.contactform button {
    margin-top: 2vh;
    display: inline-block;
    padding: 15px;
    background-color: #d10327;
    border: 1px solid #d10327;
    color: white;
    text-decoration: none;
    min-width: 150px;
    text-align: center;
    font-weight: 900;
    font-size: 16px;
    border-radius: 0px 30px 30px 30px;
    box-shadow: 2px 2px #121212;
}

.contactform button:hover {
    background-color: white;
    box-shadow: 2px 2px #d10327;
color: #d10327;
    transition: all 0.6s ease;
}



div.contactform p.select label {


color: #fff !important;
}

/*END OF FORM*/.c-page-title {
font-size: clamp(2.5rem, 2.336rem + 0.658vw, 3.125rem); /*40-60*/
font-weight: 900;
line-height: 1.1em;
margin-bottom: 15px;
}


.c-page-subtitle {
font-size: 30px;
font-weight: 900;
line-height: 1.1em;
margin-bottom: 15px;
letter-spacing: 2px;
color: #d10327;
}


.c-boxes-list {
list-style-type: none !important;
    padding-left: 0px !important;
    display: flex;
    gap: 4vh;
align-items: flex-start;
    flex-wrap: wrap;
    max-width: 80vw;
    margin: 0 auto !important;
    padding-top: 4vh !important;
}


.c-boxes-list li{
    background: #fff;
    border-radius: 0px 50px 50px;
padding: 30px;
font-size: 1.2em;
width: 33vw;
    box-shadow: 8px 5px 10px #12121236;
}

@media (max-width: 912px) {
.c-boxes-list li{
width: 100%;
}
}


.c-boxes-list li span{
    background-color: #d10327;
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 0px 30px 0px 30px;
    font-size: 22px;
    font-weight: 800;
margin-bottom: 20px;
    box-shadow: 4px 3px #121212;
}





.c-why-us-title {
font-size: clamp(1.25rem, 0.987rem + 1.053vw, 2.25rem); /*20-36*/
font-weight: 900;
line-height: 1.3em;
margin-bottom: 8vh;
position: relative;
}


.c-why-us-title span{
position: relative;
    display: inline-block;
    margin: 0px 10px;
    color: #fff;
    padding: 4px 10px;
}

.c-why-us-title span:before{
position: absolute;
    content: "";
    background-color: #d10327;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 30px 30px 0px 30px;
    z-index: -1;
}


.c-title-container {
text-align: center;
max-width: 780px;
margin: 0 auto;
}.mobile-header {
    height: auto;
    min-height: 88px;
border-radius: 0px 0px 20% 20%;
box-shadow: none;
}

.side-nav__footer {
    box-shadow: none;
    padding: 10px 16px;
}

.side-nav__container {
    width: 95%;
    max-width: 350px;
    border-radius: 0px 20% 20% 0px;
    overflow: hidden;
}

.c-mobile-social-buttons {
display: flex;
gap: 20px;
align-items: center;
margin-bottom: 20px;
}


.c-mobile-social-buttons .c-social {
height: 45px;
width: 45px;
position: relative;
display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease;
}

.c-mobile-social-buttons .c-social img{
height: 20px;
width: auto;
position: relative;
}



.c-mobile-social-buttons .c-social:before {
position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    background-color: #d10327;
    height: 45px;
    width: 45px;
    border-radius: 80px 80px 0px 80px;
box-shadow: -2px -2px #121212;
    z-index: 0;
    transition: all 0.6s ease;
}.notloggedin #topmenu{
position: absolute;
top: 50px;
}

.notloggedin #topbanner{
background-color: transparent;
position: absolute;
top: 0;
}
.notloggedin .c-top-right-info,
.notloggedin #topbanner a{
color: #fff !important;
}


.notloggedin #mobile-header {
    position: absolute;
}

/*INTRO*/

#main-banner {
  position: relative;
  overflow: hidden;
  height: 100vh; 
}


@media (max-width: 912px) {
#main-banner {
  height: 80vh; 
}
}

.c-main-slider {
width: 100%;
    height: 100vh;
}


@media (max-width: 912px) {
.c-main-slider {
    height: 80vh;
}
}


.c-main-slider-bg {
background-size: cover;
    background-position: 50% 50%;
    height: 100vh;
}

@media (max-width: 912px) {
.c-main-slider-bg {
    height: 80vh;
}
}

.c-main-slider .slick-dots {
bottom: 30px !important;
    text-align: left;
    padding-left: 8vh !important;
}

@media (max-width: 700px) {
.c-main-slider .slick-dots {
    text-align: center;
        padding-left: 0px !important;
}
}

.slick-dots li.slick-active button:before {
    color: #ffffff;
}

.slick-dots li button:before {
    font-size: 10px;
    color: #ffffff;
}

.c-main-text {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding: 150px 8vh 20px 8vh;
}

@media (max-width: 912px) {
.c-main-text {
    padding: 150px 4vh 20px 4vh;
}
}

.c-main-title {
font-size: clamp(2rem, 1.097rem + 3.611vw, 6.875rem); /*32-110*/
    font-weight: 900;
    line-height: 1.1em;
    margin-bottom: 20px;
}

.c-main-title span{
font-size: clamp(1.75rem, 1.148rem + 2.407vw, 5rem); /*28-90*/
}

.c-main-subtext {
max-width: 700px;
font-size: 26px;
margin-bottom: 0px;
}


/*END OF INTRO*/





/*SERVICES*/

#services {
position: relative;
}

.c-services-container {
display: flex;
gap: 4vh;
position: relative;
padding: 8vh;
    justify-content: center;
}

@media (max-width: 912px) {
.c-services-container {
padding: 0vh;
flex-direction: column;
}
}

.c-service-banner {
max-height: 100vh;
width: auto;
    position: sticky;
    top: 0px;
}

@media (max-width: 912px) {
.c-service-banner {
display: none;
}
}


.c-service-logo-text {
max-width: 300px;
    height: auto;
}

.c-services-right-column {
padding: 6vh;
    max-width: 900px;
}



.c-service-item {
display: flex;
gap: 30px;
padding-top: 7vh;
position: relative;
}

.c-service-item-no {
    font-weight: 900;
    color: #fff;
    position: relative;
    font-size: 80px;
    width: 120px;
    height: 120px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;}

.c-service-item-no::before {
position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    background-color: #d10327;
    height: 120px;
    width: 120px;
    border-radius: 0px 80px 80px 80px;
    z-index: -1;
    box-shadow: 4px 4px #121212;
}

@media (max-width: 760px) {
.c-service-item-no {
    font-size: 40px;
    width: 60px;
    height: 60px;
}

.c-service-item-no::before {
    height: 60px;
    width: 60px;
}

.c-services-right-column {
    padding: 3vh;
}
}


.c-service-item-text {
max-width: 75%;
}

.c-service-item-title {
font-size: clamp(1.625rem, 1.208rem + 1.667vw, 3.875rem); /*26-62*/
line-height: 1em;
margin-bottom: 5px;
font-weight: 900;
}

.c-service-item-title span {
font-weight: 100;
}


.c-map2 {
height: 120px;
width: auto;
position: absolute;
right: 0;
}


.c-map1 {
width: auto;
position: absolute;
    bottom: -150px;
    height: 180px;
    right: -100px;
}

@media (max-width: 912px) {
.c-map1 {
    right: -45px;
}
}

@media (max-width: 760px) {
.c-map2 {
height: 100px;
    right: -40px;
    top: -10px;
}

.c-map1 {
    bottom: -80px;
    height: 100px;
    right: -30px;
}



}




/*END OF SERVICES*/



/*CATEGORIES*/

#categories {
padding: 8vh 2vh;
}

.c-categories-intro-title {
font-size: clamp(1.375rem, 1.074rem + 1.204vw, 3rem); /*22-48*/
    font-weight: 900;
    text-align: center;
    line-height: 1.2em;
    margin-bottom: 5px;
}


.c-categories-intro-subtext{
    text-align: center;
}


.c-categories-container {
display: flex;
gap: 4vh;
justify-content: space-around;
padding: 8vh 0px;
}

@media (max-width: 1024px) {
.c-categories-container {
gap: 10vh;
flex-wrap: wrap;
}
}

@media (max-width: 912px) {
.c-categories-container {
gap: 4vh;
}
}



.c-category {
display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}


.c-category-banner {
display: flex;
    gap: 0px;
align-items: center;
    justify-content: center;
position: relative;
width: 20vw;
}

@media (max-width: 912px) {
.c-category-banner {
width: 40vw;
}
}

@media (max-width: 700px) {
.c-category-banner {
width: 80vw;
}
}



.c-category-banner:before {
    content: "";
    background-color: #d10327;
    height: 350px;
    width: 350px;
    z-index: 0;
    position: absolute;
}

.c-banner1:before {
border-radius: 42% 58% 70% 30% / 35% 45% 85% 55%;
  animation: morph1 10s ease-in-out infinite;
  animation-delay: 0s;
}

.c-banner2:before {
  border-radius: 80% 50% 20% 40% / 20% 50% 60% 20%;
  animation: morph2 12s ease-out infinite;
  animation-delay: 0s;
}


.c-banner3:before {
  border-radius: 20% 30% 80% 50% / 10% 40% 90% 60%;
  animation: morph3 14s linear infinite;
  animation-delay: 0s;
}


.c-banner4:before {
  border-radius: 70% 60% 40% 20% / 35% 60% 90% 50%;
  animation: morph4 16s ease-in infinite;
  animation-delay: 0s;
}


@keyframes morph1 {
  0%, 100% {
    border-radius: 30% 70% 40% 60% / 60% 50% 80% 40%;
    transform: translate3d(0, 0, 0);
  }
  50% {
    border-radius: 70% 20% 90% 40% / 50% 30% 60% 80%;
    transform: translate3d(20px, -20px, 0);
  }
}

@keyframes morph2 {
  0%, 100% {
    border-radius: 40% 60% 30% 50% / 50% 70% 40% 60%;
    transform: translate3d(0, 0, 0);
  }
  50% {
    border-radius: 90% 40% 20% 70% / 80% 30% 50% 40%;
    transform: translate3d(-20px, 20px, 0);
  }
}

@keyframes morph3 {
  0%, 100% {
    border-radius: 20% 50% 80% 60% / 10% 30% 70% 90%;
    transform: translate3d(0, 0, 0);
  }
  50% {
    border-radius: 80% 30% 70% 40% / 60% 90% 50% 30%;
    transform: translate3d(10px, 10px, 0);
  }
}

@keyframes morph4 {
  0%, 100% {
    border-radius: 30% 70% 40% 60% / 60% 50% 80% 40%;
    transform: translate3d(0, 0, 0);
  }
  50% {
    border-radius: 70% 20% 90% 40% / 50% 30% 60% 80%;
    transform: translate3d(-10px, -10px, 0);
  }
}




/* Εφαρμογή writing-mode σε browsers που το υποστηρίζουν */
@supports (writing-mode: sideways-lr) {
    .c-category-banner p {
        position: relative;
        line-height: 1em;
        margin: 0px;
        color: #f1f1f1;
        font-weight: 900;
        letter-spacing: 4px;
        font-size: 55px;
        writing-mode: sideways-lr;
        white-space: nowrap;
    }
}

/* Εφαρμογή display: none σε browsers που δεν το υποστηρίζουν */
@supports not (writing-mode: sideways-lr) {
    .c-category-banner p {
        display: none;
    }
}

.c-category-banner p span{
font-size: 34px;
        letter-spacing: 1px;
}

.c-category-banner img{
    height: 460px;
    width: auto;
position: relative;
}

@media (max-width: 700px) {
.c-category-banner img{
height: 50vh;
width: auto;
}
}

.c-category-title {
    font-weight: 900;
    font-size: 1.4em;
    text-align: center;
    line-height: 1.2em;
    max-width: 280px;
margin-bottom:0px;
}






/*END OF CATEGORIES*/





/*CIRCLE WAVES*/

.c-circle-wave-white-1 {
  position: absolute;
  top: -10vw;
  left: -10vw;
  background-color: #fff;
  height: 55vw;
  width: 55vw;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  will-change: transform, opacity;
  animation: morph 10s linear infinite;
  opacity: 1;
  z-index: -1;
}

.c-circle-wave-white-2 {
  position: absolute;
  bottom: -10vw;
  right: -25vw;
  background-color: #fff;
  height: 50vw;
  width: 50vw;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  will-change: transform, opacity;
  animation: morph 10s linear infinite;
  opacity: 1;
  z-index: 0;
}

@keyframes morph {
  0%, 100% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0, 0, 0);
  }
  34% {
    border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform: translate3d(0, 5px, 0);
  }
  50% {
    opacity: 0.89;
  }
  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    transform: translate3d(0, -3px, 0);
  }
}



/*END OF CIRCLE WAVES*/





/*METRICS*/
.c-metrics-container {
  position: relative;
  padding: 12vh 5vw;
  background-color: #121212;
  color: #fff;
border-radius: 10% 60% 60% 60% / 10% 10% 10% 10%;
animation: subtleMorph 8s ease-in-out infinite;
display: flex;
    justify-content: space-around;
    gap: 4vh;
}


@media (max-width: 912px) {
.c-metrics-container {
flex-wrap: wrap;
}
}

@keyframes subtleMorph {
  0%, 100% {
    border-radius: 10% 60% 60% 60% / 10% 10% 10% 10%;
  }
  50% {
    border-radius: 24% 40% 75% 5% / 15% 15% 8% 12%;
  }
}


.c-metric-item {

}

@media (max-width: 912px) {
.c-metric-item {
width: 40%;
}
}


.c-metric-img {
position: relative;
    height: 110px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-metric-img:before{
 content: "";
    background-color: #d10327;
    height: 100px;
    width: 100px;
    z-index: 0;
    position: absolute;
border-radius: 80px 80px 80px 0px;
box-shadow: 3px -1px #f1f1f1;
}

.c-metric-img img{
height: 70px;
width: auto;
position: relative;
}

.c-metrics-small-title {
margin-bottom: 0px;
    font-weight: 100;
margin-top: 10px;
}

.c-metrics-title {
font-size: clamp(2rem, 1.046rem + 3.816vw, 5.625rem); /*32-90*/
    margin-bottom: 0px;
    line-height: 1em;
    font-weight: 900;
}


.c-metrics-text {
margin-bottom: 0px;
    font-size: 28px;
    max-width: 150px;
    line-height: 1.2em;
    font-weight: 100;
}

@media (max-width: 500px) {
.c-metrics-text {
    font-size: 22px;
}
}

/*END OF METRICS*/


/*CUSTOMERS*/
#customers {
padding: 10vh 5vh;
}

@media (max-width: 912px) {
#customers {
padding: 10vh 0vh 4vh 0vh;
}

}

.c-customers-container {
max-width: 1480px;
margin: 0 auto;
border-radius: 20% / 70%;
padding: 5vh;
background-color: #fff;
box-shadow: 3px 4px #d10327;
margin-top: 6vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@media (max-width: 912px) {
.c-customers-container {
border-radius: 20%;
padding: 2vh;
}
}


@media (max-width: 600px) {
.c-customers-container {
border-radius: 60px;
padding: 2vh;
}
}



.c-customers-container img{
max-width: 120px;
height: auto;
margin: 20px;
}


@media (max-width: 700px) {
.c-customers-container img{
max-width: 110px;
height: auto;
margin: 15px;
}

}

/*END OF CUSTOMERS*/.c-espa-container {

}

.c-espa-container .c-close-espa {
cursor: pointer;
}

.c-espa-container.active-espa {
    position: fixed;
    max-width: auto;
    right: 2%;
    bottom: 2%;
    z-index: 999;
transform: scale(1);
}

.c-espa-container.active-espa .c-espa-mini {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
opacity: 0;
transition: 0.5s;
transition: opacity 0s;
width: 100%;
}


.c-espa-container.active-espa .c-espa-mini img {
    width: 90px;
    height: auto;
transition: 0.5s;
    overflow: hidden;
    border-radius: 50%;
}

.c-espa-container.active-espa .c-espa-box {
    background-color: #d10327;
text-align: center;
box-shadow: -3px -3px #fff;
    transition: 0.5s;
    transition: border-radius 0s;
    width: 300px;
    overflow: hidden;
    height: 222px;
    position: relative;
    z-index: 3;
    border-radius: 20% 20% 0px 20%;
    padding: 30px;
}



.c-espa-container.active-espa .c-close-espa {
    position: absolute;
    right: 0px;
    top: -18px;
    background-color: #121212;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 30%);
transition: 0.5s;
z-index: 90;
}

.c-espa-container.active-espa .c-linetop {
    position: absolute;
    width: 15px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background-color: white;
transition: 0.5s;
}

.c-espa-container.active-espa .c-linebottom {
    position: absolute;
    width: 15px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: white;
transition: 0.5s;
}

.c-espa-container.active-espa p {
width: 90%;
margin: auto;
}

.c-espa-container.active-espa p, .c-espa-container.active-espa a {
opacity: 1;
transition: 0.5s;
}


/* DECTIVATE */

.c-espa-container.deactive-espa {
    position: fixed;
    max-width: auto;
    right: 3%;
    bottom: 3%;
z-index: 999;
transition: 0.5s;
transform: scale(1);
}

.c-espa-container.deactive-espa .c-espa-mini {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
opacity: 1;
width: 100%;
}

.c-espa-container.deactive-espa .c-espa-mini img {
    width: 100%;
    height: auto;
    transition: 0.5s;
    overflow: hidden;
    border-radius: 50%;
}

.c-espa-container.deactive-espa .c-espa-box {
    background-color: #d10327;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
    border-radius: 50% 50% 0 50%;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
    transition: 0.5s;
    transition: border-radius 0s;
    height: 100px;
    width: 100px;
overflow: hidden;
}


.c-espa-container.deactive-espa .c-close-espa {
    position: absolute;
    right: 0px;
    top: -15px;
    background-color: #121212;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 30%);
transition: 0.5s;
z-index: 90;
}

.c-espa-container.deactive-espa .c-linetop {
    position: absolute;
    width: 15px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    background-color: white;
transition: 0.5s;
}

.c-espa-container.deactive-espa .c-linebottom {
    position: absolute;
    width: 15px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: white;
transition: 0.5s;
}

.c-espa-container.deactive-espa p, .c-espa-container.deactive-espa a {
opacity: 0;
transition: 0.5s;
}




.c-espa-container.active-espa .c-espa-box img {
width: auto;
height: 45px;
opacity: 1;
transition: 0.5s;
transition: opacity 0s;
}

.c-espa-container.deactive-espa .c-espa-box img {
width: auto;
height: 100%;
opacity: 0;
transition: 0.5s;
transition: opacity 0s;
}


@media (max-width: 680px) {

.c-espa-container.active-espa {
transform: scale(0.5);
    right: 2vh;
    bottom: 2vh;
transform-origin: bottom right;
}

.c-espa-container.deactive-espa {
transform: scale(0.5);
transform-origin: bottom right;
}

.c-espa-container.active-espa .c-espa-box {
height: 100%;
}

.c-espa-container.active-espa .c-espa-box img {
width: auto;
height: 100%;
}

}


.c-pop-up-text {
    color: White;
    display: flex;
    flex-direction: column;
    gap: 20px;
align-items: center;
}

.c-pop-up-text p{
font-size: 1.2em;
line-height: 1.4em;
font-weight: 900;
padding-top: 20px;
}