/* Master custom styles for Tariqak Studio */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&display=swap');

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Jost', sans-serif;
  background-color: #000000;
  color: #ffffff;
  overflow-x: hidden;
}

.text-orange {
  color: #FAA82C !important;
}

.bg-orange {
  background-color: #FAA82C !important;
}

.border-orange {
  border-color: #FAA82C !important;
}

/* Force horizontal layout for Experience Counter Stats Section */
.numbers-grid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 1.5rem !important;
}

.numbers-card {
  flex: 1 1 0% !important;
  position: relative !important;
  padding: 2.5rem 2rem !important;
  border-radius: 1rem !important;
  background-color: transparent !important;
  transition: all 0.3s ease !important;
}

.numbers-card:hover {
  background-color: #221F1F !important;
}

.numbers-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -8px !important;
  width: 100% !important;
  height: 8px !important;
  background-color: #FAA82C !important;
  border-radius: 9999px !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.numbers-card:hover::after {
  opacity: 1 !important;
}

/* Dual Infinite Marquee Slider for Client Showcase */
@keyframes marqueeLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.marquee-container {
  overflow: hidden !important;
  white-space: nowrap !important;
  position: relative !important;
  width: 100% !important;
}

.marquee-track-left {
  display: flex !important;
  width: max-content !important;
  animation: marqueeLeft 25s linear infinite !important;
}

.marquee-track-right {
  display: flex !important;
  width: max-content !important;
  animation: marqueeRight 25s linear infinite !important;
}

.marquee-track-left:hover, .marquee-track-right:hover {
  animation-play-state: paused !important;
}

/* Force Services Grid to 3 columns per row (3x3 grid) */
#services .services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}

#services .service-card {
  border: 2px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 1rem !important;
  padding: 3.5rem 3rem !important;
  transition: all 0.3s ease !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  display: block !important;
}

#services .service-card:hover {
  background-color: #000000 !important;
  color: #FAA82C !important;
}

#services .service-card img {
  width: 5rem !important;
  height: 5rem !important;
  object-fit: contain !important;
  margin-bottom: 1rem !important;
  display: block !important;
  transition: filter 0.3s ease !important;
}

/* Turn black lines of SVG into pure crisp white line artwork on card hover */
#services .service-card:hover img {
  filter: brightness(0) invert(1) !important;
}

/* Hero section illustration positioning */
.hero-illustration {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  transform: translate(15%, 25%) !important;
  max-width: 55vw !important;
  pointer-events: none !important;
}

/* Force Flex Side-by-Side (Row) layout for About, Contact, and Articles */
.split-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.split-col {
  width: 50% !important;
  flex-basis: 50% !important;
  flex: 1 1 50% !important;
}

/* Form 3-column Radio Grid */
/* Header Navigation Override */
header.header {
  background-color: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

header.header nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: static !important;
  height: auto !important;
  width: auto !important;
  transform: none !important;
  background: transparent !important;
  gap: 1.75rem !important;
}

header.header nav a {
  color: #ffffff !important;
  text-decoration: none !important;
}

header.header nav a:hover {
  color: #FAA82C !important;
}

/* Dropdown Menu bridge */
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #000000;
  border: 1px solid #221F1F;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  min-width: 220px;
  z-index: 100;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.8);
}

.nav-item:hover > .sub-menu {
  display: block !important;
}

/* Force 3 Columns per Row Grid for Articles Page */
.articles-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2rem !important;
}