/* === 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 20px;
      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%;
  }
}