/* @import url('./fonts.css'); */

:root{
    --colorBg : #fff;
    --colorSec : #F6F6F6;
    --colorText: #C32C38;
    --colorRed : #B13435;

    --wrapperWidth : 1728px;
    --wrapperWidthSm : 1508px;
    --wrapperWidthLg : 1842px;
    --wrapperWidthXs : 1192px;
    --wrapperText : 1480px;

    --singleWidth : 900px;
    --pageWidth : 777px;
    --innerWidth : 700px;
    --boxWidth: 950px;

    --padding: 3rem;
    --mobilePadding : 24px;

    --leftSpace: clamp(2rem, 6vw, 110px); 

    /* filters */
    --filterRed : invert(22%) sepia(48%) saturate(3559%) hue-rotate(336deg) brightness(96%) contrast(91%);
}

@media screen and (max-width: 1420px) {
    :root{
        --padding : 2rem;
    }
}
@media screen and (max-width: 1080px) {
    :root{
        --leftSpace : 2rem;
    }
}
@media screen and (max-width: 680px) {
    :root{
        --padding : var(--mobilePadding);
        --leftSpace : var(--mobilePadding);
    }
}


.invert-color{
    --colorBg : #C32C38;
    --colorText : #fff;
}

body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote, figure{
    margin:0;
    padding:0;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6{
    text-wrap: balance;
}

p, li{
    text-wrap: pretty;
}

body{
    font-family: "Manrope", sans-serif;
    position: relative;
    max-width: 2500px;
    margin:0 auto;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    /* color: var(--colorText); */
    background-color: var(--colorBg);
    color: var(--colorText);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

img{
    max-width: 100%;
    height: auto;
    display: block;
}

a{
    text-decoration: none;
    color: inherit;
}

ul, ol{
    list-style: none;
}

ul.flex > li:last-of-type{
    margin-right: 0!important;
}
ul.flex.col > li:last-of-type{
    margin-bottom: 0!important;
}
ul.flex.border > li{
    border-right: 1px solid #000;
}
ul.flex.border > li:last-of-type{
    border-right: 0!important;
}
ul.flex.col.border > li{
    border-bottom: 1px solid #000;;
}
ul.flex.col.border > li:last-of-type{
    border-bottom: 0!important;
}

input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
    outline: none;
    background-color: transparent;
}

.hidden{display: none;}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

address{
    font-style: normal;
}
address > span{
    display: block;
}

html {
    scroll-behavior: smooth;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}


/*  containers */

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex.col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.flex.centered{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.flex.col-2 > div{
    width: 50%;
}

@media screen and (max-width: 1180px) { 
    .flex.col-2{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .flex.col-2 > div{
        width: 100%;
    }
    .flex.col-2.full{
        min-height: unset;
    }
}

/* grids */

.grid{display: -ms-grid;display: grid;}
.gr-2{grid-template-columns: repeat(2, 1fr);}
.gr-3{grid-template-columns: repeat(3, 1fr);}
.gr-4{grid-template-columns: repeat(4, 1fr);}
.gr-5{grid-template-columns: repeat(5, 1fr);}
.gr-6{grid-template-columns: repeat(6, 1fr);}


@media screen and (max-width: 1420px) {
    .gr-4{grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width: 1140px) {
    .gr-4,.gr-3{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 680px) {
    .gr-3{display: block;}
}
/*  general */


/*  κλείδωμα του scroll στο background
    σε περίπτωση που έχουμε ένα στοιχείο
    που καλύπτει όλη την οθόνη */
.stop-scrolling {
    height: 100%;
    overflow: hidden;
}
    
    
    
/*  κεντράρισμα εικόνας*/
.img-center{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
    
    
/*  κρύψιμο οριζόντιας μπάρας κύλισης*/
.scrollbar-hide{
    overflow-x: scroll;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.auto{ margin-inline: auto;}

.full{min-height: 100dvh;}

.full:has(.box-full){
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-block: 3rem;
}
.full:has(.bg-img){
    max-height: 100dvh;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (max-width: 880px) { 
    .ms-scroll-hide{
        overflow-x: scroll;
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;    
    }
    .ms-scroll-hide::-webkit-scrollbar {
        display: none;
    }
}
@media screen and (max-width: 750px) { 
    .tab-scroll-hide{
        overflow-x: scroll;
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;    
    }
    .tab-scroll-hide::-webkit-scrollbar {
        display: none;
    }
}

.scrollbar-hide > div{
    scroll-snap-align: start;
    scroll-margin-inline: var(--mobilePadding);
}

.pntr{cursor: pointer;}


/* layout */

.wrapper{
    margin-inline: auto;
    padding-inline: 3rem; 
    max-width: var(--wrapperWidth);
}
.wrapper.wide{
    margin-inline: auto;
    padding-inline: 4rem 5rem; 
    max-width: 1920px;
}

.wrapper.text-wrapper{max-width: 919px;}
.wrapper.text-wrapper.sm{max-width: 845px;}


.wrapper.xl{max-width: 1920px;}
.wrapper.lg{max-width: var(--wrapperWidthLg);}
.wrapper.ml{max-width: var(--wrapperWidthMl);}
.wrapper.md{max-width: var(--wrapperWidthMd)}
.wrapper.sm{max-width: var(--wrapperWidthSm);}
.wrapper.xs{max-width: var(--wrapperWidthXs);}

.wrapper.pd-rl{padding-inline: 2.5rem 3.5rem; }

@media screen and (max-width: 1720px) { 
    .wrapper.wide{padding-inline: 3rem;}
}
@media screen and (max-width: 1450px) { 
    .wrapper.wide,
    .wrapper.pd-rl,
    .wrapper{padding-inline: 2rem;}
}
@media screen and (max-width: 680px) { 
    .wrapper.pd-rl{padding-inline: 1.5rem; }
    .wrapper.wide,
    .wrapper{padding-inline: var(--mobilePadding);}
}

@media screen and (max-width: 520px) { 
    .wrapper.mob-sm{padding-inline: 1rem;}
}

/* texts */


.text-wrapper{
    font-size: 18px;
    line-height: 35px;    
}

.text-wrapper h3{
    font-size: 25px;
    line-height: 38px;
    font-weight: 600;
}
.text-wrapper h4{
    font-size: 18px;
    font-weight: 400;
}

.text-wrapper h3, 
.text-wrapper h4{
    margin-bottom: 0;
}


.text-wrapper ul,
.text-wrapper p{
    margin-bottom: 2rem;
}

.text-wrapper > *:last-child{
    margin-bottom: 0;
}

@media screen and (max-width: 720px) { 
    .text-wrapper h4,
    .text-wrapper{
        font-size: 16px;
        line-height: 26px;    
    }
    .text-wrapper h3{
        font-size: 20px;
        line-height: 31px;
    }
}


/* headers */

.section-header{
    position: relative;
    opacity: 0;
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.section-header.on{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

.section-header.ln{
    border-bottom:  1px solid;
}

.section-header > h2{
    font-weight: 200;
}
/* .section-header > :is(h2, div){
    max-width: 677px;
} */

.section-header.flex{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 42px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.section-header.flex.end{
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}
.section-header.center{
    text-align: center;
}

.section-header h2{font-size: 60px;}
.section-header h2.lg{font-size: 60px;}
.section-header h2.xl{font-size: 80px;}
.section-header h2.md{font-size: 40px;}
.section-header h2.sm{font-size: 30px;}

.section-header h2.bd{font-weight: 500;}


.section-header .header-lead{
    font-size: 18px;
    line-height: 33px;
    margin-top: 11px;   
    width: 100%; 
}

.section-header.cntr{text-align: center;}

.section-header h2 span{
    display: block;
}


@media screen and (max-width: 1520px) { 
    .section-header h2.xl{font-size: 70px;}
}
@media screen and (max-width: 1320px) { 
    .section-header h2.xl,
    .section-header h2.lg{font-size: 60px;}
}
@media screen and (max-width: 920px) { 
    .section-header h2.xl,
    .section-header h2.lg{font-size: 50px;}
    .section-header h2.sm,
    .section-header h2.md{font-size: 32px;}
}
@media screen and (max-width: 620px) { 
    .section-header h2.xl,
    .section-header h2.lg{font-size: 45px;}
    .section-header h2.sm{font-size: 25px;}
    .section-header h2.md{font-size: 25px;}

    .section-header.center{text-align: left;}
}

@media screen and (max-width: 520px) { 
    .section-header span{display: block;}
    .section-header.mob-center{text-align: center;}
}

@media screen and (max-width: 380px) { 
    .section-header h2.xl,
    .section-header h2.lg{font-size: 40px;}
}


/* buttons */

.btn{
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 2.4px;
    padding: 12px 30px;
    text-align: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    font-weight: 600;
    background-color: var(--colorBg);
    color: var(--colorText);
    border-radius: 50px;
}


.btn.invert{
    background-color: var(--colorRed);
    color: var(--colorBg);
}

/* card */

.card{
    font-size: 15px;
    line-height: 24px;
}

.card.row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.card.row.full{
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.card.row > div{
    -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
}

.card--info{
    /* padding: 16px 13px 24px; */
    /* background-color: #fff; */
    margin-top: 20px;
}

.card.row .card--info{
    padding: 2.5rem;
    /* height: 100%; */
}
.card.row.full .card--info{
    padding: 22px 16px 24px 20px;
}

.card--image{
    aspect-ratio: 1.49;
    overflow: hidden;
}

.card.row .card--image{
    height: 100%;
}

.card--title{
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 21px;
}

.card--lead{
    margin-bottom: 21px;
}


.card--details{
    font-size: 15px;
    margin-bottom: 17px;
}

.card--more{
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.75px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.card--more .icon{
    width: 22px;   
    -webkit-filter: var(--filterRed);   
            filter: var(--filterRed); 
    -webkit-transform: scaleX(-1); 
        -ms-transform: scaleX(-1); 
            transform: scaleX(-1);
}

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

}

@media screen and (max-width: 920px) { 
    .card--details{
        margin-bottom : 12px;
    }
}
@media screen and (max-width: 720px) { 

}

@media screen and (max-width: 520px) {
    .card--info{
        margin-top: 15px;
    }
    .card--details{
        margin-bottom : 9px;
    }
    .card--title{
        margin-bottom: 14px;
    }
    .card--lead{
        margin-bottom: 15px;
    }
}

/* product */

.product{
    border: 1px solid var(--colorRed);  
    padding:  65px 28px 26px; 
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.product--title{
    font-size: 20px;
    line-height: 25px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
}
.product--more{
    font-size: 12px;
    letter-spacing: 2.4px;
    font-weight: 600;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    margin-top: auto;
}

.product--image{
    margin-bottom: 19px;
}

@media screen and (max-width: 920px) {
    .product{
        padding: 2rem 15px;
    }
}
@media screen and (max-width: 620px) {
    .product--title{
        font-size: 16px;
        line-height: 20px;
    }
}
@media screen and (max-width: 520px) {
    .product{
        padding: 15px 8px;
    }
    .product--more{
        font-size: 10px;
        letter-spacing: 2px;
    }
}

/* panel */
.panel{
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

.menu-on .panel{
    pointer-events: all;
    opacity: 1;
}

/* Position του search icon δίπλα στο menu button */
.search-icon {
    margin-left: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.search-icon img {
    width: 20px;
    height: 20px;
}

/* Αρχικά κρυφό */
.search-form-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Όταν ενεργοποιείται */
.search-form-wrapper.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

/* Search form */
.searchform {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 500px;
    width: 90%;
}

.searchform input[type="text"] {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    border: none;
    outline: none;
    border-radius: 4px;
}

.searchform button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
}

.searchform button img {
    width: 20px;
    height: 20px;
}

/* Close button */
.close-search {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 28px;
    color: white;
    cursor: pointer;
    font-weight: bold;
}

/* bg-img */

.bg-img{
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}
.bg-img::before{
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.3);
}

/* reveal animations */

.anim{
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transition-delay: var(--delay);
         -o-transition-delay: var(--delay);
            transition-delay: var(--delay);
    opacity: 0;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}
.anim.an-op{
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}
.anim.an-r{
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
}
.anim.an-up{
    -webkit-transform: translate(0, 50%);
        -ms-transform: translate(0, 50%);
            transform: translate(0, 50%);
}

.anim.on{
    opacity: 1;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);    
}

/* image right grid */

.grid-img-right{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: clamp(300px, 40%, 860px) 1fr;
    grid-template-columns: clamp(300px, 40%, 860px) 1fr;
    background-color: var(--colorRed);
    color: var(--colorBg);
}


.grid-img-right .grid--image{
    -ms-grid-column:  2;
    -ms-grid-column-span:  1;
    grid-column:  2 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    /* min-width: 700px; */
}
.grid-img-right .grid--title{
    -ms-grid-column:  1;
    -ms-grid-column-span:  1;
    grid-column:  1 / 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    font-size: 80px;
    line-height: 100px;
    -ms-grid-row-align: end;
        align-self: end;
    font-weight: 200;
    padding-inline: var(--leftSpace) calc(var(--leftSpace) + 2rem);
    margin-bottom: 74px;
}
.grid-img-right .grid--text{
    -ms-grid-column:  2;
    -ms-grid-column-span:  1;
    grid-column:  2 / 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;
    max-width: 852px;
    padding: clamp(64px, 8vw, 116px) 2rem clamp(60px, 8.5vw, 129px) 0;
}


.grid-img-right .grid--text p{
    font-size: 20px;
    line-height: 36px;
    font-weight: 200;
    margin-bottom: 2rem;
}

.grid-img-right .grid--text > *:last-child{
    margin-bottom: 0;
}

@media screen and (max-width: 1520px) {
    .grid-img-right .grid--title{
        font-size: 62px;
        line-height: 80px;
        margin-bottom: 3.25rem;
        padding-inline: var(--leftSpace);
    }
}
@media screen and (max-width: 1280px) {
    .grid-img-right .grid--title{
        font-size: 50px;
        line-height: 65px;
        margin-bottom: 2rem;
    }
}
@media screen and (max-width: 860px) {
    .grid-img-right{
        -ms-grid-columns: 21% 1fr;
        grid-template-columns: 21% 1fr;
        padding-top: 92px;
    }
    .grid-img-right .grid--title{
        grid-column: 1 / -1;
        padding-bottom: 70px;
        margin-bottom: 0;
    }
    .grid-img-right .grid--image{
        -ms-grid-row : 2;
        -ms-grid-row-span : 1;
        grid-row : 2 / 3;
        min-height: 435px;
    }
    .grid-img-right .grid--text{
        -ms-grid-row : 3;
        -ms-grid-row-span : 1;
        grid-row : 3 / 4;
        grid-column: 1 / -1;
        padding-inline: var(--mobilePadding);
    }
}
@media screen and (max-width: 820px) {
    .grid-img-right .grid--title{
        font-size: 45px;
        line-height: 56px;
    }
}

/* text */

.text-top{
    max-width: var(--innerWidth);
    padding-inline: 17px;
    font-size: 20px;
    line-height: 40px;
    position: relative;
}

.text-top::before{
    content:  "";
    /* height: 80%; */
    /* max-height: 466px; */
    border-left: 1px solid var(--colorRed);
    position: absolute;
    left: 0; top: 0;
    height: 100%;
}

.text-top > *{
    max-width: var(--innerWidth);
    margin-inline: auto;
    padding-inline: 17px;
    font-size: 20px;
    line-height: 40px;
}
.text-top h2{
    font-size: 33px;
    font-weight: 200;    
}
.text-top > *:not(:last-child){
    margin-bottom: 2.5rem;
}

.text-top > * :is(li, b){
    font-weight: 600;
}

.text-top  ul > li{
    position: relative;
}
.text-top  ul > li::before{
    content:  "-";
    margin-right: 1ch;
}

.text-top > img{
    max-width: 100%;
}

.text-full{
    max-width: var(--boxWidth);
    padding-inline: 2rem;
    font-size: 25px;
    line-height: 49px;
}

.text-full h2{
    font-size: 20px;
    margin-bottom: 32px;
}

.text-full p{
    margin-bottom: 2.5rem;
}
.txt-img{
    z-index: 2;
    position: relative;
    background-color: transparent;
    max-width: 615px;
    font-size: 20px;
    line-height: 40px;
    margin: auto 0 58px var(--leftSpace);
}
.txt-img > *{
    color: var(--colorBg);
    font-weight: 200;
}
.txt-img h2{
    font-size: 60px;
    line-height: 70px;
    margin-bottom: 29px;
    max-width: 500px;
    font-weight: 200;
}

@media screen and (max-width: 1320px) {
    .txt-img h2{
        font-size: 50px;
        line-height: 60px;
    }
    
}
@media screen and (max-width: 1020px) {
    .txt-img{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        height: inherit;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin: 0;
        padding-block: clamp(57px, 8vw, 100px);
        line-height: 25px;
        font-size: 20px;
        padding-inline: var(--padding);
    }
    .txt-img h2{
        font-size: 45px;
        line-height: 55px;
        margin-bottom: 0;
    }
    .text-top > *:not(:last-child){
        margin-bottom: 2rem;
    }
    .text-full{
        line-height: 35px;
    }
}

@media screen and (max-width: 620px) {
    .txt-img h2{
        font-size: 35px;
        line-height: 45px;
    }
    .text-top h2{
        font-size: 25px;
        line-height: 35px;
        margin-bottom: 29px;
    }
    .text-full{
        padding-inline: var(--mobilePadding);
    }
}
@media screen and (max-width: 580px) {
    .text-top > *,
    .text-top{
        padding-inline: 0;
    }
    .text-top::before{
        display: none;
    }
}

/* newsletter */

.newsletter{
    background-color: var(--colorSec);
    padding-block: clamp(68px, 7.5vw,  140px) clamp(45px, 7vw, 140px);
    --bottomSpace: 16px;
}

.newsletter-header{
    font-size: 15px;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 23px;
}

.newsletter-wrapper{
    padding-bottom: 18px;   
    border-bottom: 1px solid var(--colorRed); 
    gap: 3rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}
.newsletter-form{
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: 920px;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.newsletter-title{
    font-size: 40px;
    line-height: 50px;    
    max-width: 453px;
    padding-bottom: var(--bottomSpace);
}

.newsletter-form input[type="email"] {
  padding: 15px 2rem var(--bottomSpace);
  font-size: 16px;
  line-height: 22px;
  color: var(--colorRed);
  width: 100%;
  max-width: 618px;
  font-family: "Manrope", sans-serif;
  background-color: transparent;
  border: none;
  outline: none;
}
.newsletter-form > input[type="email"]::-webkit-input-placeholder{
    font-size: 14px;
    line-height: 55px;
    color: var(--colorRed);
    opacity: 0.5;
    font-family: "Manrope", sans-serif;
}
.newsletter-form > input[type="email"]::-moz-placeholder{
    font-size: 14px;
    line-height: 55px;
    color: var(--colorRed);
    opacity: 0.5;
    font-family: "Manrope", sans-serif;
}
.newsletter-form > input[type="email"]:-ms-input-placeholder{
    font-size: 14px;
    line-height: 55px;
    color: var(--colorRed);
    opacity: 0.5;
    font-family: "Manrope", sans-serif;
}
.newsletter-form > input[type="email"]::-ms-input-placeholder{
    font-size: 14px;
    line-height: 55px;
    color: var(--colorRed);
    opacity: 0.5;
    font-family: "Manrope", sans-serif;
}

input.newsletter-input::placeholder {
  font-size: 14px;
  line-height: 55px;
  color: var(--colorRed);
  opacity: 0.5;
  background-color: transparent;
}
/*
.newsletter-submit2{
    font-size: 12px;
    letter-spacing: 2.4px;
    font-weight: 600;
    position: relative;
    cursor: pointer;
    margin-inline: 2rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: var(--bottomSpace) 1rem;
}
    */
.newsletter-submit {
  background: none;
  border: none;
  color: var(--colorRed);
  font-size: 12px;
  letter-spacing: 2.4px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  position: relative;
    cursor: pointer;
    margin-inline: 2rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: var(--bottomSpace) 1rem;
}

.newsletter-footer{
    font-size: 50px;
    line-height: 60px;
    margin-top: 6rem;
}

.newsletter-footer span{
    display: block;
}

@media screen and (max-width: 1380px) {
    .newsletter-title{
        font-size: 35px;
        line-height: 45px;    
    }
    .newsletter-submit{
        margin-inline: 1rem;
    }
    .newsletter-footer{
        font-size: 45px;
        line-height: 55px;
    }
}
@media screen and (max-width: 1120px) {
    .newsletter-title{
        font-size: 30px;
        line-height: 35px;    
        max-width: 350px;
    }
    .newsletter-footer{
        font-size: 40px;
        line-height: 45px;
    }
}
@media screen and (max-width: 920px) {
    .newsletter-wrapper{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        gap: 0;
    }
    .newsletter-form{
        width: 100%;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .newsletter-form > input[type="email"]{
        padding-left: 1rem;
    }
}

@media screen and (max-width: 820px) {
    .newsletter-footer{
        font-size: 35px;
        line-height: 40px;
        margin-top: 4rem;
    }
    .newsletter-footer span{
        text-wrap: auto;
    }
}
@media screen and (max-width: 520px) {
    .newsletter-form{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: end;
    }
    .newsletter-form > input[type="email"]{
        padding-left: 12px;
        border-bottom: 1px solid var(--colorRed);
    }
    .newsletter-wrapper{
        padding-bottom: 0;
        border: none;
    }
    .newsletter-title{    
        max-width: 270px;
        text-wrap: unset;
    }
    .newsletter-title p{    
        text-wrap: unset;
    }
    .newsletter-footer{
        font-size: 32px;
        margin-top: 2rem;
    }
}
/* socials */

.social.icon{
    width: 23px;
    -webkit-filter: var(--filterRed);
            filter: var(--filterRed);
}
.social.icon.sm{
    width: 16px;
}
.social.invert{
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
}