/* home */
/* home hero */

.hero{
    position: relative;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100dvw;
    height: 100dvh;
}

.hero-nav{
    position: absolute;
    left: 0; top: 0;
    width: 100%;
}

.hero-title{
    font-size: 90px;
    line-height: 100px;
    margin-bottom: 9px;
    text-wrap: initial;
}

.hero-subtitle{
    font-size: 25px;
    margin-bottom: 83px;
}

.hero .antico-logo{
    margin-bottom: 36px;
    width: 181px;
}

.hero-info{
    position: relative;
    z-index: 2;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 1400px;
    padding-inline: 2rem;
    color: var(--colorBg);
    text-align: center;
}
@media screen and (max-width: 1520px) {
    .hero-title{
        font-size: 75px;
        line-height: 85px;
    }
}
@media screen and (max-width: 1180px) {
    .hero-title{
        font-size: 65px;
        line-height: 75px;
    }
}
@media screen and (max-width: 1020px) {
    .hero-title{
        font-size: 60px;
        line-height: 70px;
    }
}
@media screen and (max-width: 820px) {
    .hero-subtitle{
        margin-bottom: 35px;
    }
    .hero-title{
        font-size: 50px;
        line-height: 60px;
    }
    .hero .antico-logo{
        margin-bottom: 57px;
    }
}
@media screen and (max-width: 620px) {
    .hero-info{
        padding-inline: 1rem;
    }
    .hero-title{
        font-size: 45px;
        line-height: 50px;
        margin-bottom: 18px;
    }
    .hero .antico-logo{
        width: 150px;
    }
}

@media screen and (max-width: 520px) {
    .hero-info{
        padding-inline: 1rem;
    }
    .hero-title{
        font-size: 40px;
        line-height: 45px;
    }
}
@media screen and (max-width: 440px) {
    .hero-info{
        padding-inline: 1rem;
    }
    .hero-title{
        font-size: 32px;
        line-height: 38px;
    }
    .hero-subtitle{
        font-size: 22px;
    }
}

@media screen and (max-height: 760px) {
    .hero {
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: end;
    }
    .hero-info{
        margin-bottom: 2rem;
    }
    .hero-subtitle{
        margin-bottom : 2rem;
    }
}

@media screen and (max-height: 640px) {
    .hero-title{
        font-size: 50px;
        line-height: 60px;
        margin-bottom: 18px;
    }
    .hero .antico-logo{
        width: 120px;
        margin-bottom: 1rem;
    }
    .hero-info{
        margin-bottom: 4rem;
    }
}
@media screen and (max-height: 530px) {
    .hero{
        min-height: 100dvh;
        height: auto;
    }
    .hero-info{
        padding-top: 170px;
    }
}

@media screen and (max-width: 1650px) {
    .home .grid-img-right .grid--title {
        font-size: 62px;
        line-height: 80px;
        margin-bottom: 3.25rem;
    }
}

@media screen and (max-width: 1280px) {
    .home .grid-img-right .grid--title {
        font-size: 50px;
        line-height: 65px;
        margin-bottom: 2rem;
    }
}
/* home company*/


.home .grid-img-right{
    -ms-grid-columns: clamp(300px, 35%, 648px) 1fr;
    grid-template-columns: clamp(300px, 35%, 648px) 1fr;
}
.home .grid-img-right .grid--image{
    height: 100dvh;
}
.home .grid-img-right .grid--title{
    padding-inline:  var(--leftSpace);
}
.home .grid-img-right .grid--text{
    max-width: 920px;
}

.home .grid-img-right .grid--text p{
    font-size: 35px;
    line-height: 200%;
}

@media screen and (max-width: 920px) {
    .home .grid-img-right{
        -ms-grid-columns: 21% 1fr;
        grid-template-columns: 21% 1fr;
    }
    .home .grid-img-right .grid--title{
        grid-column : 1 / -1;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        grid-row: 1 / 2;
        margin-bottom: 0;
    }
    .home .grid-img-right .grid--image{
        -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-height: 650px;
    }
    .home .grid-img-right .grid--text{
        grid-column : 1 / -1;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        grid-row: 3 / 4;
        padding-inline: var(--leftSpace);
        padding-block: 56px 90px;
    }
    .home .grid-img-right .grid--text p{
        font-size: 30px;
        line-height: 45px;
    }
}

/* home bg sections */

.home .sticky > *{
    position: sticky;
    top: 0;
}

.section{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    color: var(--colorBg);
    position: relative;
    width: 100%;
    min-height: 100dvh;
    padding-block: clamp(70px, 12vw, 192px) clamp(50px, 10dvw, 159px)
}

.section .wrapper{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 100%;
}


.section .info-text{
    max-width: 480px;
    font-size: 25px;
    line-height: 45px;
    margin-bottom: 34px;
}
.section .info-text.sm{
    font-size: 20px;
    line-height: 35px;
}

@media screen and (max-width: 620px) {
    .home .section .section-header h2{
        font-size: 50px;
    }
}

@media screen and (max-height: 620px) {
    .home .section{
        padding-block: 2rem;
    }
}
@media screen and (max-height: 470px) {
    .home .section{
        padding-block: 1rem;
    }
    .section .info-text{
        margin-bottom: 1rem;
    }
    .section .info-text,
    .section .info-text.sm{
        font-size: 18px;
        line-height: 22px;
    }
    .home .section .section-header h2{
        font-size: 40px;
    }
}

/* home news */
.home-news-wrapper{ 
    padding-block: clamp(70px, 8vw, 138px) clamp(52px, 12vw, 220px);
}
.home-news-wrapper .section-header{ 
    padding-bottom: 10px;
}
.home-news-wrapper .grid{ 
    margin-top: 51px;
    grid-gap:30px; 
}

.home-news-wrapper .mob-btn{
    display: none;
}

@media screen and (max-width: 620px) {
    .home-news-wrapper .section-header .btn{
        display: none;
    }
    .home-news-wrapper .mob-btn{
        display: block;
        margin: 50px auto 0;
    }
    .home-news-wrapper .grid{
        margin-top: 31px;
    }
}

/* home 24/7 */

.section24-7{
    position: relative;
    background-color:  var(--colorSec);
}
.home .text-full p{
    font-size: 40px;
    line-height: 70px;
}

.circle{
    width: 185px;
    height: 185px;
    /* border:1px solid red; */
    position: absolute;
    right: clamp(100px, 20vw, 300px);
    top: 125px;
}
.rotated-text{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation-name: rotate;
            animation-name: rotate;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
}
.circle-text{
    position: absolute;
    left: 48%;
    top: 30%;
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
            transform: scale(0.6);
    /* animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: -3px 54px; */
}

.circle .center{
    position: absolute;
    left: 50%; top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: 700;
}

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

@keyframes rotate {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}

.circle span{
    position: absolute;
    top: -90px;
    width: 1ch;
    -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
            transform-origin: bottom center;
}

@media screen and (max-width: 1420px) {
    .circle{
        right: 50px;
    }
}
@media screen and (max-width: 1180px) {
    .circle{
        top: 2rem;
    }
}
@media screen and (max-width: 920px) {
    .circle{
        top: 2rem;
        right: 2rem;
    }
    .section24-7{
        height: auto;
        min-height: unset;
        padding-block: 200px 60px!important;
    }
    .home .text-full p{
        font-size: 35px;
        line-height: 50px;
    }
}
@media screen and (max-width: 620px) {
    .circle{
        top: unset;
        bottom: 60px;
        right: unset;
        left: 50%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    .section24-7{
        padding-block: 87px 235px!important;
    }
    .home .text-full p{
        font-size: 30px;
        line-height: 40px;
    }
}

/* news */

/* .page-news{
    padding-block: 94px 138px;
} */
.page-news .section-header{
    margin-bottom: 63px;
}
.news-wrapper{
    grid-gap: 94px 32px;
}
.loading{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 15px;
    gap: 9px;
    margin-top: 130px;
}

.loading .spot{
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--colorRed);
    opacity: 0.5;
    display: block;
    -webkit-animation-name: bubble;
            animation-name: bubble;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    position: relative;
}

.loading .spot:nth-of-type(2){
    -webkit-animation-name: bubble-2;
            animation-name: bubble-2;
}

@-webkit-keyframes bubble {
    0% {top: 100%;}
    50% {top: 0}
    100% {top: 100%}
}

@keyframes bubble {
    0% {top: 100%;}
    50% {top: 0}
    100% {top: 100%}
}
@-webkit-keyframes bubble-2 {
    0% {top: 50%;}
    25% {top: 100%}
    50% {top: 50%}
    75% {top: 0}
    100% {top: 50%}
}
@keyframes bubble-2 {
    0% {top: 50%;}
    25% {top: 100%}
    50% {top: 50%}
    75% {top: 0}
    100% {top: 50%}
}
    

@media screen and (max-width: 1320px) {
    .news-wrapper{
        grid-gap: 64px 24px;
    }
}
@media screen and (max-width: 960px) {
    .news-wrapper{
        grid-gap: 64px 24px;
    }
}
@media screen and (max-width: 680px) {
    .page-news .section-header{
        margin-bottom: 52px;
    }
}
@media screen and (max-width: 680px) {
    .home-news-wrapper .grid > *{
        margin-bottom: 40px;
    }
}

/* article */
.article-pagination {
    margin: 10px 0;
    padding: 10px 0;
    border-top: 1px solid #e0e0e0;
}
.pagination-nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.nav-link {
    font-weight: 600;
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}
.nav-link:hover {
    color: #000;
}
.back-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.95rem;
}


.article article{
    padding-block: 52px clamp(70px, 8vw,  163px);
}

/* .article article{
    --singleWidth : 900px;
    --innerWidth : 700px;
} */

.article-body,
.article-header{
    max-width: var(--singleWidth);
}

.article--date{
    font-size: 15px;
    margin-bottom: 6px; 
    width: -webkit-fit-content; 
    width: -moz-fit-content; 
    width: fit-content;   
}

.article--title{
    font-size: 35px;
    line-height: 45px;
    max-width: var(--innerWidth);
    padding-inline: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.article--image{
    aspect-ratio: 1.49;
}

.article--share{
    margin-top: 25px;
}

.article--share .share{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    gap: 26px;
    font-size: 12px;
    letter-spacing: 2.4px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 600;
}

.article--share .socials{
    gap: 14px;
}
.article-body{
    margin-top: 112px;
    margin-inline: auto;
}

.article-image-grid{
   margin-top: 91px;
   gap: 30px; 
}
.grid-image{
    aspect-ratio: 1.49;
}

.more-articles{
    margin-bottom: 99px;
}

.more-articles--header{
    font-size: 12px;
    letter-spacing: 2.4px;
    border-bottom: 1px solid var(--colorRed);
    padding-bottom: 19px;
    margin-bottom: clamp(36px, 5vw, 78px);
    font-weight: 600;
}

.more-articles-grid{
    gap: 30px;
}

@media screen and (max-width: 1120px) {
    .article-image-grid{
        display: none;
    }
}
@media screen and (max-width: 680px) {
    .more-articles-grid > div:not(:last-of-type),
    .article-image-grid > div:not(:last-of-type){
        margin-bottom: 40px;
    }
    .more-articles{
        margin-bottom: 88px;
    }
    .article--title{
        font-size: 30px;
        line-height: 35px;
        margin-bottom : 22px;
    }
    .article--date{
        margin-bottom: 20px; 
    }
    
}
@media screen and (max-width: 580px) {
    .article--share .share{
        margin: 36px auto 0;
    }
    .article-body{
        margin-top: 100px;
    }
}
@media screen and (max-width: 580px) {
    .article--title{
        padding-inline: 0;
    }
}

/* page general */

.page{
   
}

.page .section-header{
    margin-bottom: 66px;
}

.page-body{
    max-width: var(--pageWidth);
    margin-left: auto;
    position: relative;
    min-height: 466px;
}

.page-body > img{
    max-height: 850px;
}

h2.in-article-lg{
    font-size: 40px;
    line-height: 50px;  
    margin-bottom: 40px;  
}
.honors-middle .text-full p{
    margin-bottom:0;
}

@media screen and (max-width: 820px) {
    .page .section-header{
        margin-bottom: 45px;
    }
}
@media screen and (max-width: 520px) {
    .honors-middle .text-full{
        padding-inline: 0;
    }
    h2.in-article-lg{
        font-size: 25px;
        line-height: 35px;  
        margin-bottom: 2rem;  
    }
    .honors-middle .text-full p{
        font-size: 18px;
    }
}


/* page about */
.page-about{
    padding-bottom: 0;
}

.page-about .page-body{
    padding-bottom: clamp(60px, 10vw, 151px);    
}

.page-about--profile{
    background-color: var(--colorRed);
    color: var(--colorBg);
    padding-block: clamp(92px, 10vw, 165px) clamp(87px, 9vw, 120px);
}
.page-about--profile .section-header{
    margin-bottom: 51px;
    padding-bottom: 12px;
}

.profile--intro{
    font-size: 25px;
    line-height: 45px;
    max-width: 530px;
    margin-bottom: clamp(134px, 12vw, 203px);
}

.axis-list{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 85px;
}

.profile--axes h3{
    font-size: 30px;
    margin-bottom: 48px;
    font-weight: 200;
}

.axis:nth-of-type(1){max-width: 449px;}
.axis:nth-of-type(2){
    max-width: 318px;
    margin-right: 15px;
}
.axis:nth-of-type(3){max-width: 313px;}
.axis:nth-of-type(4){max-width: 388px;}

.axis p{
    font-size: 18px;
    line-height: 28px; 
    font-weight: 200;   
}
.axis .num{
    font-size: 50px;
    margin-bottom: 12px;
    line-height: 100%;
    font-weight: 200;   
}

@media screen and (max-width: 1520px) {
    .axis-list{
        gap: 4rem;
    }
    .axis{
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    } 
    .axis:nth-of-type(2){
        margin-right: 0;
    }
    .axis:nth-of-type(1),
    .axis:nth-of-type(2),
    .axis:nth-of-type(3),
    .axis:nth-of-type(4){
        max-width: unset;
    }

}
@media screen and (max-width: 1280px) {
    .axis-list{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .axis{
        width: calc(50% - 2rem);
        -webkit-box-flex: unset;
            -ms-flex: unset;
                flex: unset;
    } 
}
@media screen and (max-width: 980px) {
    .page-about .page-body{
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
        -ms-grid-rows: auto;
        grid-template-rows: auto;
        grid-gap: 2rem;
    }
    .page-about .page-body > *:nth-child(1){
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
    .page-about .page-body > * {
        -ms-grid-column:  1;
        -ms-grid-column-span:  1;
        grid-column:  1 / 2;
        margin-bottom: 0;
    }
}
@media screen and (max-width: 780px) {
    .page-about--profile .section-header{
        margin-bottom: 58px;
    }
    .axis-list{
        gap: 4rem 2rem;
    }
    .axis{
        width: calc(50% - 1rem);
    } 
    .profile--axes h3{
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 620px) {
    .profile--intro{
        line-height: 35px;
        margin-bottom: 134px;
    }
    .axis-list{
        gap: 60px;
    }
    .axis{
        width: 100%;
    } 
}

@media screen and (max-width: 520px) {
    .page-about{
        padding-top: 50px;
    }
    .page-about .section-header{
        margin-bottom:28px;
    }
}

/* page about */
/* about awards */

.page-about--awards{
    padding-block: clamp(49px, 8vw, 117px) clamp(66px,  7vw, 80px);
}

.page-about--awards .section-header{
    margin-bottom:  64px;
}
.page-about--awards .section-header h2{
    padding-bottom:  12px;
}

.awards--intro{
    font-size: 25px;
    line-height: 45px;
    max-width: 628px;
    margin-bottom: 61px;
}

.awards-list{
    gap: 65px;
}

.award--image{
    margin-bottom: 22px;
}
.award--title{
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
}

.award{
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.awards--outro{
    max-width: 725px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    margin-top: 68px;
}

@media screen and (max-width: 1380px) {
    .awards-list{
        gap: 2.5rem;
    } 
}
@media screen and (max-width: 1120px) {
    .awards-list{
        gap: 1.5rem;
    } 
}
@media screen and (max-width: 1020px) {
    .awards-list{
        gap: 2rem;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    } 
    .award{
        -webkit-box-flex: unset;
            -ms-flex: unset;
                flex: unset;
        width: 30%;
    }
    .award--image{
        margin-bottom: 1rem;
    }
}
@media screen and (max-width: 960px) {
    .awards-list{
        width: calc(100% + var(--mobilePadding));
    }
}
@media screen and (max-width: 880px) {
    .awards-list{
        gap: 2rem 1rem;
    } 
    .awards--outro{
        margin-top: 43px;
    }
}
@media screen and (max-width: 820px) {
    .awards-list{
        gap: 2rem;
    } 
    .award{
        width: 45%;
    }
}
@media screen and (max-width: 620px) {
    .page-about--awards .section-header{
        margin-bottom:  42px;
    }
    .awards-list{
        padding-block: 2rem;
    }
}
@media screen and (max-width: 480px) {
    .award{
        width: 100%;
    }
    .award--image{
        margin-bottom: 11px;
    }
    .award--image img{
        margin-inline: auto;
    }
}

/* page antico */

.page-antico{
    padding-bottom: 0;
}

.page-antico .section-header{
    margin-bottom: 54px;
}

.page-antico .page-body{
    padding-bottom: clamp(60px, 11vw, 182px)
}

.page-antico .grid-img-right{
    -ms-grid-columns: clamp(400px, 45%, 860px) 1fr;
    grid-template-columns: clamp(400px, 45%, 860px) 1fr;    
}
.page-antico .grid--title{
    font-size: 60px;  
    line-height: 70px;
    padding-inline: clamp(3rem, 22%, 190px); 
}

.antico-quality{
    background-color: var(--colorSec);
    padding-block: 99px 76px!important;
}

.antico-certificates{
    padding-block: clamp(58px, 8vw, 120px);
}


@media screen and (max-width: 1520px) {
    .page-antico .grid--title{
        font-size: 60px;  
        line-height: 70px;
        padding-inline: clamp(3rem, 10%, 150px); 
    }
}
@media screen and (max-width: 1120px) {
    .page-antico .grid--title{
        font-size: 50px;  
        line-height: 60px;
        padding-inline: 2rem; 
    }
}

@media screen and (max-width: 920px) {
    .antico-quality{
        height: auto;
        min-height: unset;
    }    
    .page-antico .grid-img-right{
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        padding-top: 92px;
    }
    .page-antico .gris--title{
        padding-bottom: 61px;    
    }
    .page-antico .grid-img-right > *{
        grid-column: 1 / -1;
    }
    .page-antico .grid--image{
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        grid-row: 2/3;
        aspect-ratio: 1.53;
        min-height: unset;
    }
    .page-antico .grid--text{
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        grid-row: 3/4;
        padding-inline: var(--padding);
    }

}

@media screen and (max-width: 520px) {
    .page-antico .section-header{
        margin-bottom:26px;
    }
}

/* page antico */
/* antico certificates */

.certificates-list{
    max-width: var(--singleWidth);
    margin-top: clamp(50px, 12vw, 170px);
}
.certificate{
    gap: 63px;
    margin-bottom: 2rem;
}
.certificate .icon{
    -webkit-box-flex: 1;
        -ms-flex: 1 0 200px;
            flex: 1 0 200px;
}
.certificate .icon img{
    margin-inline: auto;
}
.certificate .text{
    max-width: 632px;
    font-size: 20px;
    line-height: 40px;
}
.rainforest .icon{
    padding-top: 2rem;
}
.certificate.cntr{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: -1rem;
}
.certificate .text p:not(:last-of-type){
    margin-bottom: 2rem;
}


@media screen and (max-width: 820px) {
    .certificate{
        display: block;
        margin-bottom: 2rem;
    } 
    .certificate .text{
        max-width: unset;
    }
    .certificate .icon img{
        margin: 0;
    } 
    .rainforest .icon{
        padding-top: 0;
    } 
    .certificate.cntr{
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-top: 0;
    } 
    .certificate.ifs .icon{
        margin-bottom: .5rem;
    }
}

@media screen and (max-width: 520px) {
    .certificate .icon{
        width: 73px;
    }
    .certificate.ifs .icon{
        width: 130px;
    }
}

/* page coffeworld */

.page-coffeeWorld{
    padding-bottom: 0;
}
.page-coffeeWorld .page-body{
    padding-bottom: clamp(80px, 8vw, 110px);
}

.coffeeWorld-history{
    background-color: var(--colorSec);
}

@media screen and (max-width: 1020px) {
    .coffeeWorld-history{
        padding-block: 95px 60px!important;
        height: auto;
        min-height: 100dvh;
    }
}
@media screen and (max-width: 520px) {
    .page.page-coffeeWorld .section-header{
        margin-bottom:26px;
    }
}

/* page training + support */

@media screen and (max-width: 620px) {
    .page-support, .page-training{
        padding-block: 50px;
    }
    .page.page-support .section-header{
        margin-bottom: 42px;
    }
    .page.page-training .section-header{
        margin-bottom: 26px;
    }
}

/* page contact */

.page-contact{
    margin-top: 50px;
}

.contact-wrapper{
    background-color: var(--colorRed);
    color: var(--colorBg);
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(2, 50%);
}

.contact-image{
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 /3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / 3;
}

.contact-text{
    -ms-grid-column : 2;
    -ms-grid-column-span : 1;
    grid-column : 2/3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / 4;
    font-size: 30px;
    line-height: 50px;
    font-weight: 200;
    margin-top: clamp(100px, 8vw, 139px);
    padding-bottom: clamp(150px, 20vw, 327px);
}
.contact-text span,
.contact-text a{
    display: block;
}

.contact-wrapper .section-header,
.contact-form-wrapper{
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    padding-inline: clamp(2rem, 6vw, 120px);    
}
.contact-form-wrapper{
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/ 3;
}
.contact-wrapper .section-header{
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/ 2;
    padding-top: clamp(5rem, 8vw, 151px);
    padding-inline: clamp(2rem, 6vw, 120px);  
    align-self: flex-end;  
}

.contact-form{
    margin-top: clamp(4rem, 5vw, 100px);
}

.contact-form-wrapper :is(input, textarea){
    display: block;
    border-bottom: 1px solid var(--colorBg);
    width: 100%;
    font-size: 17px;
    font-weight: 200;
    padding: 32px 3rem 13px 10px;
    margin-bottom: 50px;
    color: var(--colorBg);
    font-family: "Manrope", sans-serif;
}
.contact-form-wrapper :is(input, textarea)::-webkit-input-placeholder{
    color: var(--colorBg);
}
.contact-form-wrapper :is(input, textarea)::-moz-placeholder{
    color: var(--colorBg);
}
.contact-form-wrapper :is(input, textarea):-ms-input-placeholder{
    color: var(--colorBg);
}
.contact-form-wrapper :is(input, textarea)::-ms-input-placeholder{
    color: var(--colorBg);
}
.contact-form-wrapper :is(input, textarea)::placeholder{
    color: var(--colorBg);
}
.contact-form-wrapper  textarea{
    background-color: transparent;
    outline: none;
    border: none;
    border-bottom: 1px solid var(--colorBg);
    height: 69px;
}
.contact-form .form-submit{
    font-size: 15px;
    font-weight: 700;
    gap: 27px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    cursor: pointer;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
}

.contact-form .form-submit .icon{
    width: 22px;
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
}

.contact-form .form-submit input{
    position: relative;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    /* visibility: hidden; */
    opacity: 1;
    z-index: 2;
    margin-bottom: 0;
    padding: 0;
    background-color: transparent;
    border-bottom: 0px;
}

.contact-image{
    max-height: 1243px;
    min-height: 800px;
}

@media screen and (max-width: 1380px) {
    .contact-wrapper .section-header{
        padding-top: 3rem; 
    }
    .contact-wrapper .section-header,
    .contact-form-wrapper{
        padding-inline: 2rem;   
    }
    .contact-form{
        margin-top: 2rem;
    }
    .contact-form-wrapper :is(input, textarea){
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 980px) {
    .contact-wrapper .section-header{
        padding-top: 0; 
    }
    .contact-wrapper{
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
    }
    .contact-form{
        margin-top: 20px;    
    }
    .contact-wrapper > * { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2;}
    .contact-wrapper .section-header{
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        grid-row: 1 / 2;
        background-color: var(--colorBg);
        color: var(--colorRed);
        width: 100%;
        text-align: center; 
        padding-bottom: 41px;
    }
    .contact-image{ 
        -ms-grid-row : 2; 
        -ms-grid-row-span : 1; 
        grid-row : 2 / 3;
        aspect-ratio: 0.77;
        min-height: 505px;
        max-height: 700px;
        width: 100%;
    }
    .contact-form-wrapper{ -ms-grid-row : 3; -ms-grid-row-span : 1; grid-row : 3 / 4;}
    .contact-text{ 
        -ms-grid-row : 4; 
        -ms-grid-row-span : 1; 
        grid-row : 4 / 5;
        padding-inline: 2rem;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        text-align: right;
        margin-left: auto;
        padding-bottom: clamp(48px, 8vw, 120px);
    }
}

@media screen and (max-width: 880px) {
    .contact-text{
        font-size: 25px;
        line-height: 45px;
    }
}
@media screen and (max-width: 580px) {
    .contact-text{
        font-size: 20px;
        line-height: 35px;
    }
}

/* product  */

.single-product{
    margin-top: 47px;
}

.product-wrapper{position: relative;}

.product-wrapper > *{
    -webkit-box-flex : 1;
        -ms-flex : 1;
            flex : 1;
}
.product-image{
    padding: clamp(2rem, 5vw, 100px);
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    margin-inline: auto;
}
.product-info{
    background-color: var(--colorRed);
    color: var(--colorBg);
    padding: 98px 0 77px clamp(50px, 7vw, 138px);
}
.product-title{
    font-size: 29px;
    line-height: 40px;
    font-weight: 600; 
    margin-bottom:  63px; 
    padding-right: 3rem;  
}
.product-details{
    font-size: 18px;
    line-height: 28px;
    font-weight: 200;  
    padding-right: 2rem;
    max-width: 520px;  
}

.product-details li{
    padding-left: 1ch;
    margin-bottom: 1rem;
    position: relative;
    font-weight: 200;
}

.product-details li::before{
    content: "\2022";
    position: absolute;
    left: -1ch;
    top: 0;
}

.product-buy{
    margin-block: 96px 30px;
    font-size: 12px;
    letter-spacing: 2.4px;
    text-decoration: underline;
    font-weight: 100;
    padding: 1rem 2rem;
    background-color: #fff;
    color: #B13435;
    width: fit-content;
}

.product-social{
    margin-top: 39px;
    font-size: 12px;
    letter-spacing: 2.4px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 26px;
}

.product-social ul{
    gap: 14px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.back-link{
    position: absolute;
    font-size: 1rem;
    border-bottom: 1px solid var(--colorRed);
    top: 0;
    left: clamp(3rem, 8vw, 150px);
}

@media screen and (max-width: 1320px) {
    .product-info{
        padding: 60px 0 60px 3rem;
    }
    .product-image{
        padding-inline: 2rem;
    }
    .back-link{left: 2rem;}
}

@media screen and (max-width: 1020px) {
    .product-wrapper{
        display: block;
    }
    .product-info{
        padding: 0;
        --leftSpace: clamp(2rem, 10vw, 6rem);
    }
    .product-title{
        background-color: var(--colorBg);
        color: var(--colorRed);
        padding: 1rem 2rem 56px;
        text-align: center;
        margin-bottom: 0;
    }  
    .product-image{
        padding-inline: clamp(1rem,  5vw, 4rem);
        padding-bottom: 0;
        max-width: 500px;
    }  
    .product-details{
        padding: 60px var(--leftSpace) 0;
        max-width: unset;
    }
    .product-social{
        padding-inline: var(--leftSpace);
        padding-bottom: 50px;
    }
    .product-buy{
        margin-inline: var(--leftSpace);
    }
}

@media screen and (max-width: 580px) {
    .product-info{
        --leftSpace: 28px;
    }
    .back-link{left: var(--mobilePadding);}
    .product-title{
        font-size: 25px;
        line-height: 35px;
    }
    .product-buy{
        margin-block: 50px 24px;
        padding: .75rem 1.25rem;
        letter-spacing: 1.4px;
    }
}

/* page machines */

.page-machines .section-header{
    margin-bottom : 85px;
}
.page-machines{
    padding-bottom : clamp(73px, 10vw, 139px);
}

.machines-wrapper{
    gap: 10px;
}
@media screen and (max-width: 680px) {
    .machines-wrapper{
        display: -ms-grid;
        display: grid;
    }
}
@media screen and (max-width: 620px) {
    .page-machines .section-header{
        margin-bottom : 61px;
        text-align: center;
    }
}
@media screen and (max-width: 520px) {
    .machines-wrapper{
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
        gap: 17px;
    }
    .page-machines .product{
        padding: 2rem 20px 18px;
    }
}

/* Search as nav item */
.nav-search-item {
    padding-top: 30px;
}

.nav-search-item .searchform {
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-search-item input {
    padding: 8px 12px;
    font-size: 15px;
    border: 1px solid var(--colorRed);
    border-radius: 4px;
    outline: none;
    background-color: transparent;
    color: inherit;
}

.nav-search-item button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-search-item button img {
    width: 20px;
    height: 20px;
    filter: var(--filterRed);
}

.search-results {
    padding: 40px 20px;
}

.search-title {
    font-size: 28px;
    margin-bottom: 30px;
}

.search-results-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.search-result-item {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border-bottom: 1px solid var(--colorRed);
    padding-bottom: 20px;
}

.search-result-link {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.search-thumb img {
    width: 150px;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

.search-content {
    flex: 1;
}

.search-content h2 {
    margin: 0 0 10px;
    font-size: 22px;
}

.search-meta {
    margin-bottom: 10px;
}

.search-category {
    background-color: var(--colorRed);
    color: white;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 3px;
    margin-right: 5px;
    display: inline-block;
}

.search-excerpt {
    font-size: 15px;
    line-height: 1.6;
}

/* pagination */
.pagination-wrapper {
    margin-top: 20px;
    text-align: center;
}

.pagination-wrapper .page-numbers {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 12px;
    border: 1px solid var(--colorRed);
    color: var(--colorRed);
    text-decoration: none;
    border-radius: 3px;
}

.pagination-wrapper .page-numbers.current,
.pagination-wrapper .page-numbers:hover {
    background-color: var(--colorRed);
    color: white;
}

/* page shop */


.grid-filters{
    margin-bottom: clamp(24px, 7vw, 117px);    
}

.grid-filters h3{
    margin-bottom: 19px;
    font-size: 18px;
    font-weight: 600;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-bottom: 1px solid var(--colorRed);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.grid-filters h3 .icon{
    width: 2ch;
    -webkit-filter: var(--filterRed);
            filter: var(--filterRed);   
    display: none; 
    -webkit-transform-origin:  center; 
        -ms-transform-origin:  center; 
            transform-origin:  center;
}

.filter{
    font-size: 20px;
    line-height: 30px;
    cursor: pointer;
}
.filter.off{
    opacity: 0.5;
}

.group-grid{
    margin-bottom: 90px;
}
.group-grid .grid{
    gap: 14px;
}

.page-shop .section-header{
    margin-top: 20px;
    margin-bottom: 50px;
    padding-bottom: 20px;
}
.page-shop .section-header:has( + .grid-filters){
    margin-bottom: clamp(32px, 8vw, 80px);
    padding-bottom: 0;
}

.group-grid.off{
    display: none;
}

.page-shop .wrapper > div:last-child{
    margin-bottom: 0;
}

.page-shop .product--image{
    /* max-width: 280px;
    max-height: 300px; */
    margin: auto;
    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;
    height: 100%;
    margin-bottom: 1rem;
    max-width: 280px;
}

.page-shop .product--title{
    margin-block: 11px;
}

.product--image img{
    -o-object-fit: contain;
       object-fit: contain;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 920px) {
    .page-shop .section-header{
        margin-bottom: 30px;
    }
    .group-grid .grid .product{
        -ms-grid-rows: 240px auto auto;
        grid-template-rows: 240px auto auto;
    }
    .group-grid{
        margin-bottom: 70px;
    }
}
@media screen and (max-width: 680px) {
    .page-shop .product--image{
        max-width: 200px;
    }
    .group-grid .grid .product{
        -ms-grid-rows: 180px auto auto;
        grid-template-rows: 180px auto auto;
    }
    .group-grid .grid{
        gap: 10px;
    }
    .grid-filters{
        -webkit-transition: margin .3s;
        -o-transition: margin .3s;
        transition: margin .3s;
    }
    .grid-filters h3{
        margin-inline: auto;
    }
    .grid-filters h3 .icon{
        display: block;
    }
    .filters-list{
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height .3s;
        -o-transition: max-height .3s;
        transition: max-height .3s;
    }
    .grid-filters h3.on .icon{
        -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    .grid-filters h3.on + .filters-list{
        max-height: 1000px;
    }
    .grid-filters:has( > h3.on){
        margin-bottom: 95px;
    }
    .filter{
        text-align: center;
        text-wrap: pretty;
    }
}
@media screen and (max-width: 620px) {
    .page-shop{
        padding-top: 32px;
    }
    .page-shop .wrapper{
        padding-inline: 10px;
    }
    .page-shop .section-header{
        padding-bottom: 10px;
        text-align: center;
    }
}
@media screen and (max-width: 520px) {
    .group-grid .grid .product{
        -ms-grid-rows: 120px auto auto;
        grid-template-rows: 120px auto auto;
    }
    .page-shop .section-header :is(h2.md, h2.sm){
        font-weight: 500;
    }
    .page-shop .product--title{
        word-break: break-word;
        margin-bottom: 15px;
    }
}

/* page honors */

.industry-block{
    margin-block: clamp(30px, 5vw, 60px) clamp(60px, 10vw, 145px);
}
.bellavita-block{
    margin-block: clamp(60px, 8vw, 140px) clamp(100px, 15vw, 263px);
}

.honors-middle{
    text-align: center;
    background-color: #F6F6F6;
    padding-block: clamp(60px, 10vw, 170px);
}

.awards-header{
    max-width: 628px;
    font-size: 25px;
    line-height: 40px;  
    margin-block: 60px;  
}

.awards-footer{
    max-width: 725px;
    font-size: 14px;
    line-height: 20px;  
    margin-block: 48px;
    margin-left: auto; 
    font-weight: 300;
}

.years-list{
    gap: 51px
}
.year-item{
    font-size: 30px;
    line-height: 50px; 
    opacity: .5;
    transition: opacity .3s;  
    cursor: pointer; 
}
.year-item.on{
    opacity: 1;
}

.awards-list{
    padding-block: 48px;
    border-top:1px solid #B13435;
    border-bottom:1px solid #B13435;
}



.award-item{
    width: 240px;
    flex-shrink: 0;
}
.award-title{
    text-align: center;
    padding-inline: 20px;
    margin-top: 22px;
    font-weight: 600;
    line-height: 20px;
}
.award-year{
    display: none;
    opacity: 0;
    transition: opacity .3s; 
}
.award-year.block{
    gap: 65px; 
    display: flex;
}
.award-year.on{
    opacity: 1;
}

@media screen and (max-width: 1020px) {
    .years-list{
        gap: 2.5rem;
    }
    .award-year.block{
        gap: 3rem;
    }
    .awards-header{
        font-size: 18px;
        line-height: 30px;
    }
}
@media screen and (max-width: 620px) {
    .year-item{
        font-size: 24px;
    }
    .years-list{
        gap: 1.5rem;
    }
    .award-year.block{
        gap: 2rem;
    }
}

/* article list */

.article-list{
    padding-block: clamp(80px, 13vw, 260px) clamp(60px, 10vw, 175px)
}