/* Basic Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* --- Fixed Header --- */
.main-header {
    background-color: #ffffff;
    width: 100%;
    position: fixed; /* হেডার সবসময় উপরে আটকে থাকবে */
    top: 0; left: 0; z-index: 1000;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.container {
    display: flex; flex-direction: column; 
    align-items: center; max-width: 1200px; margin: 0 auto;
}
.logo-header img { height: 40px; width: auto; }
.nav-menu ul { list-style: none; display: flex; gap: 35px; margin-top: 10px; }
.nav-menu ul li a { text-decoration: none; color: #000; font-weight: 500; transition: 0.3s; }

/* --- Hero Banner Section --- */
.hero-banner {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.15); /* ১৫% ছায়া */
    z-index: 2;
}

/* Background Slider */
.slider {
    position: absolute;
    width: 100%; height: 100%;
    z-index: 1;
    opacity: 0; 
    animation: fadeIn 1s forwards;
    animation-delay: 1s;
}

.slide {
    position: absolute;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slideAnimation 35s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }
.slide:nth-child(4) { animation-delay: 15s; }
.slide:nth-child(5) { animation-delay: 20s; }
.slide:nth-child(6) { animation-delay: 25s; }
.slide:nth-child(7) { animation-delay: 30s; }

@keyframes slideAnimation {
    0% { opacity: 0; transform: scale(1.1); }
    5% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; }
}

/* --- Hero Content (Centering Logic) --- */
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 100%;
    padding-top: 100px; /* হেডার থেকে কিছুটা নিচে নামানো হয়েছে */
}

.banner-logo {
    width: 250px;
    height: auto;
    display: block; /* লোগোকে ব্লক এলিমেন্ট করা হলো */
    margin: 0 auto 40px; /* অটো মার্জিন দিয়ে একদম মাঝখানে আনা হলো */
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 1.2s;
}

/* --- Split Text Animation --- */
.split-text {
    position: relative;
    display: inline-block; /* লেখা অনুযায়ী বক্স সাইজ হবে */
    font-size: 5.5em; 
    color: transparent;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 1.5s;
}

.split-text span:nth-child(1),
.split-text span:nth-child(2) {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    color: #fff;
    transition: 0.5s;
}

.split-text span:nth-child(1) { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); }
.split-text span:nth-child(2) { clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); }

.split-text:hover span:nth-child(1) { transform: translateY(-20px); }
.split-text:hover span:nth-child(2) { transform: translateY(20px); }

/* Yellow Box */
.split-text span:nth-child(3) {
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%) scaleY(0);
    width: 100%; /* এখন এটি "SIS Sourcing" লেখার সমান চওড়া হবে */
    color: #fff;
    background: #873e23;
    font-size: 0.25em;
    font-weight: 800;
    letter-spacing: 0.4em;
    text-align: center;
    padding: 5px 0;
    transition: 0.5s;
}

.split-text:hover span:nth-child(3) {
    transform: translateY(-50%) scaleY(1);
}

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

/* --- Mobile Responsive --- */
@media screen and (max-width: 768px) {
    .nav-menu { display: none; width: 100%; background: #fff; padding: 10px 0; }
    .nav-menu.active { display: block; }
    .nav-menu ul { flex-direction: column; gap: 10px; }
    .hamburger { cursor: pointer; display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
    .hamburger span { width: 25px; height: 3px; background: #000; }

    .split-text { font-size: 2.5em; }
    .banner-logo { width: 160px; }
    .hero-content { padding-top: 60px; }
}

/* --- 100% Apparels Solution Style --- */
.hero-content h3 {
    color: #ffffff;             /* লেখাটি একদম সাদা করার জন্য */
    font-size: 1.5em;           /* লেখার সাইজ */
    font-weight: 500;           /* লেখার পুরুত্ব */
    margin-top: 30px;           /* SIS Sourcing লেখা থেকে নিচে নামানোর জন্য গ্যাপ */
    letter-spacing: 3px;        /* অক্ষরের মাঝখানের দূরত্ব */
    text-transform: uppercase;  /* সব বড় হাতের অক্ষর */
    
    /* এনিমেশন সেটআপ */
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: 2s;        /* লোগো ও মেইন টেক্সট আসার পর এটি আসবে */
}

/* মোবাইলের জন্য এডজাস্টমেন্ট */
@media screen and (max-width: 768px) {
    .hero-content h3 {
        font-size: 1em;
        margin-top: 40px;
        letter-spacing: 1px;
    }
}

/* --- About Section Styling --- */
.about-section {
    background-color: #000; /* সলিড ব্ল্যাক ব্যাকগ্রাউন্ড */
    padding: 80px 0;
    width: 100%;
    overflow: hidden;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;         /* ২টা অংশ পাশাপাশি করার জন্য */
    align-items: center;   /* লম্বালম্বিভাবে মাঝে রাখার জন্য */
    gap: 20px;             /* ছবি এবং টেক্সটের মাঝখানের গ্যাপ */
    padding: 0 50px;
}

/* ছবি সেটআপ */
.about-image {
    flex: 1;               /* সমান জায়গা নিবে */
}

.about-image img {
    width: 70%;
    height: 70%;
    border-radius: 15px;
    display: block;
}

/* টেক্সট সেটআপ */
.about-text {
    flex: 1;               /* সমান জায়গা নিবে */
    color: #fff;
}

.about-text h2 {
    font-size: 2.5rem;
    color: #ff0;           /* টাইটেল হলুদ রঙ */
    margin-bottom: 10px;
    text-transform: uppercase;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 25px;
    color: #ddd;
}

.btn-more {
    padding: 10px 25px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.btn-more:hover {
    background: #fff;
    color: #000;
}

/* --- Animation Styles --- */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: 1s all ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: 1s all ease;
}

.reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* মোবাইলের জন্য: একটির নিচে আরেকটি চলে আসবে */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
}

/* Aurora Animation Variables */
:root {
  --bg: #000000;
  --clr-1: #00c2ff; /* Cyan */
  --clr-2: #33ff8c; /* Green */
  --clr-3: #ffc640; /* Yellow/Gold */
  --clr-4: #e54cff; /* Purple */
  --blur: 1.5rem;
  --fs: clamp(3.1rem, 9vw, 2.8rem); /* ফন্ট সাইজ কিছুটা এডজাস্ট করা হয়েছে */
  --ls: -2px;
}

.content {
  text-align: center;
  background-color: var(--bg);
  padding: 20px 0;
}

.title {
  font-size: var(--fs);
  font-weight: 800;
  letter-spacing: var(--ls);
  position: relative;
  overflow: hidden;
  background: var(--bg);
  margin: 0;
  color: #fff;
  display: inline-block; /* টাইটেল অনুযায়ী অ্যানিমেশন সীমাবদ্ধ রাখার জন্য */
  padding: 10px 20px;
}

.subtitle {
  color: #888;
  font-size: 1.1rem;
  margin-top: 10px;
  letter-spacing: 1px;
}

.aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: darken; /* এটি লেখার ভেতরে কালার দেখাবে */
  pointer-events: none;
}

.aurora__item {
  overflow: hidden;
  position: absolute;
  width: 30vw; /* সাইজ কিছুটা ছোট করা হয়েছে যাতে টেক্সটের ভেতরে সুন্দর লাগে */
  height: 30vw;
  background-color: var(--clr-1);
  border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  filter: blur(var(--blur));
  mix-blend-mode: overlay;
}

/* --- Animations (আগের মতোই থাকবে) --- */
.aurora__item:nth-of-type(1) {
  top: -50%;
  animation: aurora-border 6s ease-in-out infinite, aurora-1 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(2) {
  background-color: var(--clr-3);
  right: 0;
  top: 0;
  animation: aurora-border 6s ease-in-out infinite, aurora-2 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(3) {
  background-color: var(--clr-2);
  left: 0;
  bottom: 0;
  animation: aurora-border 6s ease-in-out infinite, aurora-3 8s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(4) {
  background-color: var(--clr-4);
  right: 0;
  bottom: -50%;
  animation: aurora-border 6s ease-in-out infinite, aurora-4 24s ease-in-out infinite alternate;
}

/* Keyframes গুলো আপনার দেওয়া কোড থেকে হুবহু একই থাকবে */
@keyframes aurora-1 { 0% { top: 0; right: 0; } 50% { top: 100%; right: 75%; } 75% { top: 100%; right: 25%; } 100% { top: 0; right: 0; } }
@keyframes aurora-2 { 0% { top: -50%; left: 0%; } 60% { top: 100%; left: 75%; } 85% { top: 100%; left: 25%; } 100% { top: -50%; left: 0%; } }
@keyframes aurora-3 { 0% { bottom: 0; left: 0; } 40% { bottom: 100%; left: 75%; } 65% { bottom: 40%; left: 50%; } 100% { bottom: 0; left: 0; } }
@keyframes aurora-4 { 0% { bottom: -50%; right: 0; } 50% { bottom: 0%; right: 40%; } 90% { bottom: 50%; right: 25%; } 100% { bottom: -50%; right: 0; } }
@keyframes aurora-border { 0%, 100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; } 25% { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; } 50% { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; } 75% { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; } }