/* === Responsive Breakpoints === */

/* Large Screens (Optional adjustments for wide viewports) */
@media (max-width: 1550px) {
  /* Add specific large-screen tweaks if needed */
}

/* Tablet Landscape */
@media (min-width: 920px) and (max-width: 1200px) {
  .container{
    max-width: 100%;
  }
  .navbar-nav {
    gap: 10px !important;
  }
  .navbar-brand{
    margin: 0;
  }
}

/* Tablet Portrait */
@media (max-width: 1020px) {
  h1{
    font-size: 40px !important;
    line-height: 50px !important;
  }
    h2{
      font-size: 35px !important;
      line-height: 40px !important;
    }
    .banner-button{
      font-size: 22px;
    }
    p{
      font-size: 18px;
      line-height: 26px;
    }
    .footer-cta-btn{
      font-size: 22px;
    }
    .container{
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    .cta-form input[type="submit"]{
      font-size: 22px;
    }
    .footer-form-wrapper .wpcf7-submit{
      font-size: 22px;
    }
    .who-we-are-section{
      margin-top: 40px;
    }
    .vimeo-gallery-section {
      padding: 60px 20px;
    }
    .journey-boxes{
      gap: 22px;
    }
    .who-we-are-row{
      flex-wrap: nowrap !important;
    }
    .banner-section{
      padding-top: 160px;
    }
    .who-we-are-section,
    .banner-section{
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
    .journey-section{
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
    .modules-section{
      padding: 0 20px;
    }
    .grillmaster-header{
      padding: 0 20px !important;
    }
    .kitchen-revolution-column-1{
      padding-left: 0;
      padding-bottom: 20px;
    }
    .kitchen-icon-box{
      margin-bottom: 10px;
    }
    .our-work-gallery-section {
      padding: 0px 0 0px 0;
    }
    .our-work-swiper .swiper-slide img{
      height: 400px;
    }
    .footer-form-wrapper{
      padding: 35px 20px 35px 20px;
    }
    .cta-textual-wrapper{
      padding: 35px 70px 35px 70px;
    }
    .banner-white-strip{
      height: 53px;
    }
}

/* Mobile & Small Tablets (<= 991px, Bootstrap breakpoint) */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link{
    padding: 0 !important;
    color: #000;
  }
  .navbar-nav{
    align-items: center !important;
  }
    .container{
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    .navbar-toggler:focus{
      box-shadow: none;
    }
    /* Header layout */
    .header-top {
      gap: 0;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .navbar.navbar-expand-lg{
      padding: 0 20px !important;
    }
    .navbar-collapse {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      background-color: #fff; /* or your background */
      z-index: 1000;
      padding: 20px;
    }
    .navbar-collapse.collapsing {
      transition: none !important;
      height: auto !important;
      display: block !important;
    }

    .navbar-collapse.collapse.show {
      display: block !important;
    }

    .navbar-nav {
      flex-direction: column !important;
      align-items: flex-start !important;
    }

    .navbar-nav .nav-link {
      padding: 0.5rem 1rem;
      width: 100%;
    }
   

    /* Hamburger Button */
    .navbar-toggler {
      background-color: transparent;
      border: none;
      padding: 0;
      outline: none;
      box-shadow: none;
      z-index: 1100;
    }

    .navbar-toggler-icon {
      width: 30px;
      height: 22px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    /* Mobile call button below menu */
    .mobile-call {
      text-align: center;
      padding-bottom: 1rem;
    }
    .footer-top-tag{
      margin-bottom: 1rem;
    }
    .btn-call-mobile {
      background-color: #000;
      border: 2px solid #fff;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    }

    .btn-call-mobile img {
      width: 20px;
      height: 20px;
      margin: 0;
    }
    .banner-section{
      padding-right: 20px;
      padding-left: 20px;
    }
    .mobile-left-menu{
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .who-we-are-section{
      padding: 60px 20px;
      margin-bottom: 0;
    }
    .journey-box {
      width: calc(48% - 20px);
    }

}

/* Small mobile tweaks (optional) */
@media (max-width: 400px) {
  .btn-call {
    font-size: 14px;
    padding: 6px 14px;
  }
  .call-icon {
    height: 20px;
    margin-right: 8px;
  }
}

@media (max-width: 380px) {
  /* Extreme small devices if needed */
}


@media (max-width: 600px) { 

    h2 {
        font-size: 30px !important;
        line-height: 35px !important;
    }
    p {
        font-size: 16px;
    }
    .banner-content-box{
      margin-bottom: 0;
    }
    .footer-form-wrapper{
        max-width: 100%;
        padding: 20px;
        justify-content: center;
    }
    .footer-top-tag{
      font-size: 16px;
      line-height: 18px;
    }
    .footer-bottom{
        font-size: 20px;
        margin-top: 15px !important;
    }
    .footer-form-fields{
        margin-top: 10px;
    }
    .footer-form-fields form p{
        margin-bottom: 0;
    }
    .footer-form-wrapper .wpcf7-form input[type="text"], .footer-form-wrapper .wpcf7-form input[type="tel"], .footer-form-wrapper .wpcf7-form input[type="email"]{
      padding: 7px 12px;
    }
    .footer-form-wrapper .wpcf7-submit{
      font-size: 18px;
      line-height: 44px;
    }
    .footer-cta-btn{
      line-height: 40px;
      font-size: 20px;
    }
    .footer-heading{
      font-size: 30px;
    }
    .form-middle-text{
      margin-TOP: 16px;
    }
    .text-banner-content{
      padding: 20px 20 0px 20px !important;
    }
    .banner-main-heading{
      font-size: 30px !important;
      line-height: 35px !important;   
    }
    .banner-sub-heading{
      font-size: 32px;
      line-height: 40px;
    }
    .banner-description{
      font-size: 16px;
      line-height: 25px;
    }
    .banner-button{
      margin-top: 0;
      font-size: 18px;
      padding: 12px 20px;
    }
    .banner-white-strip{
      display: none;
    }
    .banner-section{
      padding: 20px;
    }
    .mobile-left-menu{
      gap: 10px !important;
    }
    .who-we-are-row {
      flex-direction: column;
    }

    .video-box,
    .who-we-are-content {
      max-width: 100%;
      flex: 1 1 100%;
    }
    .who-we-are-content{
      padding: 40px 20px 0 20px;
    }
    .who-we-are-section {
      padding: 0px 20px;
    }
    .who-we-are-heading{
      font-size: 30px;
      line-height: 35px;
    }
    .who-we-are-button{
      padding: 12px 14px;
      font-size: 18px;
    }
    .play-button{
      width: 50px;
      height: 50px;
      border: 2px solid white;
    }
    .play-button::before {
      border-left: 16px solid white;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      margin-left: 5px;
    }
    .cta-bg-image{
      min-height: 190px;
    }
    .cta-form .wpcf7-form input[type="text"], .cta-form .wpcf7-form input[type="tel"], .cta-form .wpcf7-form input[type="email"]{
      padding: 7px 10px;
    }
    .cta-form input[type="submit"]{
      font-size: 18px;
      line-height: 44px;
      padding: 0px 30px;
      text-align: center !important;
    }
    .cta-textual-wrapper{
      padding: 20px 20px 30px 20px !important;
      order: 2;
    }
    .cta-heading{
      line-height: 35px;
    }
    .cta-description{
      font-size: 22px;
      line-height: 22px;
    }
    .who-we-are-video-wrapper{
      width: 100%;
      height: auto;
    }
    .vimeo-gallery-section{
      padding: 40px 20px;
    }
    .modules-section{
      padding: 0 20px;
      margin-bottom: 40px;
    }
    .module-card{
      width: 320px;
      height: 329px;
      min-height: 355px;
    }
    .modules-swiper{
      padding-bottom: 10px !important;
    }
    .modules-swiper .swiper-button-prev, .modules-swiper .swiper-button-next{
      width: 40px;
      height: 40px;
    }
    .modules-title{
      font-size: 30px;
      margin-bottom: 20px;
    }
    .who-we-are-description{
      font-size: 16px;
      line-height: 25px;
    }
    .module-name{
      font-size: 16px;
      line-height: 25px;
    }
    .footer-desc{
      font-size: 16px;
      line-height: 25px;
    }
    .modules-button-wrapper{
      margin-top: 20px;
    }
    .new-price,
    .old-price{
      font-size: 18px;
    }
    .journey-box {
      width: 100%;
      text-align: center;
      padding-bottom: 30px; /* space for triangle */
    }

    .journey-box::before {
      top: auto;
      right: 50%;
      transform: translateX(50%);
      bottom: -15px;
      border-right: 15px solid transparent;
      border-left: 15px solid transparent;
      border-top: 15px solid #fff;
      border-bottom: none;
    }
    .journey-section{
      padding: 40px 20px;
    }
    .journey-heading{
      font-size: 30px;
      line-height: 35px;
    }
    .journey-description{
      font-size: 16px;
      line-height: 25px;
      margin-bottom: 20px;
    }
    .kitchen-main-header{
      font-size: 30px;
      line-height: 35px;
      margin-bottom: 15px;
    }
    .kitchen-revolution-column-1{
      padding-left: 0;
      padding-bottom: 20px;
    }
    .kitchen-description{
      margin-bottom: 15px;
    }
    .kitchen-tagline{
      font-size: 22px;
      line-height: 30px;
    }
    .kitchen-icon-title{
      font-size: 18px;
    }
    .kitchen-icon-box{
      margin-bottom: 0;
    }
    .kitchen-revolution-section{
      padding: 40px 20px;
    }
    .why-outdoor-heading{
      font-size: 30px;
      line-height: 35px;
      margin-bottom: 15px;
    }
    .why-outdoor-description{
      font-size: 16px;
      line-height: 25px;
      margin-bottom: 0;
    }
    .why-outdoor-title{
      font-size: 18px;
      line-height: 22px;
    }
    .why-choose-outdoor-section{
      padding: 60px 20px;
    }
    .outdoor-wrapper{
      margin-top: 0 !important;
    }
    .testimonial-section{
      padding: 40px 20px;
    }
    .testimonial-heading{
      font-size: 30px;
      line-height: 35px;
    }
    .testimonial-box{
      padding: 0 0 20px 0;
    }
    .testimonial-desc{
      margin: 8px 0;
    }
    .testimonial-wrapper{
      margin-top: 0;
    }
    .gallery-nav{
      width: 25px !important;
      height: 25px !important;
      top: 64%;
    }
    .swiper-button-next.gallery-nav{
      left: 5% !important;
    }
    .swiper-button-prev.gallery-nav{
      right: 5% !important;
    }
    .our-work-gallery-section{
      padding: 40px 20px 16px 20px;
    }
    .gallery-heading{
      font-size: 30px;
      line-height: 35px;
    }
    .vimeo-gallery-section iframe{
      height: auto;
    }
    .testimonial-desc{
      font-size: 18px;
    }
    .footer-cta-btn{
      font-size: 18px;
    }
    .our-work-swiper .swiper-slide{
      min-height: 162px;
    }
    .our-work-swiper .swiper-slide img{
      height: 162px;
    }
    .who-we-are-video-inner{
      background: transparent;
    }
    .col-sm-6:last-of-type .kitchen-icon-box {
        margin-top: 18px;
    }
    .kitchen-icon-box {
        max-width: 100%;
    }
    .accessibility-privacy-links{
      font-size: 18px;
    }
    .privacy-banner {
        min-height: 250px;
    }
    .privacy-banner h1 {
        font-size: 42px;
        line-height: 48px;
        margin-bottom: 14px;
    }
    .breadcrumbs li {
        font-size: 22px;
        line-height: 22px;
    }
    .privacy-banner{
        margin-bottom: 40px;
    }
    .privacy-banner {
        min-height: 250px;
    }
    .page-content {
        padding: 0 20px 0 20px;
        margin-bottom: 60px;
    }
}

@media (max-width: 768px) {
  .modules-tabs {
    border-radius: 0;
    overflow: auto;
    justify-content: start;
  }
  .swiper-wrapper.justify-module-center {
    justify-content: unset;
  }
  .module-tab {
    width: 100%; 
    border-left: none; 
    padding-bottom: 10px; 
    min-width: fit-content;
  }

  .modules-tabs li:last-child {
    border-bottom: none;
  }

  .module-tab.active::after,
  .module-tab:not(.active)::after {
    border-radius: 0; 
    bottom: 2px; 
  }
  .popup-body {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  
  .custom-popup-content {
    min-width: auto;
    width: 95%;
    max-width: 450px;
    max-height: 80vh;
    border-radius: 20px;
  }
  
  .popup-image {
    width: 100%;
    padding: 20px;
    min-height: 260px;
  }
  
  .popup-image img {
    max-height: 220px;
  }
  
  .popup-info {
    padding: 24px 20px;
    text-align: center;
  }
  
  .popup-info h2 {
    font-size: 22px !important;
    margin-bottom: 16px;
    padding-bottom: 12px;
    text-align: right;
  }
  
  .popup-info h2::after {
    right: 8vw;
    transform: translateX(50%);
  }
  
  .popup-description {
    font-size: 14px;
    padding: 10px 14px;
    text-align: right;
  }
  
  .popup-pricing {
    /* justify-content: center; */
  }
  
  .popup-pricing .new-price {
    font-size: 20px;
    padding: 8px 16px;
  }
  
  .qty-main-wrapper {
    flex-direction: column;
    align-items: start;
    gap: 14px;
    margin-top: 10px;
    padding-top: 18px;
  }
  
  .quantity-wrapper {
    justify-content: center;
  }
  
  .add-to-cart {
    width: 100%;
    padding: 14px 20px;
    font-size: 17px;
  }
  
  .close-popup {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  
  .popup-gallery-image {
    width: 50%;
  }
  .popup-info{
    /* padding: 0; */
    width: 100%;
  }
  .header-cart-icon img{
    margin-right: 0px;
  }
  .navbar-brand{
    margin: 0;
  }
  .cart-popup-content {
    width: 95%;
    max-height: 90vh;
    border-radius: 16px;
  }
  
  .cart-popup-content h2 {
    padding: 20px 52px 16px;
    font-size: 22px;
  }
  
  .cart-popup-content h2::after {
    left: 20px;
    font-size: 20px;
  }
  
  .cart-main-wrapper {
    padding: 16px 20px 24px;
    max-height: 55vh;
  }
  
  .cart-popup-item {
    padding: 14px;
    gap: 12px;
  }
  
  .cart-popup-item > img {
    width: 65px;
    height: 65px;
  }
  
  .cart-popup-item strong {
    font-size: 14px;
  }
  
  .close-cart-popup {
    top: 20px;
    left: 14px;
    width: 32px;
    height: 32px;
    font-size: 26px;
  }
  
  .cart-user-form::before {
    font-size: 12px;
  }
  
  .cart-form-field input {
    padding: 14px 16px;
    padding-right: 44px;
    font-size: 15px;
  }
  
  .cart-submit-button {
    padding: 16px 20px;
    font-size: 18px;
  }
  .project-detail-slider .slick-slide {
    margin: 0 5px;
  }
  .project-detail-slider .slick-next{
    width: 30px;
    height: 30px;
    right: 5%;
  }
  .project-detail-slider .slick-prev{
    width: 30px;
    height: 30px;
    left: 5%;
  }
  .project-detail-slider .slick-slide > img{
    max-height: 300px;
  }
  .kitchen-module-section .module-image .popup-image img {
    max-height: 177px;
    object-fit: cover;
  }
  .kitchen-swiper .module-image img {
    max-height: 100%;
  }
}







/* =========================================================
   Landing copy - fluid heading sizing (spec 4.1 / 4.8)

   The rewritten hero headline and contact copy are longer than the text
   these headings were originally sized for, so they scale continuously
   with the viewport instead of jumping between fixed breakpoint values.
   Appended last so it wins over the fixed sizes above.
   ========================================================= */
.banner-main-heading {
  font-size: clamp(27px, 7.2vw, 47px) !important;
  line-height: 1.18 !important;
  /* Stops "אישית" being left alone on its own line. */
  text-wrap: balance;
}

.banner-sub-heading {
  /* !important is needed only to beat the blanket "h2 {...!important}"
     rules in the tablet/mobile blocks above. */
  font-size: clamp(24px, 6.4vw, 45px) !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

.banner-description {
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.5;
}

/* Once the old sub-headline element is removed, the divider above the
   description has nothing left to divide. */
.banner-main-heading + .banner-description {
  border-top: 0;
  padding-top: 0;
}

/* 4.8 moved this section's main message into .footer-top-tag, which was
   styled as a small label. Size it as the heading it now is, and lift it
   off the photo behind the panel. */
.footer-top-tag {
  font-size: clamp(19px, 2.6vw, 28px);
  line-height: 1.35;
  margin-bottom: 16px;
  text-wrap: balance;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Kept fluid in case these two are restored later. */
.footer-heading {
  font-size: clamp(26px, 5.6vw, 36px) !important;
  line-height: 1.2 !important;
  text-wrap: balance;
}

.footer-desc {
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.5;
}


/* The 4.8 message is now this section's heading, but between 601px and
   1250px the panel is only 50% wide (with 100px side padding above 1020px),
   which left ~337px for a line that needs ~392px and forced three lines.
   Widen the panel and trim its padding across that band. */
@media (min-width: 601px) and (max-width: 1250px) {
  .footer-form-wrapper {
    max-width: 78%;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Above the band the panel returns to 50% width, but its 100px side padding
   left only ~418px of text - the heading needs 427px to hold two lines, so
   1251-1268px still broke. Trimming the padding fixes it without widening
   the panel and changing the desktop proportions. */
@media (min-width: 1251px) {
  .footer-form-wrapper {
    padding-left: 70px;
    padding-right: 70px;
  }
}