* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-color: white;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

nav {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100px; 
  padding: 0 4vw; 
  background-color: rgba(0, 0, 0, 1); 
  z-index: 1000;
}

.burger-menu {
  color: white;
  font-size: 24px;
  cursor: pointer;
  margin-right: 20px;
}

.nav-link { 
  color: white;
  font-size: 14px; 
  font-family: sans-serif;
  font-weight: bold; 
  letter-spacing: 1.5px; 
  text-decoration: none;
  margin-left: 35px;
  transition: color 0.3s ease;
}

.nav-link.logo {
  font-family: serif; 
  font-size: 26px; 
  letter-spacing: 0.5px;
  margin-left: 10px;
  margin-right: auto; 
}

.nav-link:not(.logo):hover {
  color: #316477;
}

.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #444;
  padding: 6px 10px;
  margin-left: 40px;
}

.search-box input {
  background: transparent;
  border: none;
  color: #ccc;
  font-family: sans-serif;
  font-size: 14px;
  outline: none;
  width: 140px;
}

.search-box .search-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  cursor: pointer;
  background-color: #888; 
  mask: url("data:image/svg+xml;utf8,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12.45 13.5L7.725 8.775C7.35 9.075 6.91875 9.3125 6.43125 9.4875C5.94375 9.6625 5.425 9.75 4.875 9.75C3.5125 9.75 2.35938 9.27813 1.41562 8.33438C0.471875 7.39063 0 6.2375 0 4.875C0 3.5125 0.471875 2.35938 1.41562 1.41562C2.35938 0.471875 3.5125 0 4.875 0C6.2375 0 7.39063 0.471875 8.33438 1.41562C9.27813 2.35938 9.75 3.5125 9.75 4.875C9.75 5.425 9.6625 5.94375 9.4875 6.43125C9.3125 6.91875 9.075 7.35 8.775 7.725L13.5 12.45L12.45 13.5ZM4.875 8.25C5.8125 8.25 6.60938 7.92188 7.26562 7.26562C7.92188 6.60938 8.25 5.8125 8.25 4.875C8.25 3.9375 7.92188 3.14062 7.26562 2.48438C6.60938 1.82812 5.8125 1.5 4.875 1.5C3.9375 1.5 3.14062 1.82812 2.48438 2.48438C1.82812 3.14062 1.5 3.9375 1.5 4.875C1.5 5.8125 1.82812 6.60938 2.48438 7.26562C3.14062 7.92188 3.9375 8.25 4.875 8.25Z' fill='black'/></svg>") no-repeat center;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12.45 13.5L7.725 8.775C7.35 9.075 6.91875 9.3125 6.43125 9.4875C5.94375 9.6625 5.425 9.75 4.875 9.75C3.5125 9.75 2.35938 9.27813 1.41562 8.33438C0.471875 7.39063 0 6.2375 0 4.875C0 3.5125 0.471875 2.35938 1.41562 1.41562C2.35938 0.471875 3.5125 0 4.875 0C6.2375 0 7.39063 0.471875 8.33438 1.41562C9.27813 2.35938 9.75 3.5125 9.75 4.875C9.75 5.425 9.6625 5.94375 9.4875 6.43125C9.3125 6.91875 9.075 7.35 8.775 7.725L13.5 12.45L12.45 13.5ZM4.875 8.25C5.8125 8.25 6.60938 7.92188 7.26562 7.26562C7.92188 6.60938 8.25 5.8125 8.25 4.875C8.25 3.9375 7.92188 3.14062 7.26562 2.48438C6.60938 1.82812 5.8125 1.5 4.875 1.5C3.9375 1.5 3.14062 1.82812 2.48438 2.48438C1.82812 3.14062 1.5 3.9375 1.5 4.875C1.5 5.8125 1.82812 6.60938 2.48438 7.26562C3.14062 7.92188 3.9375 8.25 4.875 8.25Z' fill='black'/></svg>") no-repeat center;
  transition: background-color 0.2s ease;
}

.search-box:hover .search-icon {
  background-color: #316477;
}

header { 
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-image: url(../images/header2.png); 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex-direction: column;
  padding-left: 5vw;
}

header p:first-of-type { 
  color: #ffffff;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

header h1 { 
  color: white;
  font-family: serif;
  font-size: 75px;
  font-weight: bold;
  margin-bottom: 20px;
}

header p:last-of-type { 
  color: #ccc;
  font-family: sans-serif;
  font-size: 18px;
  max-width: 450px;
  line-height: 1.5;
  margin-bottom: 35px;
}

header .discover-btn {
  background-color: black;
  color: white;
  border: 1px solid white;
  padding: 15px 30px;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none; 
  display: inline-block; 
  transition: background-color 0.3s, color 0.3s;
}

header .discover-btn:hover {
  background-color: white;
  color: black;
}

.carousel-container {
  position: relative;
  width: 100%;
  margin: 8vh 0;
}

#card { 
  height: 950px; 
  background-color: #0072A3;
  display: flex;
  align-items: center; 
  justify-content: flex-start; 
  overflow-x: auto;            
  padding: 0 5vw; 
  gap: 40px; 
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab; 
}

#card:active {
  cursor: grabbing;
}

#card::-webkit-scrollbar {
  display: none;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.2s;
}

.nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.prev-btn { left: 25px; }
.next-btn { right: 25px; }

#film1, #film2, #film3, #film4, #film5, #film6 {
  flex: 0 0 350px;
  height: 500px;
  object-fit: cover;
  border-radius: 16px; 
  filter: drop-shadow(-8px 8px 3px rgba(0, 0, 0, 0.3));
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

#film1:hover, #film2:hover, #film3:hover, #film4:hover, #film5:hover, #film6:hover {
  transform: translateY(-10px); 
  filter: drop-shadow(-12px 12px 5px rgba(0, 0, 0, 0.4)); 
}

.welcome-section {
  background-color: #fdf8f7; 
  padding: 100px 0;
  width: 100%;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: center;
}

.welcome-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1440px;
  padding: 0 4vw;
  gap: 100px;
}

.welcome-text {
  flex: 1;
  max-width: 800px;
}

.welcome-text h2 {
  font-family: serif;
  font-size: 46px;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 35px;
  position: relative;
  padding-bottom: 20px;
}

.welcome-text h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 110px;
  height: 3px;
  background-color: #316477; 
}

.welcome-text p {
  font-family: sans-serif;
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

.quick-access {
  background-color: #f1f3f5;
  padding: 40px 50px;
  width: 400px;
}

.quick-access h3 {
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #1a1a1a;
  margin-bottom: 25px;
}

.quick-access ul {
  list-style: none;
}

.quick-access ul li {
  margin-bottom: 16px;
}

.quick-access ul li a {
  font-family: sans-serif;
  font-size: 15px;
  color: #316477;
  text-decoration: none;
  transition: color 0.2s;
}

.quick-access ul li a:hover {
  color: #1a1a1a;
}

.schedule-section {
  background-color: #ffffff;
  padding: 100px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.schedule-wrapper {
  width: 100%;
  max-width: 1440px;
  padding: 0 4vw;
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.schedule-header h2 {
  font-family: serif;
  font-size: 42px;
  color: #1a1a1a;
}

.view-calendar {
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #316477;
  text-decoration: none;
  border-bottom: 1px solid #316477;
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.view-calendar:hover {
  color: #1a1a1a;
  border-color: #1a1a1a;
}

.rooms-container {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}

.room-column {
  flex: 1;
}

.room-title {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 18px;
  margin-bottom: 20px;
}

.room-title h3 {
  font-family: serif;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #1a1a1a;
}

.room-icon {
  display: inline-block;
  background-color: #0072A3;
  transition: background-color 0.2s ease;
}

.room-icon.icon-ledoux {
  width: 22px;
  height: 20px;
  mask: url("data:image/svg+xml;utf8,<svg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18 5.5C18.2833 5.5 18.5208 5.40417 18.7125 5.2125C18.9042 5.02083 19 4.78333 19 4.5C19 4.21667 18.9042 3.97917 18.7125 3.7875C18.5208 3.59583 18.2833 3.5 18 3.5C17.7167 3.5 17.4792 3.59583 17.2875 3.7875C17.0958 3.97917 17 4.21667 17 4.5C17 4.78333 17.0958 5.02083 17.2875 5.2125C17.4792 5.40417 17.7167 5.5 18 5.5ZM14 5.5C14.2833 5.5 14.5208 5.40417 14.7125 5.2125C14.9042 5.02083 15 4.78333 15 4.5C15 4.21667 14.9042 3.97917 14.7125 3.7875C14.5208 3.59583 14.2833 3.5 14 3.5C13.7167 3.5 13.4792 3.59583 13.2875 3.7875C13.0958 3.97917 13 4.21667 13 4.5C13 4.78333 13.0958 5.02083 13.2875 5.2125C13.4792 5.40417 13.7167 5.5 14 5.5ZM13.5 8.9H18.5C18.5 8.31667 18.2458 7.85417 17.7375 7.5125C17.2292 7.17083 16.65 7 16 7C15.35 7 14.7708 7.17083 14.2625 7.5125C13.7542 7.85417 13.5 8.31667 13.5 8.9ZM6 20C4.33333 20 2.91667 19.4167 1.75 18.25C0.583333 17.0833 0 15.6667 0 14V7H12V14C12 15.6667 11.4167 17.0833 10.25 18.25C9.08333 19.4167 7.66667 20 6 20ZM6 18C7.1 18 8.04167 17.6083 8.825 16.825C9.60833 16.0417 10 15.1 10 14V9H2V14C2 15.1 2.39167 16.0417 3.175 16.825C3.95833 17.6083 4.9 18 6 18ZM16 13C15.5667 13 15.1375 12.9542 14.7125 12.8625C14.2875 12.7708 13.8833 12.6333 13.5 12.45V10.1C13.8667 10.3833 14.2625 10.6042 14.6875 10.7625C15.1125 10.9208 15.55 11 16 11C17.1 11 18.0417 10.6083 18.825 9.825C19.6083 9.04167 20 8.1 20 7V2H12V5.5H10V0H22V7C22 8.66667 21.4167 10.0833 20.25 11.25C19.0833 12.4167 17.6667 13 16 13ZM4 12.5C4.28333 12.5 4.52083 12.4042 4.7125 12.2125C4.90417 12.0208 5 11.7833 5 11.5C5 11.2167 4.90417 10.9792 4.7125 10.7875C4.52083 10.5958 4.28333 10.5 4 10.5C3.71667 10.5 3.47917 10.5958 3.2875 10.7875C3.09583 10.9792 3 11.2167 3 11.5C3 11.7833 3.09583 12.0208 3.2875 12.2125C3.47917 12.4042 3.71667 12.5 4 12.5ZM8 12.5C8.28333 12.5 8.52083 12.4042 8.7125 12.2125C8.90417 12.0208 9 11.7833 9 11.5C9 11.2167 8.90417 10.9792 8.7125 10.7875C8.52083 10.5958 8.28333 10.5 8 10.5C7.71667 10.5 7.47917 10.5958 7.2875 10.7875C7.09583 10.9792 7 11.2167 7 11.5C7 11.7833 7.09583 12.0208 7.2875 12.2125C7.47917 12.4042 7.71667 12.5 8 12.5ZM6 15.9C6.65 15.9 7.22917 15.7292 7.7375 15.3875C8.24583 15.0458 8.5 14.5833 8.5 14H3.5C3.5 14.5833 3.75417 15.0458 4.2625 15.3875C4.77083 15.7292 5.35 15.9 6 15.9Z' fill='black'/></svg>") no-repeat center;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18 5.5C18.2833 5.5 18.5208 5.40417 18.7125 5.2125C18.9042 5.02083 19 4.78333 19 4.5C19 4.21667 18.9042 3.97917 18.7125 3.7875C18.5208 3.59583 18.2833 3.5 18 3.5C17.7167 3.5 17.4792 3.59583 17.2875 3.7875C17.0958 3.97917 17 4.21667 17 4.5C17 4.78333 17.0958 5.02083 17.2875 5.2125C17.4792 5.40417 17.7167 5.5 18 5.5ZM14 5.5C14.2833 5.5 14.5208 5.40417 14.7125 5.2125C14.9042 5.02083 15 4.78333 15 4.5C15 4.21667 14.9042 3.97917 14.7125 3.7875C14.5208 3.59583 14.2833 3.5 14 3.5C13.7167 3.5 13.4792 3.59583 13.2875 3.7875C13.0958 3.97917 13 4.21667 13 4.5C13 4.78333 13.0958 5.02083 13.2875 5.2125C13.4792 5.40417 13.7167 5.5 14 5.5ZM13.5 8.9H18.5C18.5 8.31667 18.2458 7.85417 17.7375 7.5125C17.2292 7.17083 16.65 7 16 7C15.35 7 14.7708 7.17083 14.2625 7.5125C13.7542 7.85417 13.5 8.31667 13.5 8.9ZM6 20C4.33333 20 2.91667 19.4167 1.75 18.25C0.583333 17.0833 0 15.6667 0 14V7H12V14C12 15.6667 11.4167 17.0833 10.25 18.25C9.08333 19.4167 7.66667 20 6 20ZM6 18C7.1 18 8.04167 17.6083 8.825 16.825C9.60833 16.0417 10 15.1 10 14V9H2V14C2 15.1 2.39167 16.0417 3.175 16.825C3.95833 17.6083 4.9 18 6 18ZM16 13C15.5667 13 15.1375 12.9542 14.7125 12.8625C14.2875 12.7708 13.8833 12.6333 13.5 12.45V10.1C13.8667 10.3833 14.2625 10.6042 14.6875 10.7625C15.1125 10.9208 15.55 11 16 11C17.1 11 18.0417 10.6083 18.825 9.825C19.6083 9.04167 20 8.1 20 7V2H12V5.5H10V0H22V7C22 8.66667 21.4167 10.0833 20.25 11.25C19.0833 12.4167 17.6667 13 16 13ZM4 12.5C4.28333 12.5 4.52083 12.4042 4.7125 12.2125C4.90417 12.0208 5 11.7833 5 11.5C5 11.2167 4.90417 10.9792 4.7125 10.7875C4.52083 10.5958 4.28333 10.5 4 10.5C3.71667 10.5 3.47917 10.5958 3.2875 10.7875C3.09583 10.9792 3 11.2167 3 11.5C3 11.7833 3.09583 12.0208 3.2875 12.2125C3.47917 12.4042 3.71667 12.5 4 12.5ZM8 12.5C8.28333 12.5 8.52083 12.4042 8.7125 12.2125C8.90417 12.0208 9 11.7833 9 11.5C9 11.2167 8.90417 10.9792 8.7125 10.7875C8.52083 10.5958 8.28333 10.5 8 10.5C7.71667 10.5 7.47917 10.5958 7.2875 10.7875C7.09583 10.9792 7 11.2167 7 11.5C7 11.7833 7.09583 12.0208 7.2875 12.2125C7.47917 12.4042 7.71667 12.5 8 12.5ZM6 15.9C6.65 15.9 7.22917 15.7292 7.7375 15.3875C8.24583 15.0458 8.5 14.5833 8.5 14H3.5C3.5 14.5833 3.75417 15.0458 4.2625 15.3875C4.77083 15.7292 5.35 15.9 6 15.9Z' fill='black'/></svg>") no-repeat center;
}

.room-icon.icon-plateau {
  width: 16px;
  height: 18px;
  mask: url("data:image/svg+xml;utf8,<svg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 18V0H2V2H4V0H12V2H14V0H16V18H14V16H12V18H4V16H2V18H0ZM2 14H4V12H2V14ZM2 10H4V8H2V10ZM2 6H4V4H2V6ZM12 14H14V12H12V14ZM12 10H14V8H12V10ZM12 6H14V4H12V6ZM6 16H10V2H6V16ZM6 2H10H6Z' fill='black'/></svg>") no-repeat center;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 18V0H2V2H4V0H12V2H14V0H16V18H14V16H12V18H4V16H2V18H0ZM2 14H4V12H2V14ZM2 10H4V8H2V10ZM2 6H4V4H2V6ZM12 14H14V12H12V14ZM12 10H14V8H12V10ZM12 6H14V4H12V6ZM6 16H10V2H6V16ZM6 2H10H6Z' fill='black'/></svg>") no-repeat center;
}

.room-title:hover .room-icon {
  background-color: #333333;
}

.movie-row {
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #f0f0f0;
}

.movie-time {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #555;
  width: 80px;
}

.movie-details {
  flex: 1;
}

.movie-details h4 {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.movie-details p {
  font-family: sans-serif;
  font-size: 14px;
  color: #777;
}

.movie-price {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin-right: 20px;
}

.cart-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #1a1a1a;
  transition: transform 0.2s, color 0.2s;
}

.cart-btn:hover {
  color: #316477;
  transform: scale(1.1);
}
.marilyn-section {
    background: #000;
    padding: 80px 0;
    display: flex;
    justify-content: center;
}

.marilyn-container {
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    padding: 0 4vw;
}

.marilyn-image-wrapper {
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px;
}

.marilyn-img {
    display: block;
    width: 420px;
    height: 520px;
    object-fit: cover;
}

.marilyn-text-wrapper {
    max-width: 420px;
    color: white;
}

.marilyn-subtitle {
    color: #2f6f8a;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
/* change font */
.marilyn-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 72px;
    line-height: 0.95;
    font-weight: bold;
    margin-bottom: 28px;
}

.marilyn-description {
    color: #bcbcbc;
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 35px;
}

.marilyn-btn {
    display: inline-block;
    text-decoration: none;
    color: #000;
    background: #fff;
    padding: 14px 24px;
    font-family: sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: 0.3s ease;
}

.marilyn-btn:hover {
    background: #2f6f8a;
    color: white;
}

@media (max-width: 900px) {
    .marilyn-container {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .marilyn-img {
        width: 100%;
        max-width: 420px;
        height: auto;
    }

    .marilyn-title {
        font-size: 52px;
    }
}

.extra-section {
    background: #f4efef;
    padding: 100px 0;
}

.extra-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 4vw;
}

.extra-header {
    text-align: center;
    margin-bottom: 70px;
}

.extra-header h2 {
    font-family: serif;
    font-size: 58px;
    color: #241d22;
    margin-bottom: 20px;
}

.extra-header p {
    max-width: 700px;
    margin: auto;
    font-family: sans-serif;
    color: #6d6868;
    line-height: 1.8;
    font-size: 15px;
}

.extra-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.extra-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    margin-bottom: 18px;
}

.extra-card span {
    display: block;
    color: #1f79aa;
    font-size: 11px;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.extra-card h3 {
    font-family: serif;
    font-size: 22px;
    color: #241d22;
    margin-bottom: 12px;
}

.extra-card p {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #6d6868;
}

.framing-section {
    background: #fff;
    padding: 100px 0;
}

.framing-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 4vw;
}

.framing-title {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 50px;
}

.framing-title h2 {
    font-family: serif;
    font-size: 58px;
    color: #241d22;
    white-space: nowrap;
}

.framing-title::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #d3d3d3;
}

.framing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.framing-card {
    background: #f7f7f7;
    padding: 45px;
}

.framing-card span {
    display: block;
    color: #1f79aa;
    font-size: 11px;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.framing-card h3 {
    font-family: serif;
    font-size: 34px;
    color: #241d22;
    margin-bottom: 18px;
}

.framing-card p {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #6d6868;
    margin-bottom: 25px;
}

.framing-card a {
    text-decoration: none;
    color: #1f79aa;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.framing-card a:hover {
    opacity: 0.7;
}

@media (max-width: 1000px) {

    .extra-grid,
    .framing-grid {
        grid-template-columns: 1fr;
    }

    .extra-header h2,
    .framing-title h2 {
        font-size: 42px;
    }
}

.newsletter-section {
    background: #2f79a8;
    padding: 90px 0;
    text-align: center;
}

.newsletter-container {
    max-width: 800px;
    margin: auto;
    padding: 0 4vw;
}

.newsletter-icon {
    color: white;
    font-size: 28px;
    margin-bottom: 20px;
}

.newsletter-section h2 {
    color: white;
    font-family: serif;
    font-size: 56px;
    margin-bottom: 20px;
}

.newsletter-section p {
    color: rgba(255,255,255,0.9);
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto 40px;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.newsletter-form input {
    width: 420px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.7);
    background: transparent;
    color: white;
    outline: none;
}

.newsletter-form input::placeholder {
    color: rgba(255,255,255,0.7);
}

.newsletter-form button {
    padding: 16px 35px;
    border: 1px solid white;
    background: black;
    color: white;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.newsletter-form button:hover {
    background-color: white;
    color: black;
}
.footer {
    background: #050505;
    padding-top: 70px;
}

.footer-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 4vw;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 80px;
}

.footer-column h4,
.footer-column h5 {
    color: white;
    margin-bottom: 25px;
    font-family: sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
}

.footer-column h4 {
    color: #2f79a8;
}

.footer-column p {
    color: #9d9d9d;
    font-family: sans-serif;
    font-size: 13px;
    line-height: 2;
}

.footer-column a {
    display: block;
    color: #9d9d9d;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    margin-bottom: 15px;
    transition: 0.3s;
}

.footer-column a:hover {
    color: white;
}

.socials {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.socials a {
    color: white;
    font-size: 18px;
    margin: 0;
}

.partner-logos {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.logo-box {
    width: 45px;
    height: 20px;
    background: #666;
    border-radius: 3px;
}

.footer-bottom {
    max-width: 1400px;
    margin: 60px auto 0;
    padding: 25px 4vw;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}

.footer-bottom p {
    color: #7a7a7a;
    font-family: sans-serif;
    font-size: 12px;
    margin-bottom: 8px;
}

.languages {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.languages span {
    color: #666;
    font-family: sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
}

@media (max-width: 900px) {

    .newsletter-form {
        flex-direction: column;
        align-items: center;
    }

    .newsletter-form input {
        width: 100%;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .newsletter-section h2 {
        font-size: 42px;
    }
}


.menu-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 99999;

    opacity: 0;
    visibility: hidden;

    transition: .45s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.close-menu {
    position: absolute;
    top: 30px;
    right: 40px;

    background: none;
    border: none;

    color: white;
    font-size: 32px;

    cursor: pointer;
}

.overlay-content {
    display: flex;
    justify-content: space-between;

    padding: 90px 70px;
}

.overlay-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.overlay-left a {
    color: white;
    text-decoration: none;

    font-family: Georgia, serif;
    font-size: 58px;
    font-weight: bold;

    opacity: 0;
    transform: translateX(-60px);

    transition: .5s ease;
}

.menu-overlay.active .overlay-left a {
    opacity: 1;
    transform: translateX(0);
}

.menu-overlay.active .overlay-left a:nth-child(1) {
    transition-delay: .05s;
}

.menu-overlay.active .overlay-left a:nth-child(2) {
    transition-delay: .1s;
}

.menu-overlay.active .overlay-left a:nth-child(3) {
    transition-delay: .15s;
}

.menu-overlay.active .overlay-left a:nth-child(4) {
    transition-delay: .2s;
}

.menu-overlay.active .overlay-left a:nth-child(5) {
    transition-delay: .25s;
}

.menu-overlay.active .overlay-left a:nth-child(6) {
    transition-delay: .3s;
}

.overlay-left a:hover {
    color: #2f79a8;
}

.overlay-right {
    width: 360px;
}

.overlay-search input {
    width: 100%;

    background: transparent;
    border: 1px solid #333;

    padding: 15px;

    color: white;
    outline: none;
}

.overlay-info {
    margin-top: 30px;
}

.overlay-info h4 {
    color: #b04d4d;
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-family: sans-serif;
}

.overlay-info p {
    color: #bdbdbd;
    font-family: sans-serif;
    line-height: 1.8;
    margin-bottom: 20px;
}

body.menu-open {
    overflow: hidden;
}

@media (max-width: 900px) {

    .overlay-content {
        flex-direction: column;
        gap: 50px;
        padding: 100px 40px;
    }

    .overlay-left a {
        font-size: 40px;
    }

    .overlay-right {
        width: 100%;
    }
}