/*
Theme Name: Biokon
Description: Biokon theme
Author: Joinweb
Author URI: https://www.joinweb.gr
Template: joinwebbasic
Version: 1.0.1
*/

@font-face {
    font-family: 'Proxima Nova Alt Th';
    src: url('fonts/ProximaNovaA-Thin.woff2') format('woff2'),
    url('fonts/ProximaNovaA-Thin.woff') format('woff'),
    url('fonts/ProximaNovaA-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Th';
    src: url('fonts/ProximaNovaT-Thin.woff2') format('woff2'),
    url('fonts/ProximaNovaT-Thin.woff') format('woff'),
    url('fonts/ProximaNovaT-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Th';
    src: url('fonts/ProximaNova-Extrabld.woff2') format('woff2'),
    url('fonts/ProximaNova-Extrabld.woff') format('woff'),
    url('fonts/ProximaNova-Extrabld.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Alt Rg';
    src: url('fonts/ProximaNovaA-Bold.woff2') format('woff2'),
    url('fonts/ProximaNovaA-Bold.woff') format('woff'),
    url('fonts/ProximaNovaA-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Rg';
    src: url('fonts/ProximaNova-Bold.woff2') format('woff2'),
    url('fonts/ProximaNova-Bold.woff') format('woff'),
    url('fonts/ProximaNova-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Alt Lt';
    src: url('fonts/ProximaNovaA-Light.woff2') format('woff2'),
    url('fonts/ProximaNovaA-Light.woff') format('woff'),
    url('fonts/ProximaNovaA-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Bl';
    src: url('fonts/ProximaNova-Black.woff2') format('woff2'),
    url('fonts/ProximaNova-Black.woff') format('woff'),
    url('fonts/ProximaNova-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Rg';
    src: url('fonts/ProximaNova-Regular.woff2') format('woff2'),
    url('fonts/ProximaNova-Regular.woff') format('woff'),
    url('fonts/ProximaNova-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




/* Global variables */
:root {
    --fontFamily: 'Proxima Nova Rg', Arial, 'sans-serif';
    --fontFamilyBlack: 'Proxima Nova Bl', Arial, 'sans-serif';
    --colorBlack: #000000;
    --colorLightBlack: #2f2f2b;
    --colorLightBlack2: #7e7b75;
    --colorLightBlackVariation: #343434;
    --colorWhite: #fff;
    --colorGreyBg: #f2f4f6;
    --colorBlue: #3a74a7;
    --colorLightRed: #eaa8a3;
    --colorDarkRed: #e35e51;
}

html{
    font-size: 16px;
}

body {
    margin: 0;
    font-family: var(--fontFamily);
    color: var(--colorBlack);
    font-size: 1rem;
    background: var(--colorGreyBg);
}

/* Typography */
p {
    margin: 0;
    padding: 0;
}

a {
    color: var(--colorBlue);
    text-decoration: underline;
}

a:hover {

}

h1, .h1 { font-size: 3.5rem; font-family: var(--fontFamilyBlack); font-weight: 900;}
h2, .h2 { font-size: 3rem; }
h3, .h3 { font-size: 2rem; }
h4, .h4 { font-size: 1.75rem; }
h5, .h5 { font-size: 1.5rem; }
h6, .h6 { font-size: 1.125rem; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; }

/* buttons */
.button{
    border-radius: 10px;
    box-shadow: 0 4px 7px 0 rgba(85, 85, 85, 0.5);
    background-image: linear-gradient(78deg, var(--colorDarkRed) 45%, var(--colorLightRed) 94%);
    padding: 20px 30px;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--colorWhite);
    text-decoration: none;
}

.wrapper{
    width: 1440px;
    padding: 0 15px;
    margin: 0 auto;
}

.shortWrapper{
    max-width: 1240px;
}

.siteHeader{
    background-color: rgba(255, 255, 255, 0.9);
}

.mainHeader{
    padding: 20px 0;
    grid-template-columns: minmax(0, 180px) 1fr minmax(0, 200px);
    align-items: center;
}

.mainContent{
    margin: 0;
    padding: 0;
}

/* Hero */

.hero {
    display: flex;
    flex-direction: column;
    background-image: url("https://nicolaslule.com/wp-content/uploads/hero-image-flex-example-1.jpg");
    height: calc(100vh - 91px);
    align-self: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    align-items: center;
    justify-content: center;
    color: var(--colorLightBlack);
    position: relative;
}

.hero::after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    top: 0;
    left: 0;
    z-index: 0;
}
.hero__content{
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero__content p{
    font-size: 18px;
    max-width: 500px;
    line-height: 1.83;
    margin: 0 auto 45px auto;
    padding: 0 15px;
}

.homeSection{
    padding: 100px 0;
}

.productCategories{
    background: var(--colorGreyBg);;
}

.grid{
    display: grid;
}

/* Product  Categories */

.productCategoriesGrid{
    grid-template-columns: repeat(auto-fill, minmax(auto, 370px) ) ;
    grid-gap: 70px;
    justify-content: center;
    grid-auto-rows: 1fr;
}

.productCategoriesGrid .productCategoriesInto p{
    font-size: 18px;
    line-height: 1.5;
    margin: 15px 0 0;
}

.productCategoriesInto{
    padding: 0 13px;
}

.productCat{
    border-radius: 20px;
    padding: 10px;
    color: var(--colorWhite);
    box-shadow: 0 4px 7px 0 rgba(85, 85, 85, 0.5);
}

.productCat a{
    text-decoration: none;
    color: var(--colorWhite);
}
.productCat__inner{
    border-radius: 20px;
    padding: 15px 25px 30px 25px;
    height: 100%;
}

.productCat h6{
    margin: 15px 0;
}

.productCat p{
    font-size: 0.938rem;
}

.productCat39{
    background-color: rgba(57, 92, 136, 0.5);
}

.productCat39__inner{
    background-color: #385b87;
}

.productCat47{
    background-color: rgba(227, 94, 81, 0.5);
}

.productCat47__inner{
    background-color: #e35e51;
}

.productCat48{
    background-color: rgba(240, 159, 111, 0.5);
}

.productCat48__inner{
    background-color: #f09f6f;
}

.productCat49{
    background-color: rgba(0, 145, 158, 0.5);
}

.productCat49__inner{
    background-color: #0d808c;
}

.productCat50{
    background-color: rgba(85, 85, 85, 0.5);
}

.productCat50__inner{
    background-color: #6c6862;
}

/* Products */

.productsSection h2{
    margin-bottom: 40px;
}

.productsGrid{
    grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
    grid-template-areas: "A B"
                        "C D";
    gap: 50px;
}

.productsGrid__A{
    grid-area: A;
}

.productsGrid__B{
    grid-area: B;
}

.productsGrid__C{
    grid-area: C;
}

.productsGrid__D{
    grid-area: D;
}
.productImage img {
    margin: 0 auto;
}
.productsEvenSection .productsGrid{
    grid-template-areas: "B A"
                        "C D";
}

div.productsCarousel{
    margin: 0;
    list-style: none;
}

.productDesc{
    padding: 0 40px 0 130px;
}
.productDesc h3{
    margin-bottom: 35px;
}
.productDesc ul.productDescPoints{
    margin: 0 0 0 -70px;
    padding: 0;
}

.productDesc ul.productDescPoints li{
    align-content: center;
    display: grid;
    column-gap: 30px;
    grid-template-columns: 40px minmax(0, 1fr);
    margin-bottom: 30px;
}

.productsCarouselWrap{
    padding-bottom: 120px;
}

/* Services */
.servicesSection{
    background: #eeeeee;
}

.servicesSection h2{
    margin-bottom: 20px;
}

p.servicesDesc{
    font-size: 18px;
    max-width: 500px;
    margin: auto;
}

.servicesGrid{
    grid-template-columns: repeat(2, minmax(auto, 370px) );
    justify-content: center;
    gap: 75px 150px;
    margin: 50px 0 0;
}

.servicesGrid article{
    text-align: center;
}

.servicesGrid img{
    border-radius: 50%;
    max-width: 100%;
    margin: 0 0 10px;
}

.servicesGrid a{
    text-decoration: none;
    color: var(--colorBlack);
}

.servicesGrid .productCat a{
    color: var(--colorWhite);
}

.servicesGrid .productCat .productCat__inner{
    padding-bottom: 15px;
}

.productCat figure img {
    width: 60px;
}
/* News */

.newsSection{
    background: var(--colorGreyBg);
}

.newsSection h2{
    margin-bottom: 40px;
}

.carouselNews{
    padding: 0 60px;
}

article.latestNewsArticle{
    border-radius: 10px;
    box-shadow: 0 4px 7px 0 rgba(85, 85, 85, 0.5);
    width: 370px;
    margin: 0 25px;
    height: inherit !important;
    background: var(--colorWhite);
}

article.latestNewsArticle a{
    text-decoration: none;
    color: var(--colorBlack);
    text-align: center;
}

article.latestNewsArticle .articleContent{
    padding: 0 46px 46px 46px;
}

article.latestNewsArticle time{
    color: var(--colorLightBlack2);
    font-size: 0.875rem;
    display: block;
    margin: 10px auto 15px;
}

article.latestNewsArticle h5{
    margin: 0 0 15px;
}

article.latestNewsArticle img{
    border-radius: 10px 10px 0 0 ;
}


.carouselNews .slick-track{
    display: flex !important;
    padding-bottom: 20px;
}

.newsButtonWrapper{
    padding: 80px 0 0 0;
    text-align: center;
}

/* Logos Section */
.representationsSection p {
    max-width: 700px;
    margin: 30px auto 80px auto;
    line-height: 1.83;
    font-size: 1.125rem;
    color: var(--colorLightBlack);
    text-align: center;
}

.representationsSection ul.logoList{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px 90px;
}
.representationsSection ul.logoList li img{
    max-height: 90px;
    max-width: 220px;
    object-fit: contain;
}

.sectionFooter{
    background-image: linear-gradient(to bottom, #2d597f, #172e42);
    padding: 100px 0 70px 0;
    color: var(--colorWhite);
    line-height: 1.5;
    font-size: 0.875rem;
}

.sectionFooter a{
    color: var(--colorWhite);
}

.footerWidgets{
    margin: 20px 0 60px 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(auto, 1fr)) ;
    grid-gap: 110px;
    justify-content: center;
    padding: 0 110px;
}

.footerLogo{
    margin-bottom: 20px;
}

.footerWidgets h5{
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 20px;
}

ul.footerWidget,
ul.footerMenu{
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.footerMenu li{
    margin-bottom: 5px;
}

.footerCredits{
    grid-template-columns: minmax(auto, 1fr) minmax(auto, 2fr) minmax(auto, 1fr);
    padding: 0 110px;
}

.terms-link-wrapper{
    text-align: center;
}

.credits-wrapper{
    text-align: right;
}

/* Single Page */
.articleHeader{
    position: relative;
    overflow: hidden;
    height: 467px;
}
.articleHeader figure img{
    min-width: 100%;
    object-fit: cover;
}

.articleHeader .headerContent{
    text-align: center;
    align-items: center;
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-content: center;
    padding: 0 30px;
    color: var(--colorLightBlack);
    background-color: rgba(255, 255, 255, 0.38);
}

.headerContent h1{
    text-align: center;
}

.headerContent p{
    max-width: 615px;
    padding: 0 15px;
    font-size: 18px;
    line-height: 1.83;
}

.breadcrumbs{
    font-size: 14px;
    color: #333;
    padding: 20px 0 40px;
}

.pageSection{
    padding: 50px 0;
}

.visionContent{
    column-count: 2;
    column-gap: 5rem;
    max-width: 820px;
    margin: 30px auto 60px;
    color: var(--colorLightBlack);
}

.entry-content{
    background: var(--colorGreyBg);
}

.entry-content p,
.productsGrid p{
    margin: 0 0 20px 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
    margin-bottom: 20px;
}

.teamSection{
    background-color: var(--colorWhite);
}

ul.teamList{
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 80px;
}

ul.teamList li{
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    grid-gap: 25px;
    align-items: flex-start;
    color: var(--colorLightBlackVariation);
}

ul.teamList li figure img{
    border-radius: 50%;
}

ul.teamList li h4{
    margin-bottom: 10px;
}

p.teamName{
    font-weight: bold;
}

ul.certificationList{
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(auto, 340px) ) ;
    gap: 140px 85px;
    justify-content: center;
}

ul.certificationList li{
    text-align: center;
}

ul.certificationList li figure{
    padding: 0 30px 30px 30px;
}

ul.certificationList li h6{
    margin-bottom: 15px;
}

ul.certificationList li p{
    margin: 0;
}

.productsGrid h4,
.productsGrid h5{
    margin-bottom: 15px;
}

.interestedWrap{
    max-width: 400px;
    margin: auto;
}

.ctaWrap{
    align-content: center;
    display: grid;
    column-gap: 10px;
    grid-template-columns: 40px minmax(0, 1fr);
    margin: 0 0 0 -50px;
    font-weight: bold;
}

.greyBg{
    background: var(--colorGreyBg);
}

.whiteBg{
    background: var(--colorWhite);
}

.productsEvenSection{
    background: var(--colorGreyBg);
}

.productsOddSection{
    background: var(--colorWhite);
}

/*service single */
.singleServiceGrid{
    grid-template-columns: minmax(0, 1fr) 350px;
    grid-gap: 80px;
}

.serviceIcon p{
    margin: 0;
}

.serviceIcon .productCat__inner{
    padding: 15px 25px;
}

.benefitsGrid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 200px;
}

.benefitsWrap > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefitsWrap > ul > li{
    margin-bottom: 20px;
    color: var(--colorBlack);
    line-height: 24px;
    position: relative;
}

.benefitsWrap > ul > li::before{
    position: absolute;
    content: " ";
    display: block;
    background: transparent url("icons/checkmark.png") 0 0 no-repeat;
    height: 24px;
    width: 24px;
    left: -38px;
    top: 3px;
}

.otherServices {
    background: var(--colorGreyBg);
}

.otherServices h2{
    margin-bottom: 20px;
}

.otherServices .productCategoriesGrid{
    margin: auto;
    max-width: 1240px;
}

.single-service .entry-content{
    background: var(--colorWhite);
}

.newsGrid{
    grid-template-columns: repeat(auto-fill, minmax(auto, 370px) );
    grid-gap: 70px;
    grid-auto-rows: 1fr;
}

.singleContent{
    background: var(--colorGreyBg);
    padding: 40px 0 5px;
}

.singleContent .entry-content{
    background: var(--colorWhite);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 7px 0 rgba(85, 85, 85, 0.5);
}

.singleContent .articleHeader img{
    border-radius: 10px 10px 0 0;
}

.singleContent .contentWrapper{
    max-width: 720px;
    margin: auto;
    color: var(--colorLightBlack2);
    padding-bottom: 40px;
}

.otherNews h2{
    margin-bottom: 30px;
}

.languageSwitch .sub-menu {
    display: none;
}
.languageSwitch .visible .sub-menu {
    display: block;
    position: absolute;
    top: 27px;
    right: 0;
    z-index: 111;
    background: #fff;
}
.languageSwitch .sub-menu a {
    background: transparent;
}

.languageSwitch {
    justify-self: right;
    position: relative;
}

.languageSwitch > ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 15px;
}
.otherServices.pageSection {
    margin-top: 40px;
}
.slick-prev, .slick-next {
    z-index: 999;
}

.paginateWrapper{
    text-align: center;
    margin-bottom: 10px;
}


.notFoundWrapper{
    margin: 100px auto;
    text-align: center;
    font-size: 22px;
}


/* position: fixed; */
.espaContainer{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    padding-bottom: 3px;
    right: 0;
}
.espa img
{
    width: 428px;
    height: auto;
}