/* responsive.css - Responsive overrides for Flene site
   Breakpoints: 1200px (large-laptop), 992px (tablet landscape), 768px (tablet/large phone), 576px (mobile)
   Place this file after style.css in the HTML head.
*/
.mobil-logo{
  position: absolute;
  right: 50px;
}

@media (max-width:1536px) {
  
}

@media (max-width:1680px) {
  header .flene-container{
    padding-left: 120px;
  }
}

@media (max-width:1366px) {
  .flene-container{
    width: 1140px;
  }
  .navbar-search,
 header .navbar ul.navbar-nav .nav-item:nth-last-child(2),
 header .navbar ul.navbar-nav .nav-item:nth-last-child(1)
 {
  display: none;
 }
 .brand-section .flene-container{
  min-height: 940px;
 }
 .brand-images img:nth-child(2){
  left: 90px;
 }
 .brand-images img:nth-child(3){
  right: 20px;
 }
 .why-container,
.new-product-content ul{
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.blog-big-content .blog-image{
  height: auto;
}
footer .flene-container{
  width: calc(100% - 30px);
}
.quality-cover,
.quality-cover img{
  width: 200px;
}
 .values,
  .values.p-r-100{
    padding:0 40px;
  }
  .values-content{
    width: 240px;
  }
  .file-content{
    width: 330px;
    flex-direction: column;
    gap: 20px;
  }
  .blog-list-container{
    width: 100%;
  }
  .category-container{
    width: calc(100% - 40px);
   }
   .category-row{
    justify-content: center;
   }
      .recipe-content{
    flex-wrap: wrap;
   }
}

/* Helpful utility classes for small screens */
@media (max-width: 992px) {
  .desktop-hide-lg { display: none !important; }
  .flene-container{
    width: 100%;
  }
}
@media (min-width: 993px) {
  .mobile-hide { display: none !important; }
}

/* Large laptop / small desktop tweaks */
@media (max-width: 1200px) {

}

/* Tablet (landscape / portrait) */
@media (max-width: 992px) {
 .mobil-logo{
    display: block;
  }
  .brand-images img{
    z-index: -1;
  }
  .brand-images img:nth-child(2){
    left: 10px;
  }
  .brand-images img:nth-child(3){
    right: 10px;
  }
  .new-product-content ul{
    flex-wrap: wrap;
      justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .new-product-content ul li a{
    display: block;
  }
  .new-product-content ul li a img{
    width: 350px;
  }
  .why-container{
    flex-wrap: wrap;
    gap:20px;
    justify-content: center;
  }
  .why-container
  .why-wrapper:first-child{
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
  }
  .flene-info-image,
  .flene-info-content{
    max-width: 480px;
    margin: 20px auto;
  }
  .flene-info-content h4{
    font-size: 34px;
  }
  .flene-info-content p{
    font-size: 18px;
  }
  .flene-info-content a{
    padding: 12px 0px;
    min-width: 200px;
    font-size: 16px;
  }
   .blog-section .section-title{
    margin-bottom: 34px;
  }
  .blog-big-content .blog-image{
    height: auto;
  }
  .blog-info{
    padding: 0 20px;
    text-align: center;
  }
  .blog-section .col-lg-6.row{
    margin: 0;
  }
  .blog-section .col-lg-6.row .col-lg-6{
    padding: 0;
  }
  .blog-section .col-lg-6{margin-bottom: 50px;}
  .promotion-swiper .swiper-slide-active .promotion-content{
    margin: 0 auto;
  }
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-slide-shadow-left{
    opacity: 0!important;
    background: none;
  }
   .footer-menus,
  .footer-content,
  .footer-contact-content{
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    text-align: center;
  }
  .footer-contact-info h5{
    font-size: 12px;
  }
  .footer-contact-info h6{
    font-size: 32px;
  }
  .footer-contact-social{
    flex-direction: column;
  }
  .footer-info{
    align-items: center;
  }
    .references-content{
    flex-wrap: wrap;
    gap:50px;
  }
}

/* Tablet / Large phone and smaller */
@media (max-width: 768px) {

}

/* Mobile phones */
@media (max-width: 576px) {
  .mobil-logo{
    display: block;
  }
   header { height: 84px; }
  .navbar-nav { gap: 6px; }
 .brand-section{
  padding: 20px;
 }
 .tab-panel-content{
    height: 100%;
 }
 .tab-panel-menu{
  margin: 0 0 40px;
 }
 .tab-panel-menu ul{
  flex-wrap: wrap;
  gap:20px;
  padding: 10px 20px;
 }
 .tab-panel-content{
  align-items: flex-start;
 }
 .tab-panel-info{
  font-size: 16px;
 }
  .brand-images{
    display: none;
  }
  .section-title h2{
    font-size: 32px;
  }
  .new-product-content ul{
    flex-wrap: wrap;
    gap: 20px;
  }
  .new-product-content ul li a{
    width: 100%;
    overflow: hidden;
    display: block;
  }
  .new-product-content ul li a img{
    width: 100%;
  }
  .section-title p{
    font-size: 24px;
  }
  .why-container{
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 20px;
  }
  .why-content .why-img{
    justify-content: center;
  }
  .why-title h2{
    font-size: 36px;
    margin-bottom: 10px;
  }
  .why-title p{
    font-size: 18px;
  }
  .product-slide-owl-nav{
    display: none;
  }
  .product-slide{
    padding: 0 20px;
  }
  .flene-info-row{
    padding: 50px 20px;
  }
  .flene-info-content h4{
    font-size: 30px;
  }
  .flene-info-content p{
    font-size: 18px;
  }
  .flene-info-content a{
    padding: 10px 0;
    font-size: 14px;
    min-width: 180px;
    display: inline-block;
    margin: 0 auto 30px;
  }
  .blog-section .section-title{
    margin-bottom: 34px;
  }
  .blog-big-content .blog-image{
    height: auto;
  }
  .blog-info{
    padding: 0 20px;
    text-align: center;
  }
  .blog-section .col-lg-6.row{
    margin: 0;
  }
  .blog-section .col-lg-6.row .col-lg-6{
    padding: 0;
  }
  .blog-section .col-lg-6{margin-bottom: 50px;}

  .references-content{
    flex-wrap: wrap;
    gap:50px;
  }
  .footer-menus,
  .footer-content,
  .footer-contact-content{
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    text-align: center;
  }
  .footer-contact-info h5{
    font-size: 12px;
  }
  .footer-contact-info h6{
    font-size: 32px;
  }
  .footer-contact-social{
    flex-direction: column;
  }
  .footer-info{
    align-items: center;
  }
  .promotion-swiper .swiper-slide-active .promotion-content{
    width: 100%;
  }
  .promotion-swiper .swiper-slide-active .promotion-content .promotion-image{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-slide-shadow-left{
    opacity: 0!important;
    background: none;
  }
  /* about */
  .about-content{
    width: 100%;
  }
  .about-row{
    flex-direction: column-reverse;
  }
  .mission-img img,
  .sidebar{
    width: 100%;
  }
  .mission-info{
    padding-top: 30px;
    padding-right: 20px;
  }
  .mission-info::after{
    top:-80px
  }
  .quality-content{
    flex-direction: column;
    text-align: center;
  }
  .quality-cover,
  .quality-cover img{
    width: 100%;
  }
  .values,
  .values.p-r-100{
    padding:0 40px;
  }
  .values-container{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .values-container::after{
    height: 100%;
  }
  .contact-row{
    flex-direction: column;
  }
  .form-action,
  .form-row{
    width: 100%;
    flex-direction: column;
  }
  .form-group{
    width: 100%;
  }
  .form-action{
    gap:20px
  }
  .blog-list-container{
    width: calc(100% - 40px);
  }
  .blog-detail-row{
    flex-direction: column;
  }
  .brand-wrapper-sidebar,
  .brand-list,
  .brand-cover,
  .brand-cover img,
  .blog-detail-wrapper,
  .blog-sidebar{
    width: 100%;
  }
  .brand-wrapper,
  .brand-row{
    padding: 0;
    flex-direction: column;
  }
   .brand-wrapper-sidebar{
    justify-content: center;
   }
      .brand-list{
        padding: 70px 0 0;
      }
   .brand-list ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap:20px
   }
   .brand-list ul li a::before{
    width: 100%;
    bottom: -12px;
    height: 10px;
    top: inherit;
   }
   .brand-list ul li a{
    padding-left: 0;
   }
   .brand-menu{
    transform: rotate(0);
    margin-left: 0;
    margin-top: 0px;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
   }
   .brand-content{
    padding-bottom: 50px;
   }
   .category-container{
    width: calc(100% - 40px);
   }
   .category-row{
    justify-content: center;
   }
   .contact-box{
    width: 100%;
   }
   .form-action, .form-group.check, .form-group.textarea{
    padding: 0;
   }
   .form{
    padding: 0 24px;
   }
   .recipe-row{
    width: 100%;
    flex-wrap: wrap;
    flex-direction: column;
   }
   .recipe-container,
   .recipe-sidebar{
    width: 100%;
   }
   .recipe-content{
    flex-wrap: wrap;
   }
   .recipe-title h2{
    margin-bottom: 20px;
    text-align: center;
    padding-left: 0;
   }
   .recipe-title h2 + p{
    text-align: center;
   }
   .sustainability-container h2,
   .sustainability-container,
   .recipe-detail-cover img{
    width: 100%;
   }
   .sustainability-container p{
    max-width: 100%;
   }
    .login-card,
    .login-title,
    .recipe-card,
    .recipe-card img,
    .product-detail-info,
    .product-detail-image,
    .product-detail-image img,
    .product-detail-container {
        width: 100%
    }
    .product-detail-wrapper {
        flex-wrap: wrap;
        flex-direction: row;
    }
    .product-detail-image{padding-right:0;border:none
    }
    .product-detail-wrapper{
        padding-left:20px;
        padding-right:20px
    }
    .product-detail-technical{
        flex-direction:column;
        flex-wrap:wrap
    }

    .product-detail-action button.btn-cart{
        width:calc(100% - 40px)
    }

    .product-detail-techical-col {
        border-bottom: solid 1px #01041b21;
        border-right:none
    }
    .login-title{
        margin-left:0
    }

    .login-button{
        width:100%;
        margin:0;
        float:left
    }
    .login-forgot-password {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-bottom: 40px;
    }
        .login-forgot-password::after{
            left:20px
        }
    .col-lg-4.offset-1{
        margin-left:0
    }
    .dasboard{
        padding:0!important
    }
        .dasboard li{
            width:100%!important
        }
    .addresses-col {
        max-width: 100% !important;
        flex: 1 0 0;
    }
    .order-address-item,
    .order-header {
        flex-direction: column;
    }
    .address-col{
        max-width:100%!important;
        min-width:100%!important;
    }
    .user-sidebar ul{
        margin-top:50px!important
    }
    .page-section{
        margin:45px 0!important
    }
    .orders-table{
        flex-direction:column;
        gap:10px
    }
    .cart-buttons a{
        display:block;
        width:100%;
    }
        .cart-buttons a:last-child{
            margin-left:0;
            margin-top:20px
        }
    .cart-total{
        margin-top:20px
    }
}