@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
/* Note: You had Poppins imported but not used, so I swapped to Inter which you use. */

/* --- :root Variables --- */
:root {
  --font-primary: "Inter", sans-serif;
  --color-primary-gold: #f9a825; /* Brighter gold for buttons/hovers */
  --color-secondary-gold: #d4af37; /* Deeper gold for footer/active */
  --color-black: #000000;
  --color-dark-gray: #1a1a1a; /* Footer background */
  --color-white: #ffffff;
  --color-text-primary: #e5e7eb;
  --color-text-secondary: #ccc;
  --color-text-muted: #bbb;
}

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

html {
  /* Added for smooth scroll-to-top */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-black);
  color: var(--color-white);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =====================================================
  Main Layout
=====================================================
*/
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Your padding calculation was correct */
  padding-top: 175px;
}

.bg-img {
  display: none; /* Hidden by default on mobile */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  opacity: 0.8;
}

.mobile-bg {
  display: block; /* Shown by default on mobile */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%, /* Centered the gradient */
    rgba(249, 168, 37, 0.15) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: -1;
}

/* =====================================================
  Header & Navigation
=====================================================
*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease,
    padding 0.4s ease;
}

/* Style for the header when the page is scrolled */
.header.scrolled {
  background-color: rgba(18, 18, 18, 0.65);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 35px 35px; /* Softened radius */
  margin-top: -1rem; /* Adjusted from -2rem */
}

.navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  max-width: 1280px;
  margin: 1rem auto 0; /* Center navbar and add top margin */
  padding: 1.8rem 2rem;
  transition: padding 0.4s ease;
  width: 100%; /* Ensure navbar spans width */
}

/* Shrink navbar padding slightly on scroll */
.header.scrolled .navbar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.logo-link {
  grid-column: 1;
}

.logo {
  height: 100px;
  width: auto;
  transition: transform 0.3s ease, height 0.4s ease;
}

/* Shrink logo on scroll */
.header.scrolled .logo {
  height: 85px;
}

.logo:hover {
  transform: scale(1.05);
}

/* --- Hamburger Menu (Mobile-First) --- */
.hamburger-btn {
  display: block;
  grid-column: 3;
  justify-self: end;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  padding: 8px;
}

.bar {
  display: block;
  width: 28px;
  height: 3px;
  margin: 5px auto;
  background-color: var(--color-white);
  transition: all 0.3s ease-in-out;
}

.hamburger-btn.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Hide desktop links by default */
.nav-links-desktop,
.btn-nav-desktop {
  display: none;
}

/* --- Mobile Navigation Menu --- */
.nav-menu-mobile {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  transition: left 0.4s ease-in-out;
  z-index: 1000;
}

.nav-menu-mobile.active {
  left: 0;
}

.nav-menu-mobile a {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 1rem;
}

.nav-menu-mobile a.active {
  color: var(--color-primary-gold);
}

.nav-menu-mobile a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color-primary-gold);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-menu-mobile a:hover {
  color: var(--color-primary-gold);
}

.nav-menu-mobile a:hover::after {
  width: 100%;
}

/* =====================================================
  Buttons
=====================================================
*/
.btn {
  background-color: var(--color-primary-gold);
  color: var(--color-black);
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: none; /* Ensure no default border */
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(249, 168, 37, 0.4);
}

.btn-nav-mobile {
  font-size: 1.5rem;
  padding: 0.75rem 2rem;
}

.btn-nav-desktop {
  font-size: 1rem;
  padding: 0.75rem 2rem;
}

/*
=====================================================
 HERO CONTENT
=====================================================
*/
.hero-content {
  text-align: center; /* Center text by default */
  margin-top: 2rem;
  padding: 0 2rem;
  /* Add flex properties to center content vertically */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1.hero-heading {
  text-align: center;
  font-size: 3rem; /* Responsive base font size */
  font-weight: 800; /* Bolder */
  line-height: 1.2;
}

/* NEW class for gold text */
.text-gold {
  color: var(--color-primary-gold);
}

.hero-content p {
  font-size: 1.1rem;
  text-align: center;
  margin: 2rem auto;
  max-width: 90%;
  line-height: 1.6;
  color: var(--color-text-primary);
}

/*
=====================================================
 SCROLL ANIMATION (NEW)
=====================================================
*/
.fade-in-section {
  opacity: 0;
  transform: translateY(30px); /* Start 30px down */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* Performance hint */
}

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

/*
=====================================================
 FOOTER
=====================================================
*/

footer {
  background: linear-gradient(
    180deg,
    var(--color-black) 0%,
    var(--color-dark-gray) 100%
  );
  color: #f9f9f9;
  padding: 50px 5%;
  position: relative;
  overflow: hidden;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  position: relative;
  z-index: 2;
  max-width: 1280px; /* Max width */
  margin: 0 auto; /* Centered */
}

.footer-logo h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-secondary-gold);
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.footer-logo p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.footer-links h3,
.footer-social h3 {
  color: var(--color-secondary-gold);
  margin-bottom: 20px;
  font-size: 18px;
  position: relative;
  font-weight: 600;
}

.footer-links ul {
  list-style: none;
}

.footer-links ul li {
  margin-bottom: 12px;
}

.footer-links ul li a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: 0.3s;
  display: inline-block; /* For transform */
}

.footer-links ul li a:hover {
  color: var(--color-secondary-gold);
  transform: translateX(5px);
}

.footer-social h3 {
  margin-bottom: 15px;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-secondary-gold);
  border-radius: 50%;
  color: var(--color-secondary-gold);
  font-size: 16px;
  transition: all 0.3s ease;
}

.social-icons a:hover {
  background: var(--color-secondary-gold);
  color: var(--color-dark-gray);
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 0 10px var(--color-secondary-gold);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 215, 0, 0.2);
  margin-top: 50px;
  padding-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #aaa;
}

.footer-bottom span {
  color: var(--color-secondary-gold);
  font-weight: 500;
}

/* Scroll to top button */
#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--color-secondary-gold);
  color: var(--color-dark-gray);
  border: none;
  width: 45px; /* Made it circular */
  height: 45px; /* Made it circular */
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px; /* Adjusted icon size */
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  display: none; /* Toggled by JS */
  z-index: 99;
  transition: all 0.3s;
  border: 1px solid var(--color-secondary-gold);
}

#scrollTopBtn:hover {
  background: var(--color-dark-gray);
  color: var(--color-secondary-gold);
  transform: scale(1.1);
}

/* =====================================================
  Responsive Media Queries (Tablet & Up)
=====================================================
*/

@media (min-width: 768px) {
  .logo {
    height: 120px;
  }

  .header.scrolled .logo {
    height: 95px;
  }

  .hero-content {
    /* REMOVED text-align: left */
    padding: 2rem 4rem;
  }

  h1.hero-heading {
    font-size: 4.5rem;
    /* REMOVED text-align: left */
  }

  .hero-content p {
    font-size: 1.2rem; /* Slightly larger */
    max-width: 42rem;
    /* REMOVED text-align: left */
    margin: 2rem auto; /* KEPT auto margin */
  }

  footer {
    padding: 60px 8%;
  }
}

/* =====================================================
  Responsive Media Queries (Desktop & Up)
=====================================================
*/

@media (min-width: 1024px) {
  /* Your padding calculation was correct */
  .hero-section {
    padding-top: 230px;
  }

  .bg-img {
    display: block;
  }
  .mobile-bg {
    display: none;
  }

  .navbar {
    grid-template-columns: auto 1fr auto;
    gap: 3rem;
    padding: 2rem 3rem;
  }

  .logo {
    height: 150px;
  }

  .header.scrolled .logo {
    height: 100px;
  }

  .hamburger-btn {
    display: none;
  }

  .nav-menu-mobile {
    display: none;
  }

  /* Show desktop nav links */
  .nav-links-desktop {
    display: flex;
    justify-content: center;
    gap: 3rem;
    grid-column: 2;
  }

  .nav-links-desktop a {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text-primary);
    transition: color 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
  }

  /* NEW style for active link */
  .nav-links-desktop a.active {
    color: var(--color-primary-gold);
  }

  .nav-links-desktop a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary-gold);
    transition: width 0.3s ease;
  }

  /* Active link underline always visible */
  .nav-links-desktop a.active::after {
    width: 100%;
  }

  .nav-links-desktop a:not(.active):hover {
    color: var(--color-primary-gold);
  }

  .nav-links-desktop a:not(.active):hover::after {
    width: 100%;
  }

  /* Show desktop nav button */
  .btn-nav-desktop {
    display: inline-block;
    grid-column: 3;
    justify-self: end;
  }

  .hero-content {
    padding: 2rem 5rem;
  }

  h1.hero-heading {
    font-size: 6.5rem; /* Slightly reduced for better fit */
  }

  .hero-content p {
    font-size: 1.4rem;
    max-width: 48rem;
  }
}

/*=============================================================================================================
sec 2
==================================================================================================================*/

.marketing-section {
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
}

/* Inner Container:
          - Grows to fill the section
          - Uses flex to center the grid vertically
          - Provides padding
        */
.marketing-section-inner {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 2rem; /* p-8 */
}

/* Main Grid:
          - Splits content into two columns on desktop, stacks on mobile
        */
.marketing-grid {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 4rem; /* gap-16 */
  align-items: center;
  width: 100%;
}

/* COLUMN 1: Images & Decorative Elements
        */
.image-column {
  position: relative;
  padding-top: 3rem; /* pt-12 */
  padding-left: 3rem; /* pl-12 */
  order: 9999; /* order-last */
}

/* Decorative Squares */
.deco-square-1-sec-2 {
  position: absolute;
  top: 0;
  left: 0.5rem; /* left-12 */
  width: 5rem; /* w-20 */
  height: 5rem; /* h-20 */
  border-radius: 0.5rem; /* rounded-lg */
  z-index: 100;
}

/* Image Stack */
.image-stack {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* gap-8 */
}

.image-stack img {
  width: 70%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  filter: grayscale(100%); /* filter grayscale */
}

/* COLUMN 2: Text Content
        */
.text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-column h2 {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 800; /* font-extrabold */
  color: #04070e; /* text-gray-900 */
  margin-bottom: 1.25rem; /* mb-5 */
}

.text-column .subtitle {
  font-size: 1.25rem; /* text-xl */
  font-weight: 500; /* font-medium */
  color: #000204; /* text-gray-700 */
  margin-bottom: 1.5rem; /* mb-6 */
}

.text-column .description {
  font-size: 1rem; /* text-base */
  color: #04070c; /* text-gray-600 */
  margin-bottom: 2.5rem; /* mb-10 */
  line-height: 1.625; /* leading-relaxed */
}

/* Button Container */
.button-container {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* gap-4 */
}

/* Buttons */
.cta-button {
  display: inline-block;
  text-align: center;
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  border: 2px solid #fe6e07 !important; /* border-2 border-orange-500 */
  color: #000000; /* text-gray-900 */
  font-weight: 600; /* font-semibold */
  border-radius: 0.5rem; /* rounded-lg */
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.cta-button:hover {
  background-color: #f97316; /* hover:bg-orange-500 */
  color: #000000; /* hover:text-black */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

.cta-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #f97316, 0 0 0 4px rgba(249, 115, 22, 0.5); /* focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50 */
}

/* Responsive Breakpoints 
        */

/* sm: 640px */
@media (min-width: 640px) {
  .button-container {
    flex-direction: row; /* sm:flex-row */
  }
}

/* md: 768px */
@media (min-width: 768px) {
  .marketing-section-inner {
    padding: 4rem; /* md:p-16 */
  }
  .marketing-grid {
    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
  }
  .image-column {
    order: 0; /* md:order-first */
  }
  .button-container {
    flex-direction: column; /* md:flex-col */
  }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .text-column h2 {
    font-size: 3rem; /* lg:text-5xl */
    line-height: 1;
  }
  .text-column .subtitle {
    font-size: 1.5rem; /* lg:text-2xl */
  }
  .text-column .description {
    font-size: 1.125rem; /* lg:text-lg */
  }
  .button-container {
    flex-direction: row; /* lg:flex-row */
  }
}

/*========================================================================================================================
    section 3
    ========================================================================================================================*/

.branding-section {
  width: 100%;
  background-color: #000000; /* Dark background */
  overflow: hidden;
  min-height: 90vh;
  display: flex;
}

/* Inner Container:
          - Grows to fill the section
          - Uses flex to center the grid vertically
          - Provides padding
        */
.branding-section-inner {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 2rem; /* p-8 */
}

/* Main Grid:
          - Splits content into two columns on desktop, stacks on mobile
          - Reverse order on desktop for this section (images on right)
        */
.branding-grid {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 4rem; /* gap-16 */
  align-items: center;
  width: 100%;
}

/* COLUMN 1: Text Content
        */
.branding-section .text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff; /* White text for contrast */
}

.branding-section .text-column h2 {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 800; /* font-extrabold */
  color: #fb923c; /* orange-400 for the title */
  margin-bottom: 1.25rem; /* mb-5 */
}

.branding-section .text-column .subtitle {
  font-size: 1.25rem; /* text-xl */
  font-weight: 500; /* font-medium */
  color: #ffffff; /* white */
  margin-bottom: 1.5rem; /* mb-6 */
}

.branding-section .text-column .description {
  font-size: 1rem; /* text-base */
  color: #d1d5db; /* gray-300 for slightly softer white */
  margin-bottom: 2.5rem; /* mb-10 */
  line-height: 1.625; /* leading-relaxed */
}

/* Button Container */
.branding-section .button-container {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* gap-4 */
}

/* Buttons */
.branding-section .cta-button {
  display: inline-block;
  text-align: center;
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  border: 2px solid #fb923c; /* border-2 border-orange-400 */
  color: #ffffff; /* white text */
  font-weight: 600; /* font-semibold */
  border-radius: 0.5rem; /* rounded-lg */
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  background-color: transparent; /* Transparent background */
}

.branding-section .cta-button:hover {
  background-color: #fb923c; /* hover:bg-orange-400 */
  color: #000000; /* hover:text-black */
  box-shadow: 0 10px 15px -3px rgba(251, 146, 60, 0.3),
    0 4px 6px -2px rgba(251, 146, 60, 0.2); /* Adjusted shadow for orange */
}

.branding-section .cta-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fb923c,
    0 0 0 4px rgba(251, 146, 60, 0.5); /* focus:ring-2 focus:ring-orange-400 */
}

/* COLUMN 2: Images & Decorative Elements
        */
.branding-section .image-column {
  position: relative;
  padding-top: 3rem; /* pt-12 */
  padding-right: 3rem; /* pr-12 */
  order: -1; /* order-first on mobile */
}

/* Decorative Squares */
.branding-section .deco-square-1 {
  position: absolute;
  top: 0;
  right: 3rem; /* right-12 */
  width: 2rem; /* w-20 */
  height: 2rem; /* h-20 */
  border-radius: 0.5rem; /* rounded-lg */
  z-index: 100;
}

/* Image Stack */
.branding-section .image-stack {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* gap-8 */
}

.branding-section .image-stack img {
  width: 75%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  filter: none; /* Make sure filter is reset if needed */
}

/* Responsive Breakpoints 
        */

/* sm: 640px */
@media (min-width: 640px) {
  .branding-section .button-container {
    flex-direction: row; /* sm:flex-row */
  }
}

/* md: 768px */
@media (min-width: 768px) {
  .branding-section-inner {
    padding: 4rem; /* md:p-16 */
  }
  .branding-grid {
    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
  }
  .branding-section .image-column {
    order: 0; /* reset order for desktop, as it's the second column */
    padding-left: 0; /* remove left padding on desktop */
    padding-right: 3rem; /* pr-12 */
  }
  .branding-section .deco-square-1 {
    left: auto; /* reset left */
    right: 3rem; /* right-12 */
  }
  .branding-section .button-container {
    flex-direction: column; /* md:flex-col */
  }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .branding-section .text-column h2 {
    font-size: 3rem; /* lg:text-5xl */
    line-height: 1;
  }
  .branding-section .text-column .subtitle {
    font-size: 1.5rem; /* lg:text-2xl */
  }
  .branding-section .text-column .description {
    font-size: 1.125rem; /* lg:text-lg */
  }
  .branding-section .button-container {
    flex-direction: row; /* lg:flex-row */
  }
}

/*================================================================================================================
        section 4 
        ================================================================================================================*/
.web-design-section {
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
}

/* Inner Container:
          - Grows to fill the section
          - Uses flex to center the grid vertically
          - Provides padding
        */
.web-design-section-inner {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 2rem; /* p-8 */
}

/* Main Grid:
          - Splits content into two columns on desktop, stacks on mobile
        */
.web-design-grid {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 4rem; /* gap-16 */
  align-items: center;
  width: 100%;
}

/* COLUMN 1: Images & Decorative Elements
        */
.web-design-image-column {
  position: relative;
  padding-top: 3rem; /* pt-12 */
  padding-left: 3rem; /* pl-12 */
  order: 9999; /* order-last */
}

/* Decorative Squares */
.web-design-deco-square-1 {
  position: absolute;
  top: 0;
  left: 1rem; /* left-12 */
  width: 4rem; /* w-20 */
  height: 4rem; /* h-20 */
  border-radius: 0.5rem; /* rounded-lg */
  z-index: 100;
}

/* Image Stack */
.web-design-image-stack {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* gap-8 */
}

.web-design-image-stack img {
  width: 75%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  /* filter: grayscale(100%); removed for this section */
}

/* COLUMN 2: Text Content
        */
.web-design-text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.web-design-text-column h2 {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 800; /* font-extrabold */
  color: #111827; /* text-gray-900 */
  margin-bottom: 1.25rem; /* mb-5 */
}

.web-design-text-column .subtitle {
  font-size: 1.25rem; /* text-xl */
  font-weight: 500; /* font-medium */
  color: #374151; /* text-gray-700 */
  margin-bottom: 1.5rem; /* mb-6 */
}

.web-design-text-column .description {
  font-size: 1rem; /* text-base */
  color: #4b5563; /* text-gray-600 */
  margin-bottom: 2.5rem; /* mb-10 */
  line-height: 1.625; /* leading-relaxed */
}

/* Button Container */
.web-design-button-container {
  display: flex;
  flex-direction: row; /* Start as row */
  flex-wrap: wrap; /* Allow buttons to wrap */
  gap: 1rem; /* gap-4 */
}

/* Buttons */
.web-design-cta-button {
  display: inline-block;
  text-align: center;
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  border: 2px solid #f97316; /* border-2 border-orange-500 */
  color: #111827; /* text-gray-900 */
  font-weight: 600; /* font-semibold */
  border-radius: 0.5rem; /* rounded-lg */
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  background-color: transparent; /* Match the design */
}

.web-design-cta-button:hover {
  background-color: #f97316; /* hover:bg-orange-500 */
  color: #000000; /* hover:text-black */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

.web-design-cta-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #f97316,
    0 0 0 4px rgba(249, 115, 22, 0.5); /* focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50 */
}

/* Responsive Breakpoints 
        */

/* md: 768px */
@media (min-width: 768px) {
  .web-design-section-inner {
    padding: 4rem; /* md:p-16 */
  }
  .web-design-grid {
    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
  }
  .web-design-image-column {
    order: 0; /* md:order-first */
  }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .web-design-text-column h2 {
    font-size: 3rem; /* lg:text-5xl */
    line-height: 1;
  }
  .web-design-text-column .subtitle {
    font-size: 1.5rem; /* lg:text-2xl */
  }
  .web-design-text-column .description {
    font-size: 1.125rem; /* lg:text-lg */
  }
}

/*============================================================================================
        sec5
        ============================================================================================*/

/* Main Section Container */
.business-support-section {
  width: 100%;
  background-color: #000000; /* Dark background */
  overflow: hidden;
  min-height: 90vh;
  display: flex;
}

/* Inner Container */
.business-support-section-inner {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 2rem;
}

/* Main Grid */
.business-support-grid {
  display: grid;
  grid-template-columns: 1fr; /* Stacks on mobile by default */
  gap: 4rem;
  align-items: center;
  width: 100%;
}

/* COLUMN 1: Text Content */
.business-support-text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  order: 1; /* Text comes first on mobile */
}

.business-support-text-column h2 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 800;
  color: #fb923c; /* orange-400 for the title */
  margin-bottom: 1.25rem;
}

.business-support-text-column .subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.business-support-text-column .description {
  font-size: 1rem;
  color: #d1d5db; /* gray-300 */
  margin-bottom: 2.5rem;
  line-height: 1.625;
}

/* Button Container */
.business-support-button-container {
  display: flex;
  flex-direction: row; /* Changed to row */
  flex-wrap: wrap; /* Allow wrapping */
  gap: 1rem;
}

/* Buttons */
.business-support-cta-button {
  display: inline-block;
  text-align: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid #fb923c; /* border-orange-400 */
  color: #ffffff;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  background-color: transparent;
}

.business-support-cta-button:hover {
  background-color: #fb923c;
  color: #000000;
  box-shadow: 0 10px 15px -3px rgba(251, 146, 60, 0.3),
    0 4px 6px -2px rgba(251, 146, 60, 0.2);
}

.business-support-cta-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fb923c, 0 0 0 4px rgba(251, 146, 60, 0.5);
}

/* COLUMN 2: Images & Decorative Elements */
.business-support-image-column {
  position: relative;
  padding-top: 3rem;
  padding-right: 3rem; /* Padding on the right for squares */
  order: 2; /* Images come second on mobile */
}

/* Decorative Squares */
.business-support-deco-square-1 {
  position: absolute;
  top: 0;
  right: 13rem; /* Positioned from right */
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  z-index: 100;
}
/* Image Stack */
.business-support-image-stack {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.business-support-image-stack img {
  width: 75%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Responsive Breakpoints */

/* md: 768px */
@media (min-width: 768px) {
  .business-support-section-inner {
    padding: 4rem;
  }
  .business-support-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
  }
  .business-support-text-column {
    order: 1; /* Text on the left */
  }
  .business-support-image-column {
    order: 2; /* Images on the right */
  }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .business-support-text-column h2 {
    font-size: 3rem;
    line-height: 1;
  }
  .business-support-text-column .subtitle {
    font-size: 1.5rem;
  }
  .business-support-text-column .description {
    font-size: 1.125rem;
  }
}

/*========================================================================================
        section 6
        =========================================================================================*/
/* Main Section Container */
.content-creation-section {
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
}

/* Inner Container */
.content-creation-section-inner {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 2rem;
}

/* Main Grid */
.content-creation-grid {
  display: grid;
  grid-template-columns: 1fr; /* Stacks on mobile */
  gap: 4rem;
  align-items: center;
  width: 100%;
}

/* COLUMN 1: Images & Decorative Elements */
.content-creation-image-column {
  position: relative;
  padding-top: 3rem;
  padding-left: 3rem;
  order: 9999; /* order-last on mobile */
}

/* Decorative Squares */
.content-creation-deco-square-1 {
  position: absolute;
  top: 0;
  left: 1rem;
  width: 5rem;
  height: 5rem;
  border-radius: 0.5rem;
  z-index: 100;
}

/* Image Stack */
.content-creation-image-stack {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.content-creation-image-stack img {
  width: 75%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* COLUMN 2: Text Content */
.content-creation-text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: 1; /* order-first on mobile */
}

.content-creation-text-column h2 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 800;
  color: #111827; /* text-gray-900 */
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.content-creation-text-column .subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  color: #374151; /* text-gray-700 */
  margin-bottom: 1.5rem;
}

.content-creation-text-column .description {
  font-size: 1rem;
  color: #4b5563; /* text-gray-600 */
  margin-bottom: 2.5rem;
  line-height: 1.625;
}

/* Button Container */
.content-creation-button-container {
  display: flex;
  flex-direction: row; /* Start as row */
  flex-wrap: wrap; /* Allow buttons to wrap */
  gap: 1rem;
}

/* Buttons */
.content-creation-cta-button {
  display: inline-block;
  text-align: center;
  padding: 0.75rem 1.5rem;
  border: 2px solid #f97316; /* border-2 border-orange-500 */
  color: #111827; /* text-gray-900 */
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  background-color: transparent;
}

.content-creation-cta-button:hover {
  background-color: #f97316;
  color: #000000;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.content-creation-cta-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #f97316, 0 0 0 4px rgba(249, 115, 22, 0.5);
}

/* Responsive Breakpoints */

/* md: 768px */
@media (min-width: 768px) {
  .content-creation-section-inner {
    padding: 4rem;
  }
  .content-creation-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
  }
  .content-creation-image-column {
    order: 1; /* md:order-first */
  }
  .content-creation-text-column {
    order: 2; /* md:order-last */
  }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .content-creation-text-column h2 {
    font-size: 3rem;
    line-height: 1;
  }
  .content-creation-text-column .subtitle {
    font-size: 1.5rem;
  }
  .content-creation-text-column .description {
    font-size: 1.125rem;
  }
}

/*=========================================================================================================
        CTA Section 
        ==========================================================================================================*/
/* Main Section Container */
.cta-section {
  width: 100%;
  background-color: #ffffff; /* White background */
  padding: 4rem 2rem; /* Generous padding top/bottom */
  box-sizing: border-box; /* Ensures padding is included in width */
}

/* Inner Container:
          - This holds the content and has the border
        */
.cta-inner-container {
  max-width: 900px; /* Limit the width of the box */
  margin: 0 auto; /* Center the box */
  background-color: #ffffff;
  border: 2px solid #fb923c; /* orange-400 border */
  border-radius: 1.5rem; /* 24px, rounded-3xl */
  padding: 3rem; /* p-12 */
  text-align: center;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* Headline */
.cta-headline {
  font-size: 2rem; /* ~text-4xl */
  line-height: 1.2;
  font-weight: 800; /* font-extrabold */
  color: #111827; /* text-gray-900 */
  margin: 0 auto 1.5rem auto; 
  /* mb-6 */
  max-width: 700px; /* Constrain headline width */
}

/* Sub-headline */
.cta-subheadline {
  font-size: 1.125rem; /* text-lg */
  color: #374151; /* text-gray-700 */
  margin-bottom: 2.5rem; /* mb-10 */
}

/* Button Container */
.cta-button-container {
  display: flex;
  flex-direction: column; /* Stacks on mobile */
  justify-content: center;
  align-items: center;
  gap: 1rem; /* gap-4 */
}

/* Buttons */
.cta-button {
  display: inline-block;
  text-align: center;
  padding: 0.875rem 2rem; /* py-3.5 px-8 */
  font-weight: 600; /* font-semibold */
  border-radius: 0.5rem; /* rounded-lg */
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  border: 2px solid transparent; /* For consistent sizing */
  font-size: 1rem;
  cursor: pointer;
}

/* Primary Button (Orange) */
.cta-button-primary {
  background-color: #f59e0b; /* yellow-500 / amber-500 */
  color: #000000;
}

.cta-button-primary:hover {
  background-color: #d97706; /* amber-600 */
  box-shadow: 0 4px 15px -3px rgba(245, 158, 11, 0.4);
}

/* Secondary Button (Black) */
.cta-button-secondary {
  background-color: #111827; /* gray-900 */
  color: #ffffff;
}

.cta-button-secondary:hover {
  background-color: #374151; /* gray-700 */
  box-shadow: 0 4px 15px -3px rgba(17, 24, 39, 0.4);
}

/* Responsive Breakpoints */

/* sm: 640px */
@media (min-width: 640px) {
  .cta-button-container {
    flex-direction: row; /* Buttons side-by-side */
  }
  .cta-headline {
    font-size: 3rem; /* ~text-5xl */
  }
}

/* md: 768px */
@media (min-width: 768px) {
  .cta-section {
    padding: 6rem 2rem; /* More vertical padding on desktop */
  }
  .cta-inner-container {
    padding: 4rem; /* p-16 */
  }
  .cta-headline {
    font-size: 3.5rem; /* ~text-6xl */
  }
}