/* Bekir Samut İnşaat — marka renkleri & modern hero slider */
:root {
   --bs-navy: #001b3a;
   --bs-navy-dark: #05162d;
   --bs-gold: #c5a059;
   --bs-gold-light: #d4b06a;
   --bs-gold-dark: #95753a;
   --bs-cream: #ebe3d7;
   --bs-cream-light: #f4f0ea;
   --bs-white: #fcfcfc;
   --bs-overlay: rgba(0, 27, 58, 0.72);
   --bs-font-serif: 'Raleway', 'Open Sans', sans-serif;
}

/* Nav — Instagram tonları: lacivert + altın */
.main-navigation {
   background-color: var(--bs-navy) !important;
   border-bottom: 1px solid rgba(197, 160, 89, 0.25);
}

.main-navigation .main-inner-navigation ul > li > a {
   color: var(--bs-gold) !important;
}

.main-navigation .main-inner-navigation ul > li > a:hover {
   color: var(--bs-gold-light) !important;
}

.main-navigation .main-inner-navigation ul > li > a.active {
   color: var(--bs-white) !important;
}

.main-navigation .social-icons a {
   color: var(--bs-gold) !important;
}

.main-navigation .social-icons a:hover {
   color: var(--bs-gold-light) !important;
}

.main-navigation-logo .logo {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 74px;
   max-width: none;
   height: 75px;
   padding: 0;
   margin-left: 76px;
   border: 0;
   background: transparent;
   overflow: visible;
}

.main-navigation-logo .logo img {
   height: 64px;
   width: auto;
   max-width: none;
   object-fit: contain;
   transform: translateY(0);
   filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
   transition: transform 0.3s ease, filter 0.3s ease;
}

.main-navigation-logo .logo:hover img {
   transform: scale(1.04);
   filter: drop-shadow(0 4px 14px rgba(197, 160, 89, 0.35));
}

.mobile-navigation-wrapper {
   background-color: var(--bs-navy) !important;
}

nav.mobile-nav {
   background-color: var(--bs-navy) !important;
}

nav.mobile-nav a {
   color: var(--bs-gold) !important;
}

nav.mobile-nav a.active {
   color: var(--bs-white) !important;
}

.navigation-fire span {
   background: var(--bs-gold) !important;
}

.mobile-navigation-wrapper .logo-mobile img {
   height: 48px;
   width: auto;
   object-fit: contain;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.titleOT {
   top: 24%;
   left: clamp(42px, 6vw, 92px);
   width: min(520px, calc(100% - 84px));
   max-width: 520px;
   margin-left: 0;
   margin-top: 0;
   padding: 0;
   z-index: 8;
}

.introduction-1 h1 {
   position: relative;
   width: auto;
   font-size: clamp(22px, 2.8vw, 42px);
   font-weight: 500;
   line-height: 1.08;
   letter-spacing: 0.16em;
   text-align: left;
   color: rgba(252, 252, 252, 0.92);
   text-shadow: 0 8px 28px rgba(0, 27, 58, 0.48);
}

.introduction-1 h1:first-child {
   font-weight: 700;
   color: var(--bs-white);
}

.introduction-1 h1:last-child {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   margin-top: 8px;
   font-size: clamp(15px, 1.35vw, 22px);
   letter-spacing: 0.42em;
   color: var(--bs-gold-light);
}

.introduction-1 h1:last-child::after {
   content: "";
   display: block;
   width: clamp(64px, 9vw, 132px);
   height: 1px;
   background: linear-gradient(90deg, rgba(212, 176, 106, 0.9), rgba(212, 176, 106, 0));
}

.titleOT br {
   display: none;
}

/* Altın vurgu renkleri */
.alt h2 .get-behind {
   color: rgba(197, 160, 89, 0.12) !important;
}

.link-underline:hover,
.nav-works:hover {
   color: var(--bs-gold) !important;
}

.submit-button,
.nav-button {
   background: var(--bs-gold) !important;
   border-color: var(--bs-gold) !important;
}

.submit-button:hover,
.nav-button:hover {
   background: var(--bs-gold-dark) !important;
}

.lower-page-footer-credits,
.site-footer {
   background: linear-gradient(180deg, var(--bs-navy-dark) 0%, var(--bs-navy) 100%) !important;
   border-top: 1px solid rgba(197, 160, 89, 0.2);
}

.site-footer {
   padding: 64px 0 0;
}

.site-footer__grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1.2fr 0.8fr;
   gap: 40px;
   padding-bottom: 48px;
}

.site-footer__logo img {
   height: 80px;
   width: auto;
   filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}

.site-footer__tagline {
   margin: 18px 0 0;
   font-size: 14px;
   line-height: 1.7;
   color: rgba(252, 252, 252, 0.65);
   max-width: 280px;
}

.site-footer__heading {
   font-family: 'Oswald', sans-serif;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--bs-gold);
   margin: 0 0 20px;
   padding-bottom: 12px;
   border-bottom: 1px solid rgba(197, 160, 89, 0.25);
}

.site-footer__links,
.site-footer__contact {
   list-style: none;
   margin: 0;
   padding: 0;
}

.site-footer__links li,
.site-footer__contact li {
   margin-bottom: 10px;
}

.site-footer__links a,
.site-footer__contact a {
   color: rgba(252, 252, 252, 0.75);
   font-size: 14px;
   text-decoration: none;
   transition: color 0.25s ease;
}

.site-footer__links a:hover,
.site-footer__contact a:hover {
   color: var(--bs-gold-light);
}

.site-footer__contact li {
   font-size: 13px;
   line-height: 1.6;
   color: rgba(252, 252, 252, 0.65);
}

.site-footer__contact i {
   color: var(--bs-gold);
   margin-right: 10px;
   width: 16px;
   text-align: center;
}

.site-footer__social {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   gap: 12px;
}

.site-footer__social a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   border: 1px solid rgba(197, 160, 89, 0.35);
   border-radius: 50%;
   color: var(--bs-gold) !important;
   font-size: 16px;
   transition: all 0.3s ease;
}

.site-footer__social a:hover {
   background: var(--bs-gold);
   color: var(--bs-navy) !important;
   border-color: var(--bs-gold);
   transform: translateY(-2px);
}

.site-footer__bottom {
   border-top: 1px solid rgba(197, 160, 89, 0.15);
   padding: 22px 0;
   text-align: center;
}

.site-footer__bottom p {
   margin: 0;
   font-size: 12px;
   letter-spacing: 0.08em;
   color: rgba(252, 252, 252, 0.45);
}

.footer-credits-copyright a,
.footer-credits .social-icons a {
   color: var(--bs-gold) !important;
}

/* ─── Hero Swiper ─── */
.hero-swiper-section {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
   overflow: hidden;
}

.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
   width: 100%;
   height: 100%;
}

.hero-swiper .swiper-slide {
   position: relative;
   overflow: hidden;
}

.hero-slide-bg {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   transform: scale(1.08);
   transition: transform 8s ease-out;
}

.hero-swiper .swiper-slide-active .hero-slide-bg {
   transform: scale(1);
}

.hero-slide-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
      135deg,
      rgba(0, 27, 58, 0.82) 0%,
      rgba(0, 27, 58, 0.45) 45%,
      rgba(0, 27, 58, 0.65) 100%
   );
   z-index: 1;
}

.hero-slide-content {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 2;
   padding: 0 80px 100px;
   max-width: 900px;
}

.hero-slide-badge {
   display: inline-block;
   font-family: 'Open Sans', sans-serif;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   padding: 6px 16px;
   border-radius: 2px;
   margin-bottom: 16px;
}

.hero-slide-badge--ongoing {
   background: var(--bs-gold);
   color: var(--bs-navy);
}

.hero-slide-badge--completed {
   background: rgba(252, 252, 252, 0.15);
   color: var(--bs-white);
   border: 1px solid rgba(197, 160, 89, 0.5);
}

.hero-slide-title {
   display: table;
   max-width: 100%;
   font-family: 'Oswald', sans-serif;
   font-size: clamp(32px, 5vw, 58px);
   font-weight: 700;
   color: var(--bs-white);
   text-transform: uppercase;
   letter-spacing: 0;
   line-height: 1.1;
   margin: 0 0 14px;
   padding: 10px 20px 12px;
   background: linear-gradient(100deg, rgba(4, 12, 18, 0.9), rgba(4, 12, 18, 0.68));
   border: 1px solid rgba(252, 252, 252, 0.2);
   border-left: 4px solid var(--bs-gold);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero-slide-location {
   font-family: 'Open Sans', sans-serif;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--bs-gold);
   margin-bottom: 16px;
}

.hero-slide-desc {
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   line-height: 1.7;
   color: rgba(252, 252, 252, 0.88);
   max-width: 680px;
   margin: 0;
}

/* Kategori filtreleri */
.hero-swiper-filters {
   position: absolute;
   bottom: 36px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
   display: flex;
   gap: 4px;
   background: rgba(0, 27, 58, 0.6);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   padding: 4px;
   border-radius: 4px;
   border: 1px solid rgba(197, 160, 89, 0.3);
}

.hero-filter-btn {
   font-family: 'Open Sans', sans-serif;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   padding: 10px 22px;
   border: none;
   background: transparent;
   color: rgba(252, 252, 252, 0.65);
   cursor: pointer;
   border-radius: 2px;
   transition: all 0.3s ease;
}

.hero-filter-btn:hover {
   color: var(--bs-gold-light);
}

.hero-filter-btn.active {
   background: var(--bs-gold);
   color: var(--bs-navy);
}

/* Swiper kontrolleri */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
   color: var(--bs-gold);
   width: 48px;
   height: 48px;
   background: rgba(0, 27, 58, 0.55);
   border: 1px solid rgba(197, 160, 89, 0.4);
   border-radius: 50%;
   transition: all 0.3s ease;
}

.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
   font-size: 16px;
   font-weight: 700;
}

.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
   background: var(--bs-gold);
   color: var(--bs-navy);
   border-color: var(--bs-gold);
}

.hero-swiper .swiper-pagination-bullet {
   width: 8px;
   height: 8px;
   background: rgba(252, 252, 252, 0.4);
   opacity: 1;
   transition: all 0.3s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
   background: var(--bs-gold);
   width: 24px;
   border-radius: 4px;
}

.hero-swiper .swiper-pagination {
   bottom: 90px !important;
}

/* Proje kartları — devam eden */
.featured-projects-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   margin-top: 16px;
}

.featured-project-card {
   position: relative;
   overflow: hidden;
   border-radius: 6px;
   background: var(--bs-white);
   border: 1px solid rgba(197, 160, 89, 0.18);
   box-shadow: 0 8px 32px rgba(0, 27, 58, 0.08);
   transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.featured-project-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 24px 48px rgba(0, 27, 58, 0.16);
   border-color: rgba(197, 160, 89, 0.45);
}

.featured-project-card__image {
   position: relative;
   height: 300px;
   overflow: hidden;
}

.featured-project-card__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: contrast(1.06) saturate(0.88) brightness(1.03) sepia(0.05);
   transition: transform 0.7s ease, filter 0.5s ease;
}

.featured-project-card:hover .featured-project-card__image img {
   transform: scale(1.07);
   filter: contrast(1.1) saturate(0.95) brightness(1.05) sepia(0.03);
}

.featured-project-card__shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 27, 58, 0.05) 0%, rgba(0, 27, 58, 0.55) 100%);
   pointer-events: none;
   z-index: 1;
}

.featured-project-card__socials {
   position: absolute;
   inset: 14px;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   border: 1px solid rgba(252, 252, 252, 0.7);
   background: rgba(4, 12, 18, 0.48);
   opacity: 0;
   transform: scale(0.97);
   transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.featured-project-card__socials a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   border: 1px solid rgba(197, 160, 89, 0.8);
   border-radius: 50%;
   background: rgba(4, 12, 18, 0.82);
   color: var(--bs-white);
   font-size: 19px;
   text-decoration: none;
   transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.featured-project-card__socials a:hover,
.featured-project-card__socials a:focus-visible {
   background: var(--bs-gold);
   border-color: var(--bs-gold);
   color: var(--bs-navy);
   transform: translateY(-2px);
}

.featured-project-card__image:hover .featured-project-card__socials,
.featured-project-card__image:focus-within .featured-project-card__socials {
   opacity: 1;
   transform: scale(1);
}

.featured-project-card__badge {
   position: absolute;
   top: 18px;
   left: 18px;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   padding: 6px 14px;
   background: var(--bs-gold);
   color: var(--bs-navy);
   z-index: 4;
   border-radius: 2px;
}

.featured-project-card__body {
   padding: 26px 24px 30px;
   position: relative;
}

.featured-project-card__index {
   position: absolute;
   top: -18px;
   right: 20px;
   font-family: 'Oswald', sans-serif;
   font-size: 42px;
   font-weight: 700;
   color: rgba(197, 160, 89, 0.18);
   line-height: 1;
}

.featured-project-card__body h3 {
   font-family: 'Oswald', sans-serif;
   font-size: 21px;
   font-weight: 700;
   color: var(--bs-navy);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin: 0 0 6px;
   padding: 0;
   text-align: left;
}

.featured-project-card__location {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--bs-gold-dark);
   margin: 0 0 12px;
}

.featured-project-card__body p {
   font-size: 13px;
   line-height: 1.7;
   color: #5f5f5f;
   margin: 0 0 18px;
   text-align: left;
}

.featured-project-card__link {
   display: inline-flex;
   align-items: center;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--bs-navy);
   text-decoration: none;
   padding: 10px 0 0;
   border-top: 1px solid rgba(197, 160, 89, 0.25);
   width: 100%;
   transition: color 0.3s ease, border-color 0.3s ease;
}

.featured-project-card__link:hover {
   color: var(--bs-gold-dark);
   border-color: var(--bs-gold);
}

/* Instagram tarzı görsel filtresi — proje galerisi */
.lower-page-works .photo.image-works:not(.works-category-banner),
.lower-page-works .photo.image-works:not(.works-category-banner) .hover-effect {
   filter: contrast(1.16) saturate(0.78) brightness(0.96) sepia(0.16) hue-rotate(-5deg);
}

.lower-page-works .photo.image-works:not(.works-category-banner)::before {
   content: "";
   position: absolute;
   inset: 0;
   background:
      radial-gradient(ellipse at center, rgba(252, 252, 252, 0) 38%, rgba(0, 27, 58, 0.28) 100%),
      linear-gradient(135deg, rgba(197, 160, 89, 0.18) 0%, rgba(255, 255, 255, 0.03) 42%, rgba(0, 27, 58, 0.26) 100%);
   mix-blend-mode: soft-light;
   pointer-events: none;
   z-index: 2;
   opacity: 0.95;
   transition: opacity 0.4s ease;
}

.lower-page-works .photo.image-works:not(.works-category-banner)::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(12, 31, 58, 0.1) 0%, rgba(12, 31, 58, 0.2) 100%);
   mix-blend-mode: multiply;
   pointer-events: none;
   z-index: 3;
   opacity: 0.62;
   transition: opacity 0.4s ease;
}

.lower-page-works .photo.image-works:not(.works-category-banner):hover {
   filter: contrast(1.18) saturate(0.86) brightness(1) sepia(0.12) hue-rotate(-3deg);
}

.lower-page-works .photo.image-works:not(.works-category-banner):hover .hover-effect {
   filter: contrast(1.18) saturate(0.86) brightness(1) sepia(0.12) hue-rotate(-3deg);
}

.lower-page-works .photo.image-works:not(.works-category-banner):hover::before {
   opacity: 0.72;
}

.lower-page-works .photo.image-works:not(.works-category-banner):hover::after {
   opacity: 0.42;
}

.lower-page-works .photo.image-works .icon-works {
   z-index: 5;
}

/* Kategori banner görselleri */
.works-category-banner {
   min-height: 420px;
   filter: contrast(1.05) saturate(0.85) brightness(0.92) sepia(0.08);
}

.works-category-banner__overlay {
   position: absolute;
   inset: 0;
   z-index: 4;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 40px;
   background: linear-gradient(
      135deg,
      rgba(0, 27, 58, 0.78) 0%,
      rgba(0, 27, 58, 0.52) 50%,
      rgba(0, 27, 58, 0.72) 100%
   );
}

.works-category-banner__eyebrow {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.35em;
   text-transform: uppercase;
   color: var(--bs-gold);
   margin-bottom: 14px;
}

.works-category-banner__title {
   font-family: 'Oswald', sans-serif;
   font-size: clamp(28px, 4vw, 44px);
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--bs-white);
   margin: 0 0 12px;
   line-height: 1.1;
}

.works-category-banner__meta {
   font-size: 12px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: rgba(252, 252, 252, 0.72);
   margin: 0;
}

.works-category-banner--ongoing .works-category-banner__overlay {
   background: linear-gradient(
      135deg,
      rgba(0, 27, 58, 0.82) 0%,
      rgba(197, 160, 89, 0.22) 50%,
      rgba(0, 27, 58, 0.78) 100%
   );
}

/* Proje menü alanı */
.box-menu-works .nav-secondary-experience h4 {
   color: var(--bs-navy);
   letter-spacing: 0.15em;
}

.box-menu-works .nav-works {
   transition: color 0.25s ease, padding-left 0.25s ease;
}

.box-menu-works .nav-works:hover {
   color: var(--bs-gold-dark) !important;
   padding-left: 6px;
}

#menu-item-page-2 .nav-secondary-experience h4 {
   color: var(--bs-gold-dark);
}

/* Video galerisi */
.video-gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 32px;
   margin-top: 10px;
}

.video-card {
   background: var(--bs-cream-light);
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 4px 24px rgba(0, 27, 58, 0.08);
   transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.video-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 36px rgba(0, 27, 58, 0.14);
}

.video-card__embed {
   position: relative;
   padding-bottom: 56.25%;
   background: var(--bs-navy);
}

.video-card__embed iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

.video-card__embed img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.video-card__body {
   padding: 24px 28px 28px;
}

.video-card__tag {
   display: inline-block;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   padding: 5px 12px;
   background: var(--bs-gold);
   color: var(--bs-navy);
   margin-bottom: 14px;
}

.video-card__title {
   font-family: 'Oswald', sans-serif;
   font-size: 22px;
   font-weight: 600;
   color: var(--bs-navy);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin: 0 0 8px;
   line-height: 1.2;
}

.video-card__meta {
   font-size: 12px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #888;
   margin: 0;
}

/* NARMIA proje detay */
#item-6-1 .col-item:nth-child(2) .row-item.n-1 {
   height: 58%;
   background: var(--bs-white);
}

#item-6-1 .col-item:nth-child(2) .row-item.n-3 {
   height: 42%;
}

#item-6-1 .box-description {
   max-width: 100%;
   padding: 28px 42px;
}

#item-6-1 .box-description p {
   font-size: 12px;
   line-height: 1.58;
   margin-bottom: 10px;
}

.project-stats {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
   margin: 18px 0 0;
}

.project-stat {
   min-width: 0;
   padding: 14px 16px;
   background: var(--bs-cream);
   border-left: 3px solid var(--bs-gold);
}

.project-stat strong {
   display: block;
   font-family: 'Oswald', sans-serif;
   font-size: 18px;
   color: var(--bs-navy);
   margin-bottom: 4px;
   overflow-wrap: anywhere;
}

.project-stat span {
   display: block;
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: #888;
   overflow-wrap: anywhere;
}

.project-stat:last-child {
   grid-column: 1 / -1;
}

@media only screen and (max-width: 992px) {
   .featured-projects-grid {
      grid-template-columns: 1fr;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
   }

   .site-footer__grid {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
   }

   .video-gallery {
      grid-template-columns: 1fr;
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
   }
}

@media only screen and (max-width: 880px) {
   .titleOT {
      top: 24%;
      width: calc(100% - 40px);
      max-width: 420px;
      left: 20px;
      margin-left: 0;
      padding: 0;
   }

   .introduction-1 {
      padding: 0;
   }

   .works-category-banner {
      min-height: 300px;
   }

   .hero-slide-content {
      padding: 0 24px 120px;
   }

   .hero-swiper .swiper-button-prev,
   .hero-swiper .swiper-button-next {
      display: none;
   }

   .hero-swiper-filters {
      bottom: 24px;
      width: calc(100% - 32px);
      justify-content: center;
   }

   .hero-filter-btn {
      padding: 8px 14px;
      font-size: 10px;
   }
}

@media only screen and (max-width: 640px) {
   .hero-slide-title {
      padding: 9px 14px 10px;
      margin-bottom: 12px;
   }

   .main-navigation-logo .logo {
      width: 68px;
      margin-left: 28px;
   }

   .main-navigation-logo .logo img {
      height: 58px;
   }

   .introduction-1 h1 {
      letter-spacing: 0.1em;
   }

   .introduction-1 h1:last-child {
      letter-spacing: 0.28em;
   }

   #item-6-1 .col-item:nth-child(2) .row-item.n-1,
   #item-6-1 .col-item:nth-child(2) .row-item.n-3 {
      height: auto;
   }

   #item-6-1 .box-description {
      padding: 28px 24px;
   }

   .project-stats {
      grid-template-columns: 1fr;
   }

   .project-stat:last-child {
      grid-column: auto;
   }

   .site-footer__grid {
      grid-template-columns: 1fr;
      gap: 28px;
   }

   .site-footer {
      padding-top: 48px;
   }
}

@media (hover: none) {
   .featured-project-card__socials {
      opacity: 1;
      transform: none;
      background: rgba(4, 12, 18, 0.24);
   }
}