/*2158 pixels (Computer) */
@media (max-width: 135em) {
  /*HOMEPAGE */
  .marquee-img {
    width: 75%;
  }

  .marquee-2-img {
    width: 75%;
  }

  .marquee-3-img {
    width: 75%;
  }

  .img-one {
    width: 75%;
  }
}

/*1808 pixels (Computer) */
@media (max-width: 113em) {
  /*HOMEPAGE */
  .marquee-img {
    width: 100%;
  }

  .marquee-2-img {
    width: 100%;
  }

  .marquee-3-img {
    width: 100%;
  }

  .img-one {
    width: 100%;
  }
}
/* 1700 Pixels */
@media (max-width: 106em) {
  .modal-logo {
    width: 90%;
  }
}

/* 1400 Pixels */
@media (max-width: 88em) {
  .modal-logo {
    width: 100%;
  }

  .left-btn-2,
  .left-btn-2:link,
  .left-btn-2:visited {
    transition: all 0.5s;
    font-size: 5rem;
  }

  .right-btn-2,
  .right-btn-2:link,
  .right-btn-2:visited {
    transition: all 0.5s;
    font-size: 5rem;
  }
}

/* 1312 pixels (Big laptop) */
@media (max-width: 82em) {
  /*HOMEPAGE*/
  .marquee-img {
    width: 100%;
  }

  .marquee-2-img {
    width: 100%;
  }

  .marquee-3-img {
    width: 100%;
  }

  .img-one {
    width: 100%;
  }

  /*Gallery*/
  .logo-gallery-box {
    margin: 3.2rem 4.8rem;
  }
}

/*1200 pixels (Small Laptop)*/
@media (max-width: 75em) {
  .modal {
    width: 50%;
    height: 55vh;
  }

  .modal-box {
    gap: 3.2rem;
  }

  /*MOBILE NAVIGATION*/

  .close-mobile-nav {
    display: block;
    padding: 2.4em;
    align-self: flex-start;
    z-index: 1000;
  }

  .open-mobile-nav {
    display: block;
    padding: 2.4em;
    z-index: 1000;
    align-self: flex-start;
    cursor: pointer;
  }

  .header-box {
    display: none;
  }

  .hidden-nav {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 9.6em;
    background-color: #1b3159;
    background-image: url(png/wild-flowers.png);
    width: 100%;
    height: 100vh;
    align-items: center;
    z-index: 1000;
    font-size: 80%;

    transition: all 0.5s ease-in;

    transform: translateX(100%);

    opacity: 0;

    pointer-events: none;

    visibility: hidden;
  }

  .nav-open .hidden-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .open-mobile-nav {
    position: absolute;
    z-index: 0;
  }

  .ruby-logo-2 {
    width: 60%;
    display: block;
    margin: 0 auto;
  }

  .main-nav-list-2 {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 6.4em;
    text-align: center;
    list-style: none;
  }

  .main-nav-link-2:link,
  .main-nav-link-2:visited {
    font-size: 4.8em;
    text-decoration: none;
    color: #f0e2c8;

    transition: all 0.5s;
  }

  .main-nav-link-2:active,
  .main-nav-link-2:hover {
    cursor: pointer;
    color: #e1c591;
  }

  /*HOMEPAGE*/
  html {
    font-size: 70%;
  }

  .r-img-box {
    margin-left: 0;
  }

  .section-about-us {
    margin-left: 0;
  }

  .grid-home {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    row-gap: 2.4em;
  }

  .van-text-box {
    grid-row: 3;
  }

  /*Footer*/

  .footer {
    margin-left: 0;
  }

  .footer-container {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
  }
  .logo-column {
    align-items: center;
    justify-content: center;
  }

  .address-column {
    align-items: center;
    justify-content: center;
  }

  .navigation-column {
    align-items: center;
    justify-content: center;
  }

  .footer-heading {
    font-weight: 700;
  }

  /*MARQUEES*/

  .page-container {
    margin-left: 0;
  }

  .marquee-type-box {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }

  /*EQUIPMENT*/

  .page-container {
    margin-left: 0;
  }

  .equipment-type-box {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }

  /*Gallery*/
  .carousel-picture {
    width: 80%;
  }

  .left-btn-2,
  .left-btn-2:link,
  .left-btn-2:visited {
    font-size: 4.8rem;
  }

  .right-btn-2,
  .right-btn-2:link,
  .right-btn-2:visited {
    font-size: 4.8rem;
  }

  /*CONTACT-US*/

  .form-container {
    margin-left: 0;
  }

  .contact-info {
    margin-left: 0;
  }

  .contact-info-box {
    flex-direction: column;
    gap: 4.8em;
  }

  .map {
    margin-left: 0;
  }

  /*WEDDING PAGE*/

  .wedding-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .wedding-text-2-box {
    grid-row: 3;
  }

  /*SPECIAL OCCASION PAGE*/

  .special-occasion-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .special-occasion-text-2-box {
    grid-row: 3;
  }

  /*FESTIVALS PAGE*/

  .festival-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .festival-text-2-box {
    grid-row: 3;
  }

  /*CORPORATE EVENTS PAGE*/

  .corporate-event-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .corporate-event-text-2-box {
    grid-row: 3;
  }

  /*LIGHTING PAGE*/

  .lighting-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .lighting-text-2-box {
    grid-row: 3;
  }

  /*FURNITURE PAGE*/

  .furniture-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }

  .furniture-text-2-box {
    grid-row: 3;
  }

  /*DECORATION PAGE*/

  .decoration-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }

  .decoration-text-2-box {
    grid-row: 3;
  }

  /*HEATING PAGE*/

  .heating-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

@media (max-width: 59em) {
  .hidden-nav {
    font-size: 80%;
  }
  /*Homepage*/
  .grid-home {
    grid-template-rows: auto;
    row-gap: 9.6em;
  }

  /*Gallery*/
  .gallery-heading {
    font-size: 3.2rem;
  }

  .gallery-slogan {
    font-size: 3.2rem;
  }

  .carousel-picture {
    width: 80%;
  }

  .left-btn-2,
  .left-btn-2:link,
  .left-btn-2:visited {
    font-size: 4.2rem;
  }

  .right-btn-2,
  .right-btn-2:link,
  .right-btn-2:visited {
    font-size: 4.2rem;
  }

  .btn-comp {
    gap: 2.4rem;
  }

  /*Wedding*/
  .wedding-grid {
    grid-template-rows: auto;
    row-gap: 9.6em;
  }

  /*SPECIAL OCCASION PAGE*/

  .special-occasion-grid {
    grid-template-rows: auto;
    row-gap: 9.6em;
  }

  /*Festivals Page*/
  .festival-grid {
    grid-template-rows: auto;
    row-gap: 9.6em;
  }

  /*CORPORATE EVENTS PAGE*/

  .corporate-event-grid {
    grid-template-rows: auto;
    row-gap: 9.6em;
  }

  /*LIGHTING PAGE*/

  .lighting-grid {
    grid-template-rows: auto;
    row-gap: 9.6em;
  }

  /*FURNITURE PAGE*/

  .furniture-grid {
    grid-template-rows: auto;
    row-gap: 9.6em;
  }

  /*DECORATION PAGE*/

  .decoration-grid {
    grid-template-rows: auto;
    row-gap: 9.6em;
  }
}

@media (max-width: 56em) {
  .modal {
    width: 75%;
    height: 50vh;
  }
}

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

  .grid-home {
    margin: 0 4.8rem;
  }

  .marquee-type-box {
    margin: 3.2rem 4.8rem;
  }

  .equipment-type-box {
    margin: 3.2rem 4.8rem;
  }

  .contact-form-box {
    margin: 6.4rem 4.8rem;
  }

  .wedding-grid {
    margin: 0 4.8rem;
  }

  .special-occasion-grid {
    margin: 0 4.8rem;
  }

  .festival-grid {
    margin: 0 4.8rem;
  }

  .corporate-event-grid {
    margin: 0 4.8rem;
  }

  .lighting-grid {
    margin: 0 4.8rem;
  }

  .furniture-grid {
    margin: 0 4.8rem;
  }

  .decoration-grid {
    margin: 0 4.8rem;
  }

  .hidden-nav {
    font-size: 70%;
  }

  .social-link-box {
    margin-top: 6rem;
  }

  .carousel-picture {
    width: 100%;
  }

  .btn-comp {
    gap: 1.6rem;
  }

  .logo-gallery-box {
    border: none;
    border-bottom: 1px solid #1b3159;
  }
}

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

  .grid-home {
    margin: 0 2.4rem;
  }

  .marquee-type-box {
    margin: 3.2rem 2.4rem;
  }

  .equipment-type-box {
    margin: 3.2rem 2.4rem;
  }

  .contact-form-box {
    margin: 6.4rem 2.4rem;
  }

  .wedding-grid {
    margin: 0 2.4rem;
  }

  .special-occasion-grid {
    margin: 0 2.4rem;
  }

  .festival-grid {
    margin: 0 2.4rem;
  }

  .corporate-event-grid {
    margin: 0 2.4rem;
  }

  .lighting-grid {
    margin: 0 2.4rem;
  }

  .furniture-grid {
    margin: 0 2.4rem;
  }

  .decoration-grid {
    margin: 0 2.4rem;
  }

  .main-nav-list-2 {
    gap: 4.8em;
  }

  .hidden-nav {
    gap: 3.2rem;
    font-size: 80%;
  }

  .main-nav-list-2 {
    gap: 4.8rem;
  }

  .carousel-picture {
    width: 100%;
  }
}

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

  .hidden-nav {
    font-size: 75%;
  }
}

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

  .hidden-nav {
    font-size: 70%;
  }
}

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

  .hidden-nav {
    font-size: 50%;
  }
}

@media (max-width: 21em) {
  html {
    font-size: 35%;
  }
  .hidden-nav {
    font-size: 40%;
  }
}

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

  .hidden-nav {
    font-size: 35%;
  }
}

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

  .hidden-nav {
    font-size: 30%;
  }
}

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

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