* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

/* Helper for mobile break */
.mobile-break {
  display: none;
}

@media screen and (max-width: 480px) {
  .mobile-break {
    display: block;
  }
}

/* =======================================================
   BRANDED HEADER SECTION (Global Fix)
   ======================================================= */
.branded-header-section {
  display: flex !important;
  width: 100% !important;
  background: #000 !important;
  color: #fff !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 60px !important;
  box-sizing: border-box !important;
  height: 150px !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  gap: 20px !important;
}

.branded-header-section h1 {
  font-family: "Outfit", sans-serif !important;
  font-size: 70px !important;
  letter-spacing: 2px !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.branded-header-section .icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.branded-header-section .icon img {
  width: 90px !important;
  height: 90px !important;
  display: block !important;
  animation: spin 6s linear infinite;
}

/* RESPONSIVE: TABLET & MOBILE */
@media screen and (max-width: 1024px) {
  .branded-header-section {
    height: auto !important;
    min-height: 120px !important;
    padding: 20px !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    /* Allow wrapping if needed */
  }

  .branded-header-section h1 {
    font-size: 32px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    word-break: normal !important;
  }

  .branded-header-section .icon img {
    width: 40px !important;
    height: 40px !important;
  }
}

/* RESPONSIVE: MOBILE SMALL */
@media screen and (max-width: 480px) {
  .branded-header-section {
    padding: 20px 10px !important;
    gap: 10px !important;
  }

  .branded-header-section h1 {
    font-size: 22px !important;
    /* Much smaller to fit */
    white-space: normal !important;
  }

  .branded-header-section .icon img {
    width: 30px !important;
    height: 30px !important;
  }
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  background: #fff;
  position: relative;
}

/* MAIN CONTAINER */
.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 150px 150px 250px 150px;
  margin-right: 30px;
  min-height: 100vh;
  margin-top: 40px;
  margin-bottom: 50px;
}

/* LEFT TEXT */
.content {
  max-width: 520px;

}

.content h1 {
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 10px;
}

.content h2 {
  font-size: 53px;
  font-weight: 800;
  margin-bottom: 20px;
  /* font-family: "Outfit", sans-serif; */
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.content p {
  font-size: 18px;
  line-height: 1.6;
  color: #5b5b5b;
  margin-bottom: 30px;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.content p b {
  font-weight: 600;
  color: #000;
}

.content p b1 {
  font-weight: 400;
  color: #000;
}

/* BUTTONS */
.hero-buttons {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}

.btn {
  padding: 10px 24px;
  font-size: 15px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  border-radius: 0;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: #000;
  color: #fff;
  border: 0px solid #000;
}

.btn-primary:hover {
  background: #333;
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: #000;
  border: 1px solid #000;
}

.btn-secondary:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}

/* RIGHT SIDE */
.showcase {
  position: relative;
  width: 360px;
  margin-top: 110px;
}

.card {
  width: 100%;
  border-radius: 0px;

  position: absolute;
}

.card.top {
  top: -110px;
  right: 330px;
  width: 180px;
}

.card.middle {
  top: -110px;
  right: -28px;
  width: 340px;
  z-index: 2;
}

.card.bottom {
  top: 250px;
  right: -27px;
  width: 180px;
}

/* ROTATING ICON */
.rotate-icon {
  position: absolute;
  top: -118px;
  left: -80px;
  width: 160px;
  animation: spin 6s linear infinite;
}

.rotate-icon-1 {
  position: absolute;
  top: 500px;
  left: 700px;
  width: 60px;
  animation: spin 6s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* HAMBURGER */
.hamburger {
  display: block;
  position: absolute;
  top: 35px;
  right: 40px;
  width: 26px;
  cursor: pointer;
  z-index: 1000;
}

.hamburger span {
  display: block;
  height: 3px;
  background: #000;
  margin: 5px 0;
}

/* MOBILE */
@media (max-width: 768px) {
  .hamburger {
    display: block;
    right: auto;
    left: 20px;
  }

  .container {
    flex-direction: column;
    padding: 80px 20px;
    margin-top: 50px;
    margin-left: 0;
    margin-right: 0;
  }

  .content {
    max-width: 100%;
    padding: 0 10px;
  }

  .content h1 {
    font-size: 30px !important;
    margin-bottom: 5px !important;
    margin-top: 100px;
  }

  .content h2 {
    font-size: 35px !important;
    line-height: 1.2 !important;
  }

  .showcase {
    display: none;
  }
}

/* Wrapper */
.toc-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 200px 40px;
  /* Increased height slightly (150px -> 200px) */
  background-color: #000;
  background-image: radial-gradient(#333 1px, transparent 1px);
  background-size: 30px 30px;
  color: #fff;
  /* Removed box-shadow hack that caused horizontal scroll */
  /* box-shadow: 0 0 0 100vmax #000; */
  /* clip-path: inset(0 -100vmax); */
  line-height: 1.4;
}

/* Title */
/* Title */
.toc-title {
  text-align: center;
  font-size: 42px;
  letter-spacing: 1px;
  margin: 0 auto 120px auto;
}


/* Grid layout */
/* Grid layout */
.toc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 80px;
  margin-left: 8%;
  margin-right: -5%;
  list-style: none;
  padding: 0;
}

.toc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 25px;
}

/* Bullet image */
.toc-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  animation: spin 6s linear infinite;
}

/* Responsive */
@media (max-width: 900px) {
  .toc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 50px;
  }
}

@media (max-width: 600px) {
  .toc-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .toc-title {
    font-size: 26px;
    margin-bottom: 50px;
  }

  .toc-item {
    font-size: 18px;
    gap: 12px;
  }

  .toc-item img {
    width: 15px;
    height: 15px;
  }
}




/* SECTION */
.about {
  max-width: 1200px;
  margin: auto;
  padding: 80px 40px;
}

.about .title {
  text-align: center;
  font-size: 55px;
  letter-spacing: 1px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
}

.about .subtitle {
  text-align: center;
  color: #434343;
  margin-top: 10px;
  margin-bottom: 60px;
  font-size: 20px;
  font-family: "Inter", sans-serif;
  font-weight: 200;
  line-height: 1.6;
}

.about .subtitle b {
  font-weight: 300;
  color: #000;
}

/* GRID */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}

/* SOFTWARE SKILLS */
.software-box {
  background: #000;
  padding: 40px;
}

.software-box h2 {
  color: #fff;
  margin-bottom: 40px;
}

.software-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 20px;
}

/* This becomes the white circle */
.icon-box {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;

  /* These lines center the image inside the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  /* Centers the circle itself */
}

/* This is the actual image inside */
.software-item img {
  width: 40px;
  /* Make this smaller than 70px so it fits */
  height: 40px;
  object-fit: contain;

  /* Remove the old styles that caused the issue */
  border-radius: 0;
  padding: 0;
  background: none;
}

.software-item p {
  color: #ffffff;
  /* Sets text to white */
  font-size: 14px;
  margin-top: 10px;
  /* Adds space between circle and text */
}

.software-item {
  /* This setup stacks the icon and text vertically and centers them */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Ensures text is centered even if it wraps to two lines */
  text-align: center;
  width: 100%;
}

/* RIGHT COLUMN */
.right-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* SKILLS BOX */
.skills-box {
  background: #f3f3f3;
  padding: 30px;
}

.skills-box h2 {
  margin-bottom: 20px;
}

.skills-box ul {
  list-style: none;
}

.skills-box li {
  font-size: 18px;
  margin-bottom: 10px;
  font-family: "outfit" "sans-serif";
  font-weight: 400;
}

.skills-box .muted {
  color: #aaa;
}

/* EXPERIENCE BOX */
.experience-box {
  border: 1px solid #000;
  padding: 30px;
}

.experience-box h2 {
  margin-bottom: 40px;
}

.job {
  margin-bottom: 30px;
}

.role {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 6px 14px;
  font-size: 14px;
  margin-bottom: 12px;

  font-family: "outfit" "sans-serif";
  font-weight: 500;
}

.job p {
  color: #777;
  font-size: 14px;
  font-family: "outfit" "sans-serif";
  font-weight: 300;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .job .sep {
    display: none;

  }

  .job .date {
    display: block;
    margin-top: 5px;
    font-size: 13px;
  }
}






/* ============================================
   BANNER SECTION - Section Dividers
   ============================================ */

.section-divider {
  background: #000;
  color: #fff;
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 60px;
}

.section-divider h1 {
  font-size: 70px;
  letter-spacing: 2px;
  white-space: nowrap;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #fff;
}

.section-divider .icon {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-divider .icon img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  animation: spin 6s linear infinite;
}

/* MOBILE & TABLET: Make banners responsive */
@media screen and (max-width: 1024px) {
  .section-divider {
    height: auto;
    min-height: 100px;
    padding: 20px;
    gap: 15px;
  }

  .section-divider h1 {
    font-size: 28px;
    letter-spacing: 1px;
    white-space: normal;
    text-align: center;
    word-wrap: break-word;
  }

  .section-divider .icon img {
    width: 40px;
    height: 40px;
  }
}

/* SMALL MOBILE: Further reduce sizes */
@media screen and (max-width: 480px) {
  .section-divider {
    padding: 16px;
    gap: 12px;
  }

  .section-divider h1 {
    font-size: 22px;
  }

  .section-divider .icon img {
    width: 32px;
    height: 32px;
  }
}








/* SECTION */
.portfolio {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
}

.ahara-portfolio {
  margin-top: -50px;
}

/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  align-items: center;
}

.header h1 {
  font-size: 48px;
  margin-bottom: 20px;
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.header p {
  color: #959595;
  max-width: auto;
  font-size: 20px;
  font-family: "Outfit", sans-serif;
  font-weight: 200;
  font-style: normal;

}

.portfolio .btn {
  background: #000;
  color: #fff;
  padding: 14px 22px;
  border: none;
  cursor: pointer;
  height: 60px;
  width: 200px;

}

/* Main Wrapper */
.layout-container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* White space between rows */
}

/* --- TOP SECTION (50% Left / 50% Right) --- */
.top-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  align-items: stretch;
  /* Ensure both columns are equal height */
}

/* Force the large Box to be a perfect square - this sets the row height */
.top-section>.box {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
}

/* Right side 2x2 Grid */
.quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  width: 100%;
  height: 100%;
  /* Fill the height established by the large box */
}

/* Small boxes inside the 2x2 grid */
.quad-grid .box {
  width: 100%;
  height: 100%;
  /* No aspect-ratio needed here; they just fill the grid cells */
}

/* --- BOTTOM SECTION (3 Columns) --- */
.bottom-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.bottom-section .box {
  aspect-ratio: 1 / 1;
}

/* --- BOX / IMAGE STYLING --- */
.box {
  background-color: #e0e0e0;
  width: 100%;
  height: 100%;
  /* Force fill the aspect-ratio parent */
  overflow: hidden;
  position: relative;
  min-height: 10px;
  /* Safety */
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .top-section {
    grid-template-columns: 1fr;
    /* Stack vertically */
  }

  /* On mobile, large box maintains squareness */
  .top-section>.box {
    aspect-ratio: 1 / 1;
  }

  /* Quad grid must now define its own height/ratio since it has no neighbor */
  .quad-grid {
    aspect-ratio: 1 / 1;
  }

  .bottom-section {
    grid-template-columns: 1fr;
    /* 1 Column */
  }
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .header {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .header div {
    width: 100%;
  }

  .header h1 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 15px;
  }

  .header p {
    font-size: 16px;
    max-width: 100%;
    width: 100%;
    line-height: 1.5;
    white-space: normal;
  }

  .portfolio .btn {
    width: 100%;
    margin-top: 10px;
  }


}







/* SECTION Suggesto */
.portfolio-suggesto {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
}

/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  align-items: center;
}

.header h1 {
  font-size: 90px;
  margin-bottom: 20px;
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.header p {
  color: #959595;
  max-width: auto;
  font-size: 25px;
  font-family: "Outfit", sans-serif;
  font-weight: 200;
  font-style: normal;

}

.portfolio-suggesto .btn {
  background: #000;
  color: #fff;
  padding: 14px 22px;
  border: none;
  cursor: pointer;
  height: 60px;
  width: 200px;

}

/* Main Wrapper */
.layout-container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* White space between rows */
}

/* --- TOP SECTION (50% Left / 50% Right) --- */
.top-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Right side 2x2 Grid */
.quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

/* --- BOTTOM SECTION (3 Columns) --- */
.bottom-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* --- BOX / IMAGE STYLING --- */
.box {
  background-color: #ddd;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* No border-radius applied here */
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures image fills the square exactly */
  display: block;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .top-section {
    grid-template-columns: 1fr;
  }

  .bottom-section {
    grid-template-columns: 1fr;
  }
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .header {
    flex-direction: column;
    gap: 20px;
  }


}






/* Main Section */
.brand-works-section {
  padding: 10px 0;
  /* Reduced top/bottom padding */
  display: flex;
  flex-direction: column;
  gap: 60px;
  /* Reduces the gap between Title and Images to 30px */
  margin-bottom: 100px;
}

/* Header Text Container */
.header-container {
  max-width: 1400px;
  width: 90%;
  margin: 0 auto;
  margin-left: 173px;
  /* Ensure text stacks vertically */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-works-section h2 {
  font-size: 90px;
  /* Larger Title */
  font-weight: 600;
  color: #000;
  margin-bottom: 5px;
  /* Minimal gap between Title and Subtitle */
  line-height: 1.2;
  font-family: "outfit";
  font-weight: 400;

}

.brand-works-section .subtitle {
  font-size: 25px;
  color: #777;
  font-weight: 300;
  max-width: auto;
  font-family: "outfit";
  font-weight: 200;

}

/* Slider Container */
.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 10px;
  /* Slight buffer */
}

/* Track Calculations for Larger Images */
.slide-track {
  display: flex;
  /* MATH:
       Image Width: 400px
       Margin Left: 20px
       Margin Right: 20px
       Total Width per Slide: 440px
       
       Total Slides (Original + Duplicate): 40
       Track Width = 440px * 40 = 17600px
    */
  width: calc(440px * 40);
  animation: scroll 60s linear infinite;
}

/* Pause the scrolling animation when the mouse enters the slider area */
.slider:hover .slide-track {
  animation-play-state: paused;
}

/* Individual Slide */
.slide {
  width: 400px;
  /* INCREASED SIZE */
  height: 400px;
  /* INCREASED SIZE */
  margin: 0 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* SHARP EDGES ONLY */
  border-radius: 0 !important;

  /* Optional: faint border if images are white */
  border: 1px solid #f0f0f0;
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    /* Translate exactly half the track width (20 slides) */
    /* 440px * 20 = 8800px */
    transform: translateX(calc(-440px * 20));
  }
}

/* Responsive adjustments for Mobile */
@media (max-width: 768px) {
  .header-container {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 20px;
    align-items: center;
    text-align: center;
  }

  .brand-works-section h2 {
    font-size: 2.2rem;
    text-align: center;
    width: 100%;
  }

  .brand-works-section .subtitle {
    font-size: 16px;
    /* Reduce subtitle size */
    max-width: 100%;
    /* Ensure it wraps */
    text-align: center;
    line-height: 1.5;
  }

  /* Smaller images on mobile to fit screen better */
  .slide {
    width: 280px;
    height: 280px;
  }

  /* Recalculate for mobile size (280 + 40 margin = 320px) */
  .slide-track {
    width: calc(320px * 40);
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-320px * 20));
    }
  }
}















/* --- TABS --- */
.tabs-container {
  display: flex;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 20px;
  background-color: #fff;
}

.tab {
  padding: 15px 40px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  outline: none;
  min-width: 180px;
  transition: 0.3s;
}

.tab.active {
  background-color: #000;
  color: #fff;
}

.tab.inactive {
  background-color: #f4f4f4;
  color: #000;
}

.tab.inactive:hover {
  background-color: #e0e0e0;
}

/* --- CONTROLS (BUTTONS) --- */
.controls-container {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 50px;
  padding-right: 5%;
}

.nav-btn {
  background-color: #000;
  /* Black background circle */
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
  font-size: 18px;
  /* Controls size of the arrow icon */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  margin-top: -65px;
}

/* --- ADDED THIS RULE: Ensures the arrow icon inside is white --- */
.nav-btn i {
  color: #ffffff;
}

.nav-btn:hover {
  background-color: #333;
}

/* --- CAROUSEL --- */
.carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 40px;
  padding: 20px 20vw;
  width: 100%;
  scrollbar-width: none;
  margin-bottom: 150px;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

.hidden-section {
  display: none;
}

.active-section {
  display: flex;
}

/* --- VIDEO CARDS --- */
.video-card {
  flex: 0 0 60vw;
  scroll-snap-align: center;
  transition: transform 0.3s;
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  box-shadow: none;
  border-radius: 8px;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}














/* --- 1. RESET & BASE --- */
/* * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
body {
    background-color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding-top: 40px;
    overflow-x: hidden;
} */




/* --- 2. HEADER CONTROLS (Fix Alignment) --- */
.controls-header {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centers the items horizontally */
  gap: 300px;
  /* Spacing between tabs and arrows */
  margin-bottom: 40px;
  z-index: 100;
  margin-right: 20px;

  /* Centering Layout */
  width: 100%;
  max-width: 1200px;
  /* Matches your carousel width */
  margin: 0 auto 40px auto;
  /* Centers the container block */
  margin-left: 380px;


}



/* Tabs Group */
.tabs-group {
  display: flex;
  background: #f4f4f4;
  padding: 4px;

  margin-right: 0;
}

.tab {
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0px;
  transition: all 0.3s ease;
  color: #666;

  display: flex;
  align-items: center;
  justify-content: center;
}

.tab.active {
  background-color: #000;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 0%;
}

/* Arrows Group */
.arrows-group {
  display: flex;
  gap: 10px;
}

.arrow-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f4f4f4;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
}

.arrow-btn:hover {
  background: #e0e0e0;
  transform: scale(1.1);
  color: #000;
}

.arrow-btn:active {
  transform: scale(0.95);
}

.arrow-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* --- 3. CAROUSEL STAGE (Fix Centering) --- */
.carousel-stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 650px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  transition: opacity 0.4s ease;

  /* REMOVED margin-right: ; */
  margin: 0 auto;
  /* This forces the container to center on the page */
  overflow: hidden;
  /* Prevents scrollbars if cards fly out too far */
  margin-bottom: 120px;
}

/* --- 4. SMOOTH MANGO (formerly CARD) STYLES --- */
.mango {
  position: absolute;
  width: 320px;
  height: 600px;
  border-radius: 35px;
  /* CRITICAL: The transition property controls the smoothness */
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.8s ease;
  box-shadow: none;
  background: #fff;
  will-change: transform, opacity;
}

/* --- POSITIONS --- */

/* HIDDEN (Default state for all) */
.mango[data-pos] {
  z-index: 0;
  transform: translateX(0) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* CENTER */
.mango[data-pos="0"] {
  z-index: 10;
  transform: translateX(0) scale(1);
  opacity: 1;
  filter: blur(0);
  cursor: default;
}

/* RIGHT */
.mango[data-pos="1"] {
  z-index: 5;
  transform: translateX(360px) scale(0.85);
  opacity: 0.5;
  filter: blur(4px);
  cursor: pointer;
}

/* LEFT */
.mango[data-pos="-1"] {
  z-index: 5;
  transform: translateX(-360px) scale(0.85);
  opacity: 0.5;
  filter: blur(4px);
  cursor: pointer;
}

.mango[data-pos="0"],
.mango[data-pos="1"],
.mango[data-pos="-1"] {
  pointer-events: auto;
  /* Reset */
}

/* Hover Effects */
.mango[data-pos="1"]:hover,
.mango[data-pos="-1"]:hover {
  opacity: 0.8;
  filter: blur(2px);
}

.mango[data-pos="1"]:hover {
  transform: translateX(340px) scale(0.88);
}

.mango[data-pos="-1"]:hover {
  transform: translateX(-340px) scale(0.88);
}


/* --- 5. PHONE UI --- */
.phone-wrapper {
  width: 100%;
  height: 100%;
  background: #111;
  padding: 12px;
  border-radius: 35px;
  position: relative;
}

.phone-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 26px;
  background: #111;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  z-index: 20;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: #222;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
}

/* --- UI OVERLAY --- */
.overlay-ui {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  color: white;
  transition: opacity 0.3s;
}

.tag {
  color: #ff6b35;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* --- VIDEO PLAYER --- */
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  background: #000;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  z-index: 30;
  transition: transform 0.3s ease, background 0.3s;
}

.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.15);
  background: rgba(255, 255, 255, 0.3);
}

.play-btn::after {
  content: '';
  border-left: 18px solid white;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 6px;
}

.close-video {
  position: absolute;
  top: 40px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  z-index: 50;
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
}


















/* Scoped Reset for this section only */
.caro-main-wrapper * {
  box-sizing: border-box;
  /* Fixed typo from border_box */
}

/* Main Container */
.caro-main-wrapper {
  font-family: "outfit";
  font-weight: 900;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  /* Centers the container */
  padding: 50px 20px;
  background-color: #ffffff;
  color: #333;
}

/* Project Row Styling */
.caro-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 100px;
  gap: 50px;

}

/* The 'reverse' logic */
.caro-item-row.caro-is-reversed {
  flex-direction: row-reverse;
  /* text-align: right;  */
}

.caro-item-row.caro-is-reversed .caro-text-part {
  align-items: flex-start;
}

/* Text Column */
.caro-text-part {
  flex: 1;
  max-width: 600px;
  display: flex;
  flex-direction: column;


}

.caro-text-part h2 {
  font-size: 80PX;
  font-weight: 400;
  margin-bottom: 15px;
  margin-top: 0;
  color: #000;
  font-family: "Outfit";

}


.caro-text-part p {
  font-size: 1.3rem;
  color: #888;
  line-height: 1.6;
  font-weight: 300;
  margin: 0;
  font-family: "Outfit";
  font-weight: 200;
  width: 100%;
}

/* Image Column */
.caro-img-part {
  flex: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.caro-img-part img {
  width: 113%;
  height: auto;
  object-fit: contain;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .caro-main-wrapper {
    padding: 20px;
  }

  .caro-item-row,
  .caro-item-row.caro-is-reversed {
    flex-direction: column;
    text-align: left;
    margin-bottom: 60px;
    gap: 30px;
  }

  .caro-item-row.caro-is-reversed .caro-text-part {
    align-items: flex-start;
  }

  .caro-text-part h2 {
    font-size: 4.5rem;
  }

  .caro-text-part {
    max-width: 100%;
  }

  .caro-text-part p {
    max-width: 80%;
  }

  /* Specific width for Signzy */
  .signzy-text p {
    max-width: 90%;
  }
}








/* --- Desktop Layout (Default) --- */
.brochure-display-container2 {
  display: flex;
  justify-content: space-between;
  /* Spreads the 3 images evenly */
  align-items: flex-start;
  gap: 20px;
  /* Space between images */
  width: 100%;
  max-width: 1200px;
  /* Optional: Stops it from getting too wide on huge screens */
  margin: 0 auto;
  /* Centers the container */
  box-sizing: border-box;
}

/* The New Class Name */
.brochure-img {
  width: 32%;
  /* Allows 3 images to fit in one row */
  height: auto;
  /* Maintains aspect ratio */
  border-radius: 8px;
  /* Optional: Rounded corners */
  display: block;
}

/* --- Mobile / Tablet Layout (Responsive) --- */
/* Applies when screen width is 768px or smaller */
/* Applies when screen width is 768px or smaller */
@media (max-width: 900px) {
  .brochure-display-container2 {
    flex-direction: column;
    /* Stacks images vertically */
    align-items: center;
    /* Centers images */
    width: 100% !important;
    padding: 0 20px !important;
    gap: 30px !important;
  }

  .brochure-img {
    width: 100% !important;
    /* Image takes full width of the screen */
    max-width: 500px !important;
    /* Optional: Prevents image from getting too huge on tablets */
    margin-bottom: 20px;
    height: auto !important;
    /* Adds space under each image in the stack */
  }
}




/* --- CONTAINER (Keeps them in a row) --- */
.brochure-display-container1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  margin: 0 auto;
  margin-top: -150px;
  padding: 0 20px;
  gap: 20px;
  box-sizing: border-box;
  transform: scale(1.1)
}

/* --- COMMON STYLES (Applies to all) --- */
.brochure-single-image {
  /* Default size for all */
  width: 467px;
  height: 351px;
  display: block;
  box-shadow: none;
  border: none;

  /* PREVENT SQUASHING */
  flex-shrink: 0;
}

/* --- INDIVIDUAL CONTROL --- */

/* IMAGE 1: The Portrait (Folded) Brochure */
.brochure-single-image:nth-child(1) {
  /* OPTION A: Zoom it in to fill the box (Crops top/bottom) */
  object-fit: contain;
  object-position: center top;
  /* Focus on the top part */
  width: 100%;


  /* OPTION B: If you want this one specifically narrower/taller, change here: */
  width: 450px;
  height: 400px;
  margin-top: 200px;
}

/* IMAGE 2: The Middle Spread */
.brochure-single-image:nth-child(2) {
  object-fit: contain;
  /* Shows full image without cropping */
  width: 300px;
  height: 400px;
}

/* IMAGE 3: The Right Spread */
.brochure-single-image:nth-child(3) {
  object-fit: contain;
  /* Shows full image without cropping */
  width: 300px;
  height: 400px;
}


/* --- MOBILE RESPONSIVE --- */
/* =========================================
   BRAND BROCHURES - MOBILE OPTIMIZATION
   ========================================= */
@media screen and (max-width: 900px) {

  /* 1. TECHADES (Brochure Container 1) */
  .brochure-display-container1 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    /* Reset justify-content */
    width: 100% !important;
    height: auto !important;
    margin-top: 80px !important;
    padding: 0 20px !important;
    gap: 30px !important;
    transform: none !important;
    align-items: center !important;
    overflow: visible !important;
  }

  /* Reset all child images for Techades */
  .brochure-single-image,
  .brochure-single-image:nth-child(1),
  .brochure-single-image:nth-child(2),
  .brochure-single-image:nth-child(3) {
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    margin-top: 0 !important;
    object-fit: contain !important;
  }
}






















/* Main Container */
.chure-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2 equal columns */
  gap: 40px;
  max-width: 1450px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Helper to center images in their cells */
.chure-item-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- NEW CODE START --- */

/* This forces the wrapper to span from line 1 to the end (-1) */
.chure-span-full {
  grid-column: 1 / -1;
  width: 100%;
}

/* Specific style for the top image to ensure it fills the wide space */
.chure-full-img {
  width: 100%;
  height: auto;
  max-height: 600px;
  /* Optional: limits height so it's not too tall */
  object-fit: cover;
}

/* --- NEW CODE END --- */


/* General Image Reset */
.chure-img {
  display: block;
  object-fit: cover;
  max-width: 100%;
  height: auto;
}

/* EXISTING 700px style for the bottom two images */
.chure-landscape-700 {
  width: 700px;
  aspect-ratio: 700 / 500;
}


/* RESPONSIVE BREAKPOINTS */

@media (max-width: 1500px) {
  .chure-landscape-700 {
    width: 100%;
    height: auto;
  }
}

/* 3. AHARA (Chure Grid) - Unified Mobile Fix */
@media (max-width: 900px) {
  .chure-grid-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 0 20px !important;
    margin: 40px auto !important;
  }

  .chure-item-wrapper,
  .chure-span-full {
    width: 100% !important;
    display: block !important;
    grid-column: auto !important;
    /* Reset grid column span */
  }

  .chure-img,
  .chure-landscape-700,
  .chure-full-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}













/* Container (Kept mostly the same, adjusted gap slightly for balance) */
.logo-portfolio-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
  /* Adjusted gap to fit text better, originally 150px */
  max-width: 1400px;
  margin: 200px auto;
  align-items: start;
  padding: 0 20px;
  /* Added padding for smaller screens */
  margin-top: 100px;
}

/* Updated Column: Uses Flexbox to stack Text -> Button -> Image */
.logo-portfolio-column {
  display: flex;
  flex-direction: column;
  /* Stacks items vertically */
  justify-content: flex-start;
  align-items: center;
  /* Centers content horizontally */
  text-align: center;
  /* Centers text alignment */
}

/* Wrapper for the text and button */
.portfolio-content {
  margin-bottom: 40px;
  /* Space between the button and the image below it */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Heading Style */
.portfolio-title {
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #000;
  font-family: "outfit";
  /* Replace with your specific font */
  font-weight: 500;
}

/* Subheading Style */
.portfolio-subtitle {
  font-size: 18px;
  color: #666;
  /* Grey color for subtitle */
  margin-top: 0;
  margin-bottom: 24px;
  font-family: "outfit";
  font-weight: 200;
}

/* Button Style (Based on your reference image) */
.case-study-btn {
  background-color: #000;
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  transition: background-color 0.3s ease;
  font-family: sans-serif;
}

.case-study-btn:hover {
  background-color: #333;
  /* Dark grey on hover */
}

/* Image styling */
.logo-portfolio-column img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 350px;
  /* Optional: Prevents logos from getting too huge */
}

/* Responsive for Mobile */
@media (max-width: 768px) {
  .logo-portfolio-container {
    grid-template-columns: 1fr;
    gap: 80px;
    /* Space between rows on mobile */
    margin-top: 100px;
    margin-bottom: 100px;
  }
}















:root {
  --flyer-bottom-left-width: 110%;
  --flyer-bottom-right-width: 55%;
}


/* Grid */
.flyer-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 60px;
  max-width: 1000px;
  width: 100%;

  /* ADD THIS LINE BELOW */
  margin-top: 60px;
  margin-bottom: 60px;
  margin-left: 210px;
  /* Controls the left gap. Reduce to 20px or 0px if needed */
  margin-right: auto;

}

/* Items */
.flyer-item {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Alignments */
.flyer-align-left {
  justify-content: flex-start;
}

.flyer-align-right {
  justify-content: flex-end;
}

/* Grid positions */
.flyer-item-1 {
  grid-column: 1;
  grid-row: 1;
}

.flyer-item-2 {
  grid-column: 2;
  grid-row: 1;
}

.flyer-item-3 {
  grid-column: 1;
  grid-row: 2;
}

.flyer-item-4 {
  grid-column: 2;
  grid-row: 2;
}

/* Images */
.flyer-item img {
  display: block;
  height: auto;
  max-width: none;
}

/* Top row sizing */
.flyer-full-width {
  width: 100%;
}

.flyer-match-square-height {
  width: 70.7%;
}

/* Bottom images */
.flyer-bottom-left {
  width: var(--flyer-bottom-left-width);
  transform: translateX(6%);
  /* <-- 3rd image moved slightly right */
}

.flyer-bottom-right {
  width: var(--flyer-bottom-right-width);
  object-fit: contain;
}

/* Fine tune third image position */
.flyer-item-3 {
  justify-content: flex-start;
}

.flyer-item-3 img {
  transform: translateX(25%);
}


/* Force bottom-right to corner */
.flyer-item-4 {
  justify-content: flex-end;
}

/* Mobile */
@media(max-width: 900px) {
  .flyer-gallery-grid {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto !important;
    /* Reset margin-left: 210px */
    padding: 0 20px !important;
    gap: 40px !important;
  }

  /* Reset Grid Item Positions */
  .flyer-item,
  .flyer-item-1,
  .flyer-item-2,
  .flyer-item-3,
  .flyer-item-4 {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Reset Image Styles */
  .flyer-item img,
  .flyer-full-width,
  .flyer-match-square-height,
  .flyer-bottom-left,
  .flyer-bottom-right {
    width: 100% !important;
    max-width: 500px !important;
    /* Prevent huge images */
    height: auto !important;
    transform: none !important;
    /* Remove translateX */
    object-fit: contain !important;
  }
}











/* Main Container to hold Tablet and Grid side-by-side */
.ebook-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1400px;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  margin-bottom: 100px;
}

/* --- LEFT SIDE: TABLET STYLING --- */
.ebook-tablet-wrapper {
  flex: 0 0 auto;
  width: 38%;
  min-width: 300px;
  display: flex;
  justify-content: flex-end;
}

.ebook-tablet-device {
  padding: 12px;
  border-radius: 24px;
  position: relative;
  line-height: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.ebook-tablet-device img {
  width: 80%;
  height: auto;
  border-radius: 16px;
  display: block;
}

/* --- RIGHT SIDE: GRID LAYOUT --- */
.ebook-grid-wrapper {
  flex: 1;
  display: grid;
  /* Exactly 4 columns */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}

/* Common styling for the small page images */
.ebook-grid-item img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: none;
  transition: transform 0.3s ease;
}

/* Optional: Hover effect */
.ebook-grid-item img:hover {
  transform: translateY(-5px);
}

/* --- TEXT CONTENT --- */
.ebook-text-content {
  grid-column: span 2;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.ebook-text-content h1 {
  font-size: 4rem;
  color: #000;
  margin-bottom: 15px;

  letter-spacing: -1px;
  font-family: "outfit";
  font-weight: 500;
}

.ebook-text-content p {
  color: #898989;
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 5px;
  line-height: 1.6;
  font-weight: 300;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 1024px) {
  .ebook-container {
    flex-direction: column;
    align-items: center;
    /* Center align items */
  }

  .ebook-tablet-wrapper {
    width: 60%;
    margin-bottom: 30px;
    justify-content: center;
    /* Center the tablet image */
  }

  .ebook-tablet-device {
    justify-content: center;
  }
}

/* Mobile Fixes for Ebooks - ROBUST GRID FIX */
@media (max-width: 900px) {
  .ebook-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    margin-top: 40px !important;
    margin-bottom: 60px !important;
    gap: 30px !important;
    padding: 0 20px !important;
    height: auto !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  /* 1. TABLET IMAGE WRAPPER (Big Image) -> Order 2 */
  .ebook-tablet-wrapper {
    order: 2 !important;
    width: 100% !important;
    min-width: unset !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .ebook-tablet-device {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .ebook-tablet-device img {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto;
    object-fit: contain !important;
  }

  /* 2. GRID WRAPPER - USE DISPLAY CONTENTS TO UNWRAP */
  .ebook-grid-wrapper {
    display: contents !important;
  }

  /* 3. GRID ITEMS (Small Images) -> Order 3 */
  .ebook-grid-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 45% !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 3 !important;
  }

  .ebook-grid-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* 4. TEXT CONTENT -> Order 1 */
  .ebook-text-content {
    order: 1 !important;
    width: 100% !important;
    padding-left: 0 !important;
    text-align: left !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .ebook-text-content h1 {
    font-size: 80px !important;
    /* Increased from 70px */
    margin-bottom: 20px !important;
    line-height: 1.1 !important;
  }

  .ebook-text-content p {
    font-size: 15px !important;
    /* Reduced from 18px */
    line-height: 1.6 !important;
    max-width: 90% !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    color: #666 !important;
    text-align: left !important;
  }

  /* Hide the line break on mobile for natural flow */
  .ebook-text-content br {
    display: none !important;
  }
}



.ebook-description {
  margin-top: 16px;
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 100%;
}

/* =========================================
   UI GALLERY LAYOUT
   ========================================= */

.ui-section-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
  /* Ensure no external shadows/borders affect this unless scoped */
}

/* Masonry Flex Container */
.ui-masonry-wrapper {
  display: flex;
  gap: 30px;
  width: 100%;
}

/* Individual Flex Column */
.ui-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Card Wrapper */
.ui-image-card {
  width: 100%;

  /* "No shadow No border effects" */
  box-shadow: none !important;
  border: none !important;
  outline: none;
  background: transparent;

  overflow: hidden;
  border-radius: 0;
}

/* Image */
.ui-image-card img {
  width: 100%;
  display: block;
  object-fit: cover;

  box-shadow: none;
  border: none;

  transition: transform 0.4s ease;
}

.ui-image-card:hover img {
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 900px) {
  .ui-masonry-wrapper {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .ui-masonry-wrapper {
    flex-direction: column;
  }
}













.print-main-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  margin-top: 100px;
}

/* --- HEADER --- */
.print-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.print-header .btn {
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  padding: 15px 40px;
  font-size: 16px;
}

.print-header .btn:hover {
  background-color: #333;
  color: #fff;
}

.print-header h1 {

  font-size: 4rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 10px;
  font-family: "outfit";
}

header p {
  color: #999;
  font-size: 1.3rem;
  font-weight: 300;
  font-family: "Inter";
  line-height: 1.6;

}

/* --- GRID LAYOUT --- */
.print-grid-wrapper {
  display: grid;
  /* 3 Columns: Left, Center, Right */
  grid-template-columns: 1fr 1.2fr 0.6fr;
  /* 2 Rows: Top banner area, and the rest */
  grid-template-rows: auto 1fr;
  gap: 24px;
  align-items: start;
}

/* General Image Styling */
/* General Image Styling */
.print-grid-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* --- GRID AREAS --- */

/* 1. Top Banner: Spans Left and Center columns */
.print-top-banner {
  grid-column: 1 / 3;
  grid-row: 1;
}

/* 2. Right Tall Banner: Starts at top, spans down */
.print-tall-banner {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  /* Spans across both main rows */
}

/* 3. Left Stack: Wrapper for left images */
.print-left-stack {
  grid-column: 1 / 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 4. Center Stack: Wrapper for center images */
.print-center-stack {
  grid-column: 2 / 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .print-grid-wrapper {
    display: flex;
    flex-direction: column;
  }

  /* Reset specific placements for mobile */
  .print-top-banner,
  .print-tall-banner,
  .print-left-stack,
  .print-center-stack {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  .print-grid-wrapper img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 20px;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
}

/* --- MODAL / POPUP --- */
.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: #fefefe;
  padding: 60px 40px;
  border: 1px solid #888;
  width: 90%;
  max-width: 600px;
  position: relative;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* animation: modalFadeIn 0.3s; -- REMOVED per user request */
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.close-modal {
  color: #aaa;
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#modal-title {
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #000;
  text-align: left;
}

#modal-text {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  text-align: left;
}

/* =========================================
   FOOTER STYLES (NEW FLOAT DESIGN)
   ========================================= */

.main-footer {
  background-color: #000;
  color: #fff;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 180px;
  /* Space for the float overlap */
  padding-bottom: 60px;
}

/* Ensure the section before footer has space */
.print-main-container {
  margin-bottom: 120px;
}

/* --- FLOAT WRAPPER --- */
.footer-float-wrapper {
  width: 90%;
  max-width: 950px;
  /* Specific width */
  margin-top: -140px;
  /* Pulls it up to overlap the previous section */
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  /* Deep shadow */
}

/* --- TOP CARD (Main CTA) --- */
.float-card-top {
  background-color: #333333;
  /* Dark Grey */
  padding: 90px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Watermark Envelopes */
.watermark-envelope {
  position: absolute;
  color: #3a3a3a;
  /* Very subtle lighter grey */
  font-size: 15rem;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
}

.envelope-left {
  left: -80px;
  bottom: -40px;
  transform: rotate(15deg);
}

.envelope-right {
  right: -80px;
  top: 10px;
  transform: rotate(-15deg);
}

.float-card-top h2 {
  font-family: "Outfit", sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  letter-spacing: -1px;
}

.float-card-top p {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  color: #999999;
  font-weight: 300;
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto 45px auto;
  position: relative;
  z-index: 2;
}

.float-card-top .hire-btn {
  background-color: #ffffff;
  color: #000000;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 20px 60px;
  border: none;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.float-card-top .hire-btn:hover {
  transform: translateY(-3px);
  background-color: #f0f0f0;
}

/* --- BOTTOM STRIP (Socials) --- */
.float-card-bottom {
  background-color: #262626;
  /* Darker stripe (#262626 or #1a1a1a) */
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
  /* Wide spacing */
}

.float-social-link {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 24px;
  transition: opacity 0.2s ease;
}

.float-social-link:hover {
  opacity: 0.8;
}

.float-social-link img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* --- FOOTER CONTENT (Bottom) --- */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
  width: 100%;
}

.footer-nav {
  display: flex;
  gap: 40px;
  margin-bottom: 25px;
}

.footer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  transition: color 0.2s;
}

.copyright-text {
  color: #666666;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 300;
}

/* --- RESPONSIVE RESET --- */
@media screen and (max-width: 900px) {
  .float-card-bottom {
    gap: 60px;
  }

  .float-card-top h2 {
    font-size: 42px;
  }
}

@media screen and (max-width: 768px) {
  .main-footer {
    margin-top: 120px;
    /* Reduced space but still creating room */
    background: #000;
    padding-bottom: 40px;
  }

  .footer-float-wrapper {
    margin-top: -80px;
    /* Pull up to overlaps */
    width: 90%;
    max-width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    /* Keep shadow for card effect */
  }

  .float-card-top {
    padding: 50px 20px;
  }

  .float-card-top h2 {
    font-size: 32px;
  }

  .float-card-top p {
    font-size: 15px;
  }

  .float-card-top .hire-btn {
    padding: 15px 40px;
    font-size: 14px;
  }

  .float-card-bottom {
    flex-direction: column;
    gap: 25px;
    padding: 30px 20px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .copyright-text {
    padding: 0 20px;
    text-align: center;
    line-height: 1.5;
    font-size: 13px;
  }

  /* Keep watermarks visible but contained */
  .watermark-envelope {
    font-size: 8rem;
    opacity: 0.15;
  }
}

/* =========================================
   FULL SCREEN MOBILE MENU
   ========================================= */

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

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

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: center;
}

.mobile-nav a {
  color: #fff;
  text-decoration: none;
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.mobile-nav a:hover {
  color: #888;
}

.close-menu {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #fff;
  font-size: 50px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}

.close-menu:hover {
  color: #aaa;
}

/* --- INTRO LOADER --- */
.intro-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: opacity 0.8s ease-out, visibility 0.8s step-end;
}

.intro-text {
  font-size: 50px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.intro-text .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  margin: 0 4px;
}

.intro-text .word:nth-child(1) {
  animation-delay: 0.2s;
}

.intro-text .word:nth-child(2) {
  animation-delay: 0.5s;
}

.intro-text .word:nth-child(3) {
  animation-delay: 0.8s;
}

.intro-sub {
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 1.6s;
  color: #888;
  text-align: center;
  padding: 0 20px;
}

.intro-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Global Play Button Update */
.play-btn {
  background-color: #000 !important;
}

/* =========================================================================
   COMPREHENSIVE RESPONSIVE MEDIA QUERIES
   ========================================================================= */

/* --- LARGE TABLET & SMALL LAPTOP (Max Width: 1200px) --- */
@media screen and (max-width: 1200px) {

  /* Reduce excessive margins on larger sections */
  .toc-wrapper {
    padding: 80px 30px;
  }

  .toc-grid {
    margin-left: 0;
    margin-right: 0;
  }

  /* Carousel Text Adjustments */
  .caro-text-part h2 {
    font-size: 60px;
  }

  .section-divider h1 {
    font-size: 60px;
  }
}

/* --- TABLET & SMALL LAPTOP (Max Width: 1024px) --- */
@media screen and (max-width: 1024px) {

  /* Global Container resets */
  .container {
    flex-direction: column;
    padding: 100px 40px;
    margin-top: 50px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    align-items: center;
  }

  .content {
    max-width: 100%;
  }

  /* Reset all the custom left margins that cause breaking */
  .header-container,
  .flyer-gallery-grid,
  .controls-header,
  .toc-grid,
  .brand-works-section .header-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding: 0 40px;
    max-width: 100%;
  }

  .controls-header {
    justify-content: center;
    gap: 50px;
  }

  /* Hide the 3D showcase cards on tablet to prevent overlap */
  .showcase {
    display: none;
  }

  /* Adjust grids to 2 columns */
  .toc-grid,
  .quad-grid,
  .bottom-section,
  .ebook-grid-wrapper,
  .logo-portfolio-container,
  .print-grid-wrapper,
  .chure-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px;
  }

  /* Fix Carousel / Slider areas */
  .caro-main-wrapper {
    padding: 40px 20px;
  }

  .caro-item-row {
    gap: 30px;
  }

  .caro-text-part h2 {
    font-size: 50px;
  }

  /* Ebook */
  .ebook-container {
    flex-direction: column;
    gap: 40px;
  }

  .ebook-tablet-wrapper {
    width: 80%;
    justify-content: center;
  }

  /* Typography Scaling */
  .section-divider h1 {
    font-size: 50px;
  }

  .header h1 {
    font-size: 42px;
  }

  .brand-works-section h2,
  .print-header h1 {
    font-size: 48px;
  }

  /* Table of Contents */
  .toc-title {
    font-size: 38px;
    margin-bottom: 80px;
  }

  .toc-list li {
    font-size: 22px;
  }
}

/* --- TABLET PORTRAIT & LARGE MOBILE (Max Width: 900px) --- */
@media screen and (max-width: 900px) {

  /* About Grid to single column */
  .about-grid {
    grid-template-columns: 1fr;
  }

  /* Software grid to 3 columns */
  .software-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* TOC to 2 columns */
  .toc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
  }

  .carousel-stage {
    height: 550px;
    margin-bottom: 60px;
  }
}

/* --- MOBILE & TABLET PORTRAIT (Max Width: 768px) --- */
@media screen and (max-width: 768px) {

  /* HAMBURGER MENU VISIBILITY */
  .hamburger {
    display: block !important;
  }

  /* GLOBAL RESET */
  .container,
  .about,
  .portfolio,
  .portfolio-suggesto,
  .brand-works-section,
  .flyer-gallery-grid {
    padding: 60px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .content {
    padding: 0;
  }

  /* Banner - Responsive Display */
  .section-divider {
    display: flex !important;
    height: auto !important;
    min-height: 100px !important;
    padding: 20px !important;
    gap: 15px !important;
  }

  .section-divider h1 {
    font-size: 28px !important;
    white-space: normal !important;
    text-align: center !important;
    word-wrap: break-word !important;
  }

  .section-divider .icon img {
    width: 40px !important;
    height: 40px !important;
  }

  /* Reduce Section Spacing - Eliminate White Space */
  .container {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    min-height: auto !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .about,
  .portfolio,
  .portfolio-suggesto {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  /* Specific: Reduce gap below Ahara images */
  .ahara-portfolio {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .toc-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Brand works section */
  .brand-works-section {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  /* Disable complex desktop-only elements */
  .showcase,
  .rotate-icon,
  .rotate-icon-1 {
    display: none !important;
  }

  /* Force single column everywhere */
  .about-grid,
  .top-section,
  .quad-grid,
  .bottom-section,
  .logo-portfolio-container,
  .print-grid-wrapper,
  .ebook-grid-wrapper,
  .chure-grid-container,
  .toc-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 30px;
  }

  /* Exclude ebook-grid-wrapper from the forced grid list to allow display: contents */
  .ebook-grid-wrapper {
    display: contents !important;
  }

  /* Software Skills - 2 Columns & Centered */
  .software-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
    gap: 20px;
  }

  .software-box h2 {
    text-align: center !important;
  }

  /* Flex containers to column */
  .header,
  .caro-item-row,
  .caro-item-row.caro-is-reversed,
  .footer-social-bar,
  .footer-links,
  .ebook-container,
  .brochure-display-container2,
  .brochure-display-container1 {
    flex-direction: column !important;
    align-items: center !important;
    /* Center align for ebook container items */
    gap: 30px;
  }

  /* Ensure ebook-container uses row wrap to respect order + contents */
  .ebook-container {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Fix gap below Print Collaterals on Mobile */
  .print-main-container {
    margin-top: 50px !important;
  }

  /* PRINT HEADER - LEFT ALIGN & TYPOGRAPHY */
  .print-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    /* Left Align */
    gap: 20px !important;
    text-align: left !important;
    padding-left: 20px !important;
    /* Added Padding */
    padding-right: 20px !important;
  }

  .print-header h1 {
    font-size: 70px !important;
    /* Increased from 55px */
    line-height: 1.1 !important;
  }

  .print-header p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #666 !important;
    max-width: 85% !important;
    text-align: justify !important;
  }

  .print-header .btn {
    width: auto !important;
    padding: 8px 16px !important;
    /* Further reduced padding */
    font-size: 13px !important;
    /* Further reduced font size */
    align-self: flex-start !important;
    /* Button Left Align */
    margin-top: 10px !important;
  }

  /* Specific Resets */
  .header-container,
  .controls-header,
  .flyer-gallery-grid,
  .brand-works-section .header-container {
    padding: 0 20px;
    margin: 0 !important;
    text-align: left;
  }

  /* Controls Header: Tabs + Arrows */
  .controls-header {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 100%;
    margin-bottom: 40px;
    margin-top: 20px;
  }

  .tabs-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    gap: 10px;
  }

  .tab {
    font-size: 16px;
    padding: 12px 20px;
  }

  /* Arrow Buttons Container */
  .arrows-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 15px !important;
  }

  .arrow-btn {
    width: 45px;
    height: 45px;
  }

  /* Specific fix for flyer gallery items */
  .flyer-item,
  .flyer-item-1,
  .flyer-item-2,
  .flyer-item-3,
  .flyer-item-4 {
    grid-column: auto;
    width: 100%;
    justify-content: center;
  }

  .flyer-bottom-left,
  .flyer-bottom-right {
    width: 100%;
    transform: none;
  }

  /* Typography adjustments */
  .content h1 {
    font-size: 26px;
  }

  .content h2 {
    font-size: 42px;
  }

  .content p {
    font-size: 16px !important;
    line-height: 1.6;
  }

  h1,
  .header h1,
  .print-header h1 {
    font-size: 36px !important;
    line-height: 1.2;
    white-space: normal;
  }

  .section-divider h1 {
    font-size: 28px !important;
    letter-spacing: 1px;
  }

  .techades-header p {
    max-width: 85%;
  }

  h2,
  .brand-works-section h2 {
    font-size: 32px !important;
  }

  .caro-text-part h2 {
    font-size: 4.5rem;
  }

  .caro-text-part p {
    font-size: 18px;
  }

  p {
    font-size: 16px !important;
  }

  /* Table of Contents */
  .toc-wrapper {
    padding: 60px 20px;
  }

  .toc-title {
    font-size: 20px;
    margin-bottom: 60px;
  }

  .toc-list li {
    font-size: 24px !important;
    margin-bottom: 24px;
  }

  /* Hero Buttons */
  .hero-buttons {
    flex-direction: column;
    width: 100%;
    gap: 15px;
  }

  /* Hero / Main Buttons (Keep Full Width) */
  .hero-buttons .btn,
  .btn-primary,
  .btn-secondary {
    width: 100% !important;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin: 0;
  }

  /* "View Case Study" Buttons (Reduced Size) */
  .portfolio .btn,
  .portfolio-suggesto .btn,
  .case-study-btn,
  .print-header .btn {
    width: auto !important;
    max-width: 220px !important;
    height: 48px;
    padding: 0 30px;
    font-size: 15px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-left: 0;
  }

  /* Fix Images */
  .brochure-img,
  .brochure-single-image,
  .box img,
  .chure-img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  /* Carousel Stage & Phone Adjustments */
  .carousel-stage {
    height: 600px;
    margin-bottom: 50px;
    width: 100%;
    margin-left: 0;
  }

  .mango {
    width: 90% !important;
    max-width: 380px;
    height: 550px !important;
    left: 50%;
  }

  /* Banner Visibility - HIDDEN ON MOBILE */
  .section-divider {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
  }

  .section-divider h1 {
    display: none !important;
  }

  /* Banner Icons */
  .icon {
    display: none !important;
  }

  .icon img {
    display: none !important;
  }

  /* Footer */
  .main-footer {
    margin-top: 50px;
    padding-bottom: 50px;
  }

  .cta-box {
    margin-top: -50px;
    padding: 40px 20px;
    width: 100%;
  }

  .cta-box h2 {
    font-size: 36px;
  }

  .cta-box p {
    font-size: 16px;
  }

  .footer-social-bar {
    flex-direction: column;
    gap: 30px;
    padding: 20px;
  }

  .social-link {
    font-size: 24px;
  }

  .footer-links {
    flex-direction: column;
    gap: 20px;
  }

  .footer-bottom {
    padding-top: 30px;
  }

  /* Ebook Text */
  .ebook-text-content h1 {
    font-size: 2.5rem;
  }

  .ebook-text-content p {
    font-size: 1rem;
  }
}

/* --- MOBILE LANDSCAPE & SMALL TABLET (Max Width: 600px) --- */
@media screen and (max-width: 600px) {

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

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

  .toc-title {
    .toc-title {
      font-size: 20px;
      margin-bottom: 50px;
    }

    .toc-list li {
      font-size: 22px !important;
    }

    .bottom-section {
      grid-template-columns: 1fr;
    }
  }

  /* --- SMALL MOBILE (Max Width: 480px) --- */
  @media screen and (max-width: 480px) {

    /* Core Typography */
    .content h1 {
      font-size: 22px;
    }

    .content h2 {
      font-size: 36px;
    }

    .content p {
      font-size: 15px !important;
    }

    h1,
    .header h1,
    .print-header h1 {
      font-size: 42px !important;
    }

    /* Banner - Responsive Display */
    .section-divider {
      display: flex !important;
      height: auto !important;
      min-height: 90px !important;
      padding: 16px !important;
      gap: 12px !important;
    }

    .section-divider h1 {
      font-size: 22px !important;
      white-space: normal !important;
      text-align: center !important;
      word-wrap: break-word !important;
    }

    .section-divider .icon img {
      width: 32px !important;
      height: 32px !important;
    }

    h2,
    .brand-works-section h2 {
      font-size: 26px !important;
    }

    .caro-text-part h2 {
      font-size: 4.5rem;
    }

    .caro-text-part p {
      font-size: 16px;
    }

    p {
      font-size: 15px !important;
    }

    /* Intro Loader */
    .intro-text {
      font-size: 28px;
    }

    .intro-sub {
      font-size: 14px;
    }

    /* Buttons */
    .hero-buttons .btn,
    .btn-primary,
    .btn-secondary {
      font-size: 15px;
      height: 50px;
    }

    .portfolio .btn,
    .portfolio-suggesto .btn,
    .case-study-btn {
      max-width: 180px !important;
      font-size: 14px;
      padding: 0 20px;
      align-self: flex-start;
      margin-left: 0;
    }

    /* Center align specifically for Logo Design section */
    .logo-portfolio-column .case-study-btn {
      align-self: center !important;
      margin: 0 auto !important;
    }

    /* Table of Contents */
    .toc-title {
      font-size: 18px;
      margin-bottom: 40px;
    }

    .toc-list li {
      font-size: 20px !important;
      margin-bottom: 20px;
      gap: 10px;
    }

    .toc-list img {
      width: 14px;
      height: 14px;
    }

    /* Banner */
    .section-divider {
      height: auto;
      min-height: 90px;
      gap: 12px;
      padding: 16px;
    }

    .section-divider h1 {
      white-space: normal !important;
    }

    .icon img {
      width: 20px;
      height: 20px;
    }

    /* Carousel */
    .carousel-stage {
      height: 550px;
    }

    .mango {
      width: 95% !important;
      max-width: 100% !important;
      height: 520px !important;
    }

    .tab {
      font-size: 14px;
      padding: 10px 16px;
    }

    .arrow-btn {
      width: 40px;
      height: 40px;
    }

    /* Footer */
    .cta-box h2 {
      font-size: 28px;
    }

    .cta-box p {
      font-size: 15px;
    }

    .cta-box .btn-white {
      padding: 14px 35px;
      font-size: 14px;
    }

    .social-link {
      font-size: 20px;
    }

    .footer-links a {
      font-size: 16px;
    }

    .copyright {
      font-size: 14px;
    }

    /* Ebook */
    .ebook-text-content h1 {
      font-size: 32px !important;
    }

    .ebook-tablet-wrapper {
      width: 100%;
    }

    /* Software Grid */
    .software-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .software-box h2 {
      text-align: center !important;
    }

    /* Section Spacing */
    .container,
    .about,
    .portfolio,
    .portfolio-suggesto {
      padding: 40px 16px !important;
    }
  }

  /* --- EXTRA SMALL MOBILE (Max Width: 375px) --- */
  @media screen and (max-width: 375px) {

    .content h2 {
      font-size: 32px;
    }

    /* Banner - Responsive Display */
    .section-divider {
      display: flex !important;
      height: auto !important;
      min-height: 80px !important;
      padding: 14px !important;
      gap: 10px !important;
    }

    .section-divider h1 {
      font-size: 20px !important;
      white-space: normal !important;
      text-align: center !important;
      word-wrap: break-word !important;
    }

    .section-divider .icon img {
      width: 28px !important;
      height: 28px !important;
    }

    .toc-title {
      font-size: 16px;
    }

    .caro-text-part h2 {
      font-size: 4.5rem;
    }

    .mango {
      width: 95% !important;
      max-width: 100% !important;
      height: 500px !important;
    }
  }



  /* =======================================================
   FINAL FIXES FOR VIDEO & CONTROLS (Mobile)
   ======================================================= */
  @media screen and (max-width: 900px) {

    /* --- 1. LANDSCAPE SECTION FIXES --- */

    /* Fix container padding and scroll */
    .carousel-container {
      padding: 20px 20px !important;
      gap: 15px !important;
      scroll-padding-left: 20px;
      justify-content: flex-start;
      /* Ensure items start from left */
      margin-bottom: 60px !important;
    }

    /* Make items wider */
    .video-card {
      flex: 0 0 85vw !important;
      max-width: 85vw !important;
    }

    .video-wrapper {
      width: 100% !important;
      border-radius: 12px !important;
    }

    /* Adjust Controls */
    .controls-container {
      justify-content: center !important;
      padding-right: 0 !important;
      width: 100% !important;
      padding-bottom: 10px !important;
      gap: 20px !important;
      margin-top: 0px !important;
    }

    .nav-btn {
      margin-top: 0 !important;
      width: 50px !important;
      height: 50px !important;
      border-radius: 50% !important;
    }


    /* --- 2. PORTRAIT/PHONE SECTION FIXES --- */

    /* Remove Phone Frame (Background/Notch) */
    .phone-wrapper {
      background: transparent !important;
      padding: 0 !important;
      border-radius: 12px !important;
      box-shadow: none !important;
    }

    .phone-wrapper::before {
      display: none !important;
    }

    .phone-screen {
      border-radius: 12px !important;
    }

    /* Controls Header (Tabs + Arrows) */
    .controls-header {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 25px !important;
      margin-bottom: 30px !important;
      height: auto !important;
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 40px !important;
    }

    .arrows-group {
      display: flex !important;
      gap: 20px !important;
      justify-content: center !important;
      margin-top: 10px !important;
    }

    /* Fix Tabs Container (Both sections) */
    .tabs-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding-top: 60px;
      justify-content: center;
    }

    .tabs-container .tab {
      flex: 0 1 auto;
      width: auto;
      min-width: 120px;
      padding: 10px 20px;
    }


    /* Stage Container for Portrait */
    .carousel-stage {
      height: 600px !important;
      /* Fixed height for mobile */
      min-height: unset !important;
      padding-bottom: 0 !important;
      overflow: hidden !important;
      margin-bottom: 80px !important;
      position: relative;
      width: 100% !important;
      display: flex;
      justify-content: center;
    }

    /* Phone Card Centering Logic */
    .mango {
      width: 280px !important;
      /* Fixed manageable width */
      height: 520px !important;
      /* Fixed height */
      left: 50% !important;
      margin-left: 0 !important;
      top: 50% !important;
      margin-top: 0 !important;

      /* Reset Transform origin */
      transform-origin: center center;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
      border: none !important;
    }

    /* --- CENTER CARD (Active) --- */
    .mango[data-pos="0"] {
      transform: translate(-50%, -50%) scale(1) !important;
      /* Reset scale to 1 or keep slight boost, user requested 'Keep one video perfectly centered'. Removing 1.05 boost to keep it clean if 'Visual cleanup' implies simplicity, but 'Center video slightly larger' was previous request. Current request 'center video remains clearly isolated'. I will use scale(1) to be safe and match 'minimal' request, or 1.05. Let's stick to 1.05 but REMOVE SHADOW as requested. */
      transform: translate(-50%, -50%) scale(1.05) !important;
      z-index: 100 !important;
      opacity: 1 !important;
      filter: blur(0) !important;
      /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important; */
    }

    /* --- RIGHT CARD (Next) --- */
    /* Increased isolation spacing */
    .mango[data-pos="1"] {
      transform: translate(-50%, -50%) translateX(320px) scale(0.85) !important;
      z-index: 90 !important;
      opacity: 0.6 !important;
      filter: blur(2px) !important;
    }

    /* --- LEFT CARD (Prev) --- */
    /* Increased isolation spacing */
    .mango[data-pos="-1"] {
      transform: translate(-50%, -50%) translateX(-320px) scale(0.85) !important;
      z-index: 90 !important;
      opacity: 0.6 !important;
      filter: blur(2px) !important;
    }

    /* Remove Gradient Overlays */
    .overlay-ui {
      background: none !important;
    }

    /* Fix Vimeo Controls (Remove Zoom/Clip) */
    .phone-screen iframe {
      transform: translate(-50%, -50%) scale(1) !important;
      width: 100% !important;
      height: 100% !important;
    }

    /* Hidden ones */
    .mango[data-pos] {
      transform: translate(-50%, -50%) scale(0);
    }

  }

  @media screen and (max-width: 480px) {

    /* Smaller screens tweaks */
    .video-card {
      flex: 0 0 92vw !important;
      max-width: 92vw !important;
    }

    .carousel-container {
      padding: 20px 10px !important;
    }

    .mango {
      width: 85vw !important;
      max-width: 280px !important;
      height: 500px !important;
    }

    .carousel-stage {
      height: 540px !important;
    }

    /* Swipe Overlay - Mobile Only */
    /* Covers top area to capture swipes, exposes bottom for controls */
    .swipe-overlay {
      display: block !important;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 75%;
      /* Leave bottom 25% for controls */
      z-index: 20;
      /* Above iframe (0), below play-btn (30) */
      background: transparent;
    }
  }

  /* Global Hide for Swipe Overlay */
  .swipe-overlay {
    display: none;
  }

  .close-video {
    display: none !important;
  }

  /* Fullscreen Button (Visible on Mobile) */
  .fullscreen-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    cursor: pointer;
    backdrop-filter: blur(4px);
  }

  /* Fullscreen Nav Buttons (Hidden by default, shown in fullscreen) */
  .fs-nav {
    display: none;
    /* Only show in fullscreen */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border-radius: 50%;
    z-index: 200;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .fs-prev {
    left: 10px;
  }

  .fs-next {
    right: 10px;
  }

  /* --- FULLSCREEN MODE STYLES --- */
  #stage:fullscreen,
  #stage:-webkit-full-screen {
    background: #000;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Show Nav Buttons in Fullscreen */
  #stage:fullscreen .fs-nav,
  #stage:-webkit-full-screen .fs-nav {
    display: flex;
  }

  /* Adjust Mango Card in Fullscreen */
  #stage:fullscreen .mango,
  #stage:-webkit-full-screen .mango {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    left: 50% !important;
    top: 50% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Ensure Phone Wrapper fills screen */
  #stage:fullscreen .phone-wrapper,
  #stage:-webkit-full-screen .phone-wrapper,
  #stage:fullscreen .phone-screen,
  #stage:-webkit-full-screen .phone-screen {
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* In fullscreen, center the active card perfectly */
  #stage:fullscreen .mango[data-pos="0"],
  #stage:-webkit-full-screen .mango[data-pos="0"] {
    transform: translate(-50%, -50%) scale(1) !important;
  }

  /* Push side cards completely off-screen in fullscreen */
  #stage:fullscreen .mango[data-pos="1"],
  #stage:-webkit-full-screen .mango[data-pos="1"] {
    transform: translate(100%, -50%) !important;
    filter: blur(0) !important;
  }

  #stage:fullscreen .mango[data-pos="-1"],
  #stage:-webkit-full-screen .mango[data-pos="-1"] {
    transform: translate(-200%, -50%) !important;
    filter: blur(0) !important;
  }
}

/* Performance Optimization */
.video-card,
.mango,
.phone-screen {
  will-change: transform;
  /* GPU acceleration hint */
  backface-visibility: hidden;
}

/* Ensure no accidental hover waits */
.video-card:hover {
  transform: none !important;
}

/* HOME PAGE ENTRY ANIMATION (Staggered) */
/* Exclude intro, rotating icons, and UI overlays to prevent animation conflicts */
body.loaded>*:not(.intro-loader):not(.rotate-icon):not(.rotate-icon-1):not(.hamburger):not(.mobile-menu-overlay) {
  animation: contentEntry 1s ease-out forwards;
  opacity: 0;
  /* Start hidden */
}

/* Define Stagger Delays for first 10 major sections */
body.loaded>*:not(.intro-loader):nth-child(1) {
  animation-delay: 0.12s;
}

body.loaded>*:not(.intro-loader):nth-child(2) {
  animation-delay: 0.24s;
}

body.loaded>*:not(.intro-loader):nth-child(3) {
  animation-delay: 0.36s;
}

body.loaded>*:not(.intro-loader):nth-child(4) {
  animation-delay: 0.48s;
}

body.loaded>*:not(.intro-loader):nth-child(5) {
  animation-delay: 0.60s;
}

body.loaded>*:not(.intro-loader):nth-child(6) {
  animation-delay: 0.72s;
}

body.loaded>*:not(.intro-loader):nth-child(7) {
  animation-delay: 0.84s;
}

body.loaded>*:not(.intro-loader):nth-child(8) {
  animation-delay: 0.96s;
}

body.loaded>*:not(.intro-loader):nth-child(9) {
  animation-delay: 1.08s;
}

body.loaded>*:not(.intro-loader):nth-child(10) {
  animation-delay: 1.20s;
}

@keyframes contentEntry {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure footer is ALWAYS visible once loaded */
body.loaded .main-footer {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* =========================================
   MOBILE FIXES (Max-Width: 768px)
   ========================================= */
@media screen and (max-width: 768px) {

  /* 1. Global Reset */
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 2. Portfolio Grids - Single Column */
  .ebook-grid-wrapper,
  .ui-masonry-wrapper,
  .print-grid-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin: 0 !important;
    gap: 30px !important;
  }

  /* Flyer specific with gaps */
  .flyer-gallery-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin: 50px 0 !important;
    /* Added gap top/bottom */
    gap: 30px !important;
  }

  /* Specific 2-column grid for Software Skills on Mobile */
  .software-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 20px !important;
  }

  /* 2b. Quad Grid (Adalyze/Suggesto 4 thumbnails) - 2 Columns */
  .quad-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .quad-grid .box {
    margin-bottom: 0 !important;
    height: auto !important;
  }

  /* 3. Cards & Images */
  .box,
  .flyer-item,
  .ebook-grid-item,
  .ui-image-card,
  .print-grid-item {
    width: 100% !important;
    margin: 0 !important;
  }

  .box img,
  .flyer-item img,
  .ebook-grid-item img,
  .ui-image-card img,
  .print-grid-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    /* Ensure content visible */
  }

  /* 4. Suggesto / Adalyze Rows (Carousel Style sections) */
  .caro-item-row,
  .caro-item-row.caro-is-reversed {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 20px !important;
    align-items: center !important;
    margin-bottom: 40px !important;
  }

  .caro-text-part {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
  }

  .caro-img-part {
    width: 100% !important;
    flex: none !important;
    display: block !important;
  }

  .caro-img-part img {
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    /* Prevent vertically huge images */
    object-fit: contain !important;
  }

  /* 5. Footer & CTA */
  .main-footer {
    padding: 0 !important;
    width: 100% !important;
    background: #000;
    margin-top: 100px !important;
    /* Overlap space */
  }

  .footer-float-wrapper {
    margin-top: -60px !important;
    /* Smaller Overlap */
    width: 90% !important;
    /* Keep sides visible */
    max-width: 100% !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important;
  }

  .float-card-top {
    padding: 40px 15px !important;
  }

  .float-card-top h2 {
    font-size: 28px !important;
  }

  .float-card-bottom {
    flex-direction: column !important;
    gap: 25px !important;
    padding: 25px 15px !important;
  }

  /* 6. Fix for top/bottom sections in Social Media Creatives */
  .top-section,
  .bottom-section {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
  }
}

/* =======================================================
   FLIP CARD STYLES FOR HERO SECTION
   ======================================================= */
.card {
  perspective: 1000px;
  background-color: transparent !important;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front {
  position: relative;
  width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
}

.card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  z-index: 1;
}

.card-front img,
.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0px;
}