@media (max-width:69.125em) {
  html {
    font-size: 60.5%;
  }

  .services {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px;
    margin: 0 auto;
    width: 100vw;
    max-width: 100vw;
  }

  .content {
    flex: none;
    width: 80vw;
    margin: 20px 10px;
    scroll-snap-align: center;
  }

  .bottom-header ul li:nth-child(8) {
    display: none;
  }

  footer .footer-box {
    grid-template-columns: repeat(3, 1fr);
  }

  footer .footer-box .footer-items:nth-child(5) {
    grid-column: 2/4;
  }
}

@media (max-width:64em) {
  html {
    font-size: 55%;
  }

  .card {
    width: 30rem;
    height: 20rem;
  }
}

@media (max-width:48em) {
  html {
    font-size: 52%;
  }

  .container {
    margin: 0 2.4rem;
  }

  .bottom-header ul {
    gap: 2rem;
    text-align: center;
  }

  .best-selling-section .collection {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
  }

  .best-selling-section .collection span {
    padding: 1.6rem;
    font-size: 2.4rem;
  }

  .collection-showcase {
    grid-template-columns: 1fr;
  }

  .collection-title {
    font-size: 2rem;
  }

  .view-label {
    font-size: 1.4rem;
  }

  .the-best-of p {
    width: 100%;
  }

  .map {
    height: 50vh;
  }

  .bg-img-parallax {
    height: 85vh;
  }

  .text-box-parallax {
    width: 34vw;
    left: 3rem;
    top: 3rem;
  }
}

@media (max-width:40em) {

  .bottom-header ul li:nth-child(1) {
    display: none;
  }

  .grid-collection .grid-col-box.full-width {
    display: none;
  }

  .grid-collection .grid-col-box:nth-child(3) {
    grid-column: 1/3;
  }

  .hero-section video {
    display: block;
  }

  .cta-form {
    display: block;
    width: 100%;
  }

  .btn--form {
    width: 100%;
    margin: 3.2rem auto;
  }

  .form-group {
    padding-bottom: 3.2rem;
  }

  .hero-section .banner-text-box {
    position: static;
    transform: none;
    align-items: center;
    padding-top: 6.4rem;
  }

  .hero-section .btn-box {
    display: none;
  }

  .top-header {
    padding: .6rem 2.4rem;
  }

  .banner-text-box .btn-box button {
    background-color: var(--hero-color);
    color: var(--white-color);
  }

  .banner-text-box h4 {
    text-align: center;
    line-height: 1.2;
  }

  .img-text-section,
  .card-section {
    grid-template-columns: auto;
  }

  .card-section {
    gap: 4.8rem;
  }

  .card {
    width: 42rem;
    height: 38rem;
  }

  main {
    grid-template-columns: repeat(3, 1fr);
  }

  footer {
    padding: 6.4rem 3.2rem 3.2rem 3.2rem;
  }

  .text-box-parallax {
    width: 48vw;
    padding: 2.4rem;
  }

  .grid-collection {
    gap: 2.4rem;
    grid-template-columns: repeat(2, 1fr);
  }

  footer .footer-box {
    grid-template-columns: repeat(2, 1fr);
  }

  footer .footer-box .footer-items {
    max-width: none;
  }

  .video-grid .video-slide {
    width: 90vw;
  }

  .visit-txt-box {
    padding: 2.4rem;
    width: 50vw;
  }

  footer .footer-box .footer-items:nth-child(5) {
    grid-column: 1 / 3;
  }
}


/* -------------  MOBILE NAVIGATION----------------- */
@media(max-width:30em) {

  html {
    font-size: 48%;
  }

  th,
  td {
    font-size: 1.2rem;
    padding: 1.2rem .8rem;
  }

  .top-header,
  .bottom-header {
    display: none;
  }

  .announcement-bar {
    padding: 1.2rem;
  }

  .marquee strong {
    font-weight: 500;
    font-size: .8rem;
  }

  .banner-text-box {
    padding-bottom: 8px;
  }

  .text-box-parallax {
    width: auto;
    margin: 0 2.4rem;
    left: auto;
  }

  .visit-txt-box {
    margin: 0 3.6rem;
    width: auto;
    left: auto;
    align-items: center;
    text-align: center;
  }

  .text-box-parallax button {
    display: none;
  }

  .grid-collection,
  .best-selling-section .collection {
    gap: 1.2rem;
  }


  .mobile-bottom-navigation {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 0;
    width: 100%;
    max-width: 60rem;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.05);
    z-index: 5;
  }

  .mobile-bottom-navigation .action-btn {
    display: grid;
    position: relative;
    font-size: 4rem;
    border: none;
    background-color: var(--white-color);
    color: var(--hero-color);
    padding: 1rem;
  }

  .mobile-bottom-navigation .action-btn {
    color: var(--fg);
  }

  .mobile-bottom-navigation .action-btn:active,
  .mobile-bottom-navigation .action-btn:hover,
  .action-btn.action--on {
    background-color: var(--fg);
    color: var(--bg);
    border-radius: 150%;
  }

  .action-btn.action--on {
    transform: scale(0.87);
  }

  .grid-collection .grid-col-box .big-span {
    bottom: 4%;
  }

  .banner-text-box p {
    font-size: 1.6rem;
  }

  .banner-text-box h4 {
    font-size: 3rem;
  }

  .banner-text-box span {
    font-size: 1.8rem;
  }

  .hero-section .desktop-img {
    display: none;
  }

  .hero-section .img-slider {
    position: relative;
    width: 100vw;
    height: auto;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
    max-height: 100vh;
  }

  .footer-bottom {
    padding-bottom: 7.5rem;
  }

  .hero-section .mobile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }

  .social-icons {
    max-width: calc(3* 24px + 2* 1.2rem);
  }

  .hero-section .mobile-img.active {
    display: block;
  }

  .bg-img-parallax {
    background-attachment: scroll;
    /* Change to scroll for mobile */
    height: 75vh;
    /* You can adjust the height as needed */
  }

  .img-slider {
    display: block;
  }

  .the-best-of p {
    font-size: 1.4rem;
    font-weight: 400;
  }

  .mid-header ul {
    font-size: 2.8rem;
  }

  .promise-section .section-inner .title-img-wrap h4 span:not(.client-name) {
    font-size: 5.6rem;
  }

  .mid-header ul .mid-top-logo span {
    font-size: 3.6rem;
  }

  .mid-header ul .mid-bottom-logo {
    font-size: 2rem;
  }

  .mid-header.sticky .mid-top-logo span,
  .mid-header.sticky ul {
    font-size: 2.4rem;
  }

  .mid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mid-header ion-icon {
    display: block;
    width: 4rem;
    height: 4rem;
    padding: 1.6rem;
  }

  .mid-header.sticky {
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1);
  }

  .title-box .secondary-text {
    font-weight: 400;
  }

  .container {
    margin: 0 1.2rem;
  }

  .mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: var(--white-color);
    padding-top: 60px;
    transition: 0.3s ease-in-out;
    z-index: 1000;
  }

  .nav-open {
    cursor: pointer;
  }

  .mobile-nav ul {
    list-style-type: none;
    padding: 0;
    font-family: "Avenir Next", "Montserrat", sans-serif;
  }

  .mobile-nav ul li {
    padding: 15px;
    border-bottom: 1px solid #f1f1f1;
  }

  .mobile-nav ul li a {
    color: var(--hero-color);
    text-decoration: none;
    font-size: 18px;
  }

  .mobile-nav ul li a:hover {
    background-color: var(--white-color);
    padding-left: 10px;
    transition: 0.2s;
  }

  .since-section p,
  .visit-ig p {
    font-size: 2.4rem;
    font-family: "Avenir Next", "Montserrat", sans-serif;
  }

  /* Close Button */
  .nav-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
    color: var(--hero-color);
  }

  .nav-close ion-icon {
    font-size: 3.6rem;
  }

  /* Active Class when Nav is Open */
  .mobile-nav.open {
    left: 0;
    /* Slide-in effect */
  }

  /* Overlay for outside click detection */
  .overlay {
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  .announcement-bar {
    margin-bottom: 0;
  }

  .mid-header {
    transition: all .3s ease-in-out;
    background: url(../designing-images/navbar-bg.webp) 0 0 / cover no-repeat;
  }

  .since-section img {
    display: block !important;
    width: 100%;
  }

  .grid-collection {
    margin: 0;
    padding: 4.8rem 1.2rem;
  }

  .hero-section {
    background-color: #f2f7f7;
  }

  .visit-ig {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1px;
  }

  .visit-ig .ig-grid-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    max-width: 100vw;
  }

  .visit-ig .ig-grid-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .grid-collection {
    background: linear-gradient(to bottom, #f2f7f7, white);
  }

  main {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  /* Slider container to allow horizontal scroll */
  .slider {
    display: flex;
    overflow-x: auto;
    /* Enables horizontal scrolling */
    scroll-behavior: smooth;
    width: 100%;
    gap: 16px;
    padding: 16px;
  }

  .slider::-webkit-scrollbar {
    display: none;
  }

  /* Slide styles */
  .slide {
    flex: 0 0 auto;
  }

  .slide img {
    width: 65vw;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
  }

  .ig--1 {
    grid-row: 1/3;
    grid-column: 1/3;
  }

  .ig--2 {
    grid-row: 4/5;
    grid-column: 2/4;
  }

  .how-it-works .how-box ul {
    grid-template-columns: 1fr;
  }

  .lazy-image {
    height: 65vh;
    width: 85vw;
    object-fit: cover;
  }

  .making-img,
  .image-slide {
    height: 85vw;
    width: 85vw;
    object-fit: cover;
  }

  .since-section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    gap: 4.8rem;
    flex-direction: column;
  }

  .since-section p {
    font-size: 2rem;
    font-family: "Avenir Next", "Montserrat", sans-serif;
    letter-spacing: 1.5px;
    line-height: 1.2;
  }

  .since-section .since-img {
    width: 85vw;
    transition: all .3s ease;
  }

  .since-section .since-img:hover {
    transform: scale(1.05);
    transition: all .3s ease;
  }

  .collection-section .collection-grid,
  .hallmark-box {
    grid-template-columns: 1fr 1fr;
  }

  .a1 {
    grid-column: 1/3;
  }


  .collection-grid .collection-item:nth-child(4) {
    display: none;
  }

  .promise-section .section-inner {
    flex-direction: column;
    gap: 2.4rem;
    width: 100%;
  }

  .promise-section .section-inner .title-img-wrap,
  .promise-section .section-inner .bp-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-section .video-container h2 .span1 {
    font-size: 6.8rem;
    margin-left: 6.8rem;
  }

  .hero-section .video-container h2 .span2 {
    margin-left: 18rem;
  }

  .promise-section .section-inner .title-img-wrap h4 {
    font-size: 4.2rem;
    text-align: center;
  }

  .promise-section .section-inner .title-img-wrap h4 span {
    font-size: 5.6rem;
  }

  .how-it-works .how-box {
    max-width: 100vw;
  }

  .bp-container .bp-wrap {
    width: 92%;
  }

  .map {
    height: 55vh;
  }

  /* Show overlay when nav is open */
  .overlay.active {
    display: block;
  }

  .hallmark-box img:nth-child(1) {
    grid-column: 1/3;
    width: 40%;
  }

  /* Full-width container */
  .image-slider-fw {
    width: 100vw;
    /* Full viewport width */
    overflow: hidden;
    /* Hide any overflow */
  }

  /* Slider-sh container to allow horizontal scroll */
  .slider-sh {
    display: flex;
    /* Align items in a row */
    overflow-x: auto;
    /* Horizontal scrolling */
    scroll-behavior: smooth;
    /* Smooth scroll effect */
    width: 100%;
    height: auto;
    gap: 4px;
    padding: 4px;
  }

  .upi img {
    width: 100%;
  }


  /* Hide the scrollbar */
  .slider-sh::-webkit-scrollbar {
    display: none;
  }

  /* Slide-sh styles */
  .slide-sh {
    flex: 0 0 auto;
  }

  .slide-sh img {
    width: 92vw;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
  }

  .form-label {
    font-size: 2.4rem;
  }

  .form-control,
  .form-select {
    font-size: 2.2rem;
  }

  .collection-section .a1 .title {
    font-size: 2.4rem !important;
    font-weight: 500 !important;
  }

}

@media (max-width:24em) {
  html {
    font-size: 45%;
  }
}

/*

-- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

cursive ----- font-family: "Tenor Sans", sans-serif;

less cursive --- font-family: "Avenir Next", "Montserrat", sans-serif;


-- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

*/