/* ===================== GLOBAL ======================== */
body{
    margin:0;
    overflow-x:hidden;
    font-family:'Inter', sans-serif;
    background-color:#EAE8E1;
    color:#333;
}

.noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGD4DwABBAEA0eoeNwAAAABJRU5ErkJggg==");
    background-repeat:repeat;
    opacity:0.04;
    z-index:2;
}

main{
    position:relative;
    z-index:3;
}

.font-anton{
    font-family:'Anton', sans-serif;
}

/* ================= HERO + SHARED BACKGROUND ================= */
.hero-bg-wrapper {
    position: relative;
    width: 100%;
    background: url('/images/Home Desktop.png') center top no-repeat;
    background-size: 130% auto; /* zoom out the image 20% */
}

/* Tablet */
@media (max-width:1280px) {
    .hero-bg-wrapper {
        background-image: url('/images/Home Tab.png');
        background-size: 130% auto; /* zoom out for tablet */
    }
}

/* Mobile */
@media (max-width:768px) {
    .hero-bg-wrapper {
        background-image: url('/images/Home Mobile.png');
        background-size: 130% auto; /* zoom out for mobile */
    }
}

/* ================= HERO LAYOUT ======================= */
.hero-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
}

.hero-stage{
    position:relative;
    max-width:2300px; /* slightly bigger than 1920 to “zoom in” */
    width:100%;
    min-height:1200px; /* slightly taller to pull content down */
    margin:0 auto; /* center on desktop */
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Tablet artboard */
@media (max-width:1280px){
    .hero-stage{
        max-width:1500px; /* slightly bigger than 1280 */
        min-height:1050px; /* slightly taller */
    }
}

/* Mobile layout */
@media (max-width:768px){
    .hero-stage{
        width:100%;
        height:auto;
        min-height:100vh;
        padding:150px 40px 40px 40px; /* 30px less top padding */
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:12px;
    }

    .hero-stage > div{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:12px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .hero-stage section{
        padding-left:0;
        padding-right:0;
        box-sizing:border-box;
        align-items:center !important;
        text-align:center !important;
    }

    .hero-stage h1,
    .hero-stage h1 + div{
        margin-left:0 !important;
        padding-top:30px;
    }

    .hero-stage .order-4{
        width:100%;
        justify-content:center;
        margin-top:20px;
    }

    #scene-container{
        width:85%;
        max-width:420px;
        height:80vh;
        margin:0 auto;
        display:flex;
        justify-content:center;
        align-items:center;
        position:relative;
    }

    .hero-stage [class*="ml-"]{
        margin-left:0 !important;
    }
}

/* Smaller mobiles */
@media (max-width: 640px) {
    body {
        background-repeat: no-repeat;
        background-size:contain;
        background-position: top center;
        background-color: #000;
    }
}

/* ================= CLOTH AREA ======================== */
.bg-stage{
    position:relative;
    z-index:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
}

/* Cloth Canvas */
.cloth-canvas{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    pointer-events:none;
}

/* Content above cloth */
.bg-content{
    position:relative;
    z-index:2;
}

/* ================= FONT CONTENT ================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Roboto+Slab:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkalami&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');
@font-face {
    font-family: 'UNFont';
    src: url('./fonts/UN-Font.woff') format('woff');
    src: url('./fonts/UN-Font.woff2') format('woff2');
    src: url('./fonts/UN-Font.ttf') format('truetype');
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family:'UNFont'; /* Main font for titles */
}

.section-title {
    font-family: 'UNFont';
    font-size: 4rem; /* Further increased size */
    font-weight: 600;
    margin-bottom: 20px; /* Adjusted margin */
    color: #1a1a1a;
}

.section-subtitle {
    font-size: 2.2rem; /* Increased size */
    color: #333;
    margin-bottom: 80px; /* Increased margin */
    font-family: 'UNFont';
    font-weight: 400;
}

.view-btn {
  background: #1a1a1a;
  color: #fff;
  border: none;
  padding: 20px 40px; /* Adjusted padding for better balance */
  border-radius: 50px; /* Pill shape */
  font-size: 1.6rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  font-family: 'UNFont';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.arrow-icon { /* Renamed from span to arrow-icon */
  display: inline-flex; /* Use flex to center content */
  align-items: center;
  justify-content: center;
  width: 40px; /* Diameter of the circle */
  height: 40px; /* Diameter of the circle */
  border: 2px solid #fff; /* White border */
  border-radius: 50%; /* Makes it a circle */
  margin-left: 15px; /* Space between text and icon */
  font-size: 1.4rem; /* Adjusted arrow size */
  line-height: 1; /* Ensure arrow is centered vertically */
  transition: transform 0.3s ease, border-color 0.3s ease; /* Added transition for hover effects */
}

.arrow-icon:hover {
  transform: scale(1.1); /* Slightly enlarge the icon */
  border-color: #ddd; /* Slightly lighter border on hover */
}

.view-btn:hover {
  background: #333;
  transform: translateY(-2px); /* Slight lift on hover */
}

/* ================= OUR STORY SECTION ================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Alkalami", serif;
    color: #222;
    line-height: 1.6;
    overflow-x: hidden;
}

/* SECTION */
.our-story {
    background-size: cover;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
}

/* CONTENT WRAPPER */
.content-wrapper {
    width: 100%;
    max-width: 1100px;
    text-align: center;
    animation: fade-slide-in 1.5s ease forwards;
}

/* ANIMATION */
@keyframes fade-slide-in {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* TOP HEADING */
.top-text h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 400;
    margin-bottom: 12px;
    opacity: 0;
    animation: fade-up 1.5s ease forwards .2s;
}

/* TOP SUBTEXT */
.top-text .subtext {
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
    opacity: 0;
    animation: fade-up 1.5s ease forwards .4s;
}

/* MIDDLE QUOTE */
.middle-quote {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    line-height: 1.3;
    color: #111;
    max-width: 520px;
    margin: 60px auto;
    padding: 20px 30px;
    animation: fade-up 2s ease forwards .5s, float-quote 20s infinite ease-in-out;
}

/* FLOAT ANIMATION */
@keyframes float-quote {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

/* TIMELINE IMAGE */
.timeline-image-container {
    display: flex;
    justify-content: center;
    margin: 50px 0 70px;
}

.timeline-image {
    width: 100%;
    max-width: 750px;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: scale(.95);
    animation: scale-fade-in 1.6s ease forwards .8s;
}

.timeline-image:hover {
    transform: scale(1.03);
}

@keyframes scale-fade-in {
    to { opacity: 1; transform: scale(1); }
}

/* BOTTOM TEXT */
.bottom-text {
    /* ===== KEEP ORIGINAL SETTINGS ===== */
    font-size: clamp(1.25rem, 2vw, 1.9rem);
    max-width: 850px;
    margin: 0 auto;
    opacity: 0;
    animation: fade-up 1.5s ease forwards 1.2s;

    /* ===== TEXT STRUCTURE ===== */
    line-height: 1.7;
    text-align: justify;
    font-family: 'UN-Font';

    /* ===== GLASS CARD ===== */
    padding: 26px 30px;
    border-radius: 24px;

    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255,255,255,0.18);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.25);

    position: relative;
    overflow: hidden;
}

/* ===== THREAD FINISH (TAILOR DETAIL) ===== */
.bottom-text::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 12px;
    height: 2px;

    background-image: repeating-linear-gradient(
        90deg,
        rgba(185,143,61,0.8) 0px,
        rgba(185,143,61,0.8) 6px,
        transparent 6px,
        transparent 12px
    );

    border-radius: 2px;
    opacity: 0.75;
}

/* ===== PARAGRAPH FLOW ===== */
.bottom-text p {
    margin-bottom: 16px;
}

.bottom-text p:last-child {
    margin-bottom: 0;
}

@keyframes fade-up {
    to { opacity: 1; transform: translateY(0); }
}

/* SCROLL FADE */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s, transform 1s;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */
/* TABLETS */
@media (max-width: 900px) {

    .timeline-image-container {
        margin: 40px 0 60px;
    }

    .middle-quote {
        max-width: 95%;
        padding: 15px 20px;
    }
}

/* MOBILE */
@media (max-width: 600px) {

    .our-story-section {
        padding: 60px 15px;
    }

    .middle-quote {
        margin: 40px auto;
        padding: 15px;
        font-size: 1.5rem;
    }

    .bottom-text {
        font-size: 1.25rem;
    }
}

/* ================= PRODUCT SECTION ==================== */
/* ================= PAGE WRAPPER ================= */
.page-wrapper {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    box-sizing: border-box;
    padding: var(--page-padding-desktop);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    text-align: center;
    padding: 30px;
}

/* ================= GRID ================= */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 300px);
    justify-content: center;
    gap: 60px; /* ⭐ added consistent spacing */
    margin-top: 40px;
}

/* Responsive grid */
@media (max-width: 1100px) {
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 50px;
    }
}

@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .page-wrapper {
        padding: var(--page-padding-mobile);
    }

    .container {
        padding: 20px;
    }

    .title {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .subtitle {
        font-size: 15px;
        margin-bottom: 24px;
    }

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

@media (min-width: 1600px) {
    .page-wrapper {
        padding: 56px;
    }

    .grid {
        gap: 90px 140px;
    }

    .title {
        font-size: 46px;
    }
}

/* ================= CARD ================= */
.card {
    position: relative;
    width: 100%;
    max-width: var(--card-width-desktop);
    margin: auto;
    cursor: pointer;
    perspective: 1000px;
    min-height: 330px;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .card {
        max-width: 240px;
        min-height: 300px;
    }
}

@media (max-width: 600px) {
    .card {
        max-width: 100%;
        min-height: 260px;
    }
}

/* ================= FLIP SYSTEM ================= */
.flip-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 1.25s ease-out;
    transform-style: preserve-3d;
    border-radius: 10px;
}

/* Hover flip (desktop) */
@media (hover: hover) {
    .card:hover .flip-inner {
        transform: rotateY(180deg);
    }
}

/* Click flip */
.card.flipped .flip-inner {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}

.flip-back {
    transform: rotateY(180deg);
}

/* ================= IMAGE ================= */
.shirt {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block;
}

/* ================= TEXT BLOCK ================= */
.text-block {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    text-align: center;
    pointer-events: none;
    font-weight: 700;
}

@media (max-width: 600px) {
    .text-block {
        width: 120px;
        top: 36%;
    }

    .text-block p {
        font-size: 14px;
        margin: 0;
        line-height: 1.1;
    }
}

/* ================= ACCESSIBILITY ================= */
.card:focus {
    border-radius: 10px;
}

/* ================= SPACING ================= */
.spacer {
    height: 60px;
}

/* ================= SMALL HEIGHT DEVICES ================= */
@media (max-height: 500px) {
    .page-wrapper {
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .container {
        padding: 18px;
    }
}


/* ================= TECH SECTION ==================== */
.tech-section{
    position:relative;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:visible;
    padding:120px 20px;

    background:
        url("../images/texture.jpg") center/cover repeat,
        #f6f2ea;
}

/* ================= ROTATING BACKGROUND ================= */
.tech-circle{
    position:absolute;
    inset:0;
    background:url("./images/linen_circle.png") center/cover no-repeat;
    border-radius:50%;
}

/* ================= LAYOUT ================= */
.tech-container{
    max-width:1200px;
    margin:auto;
    position:relative;
    z-index:2;
}

.tech-title{
    font-size:4rem;
    margin-bottom:60px;
    font-weight:300;
    color:#222;
}

.tech-layout{
    display:flex;
    gap:60px;
    align-items:center;
}

/* LEFT */
.tech-left{
    flex:1;
}

.tech-quote{
    background:#e8d3a5;
    padding:24px;
    border-radius:16px;
    margin-bottom:40px;
    font-size:18px;
    text-align:center;
}

/* ICONS */
/* ================= ICON ROW ================= */
.tech-icons{
    display:flex;
    gap:32px;                 /* equal spacing */
    align-items:flex-start;
    flex-wrap:wrap;           /* PREVENT overlap */
}

/* ================= ICON BLOCK ================= */
.tech-icon{
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;

    width:110px;              /* FIXED SLOT WIDTH */
    flex-shrink:0;            /* prevents squeezing */

    transition:.3s;
}

.tech-icon.active{
    transform:scale(1.12);
}

/* ================= ICON IMAGE ================= */
.tech-icon img{
    width:70px;
    height:70px;
    background:white;
    border-radius:50%;
    padding:12px;
    box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* ================= LABEL TEXT ================= */
.tech-icon div{
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    min-height:38px;
    text-align:left;
    width:100%;               /* stay inside slot */

    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(6px);

    padding:6px 10px;
    border-radius:8px;

    color:#2b2b2b;

    white-space:normal;       /* allow wrapping */
    word-break:break-word;    /* never overflow */
}

.tech-icon.active div{
    background:#f0d07a;
    color:#221914;
}

.tech-rotator{
    position:absolute;
    top:50%;
    right:-30vw;

    width:60vw;
    height:60vw;

    transform:translateY(-50%) scaleX(-1);
    transition:transform .6s ease;

    pointer-events:none;
}

/* RIGHT ORBIT */
.tech-right{
    flex:1;
    position:relative;
    min-height:420px;
    height:auto;
}

.tech-orbit{
    position:absolute;
    inset:0;
}

.orbit-item{
    position:absolute;
    left:50%;
    top:50%;

    transform-origin:center;

    opacity:.25;
    transition:
        opacity .4s ease,
        transform .6s ease;
}

.orbit-item.active{
    opacity:1;
}

.orbit-item img{
    width:200px;
    height:200px;
    background:white;
    border-radius:50%;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    transition:transform .6s ease;
}

.mobile-tech-label{
    display:none;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

    /* ================= SECTION ================= */
    .tech-section{
        padding:70px 18px 90px;
    }

    /* ================= TITLE ================= */
    .tech-title{
        font-size:2.4rem;
        line-height:1.1;
        margin-bottom:28px;
    }

    /* ================= STACK ================= */
    .tech-layout{
        flex-direction:column;
        align-items:flex-start;
        gap:26px;
    }

    /* ================= LEFT ================= */
    .tech-left{
        width:100%;
    }

    /* QUOTE CARD */
    .tech-quote{
        max-width:240px;
        font-size:15px;
        padding:18px;
        border-radius:18px;
    }

    /* hide desktop icons row */
    .tech-icons{
        display:none;
    }

    /* ================= RIGHT VISUAL ================= */
    .tech-right{
        width:100%;
        height:520px;
        position:relative;
        display:flex;
        justify-content:center;
        align-items:flex-end;
        overflow:visible;
    }

    /* ================= HALF CIRCLE ================= */
    /* vertically full, horizontally half */
    .tech-rotator{
        position:absolute;

        width:140vw;
        height:140vw;

        right:-70vw;          /* shows half circle */
        top:50%;

        transform:translateY(-50%) scaleX(-1);
        transform-origin:center;

        pointer-events:none;
        z-index:0;
    }

    /* ================= ORBIT AREA ================= */
    .tech-orbit{
        position:absolute;
        inset:0;
        z-index:2;
    }

    /* IMPORTANT: Desktop rotation logic stays untouched */
    .orbit-item{
        position:absolute;
        left:50%;
        top:50%;
    }

    /* visibility controlled by JS */
    .orbit-item.active{
        opacity:1;
    }

    /* ================= IMAGE SIZE ================= */
    .orbit-item img{
        width:68vw;
        max-width:260px;
        height:auto;

        border-radius:50%;
        padding:18px;

        background:#f1eee8;
        box-shadow:0 12px 32px rgba(0,0,0,.15);
    }

    /* ================= REMOVE ROTATING LABELS ================= */
    /* (we now use external mobile label instead) */
    .orbit-item::after,
    .orbit-item.active::after{
        display:none !important;
    }

    /* ================= FIXED MOBILE LABEL ================= */
    .mobile-tech-label{
        display:block;
        position:absolute;

        left:20px;
        top:50%;
        transform:translateY(-50%);

        background:#e9e5db;
        padding:10px 16px;
        border-radius:12px;

        font-size:14px;
        color:#444;

        z-index:10;
        white-space:nowrap;

        box-shadow:0 6px 18px rgba(0,0,0,.12);
    }

}



/* --- Gallery Styles --- */
.gallery-section {
    background-repeat: no-repeat;
    background-size: cover;
    color: #2d2d2d;
    overflow-x: hidden; /* Prevent horizontal scroll on animations */
    padding: 60px 0; /* Vertical padding for the gallery section */
}

.gallery-section .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px; /* Horizontal padding for content within the gallery section */
    text-align: center;
}

/* Keyframe Animations */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* --- Title Section --- */
.gallery-section h1 {
    font-family: 'UNFont'; /* Applied Cormorant Garamond */
    font-size: 55px;
    font-weight: 1000;
    margin-bottom: 10px;
    color: #1a1a1a;
    animation: fadeInSlideUp 1s ease-out forwards;
}

.gallery-section .subtitle {
    font-family:'UNFont'; /* Added Alkalami font */
    font-size: 28px;
    font-weight: 400;
    color: #4a4a4a;
    text-align: center;
    justify-content: center;
    margin-bottom: 80px;
    margin-top: 20px;
    margin-left: 85px;
    white-space: nowrap; /* Ensures the text stays on a single line */
    animation: fadeInSlideUp 1s ease-out forwards 0.5s; /* Delayed animation */
    animation-fill-mode: backwards; /* Keep initial state before animation */
}

/* --- Gallery Section --- */
.gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 70px;
    animation: fadeIn 1s ease-out forwards 1s; /* Delayed animation */
    animation-fill-mode: backwards;
}

.gallery-item {
    position: relative;
    width: 220px;
    height: 320px;
    overflow: hidden;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* --- Team Gallery Section --- */
.gallery-team {
  position: relative;
  width: auto;
  height: 220px;
  overflow: hidden;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.gallery-team:hover {
  transform: translateY(-5px);
}

.gallery-team img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-team:hover img {
  transform: scale(1.05);
}
/* --- Stats Section --- */
.stats {
    display: flex;
    justify-content: space-evenly; /* Changed to distribute space evenly */
    gap: 20px;
    animation: fadeIn 1s ease-out forwards 1.5s; /* Delayed animation */
    animation-fill-mode: backwards;
}

.stat-box {
    background-color: rgba(255,255,255,0.5); /* Adjusted for more transparency */
    padding: 25px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Softened shadow */
    text-align: center;
    min-width: 200px;
    backdrop-filter: blur(3px);
}

.stat-number {
    font-size: 30px;
    font-weight: 600;
    color: #1c1c1c;
}

.stat-label {
    font-family: 'UNFont';
    font-size: 17px;
    font-weight: 500;
    color: #333;
    margin-top: 8px;
}

.stats1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    animation: fadeIn 1s ease-out forwards 1.5s; /* Delayed animation */
    animation-fill-mode: backwards;
}

.stat-box1 {
    background-color: rgba(255,255,255,0.5); /* Adjusted for more transparency */
    padding: 25px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Softened shadow */
    text-align: center;
    min-width: 200px;
    backdrop-filter: blur(3px);
}
    
.stat-number1 {
    font-size: 30px;
    font-weight: 600;
    color: #1c1c1c;
}

.stat-label1 {
    font-family:'UNFont';
    font-size: 17px;
    font-weight: 500;
    color: #333;
    margin-top: 8px;
}

@media (max-width: 768px) {
  .gallery-item {
    width: 45%;
  }
  .stat-box {
    min-width: 150px;
    padding: 20px;
  }
}

@media (max-width: 500px) {
  .gallery-item, .gallery-team {
    width: 90%;
  }
  
  .gallery-section h1 {
    font-size: 32px;
  }
  .gallery-section .subtitle {
    font-size: 16px;
    white-space: normal; /* Allow subtitle to wrap on smaller screens */
  }
}

@media (max-width: 1024px) {
  .gallery-section .container {
    padding: 0 20px;
  }
  .gallery-section h1 {
    font-size: 45px;
  }
  .gallery-section .subtitle {
    font-size: 22px;
    margin-bottom: 60px;
  }
  .gallery-item, .gallery-team {
    width: 200px;
    height: 300px;
  }
  .stat-box {
    min-width: 180px;
    padding: 20px 30px;
  }
}

@media (max-width: 768px) {
  .gallery-item, .gallery-team {
    width: 45%; /* Two items per row */
    height: 280px;
  }
  .stat-box {
    min-width: 150px;
    padding: 15px 25px;
  }
  .stat-number {
    font-size: 26px;
  }
  .stat-label {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .gallery-item, .gallery-team {
    width: 90%; /* One item per row */
    height: 250px;
  }
  .stat-box {
    width: 100%; /* Full width for stat boxes */
    max-width: 250px;
    margin: 0 auto;
  }
  .stats {
    gap: 20px;
  }
}

/* --- Team Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'UNFont';
    background-size: cover;        /* makes it cover entire screen */
    background-repeat: no-repeat;  /* prevents tiling */
    background-attachment: fixed;  /* keeps it steady while scrolling */
    background-position: center;   /* centers the image */
    min-height: 100vh;
}

/* Remove extra background patterns from inner sections */
.cta {
    background-image: none; /* disable pattern repeat inside sections */
    background-color: transparent; /* optional */
}

.team-container {
    width: 1728px;
    height: 2080px;
    margin: 0 auto;
    padding: 63px 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 89px;
    position: relative;
    box-sizing: border-box;
}

/* Headings Section */
.headings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    width: 100%;
}

.main-title {
    font-family: 'UNFont';
    font-weight: 700;
    font-size: 48px;
    line-height: 1.21;
    text-align: center;
    color: #000000;
    height: 60px;
    display: flex;
    align-items: center;
}

.subtitle {
    font-family: 'UNFont', serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.89;
    text-align: center;
    color: #000000;
    height: 48px;
    display: flex;
    align-items: center;
}

.description {
    font-family: 'UNFont';
    font-weight: 500;
    font-size: 32px;
    line-height: 1.28;
    text-align: center;
    color: #000000;
    height: 95px;
    display: flex;
    align-items: center;
    max-width: 100%;
}

/* Stats Section */
.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 125px;
    width: 100%;
}

.stat-card {
    width: 400px;
    height: 207px;
    position: relative;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 4px 8px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../images/texture.jpg');
    background-size: 15% 15%;
    background-repeat: repeat;
}

.stat-number {
    font-family: 'UNFont';
    font-weight: 700;
    font-size: 96px;
    line-height: 1.21;
    text-align: center;
    color: #000000;
    margin-bottom: 10px;
}

.stat-label {
    font-family: 'UNFont';
    font-weight: 500;
    font-size: 32px;
    line-height: 1.28;
    text-align: center;
    color: #000000;
}

/* Roles Section */
.roles {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    grid-template-rows: repeat(2, 300px);
    gap: 60px;
    width: 100%;
    max-width: 1400px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.role-card {
    width: 400px;
    height: 300px;
    position: relative;
    border-radius: 20px;
    background: none; /* No brown background */
    border: none;
    box-shadow: none;
    overflow: hidden;
}

.role-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.role-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
}

.role-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills the card completely */
    object-position: center;
    border-radius: 20px;
    opacity: 1; /* Fully visible */
    filter: none; /* Removes shadow blending */
    mix-blend-mode: normal; /* Ensures solid coverage */
}

/* Text styling removed since we're using only icons */
.member-count {
    background: #D3D3D3;
    border-radius: 20px;
    padding: 8px 20px;
    font-family: 'UNFont';
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    color: #2B1A0A;
    width: 140px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
    position: relative;
    z-index: 2;
}

/* All role cards now have consistent brown leather styling */
/* ===== How We Create Section ===== */
.creation {
    padding: 80px 20px;
}

.creation-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.creation-title {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #111;
    letter-spacing: 0.5px;
}

.creation-description {
    font-size: 1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.7;
}

/* Cards Layout */
.creation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

/* Individual Card */
.creation-card {
    background: #ffffff15;
    padding: 35px 28px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.creation-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

.creation-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #111;
}

.creation-card-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .creation {
        padding: 60px 20px;
    }

    .creation-title {
        font-size: 1.8rem;
    }

    .creation-description {
        font-size: 0.95rem;
    }
}

/* CTA Section */
.cta {
    width: 1536px;
    height: 500px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    box-shadow: 5px 10px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 62px;
    padding: 66px 106px;
    background-image: url('../images/texture.jpg');
    background-size: 51.5% 51.5%;
    background-repeat: repeat;
    background-attachment: local;
    position: absolute;
    bottom: 63px;
    left: 50%;
    transform: translateX(-50%);
}

.cta-title {
    font-family: 'UNFont';
    font-weight: 500;
    font-size: 48px;
    line-height: 1.28;
    text-align: center;
    color: #000000;
    width: 718px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-description {
    font-family: 'UNFont';
    font-weight: 500;
    font-size: 32px;
    line-height: 1.28;
    text-align: center;
    color: #000000;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cta-buttons {
    display: flex;
    gap: 100px;
    width: 400px;
    height: 75px;
    justify-content: center;
    align-items: center;
}

.cta-button {
    width: 200px;
    height: 75px;
    background: #2A2E2B;
    border: none;
    border-radius: 20px;
    font-family:'UNFont';
    font-weight: 500;
    font-size: 28px;
    line-height: 1.28;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: #3A3E3B;
    transform: translateY(-2px);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}

/* Responsive Design */
@media (max-width: 1800px) {
    .team-container {
        width: 100%;
        max-width: 1728px;
        height: auto;
        min-height: 2080px;
        padding: 40px 20px;
    }
    
    .cta {
        width: 100%;
        max-width: 1536px;
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 40px;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 600px;
        height: auto;
    }
    
    .cta-button {
        width: 100%;
        height: 60px;
    }
}

@media (max-width: 1200px) {
    .stats {
        gap: 60px;
    }
    
    .stat-card {
        width: 300px;
        height: 180px;
    }
    
    .stat-number {
        font-size: 72px;
    }
    
    .stat-label {
        font-size: 24px;
    }
    
    .roles {
        grid-template-columns: repeat(2, 350px);
        grid-template-rows: repeat(3, 280px);
        gap: 40px;
        justify-content: center;
    }
    
    .role-card {
        width: 350px;
        height: 280px;
        background: linear-gradient(135deg, #D38333, #C1742A, #D38333);
        border: 2px solid #B8860B;
    }
    
    /* Icons maintain size on tablet */
}

@media (max-width: 768px) {
    .team-container {
        padding: 20px 10px;
        gap: 40px;
    }
    
    .main-title {
        font-size: 36px;
    }
    
    .subtitle {
        font-size: 28px;
    }
    
    .description {
        font-size: 24px;
    }
    
    .stats {
        flex-direction: column;
        gap: 30px;
    }
    
    .stat-card {
        width: 280px;
        height: 160px;
    }
    
    .stat-number {
        font-size: 60px;
    }
    
    .stat-label {
        font-size: 20px;
    }
    
    .roles {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 250px);
        gap: 30px;
        justify-content: center;
    }
    
    .role-card {
        width: 320px;
        height: 250px;
        background: linear-gradient(135deg, #D38333, #C1742A, #D38333);
        border: 2px solid #B8860B;
    }
    
    .cta {
        padding: 40px 20px;
        gap: 40px;
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 40px;
    }
    
    .cta-title {
        font-size: 36px;
        width: 100%;
    }
    
    .cta-description {
        font-size: 24px;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 5px;
        width: 100%;
        height: auto;
        display:flex;
        flex-wrap:wrap;
    }
    
    .cta-button {
        width: 100%;
        height: 60px;
        font-size: 24px;
        display:flex;
    }
}

/* ===================== GET IN TOUCH ======================== */
:root {
  --dark-bg: #0c0b0b;
  --gold: #d8a84a;
  --input-gray: #f6eaea;
}

/* Background Texture as seen in your 1st image */
.get-in-touch-section {
  width: 100%;
  padding: 60px 20px;
  background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png'); /* Adds the burlap texture */
  background-color: #d2c5b3; /* Matches the beige background */
  box-sizing: border-box;
}

.frame {
  max-width: 1200px;
  margin: 0 auto;
}

.h1class {
  font-family: 'Alkalami', serif;
  font-size: 36px;
  color: #945220;
  text-align: center;
  margin: 0;
}

.subtitle1 {
  font-family: 'Alkalami', serif;
  font-size: 22px;
  color: #1b1b1b;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 50px;
}

/* Stable Grid Layout */
.main-layout-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* Form is wider than info stack */
  gap: 30px;
  width: 100%;
  align-items: start;
}

/* Left Card Styling */
.left-card {
  background: linear-gradient(180deg, #0c0b0b 0%, #161414 100%);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.left-title {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.accent {
  width: 8px;
  height: 50px;
  background: linear-gradient(180deg, var(--gold), #b5852f);
  border-radius: 4px;
}

.left-title h2 {
  color: #f0d07a;
  margin: 0;
  font-size: 24px;
}

.left-title small {
  color: #d9d2cf;
}

/* Chips Forced into one row */
.chips-row {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}

.chip {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: #fbf6f5;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.chip.active{
  background:#f0d07a;
  color:#221914;
}

/* Form Styling */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

input, textarea {
  background: var(--input-gray);
  border: none;
  border-radius: 8px;
  padding: 18px;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
}

textarea {
  height: 150px;
  resize: none;
}

.send-btn {
  background: #fff;
  color: #000;
  padding: 16px;
  border: none;
  border-radius: 6px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}
.send-btn:hover {
  background-color: #f0d07a; /* Changes white to gold */
  color: #221914;            /* Keeps text dark */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Deeper shadow */
  transition: all 0.3s ease; /* Makes the transition smooth */
}

/* Right Stack Styling */
.right-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  background: #161414;
  padding: 25px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.info-card {
    background: linear-gradient(180deg, #111010 0%, #1b1b1b 100%);
    color: #fff;
    padding: 19px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18);
    max-width: 556px;
}
.icon-wrap i {
    color: #fff;
    font-size: 45px;
}

.info-text h4 {
    margin: 0;
    font-size: 25px;
    color: #fff;
}
.info-text p {
    margin: -2px 0 0;
    font-size: 25px;
    color: #e6dfda;
}

.social-pills {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.social-pills i {
    width: 30px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 162%;
    background: #f0d07a;
    color: #231b18;
    font-size: 20px;
    cursor: pointer;
    gap: 33px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    padding: 4px;
    border-spacing: 56px;
}

.social-pills i:hover {
    color: #fff;
    background: #2a241f;
}

@media (max-width: 960px) {
    .grid {
        flex-direction: column;
        align-items: center;
    }
    .right-stack {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
    .info-card {
        flex: 1 1 calc(50% - 8px);
    }
}


/* ===================== FOOTER ======================== */
 /* --- Reset & Base Layout --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.footer_section {
    font-family: 'Merriweather', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Main Leather Footer Container --- */
.footer-wrap {
    width: 100%;
    max-width: 1531px;
    height: 728px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    background-image: url('../images/2.jpg'); /* background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 48px 0;
    color: #2b1a14;
}

/* --- Logo --- */
.logo {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    width: 410px;
    height: auto;
    opacity: 0.98;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
    pointer-events: none;
}

/* --- Tagline (centered) --- */
.tagline {
    width: 100%;
    max-width: 1350px; /* widened for full appearance */
    margin: 190px auto 36px auto;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 31px;
    font-weight: 700;
    line-height: 1.35;
    color: #241610;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* --- Links Row --- */
.links-row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    max-width: 1200px;
    margin: 48px auto 92px auto;
    padding: 0 80px;
}

.links-row a {
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 31px;
    color: #efe6d8;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.links-row a:hover {
    transform: translateY(-4px);
    opacity: 0.95;
}

/* --- Dashed Line --- */
.sep {
    width: 100%;
    margin: 16px auto 18px auto;
    border-top: 3.5px dashed rgba(220, 216, 198, 0.95);
    opacity: 0.9;
}

/* --- Credit Line --- */
.credit {
    width: 100%;
    max-width: 1350px;
    margin: 100px auto 0 auto;
    text-align: center;
    font-size: 23.25px;
    color: #efe6d8;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .logo {
        width: 260px;
        top: 18px;
    }

    .tagline {
        font-size: 26px;
        margin-top: 110px;
        padding: 0 16px;
    }

    .links-row {
        padding: 0 24px;
        margin-top: 48px;
    }

    .links-row a {
        font-size: 22px;
    }

    .credit {
        font-size: 18px;
    }

    .footer-wrap {
        height: auto;
        padding: 36px 22px;
    }
}

@media (max-width: 520px) {
    .links-row {
        flex-direction: column;
        gap: 18px;
    }
}

/* ===== STORY MODAL ===== */
body.modal-open {
    overflow: hidden;
}

.story-modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(0,0,0,0.65);
    opacity: 0;
    visibility: hidden;
    transition: 0.35s ease;
    z-index: 9999;
}

.story-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Container smaller than screen */
.story-container {
    position: relative;
    width: min(92vw, 1200px);
    height: min(90vh, 900px);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    background: #111;
    animation: modalPop 0.35s ease;
}

/* Viewer */
.story-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    -webkit-overflow-scrolling: touch;
    display:block; /* prevents small gaps */
}

/* ===== VIEWER ===== */

.story-viewer{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* zoom layer */
.zoom-wrapper{
    transform-origin:center center;
    transition:transform .15s ease-out;
    will-change:transform;
}

.zoom-wrapper iframe{
    width:min(90vw,1000px);
    height:min(85vh,850px);
    border:none;
    display:block;
    pointer-events:auto;
}

/* Close Button */
.story-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    font-size: 28px;
    cursor: pointer;
    background: rgba(0,0,0,0.6);
    color: #fff;
    z-index: 2;
}

.story-close:hover {
    transform: scale(1.08);
}

/* Animation */
@keyframes modalPop {
    from {
        transform: scale(.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ================= MOBILE VIEW ================= */
@media (max-width: 768px) {

    .story-modal {
        padding: 10px;
        align-items: center;
    }

    .story-container {
        width: 100%;
        height: 92vh;
        border-radius: 12px;
    }

    .story-close {
        width: 44px;
        height: 44px;
        font-size: 26px;
        top: 10px;
        right: 10px;
    }

}