:root{
  --dark:#24282a;
  --red:#ed1c24;
  --white:#fff;
  --header-h:68px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--dark);color:#fff;font-family: 'Poppins', sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}

header,
.navbar,
#header {position: relative;z-index: 1000}

.site-header{position:fixed;z-index:1000;top:0;left:0;width:100%;height:var(--header-h);display:flex;align-items:center;justify-content:center;background:#24282a;padding:0 5%;box-shadow:0 1px 0 rgba(255,255,255,.03)}
.brand{position:absolute;left:4%;top:7px;display:flex;align-items:center;justify-content:center;font-family:Impact,'Arial Black',sans-serif;font-style:italic;font-size:31px;line-height:1;letter-spacing:-2px;color:#fff;-webkit-text-stroke:2px var(--red);text-shadow:2px 2px 0 var(--red), -1px -1px 0 var(--red)}
.nav{display:flex;align-items:center;gap:34px}
.nav-link{position:relative;font-size:12px;font-weight:500;color:#fff;opacity:.92;padding:25px 0 22px;transition:.25s ease}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;background:var(--red);transform:scaleX(0);transition:.25s ease}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.menu-toggle{display:none;position:absolute;right:22px;top:18px;width:38px;height:32px;border:0;background:transparent;cursor:pointer}
.menu-toggle span{display:block;width:28px;height:2px;margin:6px auto;background:#fff;transition:.25s}
.visual-section{width:100%;position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}
#home.hero {position: relative;width: 100%;height: auto;min-height: unset;aspect-ratio: 1920 / 1150;margin-top: var(--header-h);margin-bottom: 0;padding: 0;background-image: url("../images/image1.svg");background-position: center top;background-repeat: no-repeat; background-size: 100% auto;z-index: 2;
clip-path: polygon(
    0 0,
    100% 0,
    100% 92%,
    80% 93%,
    60% 95%,
    50% 97%,
    40% 95%,
    20% 93%,
    0 92%)}
#home.hero .section-content {position: relative;z-index: 10}
#about.about {position: relative;width: 100%;height: 820px;min-height: 820px;margin-top: -72px !important;margin-bottom: 0;padding: 0;background-image: url("../images/image2.svg");background-repeat: no-repeat;background-position: center top;background-size: 100% auto;z-index: 1}
#about.visual-section2 {aspect-ratio: auto !important}
#home.hero + #about.about {margin-top: -72px !important}
.hero-brush {position: absolute;z-index: 10;left: 0;margin-top: -160px;width: 300px;height: auto;pointer-events: none}
.hero-brush1 {position: absolute;z-index: 10;right: 0;bottom: 480px;width: 300px;height: auto;pointer-events: none}

.products-section {position: relative;width: 100%;margin-top: -120px;padding: 95px 40px;background-image: url("../images/image6.svg");background-size: cover;background-position: center top;background-repeat: no-repeat}
.products-container {max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: repeat(3, 1fr);gap: 25px}
.product-card {position: relative;overflow: hidden;border-radius: 12px;height: 380px;cursor: pointer}
.product-card img {width: 100%;height: 93%;object-fit: cover;display: block;transition: transform .5s ease}
/*.product-card:hover img {transform: scale(1.02)}*/
.product-overlay {position: absolute;left: 0;right: 0;bottom: 0;padding: 25px 20px;background: linear-gradient(transparent,rgba(0, 0, 0, .85));color: #fff;text-align: center}
.product-overlay h3 {margin: 0 0 15px;font-family: 'Poppins', sans-serif;font-size: 20px;font-weight: 700}
.product-overlay button {padding: 10px 25px;border: none;border-radius: 25px;background: #f5bd00;color: #fff;font-family: 'Poppins', sans-serif;font-size: 13px;font-weight: 600;cursor: pointer;transition: .3s ease}
.product-overlay button:hover {background: #fff;color: #f5bd00;transform: translateY(-2px)}
.products-title {width: 100%;display: flex;justify-content: center;align-items: center;margin-bottom: 100px}
.products-title img {display: block;width: 100%;max-width: 600px;height: auto;object-fit: contain;transform: translateY(50px)}

.visual-section1{width:100%;height: 750px;position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}
.gallery{min-height:635px;background-image:url("../images/image8.svg");background-position:center center}
.gallery-section {width: 100%;min-height: 650px;display: flex;align-items: center;justify-content: space-between;padding: 30px 4%;box-sizing: border-box;overflow: hidden;position: relative}
.gallery-text {width: 35%;padding-left: 16px;box-sizing: border-box;position: relative;z-index: 30;transform: translateY(80px)}
.gallery-text span {display: inline-block;font-family: 'Poppins', sans-serif;font-size: 18px;font-weight: 700;letter-spacing: 3px;color: #e52b2b}
.gallery-text h2 {margin: 8px 0 15px;font-family: 'Butler', serif;font-size: 52px;line-height: .95;color: #1b381a}
.gallery-text p {max-width: 400px;margin: 0;font-family: 'Montserrat', sans-serif;font-size: 22px;line-height: 1.5;color: #000;transform: translate(100px, 360px);font-weight: 500}

.photo-collage {width: 500px;height: 300px;position: relative;flex-shrink: 0;margin-left: auto;transform: translate(-300px, -180px) scale(0.82);transform-origin: right center}
.polaroid {position: absolute;background: #fff;padding: 8px;box-sizing: border-box;box-shadow:0 3px 8px rgba(0, 0, 0, .18);cursor: pointer;transition:transform .3s ease,box-shadow .3s ease;overflow: hidden}
.polaroid img {display: block;width: 100%;height: 100%;object-fit: cover}
.photo-1 {width: 235px;height: 215px;left: 0;top: 55px;transform: rotate(-8deg);z-index: 4}
.photo-2 {width: 275px;height: 255px;left: 225px;top: 35px;transform: rotate(7deg);z-index: 5}
.photo-3 {width: 290px;height: 280px;right: 5px;top: 5px;transform: rotate(-2deg);z-index: 6}
.photo-4 {width: 235px;height: 225px;left: 12px;top: 285px;transform: rotate(0deg);z-index: 8}
.photo-5 {width: 240px;height: 225px;left: 220px;top: 315px;transform: rotate(-5deg);z-index: 3}
.photo-6 {width: 315px;height: 250px;right: 20px;top: 310px;transform: rotate(8deg);z-index: 9}
.tape {position: absolute;width: 100px;height: 32px;left: 430px;top: 280px;transform: rotate(2deg);background:
linear-gradient(90deg,#e7c72f,#f5d83c,#e4c32a);opacity: .9;z-index: 20;box-shadow:0 2px 4px rgba(0, 0, 0, .1)}
.tape::after {content: "";position: absolute;inset: 0;background:repeating-linear-gradient(90deg,transparent 0,transparent 8px,rgba(255,255,255,.12) 9px,transparent 11px)}
.photo-1:hover {transform:rotate(-8deg)scale(1.04);z-index: 50}
.photo-2:hover {transform:rotate(7deg)scale(1.04);z-index: 50}
.photo-3:hover {transform:rotate(-2deg)scale(1.04);z-index: 50}
.photo-4:hover {transform:rotate(0deg)scale(1.04);z-index: 50}
.photo-5:hover {transform:rotate(-5deg)scale(1.04);z-index: 50}
.photo-6:hover {transform:rotate(8deg)scale(1.04);z-index: 50}
.polaroid.active {z-index: 100 !important;box-shadow:0 20px 40px rgba(0, 0, 0, .30)}
.section-content{width:min(1200px,92%);height:100%;min-height:inherit;margin:auto}
.hero-cta{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:none;padding:12px 24px;border:2px solid #fff;border-radius:30px;background:var(--red);font-size:12px;font-weight:800;box-shadow:0 7px 20px rgba(0,0,0,.3)}
.shop-btn {width: 64px;height: 40px;border: none;border-radius: 30px;background: #263238;color: #fff;display: flex;align-items: center;justify-content: center;gap: 2px;cursor: pointer;overflow: hidden;padding: 0 14px;transition:width 0.4s ease,padding 0.4s ease,background 0.3s ease;transform: translate(30px,-50px);font-family: 'Poppins', sans-serif}
.shop-btn.active {width: 190px;padding: 0 20px}
.shop-icon {display: flex;align-items: center;justify-content: center;font-size: 23px;flex-shrink: 0}
.shop-text {white-space: nowrap;font-size: 14px;font-weight: 500;max-width: 0;opacity: 0;overflow: hidden;transition:max-width 0.4s ease,opacity 0.25s ease}
.shop-btn.active .shop-text {max-width: 120px;opacity: 1}
.arrow-icon {display: flex;align-items: center;justify-content: center;font-size: 23px;flex-shrink: 0}
.tag1-collage{transform: translate(5px, -150px)}
.tag2-collage{transform: translate(200px, -640px)}

.footer{background:#24282a;padding:55px 8% 18px}
.footer-inner{max-width:1050px;margin:auto;display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:50px;align-items:start}
.footer-brand{font-family:Impact,'Arial Black',sans-serif;font-style:italic;font-size:45px;letter-spacing:-3px;color:#fff;-webkit-text-stroke:2px var(--red);text-shadow:2px 2px 0 var(--red)}
.footer-nav{display:flex;flex-direction:column;gap:20px;font-size:14px;transform: translate(60px, 9px);font-family: 'Montserrat', sans-serif}
.footer-nav a:hover{color:#ff2028}
.footer-contact{display:flex;flex-direction:column;gap:12px;font-size:11px; transform:translateX(110px)}
.footer-contact h4{margin:14px 0 0;font-size:16px}
.footer-contact span {font-size: 14px;font-family: 'Poppins', sans-serif}
.socials{display:flex;gap:16px;align-items:center;font-weight:800;font-size:22px}
.footer-contact a:hover{color:#ff2028}
.copyright{max-width:1050px;margin:55px auto 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.55);font-size:12px;color:#fff}
.iconify {display: inline-flex;align-items: center;vertical-align: middle;margin-right: 5px;font-size: 20px;line-height: 1}


@media (max-width: 1032px) {
    .hero-brush {position: absolute;z-index: 10;left: 0;margin-top: -160px;width: 200px;height: auto;pointer-events: none}
    .hero-brush1 {position: absolute;z-index: 10;right: 0;bottom: 480px;width: 200px;height: auto;pointer-events: none}
    .products-section {position: relative;width: 100%;margin-top: -350px;padding: 95px 40px;background-image: url("../images/image6.svg");background-size: cover;background-position: center top;background-repeat: no-repeat}
    .products-container {max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: repeat(3, 1fr);gap: 25px}
    .product-card {position: relative;overflow: hidden;border-radius: 12px;height: 300px;cursor: pointer}
    .product-card img {width: 100%;height: 93%;object-fit: cover;display: block;transition: transform .5s ease}
    .shop-btn {width: 60px;height: 32px;border: none;border-radius: 30px;background: #263238;color: #fff;display: flex;align-items: center;justify-content: center;gap: 1px;cursor: pointer;overflow: hidden;padding: 0 14px;transition:width 0.4s ease,padding 0.4s ease,background 0.3s ease;transform: translate(30px,-37px);font-family: 'Poppins', sans-serif}
    .shop-btn.active {width: 190px;padding: 0 20px}
    .shop-icon {display: flex;align-items: center;justify-content: center;font-size: 23px;flex-shrink: 0}
    .shop-text {white-space: nowrap;font-size: 14px;font-weight: 500;max-width: 0;opacity: 0;overflow: hidden;transition:max-width 0.4s ease,opacity 0.25s ease}
    .shop-btn.active .shop-text {max-width: 120px;opacity: 1}
    .visual-section1{width:100%;height: 620px;position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}
    .gallery{min-height:620px;background-image:url("../images/image8.svg");background-position:center center}
    .photo-collage {width: 100px;height: 50px;position: relative;flex-shrink: 0;margin-left: auto;transform: translate(-550px, -150px) scale(0.80);transform-origin: right center}
    .gallery-text {width: 35%;padding-left: 0;box-sizing: border-box;position: relative;z-index: 30;transform: translateX(-50px)}
    .gallery-text p{font-size: 20px}
    .tag2-collage{transform: translate(240px, -700px)}
    .footer-contact{display:flex;flex-direction:column;gap:12px;font-size:11px; transform:translateX(50px)}
}


@media (max-width: 768px) {
    .nav{display:flex;align-items:center;gap:34px;transform: translateX(30px)}
    .hero-brush {position: absolute;z-index: 10;left: 0;margin-top: -110px;width: 140px;height: auto;pointer-events: none}
    .hero-brush1 {position: absolute;z-index: 10;right: 0;bottom: 380px;width: 140px;height: auto;pointer-events: none}
    .products-section {position: relative;width: 100%;margin-top: -400px;padding: 30px 40px;background-image: url("../images/image6.svg");background-size: cover;background-position: center top;background-repeat: no-repeat}
    .product-card {position: relative;overflow: hidden;border-radius: 12px;height: 220px;cursor: pointer}
    .shop-btn {width: 60px;height: 25px;border: none;border-radius: 30px;background: #263238;color: #fff;display: flex;align-items: center;justify-content: center;gap: 1px;cursor: pointer;overflow: hidden;padding: 0 14px;transition:width 0.4s ease,padding 0.4s ease,background 0.3s ease;transform: translate(30px,-30px);font-family: 'Poppins', sans-serif}
    .shop-btn.active {width: 175px;padding: 0 20px}
    .shop-text {font-size: 12px}
    .visual-section1{width:100%;height: 480px;position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}
    .gallery{min-height:480px;background-image:url("../images/image8.svg");background-position:center center}
    .photo-collage {width: 200px;height: 200px;position: relative;flex-shrink: 0;margin-left: auto;transform: translate(-340px, -140px) scale(0.55);transform-origin: right center}
    .gallery-text {width: 35%;padding-left: 0;box-sizing: border-box;position: relative;z-index: 30;transform: translate(-70px, -90px)}
    .gallery-text p{font-size: 15px}
    .tag2-collage{transform: translate(260px, -710px)}
    .footer-nav{transform:translate(20px,10px)}
    .footer-contact{display:flex;flex-direction:column;gap:12px;font-size:10px; transform:translateX(10px)}
    .footer-contact span {font-size: 13px;font-family: 'Poppins', sans-serif}
}


@media (max-width: 480px) {
    .site-header {height: var(--header-h);justify-content: flex-start;padding: 0 18px}
    .brand {left: 18px;top: 7px;font-size: 25px;z-index: 1100}
    .nav-logo-box img {max-height: 38px; transform: translateY(10px)}
    .hero-brush {position: absolute;z-index: 10;left: 0;margin-top: -50px;width: 80px;height: auto;pointer-events: none}
    .hero-brush1 {position: absolute;z-index: 10;right: 0;bottom: 1180px;width: 80px;height: auto;pointer-events: none}
    .menu-toggle {display: block;position: absolute;right: 18px;top: 18px;width: 38px;height: 32px;padding: 0;border: none;background: transparent;cursor: pointer;z-index: 1100}
    .menu-toggle span {display: block;width: 28px;height: 2px;margin: 6px auto;background: #fff;transition:transform .3s ease,opacity .3s ease}
    .nav {position: absolute;top: var(--header-h);left: 0; width: 100%;height: auto;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;gap: 0;padding: 10px 0 18px;background: #24282a;transform:translateY(-20px);opacity: 0;visibility: hidden;pointer-events: none;transition:opacity .3s ease,transform .3s ease,visibility .3s ease;box-shadow:0 8px 18px rgba(0,0,0,.30);z-index: 1050}
    .nav.active {transform:translateY(0);opacity: 1;visibility: visible;pointer-events: auto}
    .nav-link {width: 100%;text-align: center;font-size: 13px;padding: 13px 0;opacity: 1}
    .nav-link::after {left: 38%;right: 38%;bottom: 6px;height: 2px}
    .menu-toggle.active span:nth-child(1) {transform:translateY(8px)rotate(45deg)}
    .menu-toggle.active span:nth-child(2) {opacity: 0}
    .menu-toggle.active span:nth-child(3) {transform:translateY(-8px)rotate(-45deg)}
     #home.hero {margin-top: var(--header-h)}
    .products-section {position: relative;width: 100%;margin-top: -600px;padding: 30px 40px;background-size: cover;background-position: center top;background-repeat: no-repeat}
    .products-container {grid-template-columns: 1fr}
    .products-title {width: 100%;display: flex;justify-content: center;align-items: center;margin-bottom: 120px}
    .product-card {width: 100%;height: 320px}
    .footer-inner {grid-template-columns: 1fr;gap: 35px}
    .footer-nav {transform: none;gap: 12px}
    .footer-contact {transform: none}
    .copyright {margin-top: 35px;line-height: 1.6}
     #about.about {position: relative;width: 100%;height: 820px;min-height: 820px;margin-top: -30px !important;margin-bottom: 0;padding: 0;background-image: url("../images/image2.svg");background-repeat: no-repeat;background-position: center top;background-size: 100% auto;z-index: 1}
    .visual-section1{width:100%;height: 220px;position:relative;background-repeat:no-repeat;background-position:center;background-size:cover}
    .gallery{min-height:220px;background-position:center center}
    .photo-collage {width: 50px;height: 50px;position: relative;flex-shrink: 0;margin-left: auto;transform: translate(-210px, -75px) scale(0.28);transform-origin: right center}
    .gallery-text {width: 30%;padding-left: 0;box-sizing: border-box;position: relative;z-index: 30;transform: translate(-70px, -230px)}
    .gallery-text p{font-size: 7px}
}


@media (max-width: 360px) {
    .hero-brush1 {position: absolute;z-index: 10;right: 0;bottom: 1080px;width: 80px;height: auto;pointer-events: none}
    .product-card {width: 100%;height: 280px}
    .photo-collage {width: 50px;height: 50px;position: relative;flex-shrink: 0;margin-left: auto;transform: translate(-202px, -74px) scale(0.26);transform-origin: right center}
    .gallery-text {width: 30%;padding-left: 0;box-sizing: border-box;position: relative;z-index: 30;transform: translate(-70px, -240px)}
    .gallery-text p{font-size: 6px}
}