@media screen and (min-width: 768px) {
  .designYourClothing .info {
    max-width: 560px;
  }
  .designYourClothing .CustomizedImg {
    max-width: 624px;
  }
  .OurVision .info {
    max-width: 560px;
  }
  .OurVision .CustomizedImg {
    max-width: 624px;
  }
  .whatDiff .info {
    max-width: 560px;
  }
  .whatDiff .CustomizedImg {
    max-width: 624px;
  }
}
@media screen and (min-width: 1367px) {
  .modal {
    max-width: 1360px;
  }
}
@media screen and (max-width: 1167px) and (min-width: 768px) {
  .productListingWrapper .productFilter {
    max-width: 250px;
  }
  .productListingWrapper .productListing {
    padding-left: 20px;
  }
  .productListingWrapper .productListing .topBar .sortBy {
    max-width: 200px;
  }
  .productListingWrapper .productListing .grid {
    gap: 14px;
  }
  .price-range-slider .range-value input {
    word-spacing: 80px;
  }
  .desiStitchCategories .grid .gridItem .btn,
  .productListing .grid .gridItem .btn {
    font-size: 12px;
  }
  .desiStitchCategories .grid .gridItem .btn .hover-effect,
  .productListing .grid .gridItem .btn .hover-effect {
    height: 15px;
  }
  .productDetailWrapper .productDetilSlider {
    gap: 14px;
  }
  .productDetailWrapper .productDetilSlider .thumbItem ul {
    gap: 14px;
  }
  .productDetailWrapper .productDetilSlider .thumbItem ul li {
    height: 125px;
  }
  .productDetailWrapper .productDetail .customizeDress .btnGroup .btn {
    font-size: 12px;
  }
}
@media screen and (max-width: 1167px) {
  .heroSection .item .caption {
    bottom: 52px;
  }
  .heroSection .item .caption h1 {
    font-size: 40px;
    line-height: 52px;
  }
  .heroSection .item .caption p {
    font-size: 18px;
    margin-top: 10px;
  }
  .heroSection .indicator {
    bottom: 16px;
  }
  .marqueeSlider .scrollText {
    padding: 20px 0;
    font-size: 24px;
  }
  .designYourClothing .container {
    gap: 24px;
  }
  .designYourClothing .info h1 {
    font-size: 28px;
    line-height: 35px;
  }
  .designYourClothing .info p {
    font-size: 14px;
  }
  .designYourClothing .info .btn {
    margin-top: 12px;
  }
  .OurVision .container,
  .whatDiff .container {
    gap: 24px;
  }
  .OurVision .info h1,
  .whatDiff .info h1 {
    font-size: 28px;
    line-height: 35px;
  }
  .OurVision .info h5,
  .whatDiff .info h5 {
    font-size: 18px;
    line-height: 20px;
  }
  .OurVision .info p,
  .whatDiff .info p {
    font-size: 14px;
  }
  .OurVision .info .btn,
  .whatDiff .info .btn {
    margin-top: 12px;
  }
  .desiStitchCategories .grid {
    grid-column-gap: 14px;
  }
  .iwowdStand {
    padding: 24px 0;
  }
  .iwowdStand p {
    font-size: 20px;
  }
  .whatDiff .info ul li {
    font-size: 14px;
  }
  .customizeExp .info {
    gap: 28px;
    font-size: 16px;
  }
  .team .info {
    gap: 0;
  }
  .team .info h1 {
    font-size: 28px;
  }
  .team .info p {
    font-size: 14px;
  }
  .whyChoose .colContainer h5 {
    font-size: 14px;
  }
  .whyChoose .colContainer p {
    font-size: 12px;
  }
  .productListingWrapper .productFilter .btnsGroup {
    gap: 8px;
  }
  .productListingWrapper .productFilter .btnsGroup .hover-effect {
    height: 15px;
  }
  .productListingWrapper .productFilter .btnsGroup .btn {
    font-size: 12px;
  }
  .productListingWrapper .productListing .topBar {
    flex-direction: column;
    align-items: flex-start;
  }
  .productListingWrapper .productListing .topBar .productCount {
    margin-left: 0;
  }
  .productListingWrapper .productListing .topBar h1 {
    font-size: 26px;
  }
  .productDetailWrapper .productDetail h1 {
    font-size: 26px;
    line-height: 30px;
  }
  .productDetailWrapper .productDetilSlider .thumbItem ul li {
    width: 60px;
    height: 86px;
  }
  .productDetailWrapper .productDetail .customizeDress .selectedFebric .info {
    padding: 6px 14px;
  }
}
@media screen and (max-width: 767px) {
  .menuToggleBtn {
    display: block;
  }
  .header {
    position: static !important;
  }
  .header button {
    height: 30px;
  }
  .header .container {
    padding: 14px;
  }
  .header .topBar a {
    margin: 0 50px;
  }
  .header .topBar a img {
    height: 30px;
  }
  .header .topBar .topRightNav {
    gap: 16px;
  }
  .header .topBar img {
    filter: none;
  }
  .header .navigation {
    display: none;
  }
  .header .navigation ul {
    flex-direction: column;
  }
  .header .navigation ul li a {
    color: #0B0B0B;
  }
  .header .navigation ul li.dropdown .togglebtn {
    filter: invert(48%) sepia(32%) saturate(531%) hue-rotate(273deg) brightness(85%) contrast(82%);
    border-left: solid 1px #ccc;
  }
  .header .dropdownMenu {
    position: static;
    visibility: visible;
    opacity: 1;
    box-shadow: none;
    display: none;
  }
  .heroSection .indicator {
    bottom: 10px;
  }
  .heroSection .item .caption {
    bottom: 30px;
    gap: 0;
  }
  .heroSection .item .caption h1 {
    font-size: 24px;
  }
  .heroSection .item .caption p {
    font-size: 12px;
    margin: 0;
  }
  .heroSection .item .caption .btn {
    margin-top: 10px;
    font-size: 12px;
    padding: 6px 10px;
  }
  .heroSection .item .caption .btn .hover-effect {
    height: 15px;
  }
  .categorySection {
    padding: 12px 0 16px;
  }
  .categorySection .container {
    padding: 15px;
  }
  .categorySection .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .title h1 {
    font-size: 26px;
  }
  .title p {
    font-size: 16px;
  }
  .designYourClothing {
    padding: 12px 0 16px;
  }
  .designYourClothing .container {
    padding: 15px;
    flex-direction: column;
  }
  .designYourClothing .info p {
    font-size: 16px;
  }
  .desiStitchCategories .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .desiStitch .caption h1 {
    font-size: 28px;
    line-height: 30px;
  }
  .exploreFebrics {
    padding: 12px 0 16px;
  }
  .exploreFebrics .container {
    padding: 15px;
  }
  .exploreFebrics .grid {
    gap: 12px;
    flex-direction: column;
  }
  .exploreFebrics .grid .gridItem {
    max-width: 100%;
  }
  .desiStitchCategories {
    padding: 32px 0 24px;
  }
  .footer .footerTop {
    flex-direction: column;
  }
  .footer .footerTop .col {
    width: 100% !important;
  }
  .footer .footerTop .col .links {
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
  }
  .footer .footerTop .col h4 {
    border-bottom: solid 1px #fff;
    margin-bottom: 0;
    padding-bottom: 10px;
    pointer-events: all;
    position: relative;
    cursor: pointer;
  }
  .footer .footerTop .col h4:before {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    content: '';
    background: url(../img/plus-black.svg) right center no-repeat;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    z-index: 1;
  }
  .footer .footerTop .col h4.open:before {
    background: url(../img/minus-black.svg) right center no-repeat;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
  }
  .footer .footerTop .col h4.open + .links {
    height: auto;
    overflow: visible;
  }
  .footer .footerBottom {
    font-size: 12px;
    text-align: center;
  }
  .innerBanner .caption {
    font-size: 38px;
  }
  .OurVision {
    padding: 12px 0 16px;
  }
  .OurVision .container,
  .whatDiff .container {
    padding: 15px;
    flex-direction: column;
  }
  .OurVision .info p,
  .whatDiff .info p {
    font-size: 16px;
  }
  .customizeExp,
  .whatIwowd {
    padding: 12px 0 16px;
  }
  .customizeExp .container {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .customizeExp .info {
    margin-top: 0;
    flex-direction: column;
  }
  .team {
    padding: 12px 0 16px;
  }
  .team .container {
    padding: 15px;
    flex-direction: column;
  }
  .team .info p {
    font-size: 16px;
  }
  .whyChoose {
    padding: 32px 0;
  }
  .whyChoose h1 {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .whyChoose .colContainer {
    flex-wrap: wrap;
  }
  .whyChoose .colContainer .col {
    width: 45%;
  }
  .iwowdStand p {
    font-size: 16px;
  }
  .spacer {
    display: none;
  }
  .productListingWrapper {
    padding: 25px 0;
  }
  .productListingWrapper .container {
    flex-direction: column;
  }
  .productListingWrapper .productFilter {
    width: 100%;
    max-width: 100%;
    margin-bottom: 50px;
  }
  .productListingWrapper .productListing {
    width: 100%;
    max-width: 100%;
  }
  .productListingWrapper .productListing .topBar .sortBy {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .productListingWrapper .productListing .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 14px;
  }
  .productDetailWrapper {
    padding: 25px 0;
  }
  .productDetailWrapper .container {
    flex-direction: column;
  }
  .productDetailWrapper .productDetilSlider {
    width: 100%;
    gap: 12px;
  }
  .productDetailWrapper .productDetilSlider .thumbItem ul {
    gap: 11px;
  }
  .productDetailWrapper .productDetilSlider .thumbItem ul li {
    height: 112px;
  }
  .productDetailWrapper .productDetail {
    width: 100%;
    max-width: 100%;
    margin-top: 50px;
  }
  .productDetailWrapper .productDetail .customizeDress .btnGroup .btn {
    font-size: 12px;
    padding: 6px 12px;
  }
  .productDetailWrapper .productDetail .customizeDress .selectedFebric {
    flex-direction: column;
  }
  .productDetailWrapper .productDetail .customizeDress .selectedFebric .img {
    max-width: 100%;
    width: 100%;
  }
  .productDetailWrapper .productDetail .customizeDress .selectedFebric .info {
    padding: 6px 0;
  }
  .modal {
    max-width: 360px;
    padding: 16px;
    top: 20px;
  }
  .modal .modalHeader {
    flex-direction: column;
    align-items: flex-start;
  }
  .modal .modalHeader h1 {
    font-size: 26px;
  }
  .modal .modalHeader .productCount {
    margin-left: 0;
  }
  .modal .modalHeader .close {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .modal .modalContent {
    flex-direction: column;
  }
  .modal .modalContent .febricCategories .categories {
    max-height: 210px;
    overflow-y: auto;
  }
  .modal .modalContent .febricCategories .categories .btn {
    min-height: 46px;
  }
  .modal .modalContent .febricCategories,
  .modal .modalContent .febrics,
  .modal .modalContent .selectedFebric_ {
    max-width: 100%;
    width: 100%;
  }
  .modal .modalContent .febrics {
    max-height: 230px;
    overflow-y: auto;
  }
  .modal .modalContent .febrics .img {
    width: 90px;
    height: 90px;
  }
}