@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

@font-face {
    font-family: "ProximaNovaBold";
    src: url('../fonts/ProximaNova/ProximaNovaBold/font.woff2') format('woff2'), url('../fonts/ProximaNova/ProximaNovaBold/font.woff') format('woff');
}
@font-face {
    font-family: "ProximaNovaRegular";
    src: url('../fonts/ProximaNova/ProximaNovaARegular/font.woff2') format('woff2'), url('../fonts/ProximaNova/ProximaNovaARegular/font.woff') format('woff');
}
@font-face {
    font-family: "ProximaNovaExtrabold";
    src: url('../fonts/ProximaNova/ProximaNovaExtrabld/font.woff2') format('woff2'), url('../fonts/ProximaNova/ProximaNovaExtrabld/font.woff') format('woff');
}
@font-face {
    font-family: "ProximaNovaCondExtrabold";
    src: url('../fonts/ProximaNova/ProximaNovaACondBold/font.woff2') format('woff2'), url('../fonts/ProximaNova/ProximaNovaACondBold/font.woff') format('woff');
}
@font-face {
    font-family: "ProximaNovaSemiBold";
    src: url('../fonts/ProximaNova/ProximaNovaASemibold/font.woff2') format('woff2'), url('../fonts/ProximaNova/ProximaNovaASemibold/font.woff') format('woff');
}


#bio {
    background: #4480C2;
    width: 100%!important;
    overflow-x: hidden!important;

}
body {
    overflow-x: hidden!important;
    width: 100%!important;
}
.nav.nav-tabs {
    width: 100%!important;
    padding: 0 20px;
}
/* #onetrust-banner-sdk {
    display: none!important;
} */
.custom-header {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  position: relative;
}

/* === LOGO === */
.logo {
  height: 60px;
}
/* --- burger button --- */
.button_container {
  position: absolute;
  top: 0;
  margin-top: 80px;
  right: 2%;
  width: 35px;
  height: 27px;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
}
.button_container:hover { opacity: .7; }

.button_container span {
  background: #fff;
  border: none;
  height: 4px;
  width: 100%;
  position: absolute;
  left: 0;
  transition: all .35s ease;
  border-radius: 20px;
}
.button_container span:nth-of-type(1) { top: 0; }
.button_container span:nth-of-type(2) { top: 11px; }
.button_container span:nth-of-type(3) { top: 22px; }

.button_container.active .top {
  transform: translateY(11px) rotate(45deg);
  background: #fff;
}
.button_container.active .middle {
  opacity: 0;
  background: #fff;
}
.button_container.active .bottom {
  transform: translateY(-11px) rotate(-45deg);
  background: #fff;
}
.max-300 {
    max-width: 300px;
}
/* --- overlay background --- */
.overlay {
  position: fixed;
  background: #3D7CC9;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  z-index: 99;
}
.overlay.open {
  opacity: 0.95;
  visibility: visible;
  height: 100%;
}

/* --- overlay menu --- */
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-family: "ProximaNovaSemiBold";
  font-weight: 400;
  text-align: center;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  height: 100%;
}
.overlay li {
  height: 25%;
  min-height: 50px;
  position: relative;
  opacity: 0;
}
.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) { animation-delay: .4s; }
.overlay.open li:nth-of-type(3) { animation-delay: .45s; }
.overlay.open li:nth-of-type(4) { animation-delay: .5s; }

.overlay a {
  color: #fff;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}
.overlay a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #fff;
  transition: .35s;
}
.overlay a:hover::after {
  width: 100%;
}

/* --- animation --- */
@keyframes fadeInRight {
  0% { opacity: 0; left: 20%; }
  100% { opacity: 1; left: 0; }
}
/* fonts */
.f-regular {
    font-family: "ProximaNovaRegular";
}
.f-semibold {
    font-family: "ProximaNovaSemiBold";
}
.f-bold {
    font-family: "ProximaNovaBold";

}
.f-ebold {
    font-family: "ProximaNovaExtrabold";
}
.ubuntu-regular {
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.ubuntu-bold, .fw-bold {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* Sizing */
.size-24 {
    font-size: 24px;
}
.size-22 {
    font-size: 22px;
}
.size-25 {
    font-size: 25px;
}
.size-20 {
    font-size: 20px;
}
.size-30 {
    font-size: 30px;
}
.size-18 {
    font-size: 18px;
}
.size-16 {
    font-size: 16px;
}
.size-14 {
    font-size: 14px;
}
.size-60 {
    font-size: 60px;
}
.size-65 {
    font-size: 65px;
}
/* Colors */
.c-w {
    color: #fff;
}
.c-blue {
    color: #0970E6;
}
.c-blue-dark {
    color: #0D2F69;
}
.d-flex {
    display: flex;
}
.max-107 {
    max-width: 107px;
}
.max-309 {
    max-width: 309px;
}
.d-block {
    display: block;
}
.mb-0 {
    margin-bottom: 0;
}
.my-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.mx-auto {
    margin: auto;
}
.pt-150 {
    padding-top: 0;
}
.lh-12{
    line-height: 1.2;
}
.center-content {
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0;
}
.afg-dk {
    display: block;
    max-width: 160px;
}
.kv {
    max-width: 700px;
}
.afg {
    max-width: 168px;
}
#cosSection {
  background: linear-gradient(180deg, #4C8DD1 0%, #3D7CC9 100%);
  padding: 20px 45px;
  border-radius: 20px;
  max-width: auto;
  margin: 0 auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  position: relative;
  margin-top: 100px;
}
.basket-area {
  position: relative;
  width: 600px;
  margin: 0 auto;
  height: 460px;
}
.category span {
    color: #fff;
    font-size: 26px;
    font-family: "ProximaNovaRegular", sans-serif;
    font-weight: 500;
}
/* carrousel */
.carousel-wrapper {
  position: relative;
  overflow: hidden;    
  padding-left: 260px; 
  padding-top: 80px;
}
/*  */
.s-4 {
    margin-top: 300px;
}
.desc {
  padding-left: 43px; 
  line-height: 1.5;
}
/* produse cos */
#prod-legume {
    left: 100px;
    bottom: -45px;
    width: 450px;
}
#prod-fructe {
    left: 200px;
    rotate: -10deg;
    bottom: -10px;
    width: 405px;
}
#prod-proteine {
    left: 100px;
    bottom: 20px;
    width: 470px;
}
#prod-carbohidrati {
    width: auto;
    left: -105px;
    bottom: -50px;
}
#prod-grasime {
    right: 120px;
    bottom: 0;
    width: 200px;
    rotate: 10deg;
}
.pt-50 {
    padding-top: 50px;
}
.s-4 {
    background: url(../images/bio/bg-blue-dk.png) top center no-repeat;
    background-size: cover;
    padding: 50px 0;
    margin-top: 100px;
}
.s-4 .size-26 {
    font-size: 26px;
}
.s-5 .custom-carousel .box {
    flex: 0 0 95%; 
    /* min-width: 95%; */
    scroll-snap-align: start;
    border-radius: 20px;
    background: #fff;
    padding: 10px 20px 45px;
    max-width: 370px;
}
.title-row {
    display: flex;
    align-items: flex-start;
    justify-content: unset;
    flex-wrap: wrap;
    margin-bottom: 30px;
    gap: 20px;
}
.s-5 .buttons a {
    font-size: 25px;
    border-radius: 10px;
}
.pin-modal-content {
    max-width: 400px;
}
.nav-col {
  display: flex;
  align-items: center;
}
.bg-green {
    background: #378D3A;
    border-radius: 30px;
    max-width: 70px;
    padding: 0 10px;
    margin: 20px 0;
    text-align: center;
    height: 40px;
    position: absolute;
    display: flex;
    align-items: center;     
    justify-content: center; 
}
.category {
    padding: 20px 10px;
    z-index: 2000;
    margin-top: 10px;
    position: relative;
    display: flex;
    gap: 20px;
    align-items: center;
}
/* ipads */
@media(min-width: 700px) and (max-width: 890px){
    .s-5 .custom-carousel .box{
        max-width: 500px;
    }
    .title {
        height: 70px;
    }
    .carousel-wrapper {
        padding-left: 0;
    }
     .pin1 { top: 15%; left: 48%; transform: translate(-50%, -50%); }
        .pin2 { top: 30%; left: 78%; transform: translate(-50%, -50%); }
        .pin3 { top: 60%; left: 85%; transform: translate(-50%, -50%); }
        .pin4 { top: 80%; left: 50%; transform: translate(-50%, -50%); }
        .pin5 { top: 60%; left: 15%; transform: translate(-50%, -50%); }
        .pin6 { top: 30%; left: 20%; transform: translate(-50%, -50%); }
    .hidden-md {
        display: none!important;
    }
     
    .circle {
        position: relative;
        margin: 0 auto;
        height: auto;
        }

    .burger {
        width: 47px;
        height: 45px;
    }
    .burger span {
        height: 4px;
    }
    .center-circle {
        max-width: 700px;
        margin: auto;
        display: block;
    }
    #actForFood {
        position: relative;
        z-index: 1;
        padding: 100px 20px;
        overflow: hidden;
    }

    .circle {
        position: relative;
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }


    .center-circle {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }


    .pin {
        position: absolute;
        transition: transform 0.3s ease;
        z-index: 2;
    }
}
@media(min-width: 900px){
    .container-xl {
        justify-content: center;
        align-items: center;
        max-width: 1000px;
        margin: auto;
        padding-top: 30px;
    }
    .d-flex-xl {
        display: flex;
    }
    .hidden-lg {
        display: none;
    }
    .card-mihail {
        display: block;
        margin: auto;
        max-width: 600px;
        padding-top: 100px;
    }
    
    .circle {
        position: relative;
        margin: 0 auto;
        height: auto;
        }

    .burger {
        width: 47px;
        height: 45px;
    }
    .burger span {
        height: 4px;
    }
    .center-circle {
        max-width: 1300px;
        margin: auto;
        display: block;
    }
    #actForFood {
    position: relative;
    z-index: 1;
    padding: 100px 20px;
    overflow: hidden;
    }

.circle {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}


.center-circle {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


.pin {
    position: absolute;
    transition: transform 0.3s ease;
    z-index: 2;
}
   .size-40 {
        font-size: 40px;
    }
.size-31 {
    font-size: 31px;
}
.revista {
    max-width: 500px;
}

    @media (min-width: 992px) {
        .pin1 { top: 15%; left: 48%; transform: translate(-50%, -50%); }
        .pin2 { top: 30%; left: 78%; transform: translate(-50%, -50%); }
        .pin3 { top: 60%; left: 85%; transform: translate(-50%, -50%); }
        .pin4 { top: 80%; left: 50%; transform: translate(-50%, -50%); }
        .pin5 { top: 60%; left: 15%; transform: translate(-50%, -50%); }
        .pin6 { top: 30%; left: 20%; transform: translate(-50%, -50%); }
    }
    
}
@media(min-width: 1100px) and (max-width: 1800px){
    .title {
        height: 80px;
        margin-top: 20px;
    }
    #cosSection {
        max-width: 800px;
    }
    .overlay nav {
        height: 60%;
        top: 60%;
    }
    .category {
        padding: 10px 10px;
    }
    .category span {
        font-size: 20px;
    }
    .pin {
        max-width: 100px;
    }
    .circle {
        max-width: 600px;
    }
    #actForFood {
        padding: 55px 20px;
    }
    .pin1 {
        top: 3%;
    }
    .pin4 {
        top: 73%;
    }
    .size-60 {
        font-size: 50px;
    }
    .size-40 {
        font-size: 32px;
    }
}
@media(max-width: 600px){
    .max-300 {
        max-width: 200px;
    }
    .revista {
        padding: 2rem 0 1rem 0;
    }
    
    .carousel-wrapper {
        position: relative;
        overflow: hidden;
        padding-top: 80px;
        padding-left: 0; 
    }

    .custom-carousel .box {
    background: #fff;
    border-radius: 20px;
    padding: 10px 20px 45px;
    text-align: center;
    max-width: 360px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    }

    .custom-carousel .box img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 15px;
    }

    .title-product {
    margin-bottom: 5px;
    color: #001A33;
    }

    .owl-carousel .owl-item {
    display: flex;
    justify-content: center;
    }

    .owl-stage {
    display: flex;
    }
    .bg-green {
        margin: 5px;
        top: 0;
        padding: 0 10px;
        max-width: 90px;
        left: 0;
    }
    .carousel-wrapper {
        padding-left: unset;
    }
    .box .size-20 {
        font-size: 17px;
    }
    .title {
        min-height: 80px;
        padding-top: 20px;
    }
    .s-5 .custom-carousel .box {
        padding: 25px 20px 45px;
    }
    #bio .s-5 {
        padding: 4rem 0 5rem 0!important;
    }
    .s-5 .space-between p {
        text-align: center;
    }
    .nav-col {
        display: none;
    }
    .desc {
        padding-left: 54px;
    }
    .py-3 {
        padding: 1.5rem 0;
    }
    .tip-aliment  .size-30 {
        font-size: 19px;
    }
    .title-row {
        justify-content: unset;
        flex-wrap: nowrap;
        margin-bottom: 10px;
    }
    .overlay nav {
        font-size: 32px;
        height: 45%;
    }
    .button_container {
        margin-top: 50px;
        right: 7%;
    }
    .s-5 .buttons a {
        font-size: 17px!important;
        border-radius: 10px;
    }
    .s-5 .custom-carousel .box {
        max-width: 330px
    }
    .s-4 .size-26 {
        font-size: 18px;
    }
    .pt-50 {
        padding-top: 0;
    }
    .pt-150 {
        padding-top: 100px;
    }
        /* cottage */
    #prod-proteine { 
        left: 25px;
        bottom: -35px;
        width: 150px;
    }
    /* burger */
    #prod-carbohidrati{     
        width: 250px;
        left: -15px;
        bottom: -50px;
    }

        /* linte */
    #prod-legume {
        left: 32px;
        bottom: -45px;
        width: 195px;
    }
    /* telemea */
    #prod-fructe { left: 80px;  rotate: -10deg;  bottom: 0; width: 115px; }
    #prod-grasime {
        right: 66px;
        bottom: 0;
        width: 90px;
        rotate: 10deg;
    }
    .basket-area {
        width: 240px;
        margin: 0 auto;
        height: 190px;
    }
    .category span {
        font-size: 17px;
    }
    .size-31 {
        font-size: 18px;
    }
    .size-40 {
        font-size: 18px;
    }
    .circle {
        height: 400px;
        position: relative;
    }
    .center-circle {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 1;
        }

        /* === pins === */
        .pin {
        position: absolute;
        top: 22%;
        left: 50%;
        width: 70px;
        height: auto;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        z-index: 2;
        cursor: pointer;
        }

        /* Pozițiile finale (din Figma) */
        .pin1 { top: 25%; left: 50%;width: 80px; }   /* sus */
        .pin2 { top: 45%; left: 85%; }   /* dreapta sus */
        .pin3 { top: 71%; left: 85%; }   /* dreapta jos */
        .pin4 { top: 92%; left: 50%; }   /* jos */
        .pin5 { top: 45%; left: 15%; }   /* stânga jos */
        .pin6 { top: 80%; left: 15%; }   /* stânga sus */
    .s-2 .size-60 {
        font-size: 30px;
    }
    .kv {
        max-width: 300px;
    }
    .afg {
        max-width: 70px;
    }
    .size-60 {
        font-size: 42px;
    }
    .size-30 {
        font-size: 22px;
    }
 
    .max-200 {
        max-width: 200px;
    }
    .size-25 {
        font-size: 18px;
    }
    .max-35 {
        max-width: 35px;
    }
    .s-4 {
      background: url(../images/bio/bg-blue.png) top center no-repeat;
      background-size: cover;
      padding: 50px 0;
      margin-top: 100px;
    }
    #cosSection {
        max-width: unset;
        margin-top: 50px;
        padding: 20px;
        margin-bottom: 100px;
    }
    .basket {
        max-width: 250px;
    }
        
}
.arrow {
    max-width: 18px;
}
.top-row {
  display: flex;
  align-items: center; 
  gap: 10px;           
}
.pt-2 {
    padding-top: 2rem;
}
.text-uppercase {
    text-transform: uppercase;
}


/* === MODAL GENERAL === */
.pin-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  z-index: 9999;
  backdrop-filter: blur(5px);
}


.pin-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.pin-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.75); 
}

.pin-modal.active .pin-modal-overlay {
  opacity: 1;
}

/* === MODAL BOX === */

.pin-modal-content {
  position: relative;
  background: #538ad3;
  padding: 25px 20px;
  z-index: 10;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button:hover {
    background: unset;
    border: unset;
    color: unset;
}
.icon-product {
    max-width: 32px;
}
.pin-modal.active .pin-modal-content {
  transform: scale(1);
  opacity: 1;
}

/* === CLOSE BUTTON === */
.pin-modal-close {
    position: absolute;
    top: 35px;
    right: 0;
    background: unset;
    border: unset;
    max-width: 120px;
}

/* === CONTENT === */

#modalTitle {
  font-size: 20px;
  color: #fff;
  margin-bottom: 10px;
  font-weight: 600;
  font-family: "ProximaNovaBold";

}

#modalText {
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  font-family: "ProximaNovaRegular", sans-serif;
}


.food-btn {
  background: #fff;
  border: none;
  color: #3D7CC9;
  font-weight: bold;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category.active {
  background: #1B6EE9;
  border-radius: 15px;
  color: #fff;
  transform: scale(1.03);
}



.basket {
  width: 100%;
  z-index: 5;
  position: relative;
  margin-top: 60px;
}


.product {
  position: absolute;
  opacity: 0;
  transform: translateY(-300px) scale(0.9);
  transition: opacity 0.3s ease;
  z-index: 3;  
}


/*  */
.tip-aliment {
  text-align: left;
  margin-bottom: 40px;
}


.arrow {
  width: 25px;
  height: auto;
  flex-shrink: 0;
}


.py-3 {
    padding: 3rem 0;
}
.s-4 hr {
    opacity: 0.3;
}
.s-5 {
    background: #0A428F;
}

/* carrousel */
.carrousel {
    padding-top: 50px;
}
/* .s-5 .d-flex {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 16px;
    margin-left: 15px;
} */


.s-5 .custom-carousel .box img {
    max-width: none;
    width: 100%;
    height: auto;
    max-width: 290px;
    margin: auto;
}

.title-product {
    max-width: 320px;
    margin: auto;
}
/* end carrousel */
.buttons {
    padding: 10px 20px;
    width: 100%;
    display: block;
}
.buttons a {
    padding: 16px 24px;
    font-size: 16px;
    font-family: "ProximaNovaSemiBold", sans-serif;
    font-weight: bold;
    text-decoration: none;
    border-radius: 15px;
    background-color: #EE1D23;
    color: #fff;
    transition: background-color 0.3s;
}

/* .section-carousel {
  display: flex;
  justify-content: flex-end;
  padding-left: 80px; 
}
.owl-carousel .owl-stage-outer {
    overflow: visible;
}
.custom-carousel {
  width: 100%;
  max-width: 1400px; 
} */


.custom-carousel {
  display: block;
  width: auto;
}

.owl-stage-outer {
  overflow: visible; 
}

.custom-carousel .box {
  margin-right: 8px; 
  position: relative;
}


.s-5 button {
    background: unset;
    border: unset;
    width: 100%;
}
.space-between {
    justify-content: space-between;
}
.py-5 {
    padding: 5rem 0;
}
.pt-5 {
    padding-top: 5rem;
}
button:active {
    box-shadow: unset;
}