html {
  scroll-behavior: smooth;
}

.bg-icon {
  width: 1728px;
  height: 1117px;
  position: relative;
  object-fit: cover;
  display: none;
  max-width: 100%;
  z-index: 0;
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: linear-gradient(180deg, #1e1e1e, rgba(30, 30, 30, 0.4));
  mix-blend-mode: multiply;
  z-index: 1;
}
.icon {
  width: 227px;
  position: relative;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
}

nav{
  background-color: transparent;
}

nav ul{
  width:100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0%;
}

nav li{
  height: 20px;
}

nav a{
  height: 100%;
  padding: 0px 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: #fff9eb;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}

nav a:hover{
  color: #4bbe8e;
}

nav li:first-child{
  margin-right: auto;
}

.menu-button{
  display: none;
}

.sidebar{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width:250px;
  z-index:999;
  background-color: rgba(13, 11, 7, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin:0%;
}

.sidebar li{
  height: 80px !important;
  width:100%;
}


.home-parent {
  margin: 0;
  display: flex;
  justify-content: flex-end;
  gap: 25.1px;
  max-width: 100%;
  text-align: left;
  font-size: var(--h4-size);
  color: var(--color-white);
  font-family: var(--h4);
}
.navbar {
  align-self: stretch;
  align-items: flex-end;
  justify-content: space-between;
  top: 0;
  z-index: 99;
  position: sticky;
  max-width: 100%;
  gap: var(--gap-xl);
  text-align: left;
  font-size: var(--h4-size);
  color: var(--color-white);
  font-family: var(--h4);
}
.renaissance-revisited {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
  z-index: 3;
}
.leonardo-da-vinci {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: var(--h1-size);
  letter-spacing: 0.02em;
  font-weight: 400;
  font-family: var(--h1);
  color: var(--primary);
  z-index: 3;
}
.renaissance-revisited-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.explore-his-world {
  align-self: stretch;
  position: relative;
  line-height: 32px;
  font-weight: 600;
  z-index: 3;
}
.right-arrow-icon {
  height: 59px;
  width: 61px;
  position: relative;
  object-fit: contain;
  z-index: 3;
}
.right-arrow-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl);
}
.hero-button-container {
  width: 658px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 22px;
  max-width: 100%;
}
.hero-button-container-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px var(--padding-xl);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--h4-size);
  color: var(--primary);
  font-family: var(--h4);
}
.hero-content {
  width: 1336px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 234px;
  max-width: 100%;
  z-index: 2;
}
.hero-content-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0px 3px 0px 0px;
  box-sizing: border-box;
  max-width: 100%;
}
.home {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-45xl) var(--padding-41xl) var(--padding-38xl) 63px;
  box-sizing: border-box;
  position: relative;
  gap: 313px;
  background-image: url("./public/bg@2x.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  max-width: 100%;
  text-align: center;
  font-size: var(--h3-size);
  color: rgba(255, 249, 235, 0.7);
  font-family: var(--h3);
}
.about-image-icon {
  height: 821px;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
  min-width: 426px;
}
.about-leonardo {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}
.da-vincis-life {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 85px;
  font-weight: 500;
  font-family: inherit;
}
.leonardo-da-vinci1 {
  margin: 0;
}
.blank-line {
  margin: 0;
}
.a-true-polymath {
  margin: 0;
}
.leonardo-da-vinci-container {
  align-self: stretch;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
  color: rgba(0, 0, 0, 0.8);
}
.description {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 19px 0px 0px;
  gap: 25px;
}
.description-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: var(--h2-size);
  color: var(--color-black);
  font-family: var(--h3);
}
.bio-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xl) 0px;
  box-sizing: border-box;
  gap: var(--gap-61xl);
  min-width: 422px;
  max-width: 100%;
}
.bio {
  width: 1359px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-35xl);
  max-width: 100%;
}
.about1 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 151px 171px;
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  font-size: var(--h4-size);
  color: var(--tertiary);
  font-family: var(--h4);
}
.gallery2 {
  flex: 1;
  position: relative;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  max-width: 100%;
}
.gallery-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 25px;
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--h4-size);
  color: var(--tertiary);
  font-family: var(--h4);
}
.masterpieces-reimagined {
  margin: 0;
  width: 741px;
  position: relative;
  font-size: inherit;
  line-height: 85px;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  min-width: 741px;
  max-width: 100%;
}
.his-approach-to {
  align-self: stretch;
  position: relative;
  line-height: 32px;
}
.his-approach-to-art-was-as-rev-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-18xl) 0px 0px;
  box-sizing: border-box;
  min-width: 512px;
  max-width: 100%;
  font-size: var(--h4-size);
  color: #0d0b07;
  font-family: var(--h4);
}
.gallery-description {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 79px;
  max-width: 100%;
  font-size: var(--h2-size);
  color: var(--color-black);
}
.mona-lisa {
  margin: 0;
  width: 609px;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.it-depicts-a {
  width: 609px;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
  display: inline-block;
  max-width: 100%;
}
.picture1 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 672px var(--padding-xl) var(--padding-68xl) var(--padding-40xl);
  box-sizing: border-box;
  gap: var(--gap-xs);
  background-image: url("./public/frame-5@3x.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  max-width: 100%;
}

.salvator-mundi {
  margin: 0;
  width: 609px;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.salvator-mundi-is {
  width: 609px;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
  display: inline-block;
  max-width: 100%;
}
.picture2 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-685xl) var(--padding-xl) var(--padding-68xl)
    var(--padding-921xl);
  box-sizing: border-box;
  gap: var(--gap-xs);
  background-image: url("./public/gallery-item-titles@3x.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  max-width: 100%;
}
.lady-with-an {
  margin: 0;
  width: 609px;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.this-painting-depicts {
  width: 609px;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
  display: inline-block;
  max-width: 100%;
}
.picture3 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 672px var(--padding-xl) var(--padding-68xl) var(--padding-40xl);
  box-sizing: border-box;
  gap: var(--gap-xs);
  background-image: url("./public/gallery-item-titles1@3x.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  max-width: 100%;
}
.frame-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-36xl);
  max-width: 100%;
}
.the-last-supper {
  margin: 0;
  width: 609px;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.this-painting-depicts1 {
  width: 609px;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
  display: inline-block;
  max-width: 100%;
}
.picture4 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-685xl) var(--padding-xl) var(--padding-68xl)
    var(--padding-921xl);
  box-sizing: border-box;
  gap: var(--gap-xs);
  background-image: url("./public/gallery-item-titles2@3x.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  max-width: 100%;
}
.head-of-a {
  margin: 0;
  width: 609px;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.this-painting-depicts2 {
  width: 609px;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
  display: inline-block;
  max-width: 100%;
}
.picture5 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-685xl) var(--padding-xl) var(--padding-68xl)
    var(--padding-40xl);
  box-sizing: border-box;
  gap: var(--gap-xs);
  background-image: url("./public/gallery-item-titles3@3x.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  max-width: 100%;
}
.picture4-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-36xl);
  max-width: 100%;
}
.vitruvian-man {
  margin: 0;
  width: 609px;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.it-encapsulates-the {
  width: 609px;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
  display: inline-block;
  max-width: 100%;
}
.picture6 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-685xl) var(--padding-xl) var(--padding-68xl)
    var(--padding-921xl);
  box-sizing: border-box;
  gap: var(--gap-xs);
  background-image: url("./public/gallery-item-titles4@3x.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  max-width: 100%;
}
.gallery1 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 68px var(--padding-40xl) 99px var(--padding-41xl);
  box-sizing: border-box;
  gap: var(--gap-36xl);
  max-width: 100%;
  text-align: left;
  font-size: var(--h3-size);
  color: var(--primary);
  font-family: var(--h3);
}
.events2 {
  flex: 1;
  position: relative;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  max-width: 100%;
}
.events-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-3xs) 0px var(--padding-8xs);
  box-sizing: border-box;
  max-width: 100%;
  color: var(--tertiary);
  font-family: var(--h4);
}
.experience-the-renaissance {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 85px;
  font-weight: 500;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.experience-the-renaissance-ou-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px var(--padding-3xs) 0px var(--padding-8xs);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--h2-size);
}
.events-leonardo-live-image-pla {
  align-self: stretch;
  height: 651px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.leonardo-live {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
}
.an-interactive-online {
  align-self: stretch;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
}
.live-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-21xl);
  box-sizing: border-box;
  gap: var(--gap-4xs);
  min-height: 176px;
}
.book-spot {
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-weight: 600;
  font-family: var(--h4);
  color: var(--color-black);
  text-align: center;
  display: inline-block;
  min-width: 124px;
}
.book-spot-wrapper {
  cursor: pointer;
  border: none;
  padding: var(--padding-sm-5) var(--padding-21xl);
  background-color: var(--action);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.book-spot-wrapper:hover {
  background-color: var(--color-mediumseagreen);
}
.event-live {
  width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 33px;
  max-width: 100%;
}
.events-workshop-image {
  align-self: stretch;
  height: 651px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.da-vincis-workshop {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
}
.hands-on-workshops-inspired {
  align-self: stretch;
  height: 62px;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
  display: inline-block;
  flex-shrink: 0;
}
.event-titles {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-21xl);
  box-sizing: border-box;
  gap: var(--gap-4xs);
  min-height: 176px;
}
.book-spot1 {
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-weight: 600;
  font-family: var(--h4);
  color: var(--color-black);
  text-align: center;
  display: inline-block;
  min-width: 124px;
}
.book-spot-container {
  cursor: pointer;
  border: none;
  padding: var(--padding-sm-5) var(--padding-21xl);
  background-color: var(--action);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.book-spot-container:hover {
  background-color: var(--color-mediumseagreen);
}
.event-details {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-21xl);
}
.event-containers {
  width: 519px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 26px;
  max-width: 100%;
}
.event-containers-child {
  width: 519px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
  max-width: 100%;
}
.masterpiece-monday {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
}
.exclusive-exhibitions-showcasi {
  align-self: stretch;
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-family: var(--h4);
}
.masterpiece-monday-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px var(--padding-21xl);
  box-sizing: border-box;
  gap: var(--gap-4xs);
  min-height: 176px;
}
.event-containers-inner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
}
.book-spot2 {
  position: relative;
  font-size: var(--h4-size);
  line-height: 32px;
  font-weight: 600;
  font-family: var(--h4);
  color: var(--color-black);
  text-align: center;
  display: inline-block;
  min-width: 124px;
}
.book-spot-frame {
  cursor: pointer;
  border: none;
  padding: var(--padding-sm-5) var(--padding-21xl);
  background-color: var(--action);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.book-spot-frame:hover {
  background-color: var(--color-mediumseagreen);
}
.event-containers1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 23px;
  min-width: 350px;
  max-width: 100%;
}
.events-content {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xl);
  max-width: 100%;
  font-size: var(--h3-size);
}
.events1 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 53px 55px 188px;
  box-sizing: border-box;
  gap: var(--gap-61xl);
  max-width: 100%;
  text-align: left;
  font-size: var(--h4-size);
  color: var(--color-black);
  font-family: var(--h3);
}
.icon1 {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}
.icon-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 0px 0px var(--padding-12xs);
  box-sizing: border-box;
  max-width: 100%;
}
.facebook-circled-icon {
  height: 45px;
  width: 45px;
  position: relative;
  object-fit: cover;
  min-height: 45px;
}
.instagram-icon {
  height: 45px;
  width: 45px;
  position: relative;
  object-fit: cover;
  min-height: 45px;
}
.twitterx-icon {
  height: 45px;
  width: 45px;
  position: relative;
  object-fit: cover;
  min-height: 45px;
}
.linkedin-icon {
  height: 45px;
  width: 45px;
  position: relative;
  object-fit: cover;
  min-height: 45px;
}
.facebook-circled-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
}
.frame-group {
  width: 384px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 258px;
  max-width: 100%;
}
.privacy-policy {
  position: relative;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}
.terms-conditions {
  position: relative;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}
.contact-us {
  position: relative;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}
.privacy-policy-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
}
.jalan-teknologi-35 {
  width: 255px;
  position: relative;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  font-weight: 500;
  display: inline-block;
}
.nitish-org-all {
  position: relative;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  font-weight: 500;
}
.jalan-teknologi-35-kota-dama-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 36px;
  font-size: var(--font-size-lg);
}
.frame-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 193px;
  max-width: 100%;
  font-size: var(--h4-size);
  color: var(--primary);
}
.footer {
  align-self: stretch;
  background-color: var(--tertiary);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 73px var(--padding-40xl) 54px;
  box-sizing: border-box;
  gap: 434px;
  max-width: 100%;
  text-align: left;
  font-size: 60px;
  color: var(--color-white);
  font-family: var(--h4);
}
.landing-page {
  width: 100%;
  position: relative;
  background-color: var(--primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  line-height: normal;
  letter-spacing: normal;
}

@media screen and (max-width: 1400px) {
  .hero-content {
    gap: 117px;
  }

  .about1 {
    padding-left: var(--padding-66xl);
    padding-right: var(--padding-66xl);
    box-sizing: border-box;
  }

  .masterpieces-reimagined {
    flex: 1;
  }

  .gallery-description {
    flex-wrap: wrap;
  }

  .picture2 {
    padding-left: var(--padding-451xl);
    box-sizing: border-box;
  }

  .picture4 {
    padding-left: var(--padding-451xl);
    box-sizing: border-box;
  }

  .picture6 {
    padding-left: var(--padding-451xl);
    box-sizing: border-box;
  }

  .gallery1 {
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-8xl);
    box-sizing: border-box;
  }

  .events1 {
    padding-top: 34px;
    padding-bottom: 122px;
    box-sizing: border-box;
  }

  .events-content{
    align-items: flex-start;
    justify-content: flex-start;
    resize: 80;
  }

  .footer {
    flex-wrap: wrap;
    gap: 217px;
    padding-left: var(--padding-10xl);
    padding-right: var(--padding-10xl);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1200px) {
  .home {
    gap: 156px;
    padding: var(--padding-23xl) var(--padding-11xl) var(--padding-18xl) 31px;
    box-sizing: border-box;
  }

  .right-arrow-icon {
    height: 35px;
    width: 34px;
    position: relative;
    object-fit: contain;
    z-index: 3
  }
  
  .about1 {
    padding-top: var(--padding-79xl);
    padding-bottom: var(--padding-79xl);
    box-sizing: border-box;
  }

  .masterpieces-reimagined {
    min-width: 100%;
  }

  .picture2 {
    padding-top: var(--padding-439xl);
    padding-bottom: var(--padding-38xl);
    box-sizing: border-box;
  }

  .picture3 {
    padding-top: 437px;
    padding-bottom: var(--padding-38xl);
    box-sizing: border-box;
  }

  .picture4 {
    padding-top: var(--padding-439xl);
    padding-bottom: var(--padding-38xl);
    box-sizing: border-box;
  }

  .picture5 {
    padding-top: var(--padding-439xl);
    padding-bottom: var(--padding-38xl);
    box-sizing: border-box;
  }

  .picture6 {
    padding-top: var(--padding-439xl);
    padding-bottom: var(--padding-38xl);
    box-sizing: border-box;
  }

  .gallery1 {
    padding-left: var(--padding-11xl);
    padding-right: var(--padding-10xl);
    padding-bottom: var(--padding-xl);
    box-sizing: border-box;
  }

  .events1 {
    gap: var(--gap-21xl);
    padding-left: var(--padding-8xl);
    padding-right: var(--padding-8xl);
    box-sizing: border-box;
  }

}

@media screen and (max-width: 825px) {

  .hideOnMobile{
    display: none;
  }

  .right-arrow-icon {
    height: 30px;
    width: 29px;
    position: relative;
    object-fit: contain;
    z-index: 3
  }

  .explore-his-world {
    font-size: 20pt;
    line-height: 25px;
  }

  .menu-button{
    display: block;
  }

  .renaissance-revisited {
    font-size: var(--font-size-21xl);
  }

  .leonardo-da-vinci {
    font-size: 72px;
  }

  .hero-content {
    gap: 58px;
  }

  .home {
    padding-top: var(--padding-8xl);
    padding-bottom: 24px;
    box-sizing: border-box;
  }

  .about-image-icon {
    max-width: 625px;
    max-height: 400px;
    object-fit: cover;
    object-position: 25% 25%;
  }

  .da-vincis-life {
    font-size: var(--font-size-21xl);
    line-height: 51px;
  }

  .bio-content {
    gap: var(--gap-21xl);
    min-width: 100%;
  }

  .bio {
    gap: var(--gap-8xl);
  }

  .about1 {
    padding: var(--padding-45xl) var(--padding-23xl);
    box-sizing: border-box;
  }

  .masterpieces-reimagined {
    font-size: var(--font-size-21xl);
    line-height: 51px;
  }

  .his-approach-to-art-was-as-rev-wrapper {
    min-width: 100%;
  }

  .gallery-description {
    gap: 39px;
  }

  .mona-lisa {
    font-size: var(--font-size-21xl);
  }


  .picture1 {
    padding-left: var(--padding-10xl);
    padding-top: 284px;
    padding-bottom: var(--padding-18xl);
    box-sizing: border-box;
  }

  .salvator-mundi {
    font-size: var(--font-size-21xl);
  }

  .picture2 {
    padding-left: var(--padding-216xl);
    padding-top: var(--padding-279xl);
    padding-bottom: var(--padding-18xl);
    box-sizing: border-box;
  }

  .lady-with-an {
    font-size: var(--font-size-21xl);
  }

  .picture3 {
    padding-left: var(--padding-10xl);
    padding-top: 284px;
    padding-bottom: var(--padding-18xl);
    box-sizing: border-box;
  }

  .frame-parent {
    gap: var(--gap-8xl);
  }

  .the-last-supper {
    font-size: var(--font-size-21xl);
  }

  .picture4 {
    padding-left: var(--padding-216xl);
    padding-top: var(--padding-279xl);
    padding-bottom: var(--padding-18xl);
    box-sizing: border-box;
  }

  .head-of-a {
    font-size: var(--font-size-21xl);
  }

  .picture5 {
    padding-left: var(--padding-10xl);
    padding-top: var(--padding-279xl);
    padding-bottom: var(--padding-18xl);
    box-sizing: border-box;
  }

  .picture4-parent {
    gap: var(--gap-8xl);
  }

  .vitruvian-man {
    font-size: var(--font-size-21xl);
  }

  .picture6 {
    padding-left: var(--padding-216xl);
    padding-top: var(--padding-279xl);
    padding-bottom: var(--padding-18xl);
    box-sizing: border-box;
  }

  .experience-the-renaissance {
    font-size: var(--font-size-21xl);
    line-height: 51px;
  }

  .event-details {
    gap: var(--gap-xl);
  }

  .masterpiece-monday {
    font-size: var(--font-size-21xl);
  }

  .event-containers1 {
    min-width: 100%;
  }

  .events1 {
    padding-top: 22px;
    padding-bottom: 79px;
    box-sizing: border-box;
  }

  .icon1 {
    font-size: 48px;
  }

  .footer {
    gap: 108px;
    padding-top: 47px;
    padding-bottom: 35px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 450px) {
  .renaissance-revisited {
    font-size: var(--font-size-11xl);
  }

  .sidebar{
    width:100%;
  }
  
  .about-image-icon {
    width: 290px;
    height: 231px;
    object-fit: cover;
    object-position: 25% 25%;
  }

  .leonardo-da-vinci {
    font-size: 45px;
  }

  .explore-his-world {
    font-size: 15pt;
    line-height: 20px;
  }

  .hero-content {
    gap: 29px;
  }

  .home {
    gap: 78px;
  }

  .about-leonardo {
    font-size: var(--font-size-xl);
  }

  .da-vincis-life {
    font-size: var(--font-size-5xl);
    line-height: 34px;
  }

  .leonardo-da-vinci-container {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .bio-content {
    gap: var(--gap-xl);
  }

  .about1 {
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }

  .gallery2 {
    font-size: var(--font-size-xl);
  }

  .masterpieces-reimagined {
    font-size: var(--font-size-5xl);
    line-height: 34px;
  }

  .his-approach-to {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .gallery-description {
    gap: var(--gap-xl);
  }

  .mona-lisa {
    font-size: var(--font-size-11xl);
  }

  .it-depicts-a {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .salvator-mundi {
    font-size: var(--font-size-11xl);
  }

  .salvator-mundi-is {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .picture2 {
    padding-left: var(--padding-xl);
    box-sizing: border-box;
  }

  .lady-with-an {
    font-size: var(--font-size-11xl);
  }

  .this-painting-depicts {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .the-last-supper {
    font-size: var(--font-size-11xl);
  }

  .this-painting-depicts1 {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .picture4 {
    padding-left: var(--padding-xl);
    box-sizing: border-box;
  }

  .head-of-a {
    font-size: var(--font-size-11xl);
  }

  .this-painting-depicts2 {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .vitruvian-man {
    font-size: var(--font-size-11xl);
  }

  .it-encapsulates-the {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .picture6 {
    padding-left: var(--padding-xl);
    box-sizing: border-box;
  }

  .gallery1 {
    gap: var(--gap-8xl);
  }

  .events2 {
    font-size: var(--font-size-xl);
  }

  .experience-the-renaissance {
    font-size: var(--font-size-5xl);
    line-height: 34px;
  }

  .leonardo-live {
    font-size: var(--font-size-11xl);
  }

  .an-interactive-online {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .da-vincis-workshop {
    font-size: var(--font-size-11xl);
  }

  .hands-on-workshops-inspired {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .masterpiece-monday {
    font-size: var(--font-size-11xl);
  }

  .exclusive-exhibitions-showcasi {
    font-size: var(--font-size-xl);
    line-height: 26px;
  }

  .events1 {
    gap: var(--gap-xl);
  }

  .icon1 {
    font-size: 36px;
  }

  .frame-group {
    gap: 129px;
  }

  .privacy-policy {
    font-size: var(--font-size-xl);
  }

  .terms-conditions {
    font-size: var(--font-size-xl);
  }

  .contact-us {
    font-size: var(--font-size-xl);
  }

  .jalan-teknologi-35-kota-dama-parent {
    gap: 18px;
  }

  .frame-container {
    gap: 96px;
  }

  .footer {
    gap: var(--gap-35xl);
  }
}