/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.4.1780409672
Updated: 2026-06-02 14:14:32
*/

/* ===========================
   WHITE & NAVY COLOR THEME
   =========================== */

:root {
  --navy:       #0d1b3e;
  --navy-mid:   #162552;
  --navy-light: #1e3a6e;
  --white:      #ffffff;
  --off-white:  #f5f7fa;
  --light:      #eef1f7;
  --text:       #0d1b3e;
  --text-muted: #6b7a99;
  --border:     #dde3f0;
  --radius:     12px;
  --shadow:     0 4px 20px rgba(13,27,62,0.10);
  --transition: all 0.28s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Kufi Arabic', sans-serif; color: var(--text); background: var(--white); }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
button { cursor: pointer; border: none; font-family: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section    { padding: 80px 0; }

/* ===== ANNOUNCEMENT BAR ===== */
.announcement-bar {
  background: #071026;
  color: #ffffff;
  height: 38px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  direction: rtl;
}
.announcement-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.announcement-slider {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.announcement-item {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
}
.announcement-item.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 480px) {
  .announcement-item {
    font-size: 0.72rem;
  }
}

/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Logo row — centered above nav */
.header-logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-logo-link {
  display: flex;
  align-items: center;
}

.header-logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
  /* This removes the white/gray background on the dark navy header */
  mix-blend-mode: screen;
  filter: brightness(1.1);
  transition: transform 0.28s ease;
}

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

/* Nav row */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav a {
  color: rgba(255,255,255,0.7);
  font-size: 0.92rem;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
  padding-bottom: 4px;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: var(--transition);
}

.nav a:hover { color: var(--white); }
.nav a:hover::after { width: 100%; }

.header-actions { display: flex !important; gap: 8px !important; align-items: center !important; }
.header-actions .icon-btn { margin: 0 !important; }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.07);
  transition: var(--transition);
  position: relative;
}
.icon-btn:hover { background: rgba(255,255,255,0.15); color: white; }

.cart-dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px;
  background: #e63946;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 90px 0;
  overflow: hidden;
  position: relative;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 400px; height: 400px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
  pointer-events: none;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.hero-text { max-width: 640px; text-align: center; }

.hero-tag {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-title {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 20px;
}

.hero-desc {
  color: rgba(255,255,255,0.65);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 36px;
}

.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: var(--transition);
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--white);
  color: var(--navy);
}
.btn-primary:hover {
  background: var(--off-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,255,255,0.2);
}

.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.3);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: white;
  border-color: rgba(255,255,255,0.6);
}

/* Hero Visual Card */
.hero-visual { flex-shrink: 0; }

.hero-card {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  backdrop-filter: blur(12px);
}

.hero-card-icon { font-size: 2.8rem; }

.hero-card-num {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

.hero-card-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

/* ===== TRUST BAR ===== */
.trust-bar {
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}

.trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 32px;
}

.trust-icon { color: var(--navy); font-size: 1.2rem; display: flex; align-items: center; }

.trust-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.trust-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

/* ===== SECTION HEADER ===== */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}

.section-head h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--navy);
}

.see-all {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy-light);
  padding: 8px 18px;
  border: 2px solid var(--border);
  border-radius: 999px;
  transition: var(--transition);
}
.see-all:hover {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

/* ===== CATEGORIES ===== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cat-card {
  background: var(--light);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}

.cat-card:hover {
  border-color: var(--navy);
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.cat-dark {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}

.cat-icon { font-size: 2.2rem; margin-bottom: 12px; }

.cat-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.cat-dark .cat-name { color: white; }

/* ===== PRODUCTS ===== */
.products-section { background: var(--off-white); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--navy-light);
}

.product-img {
  height: 200px;
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.product-body { padding: 16px; }

.product-cat {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.product-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 14px;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}

.btn-cart {
  padding: 8px 16px;
  background: var(--navy);
  color: white;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  transition: var(--transition);
  display: inline-block;
  text-align: center;
}
.btn-cart:hover {
  background: var(--navy-light);
  transform: translateY(-1px);
}

/* Product card as link */
a.product-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.product-card:hover { color: inherit; }

/* Product image with real img */
.product-img-ipad {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light);
}
.product-img-ipad img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}

/* Color dots on cards */
.product-colors {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--navy);
  padding-top: 64px;
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo {
  font-size: 0.9rem;
  margin-bottom: 18px;
  display: block;
  color: white;
  font-weight: 700;
}

.footer-brand p {
  color: rgba(255,255,255,0.45);
  font-size: 0.87rem;
  line-height: 1.7;
  max-width: 380px;
  text-align: right;
}

.footer-links-col h4 {
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.footer-links-col a,
.footer-links-col span {
  display: block;
  color: rgba(255,255,255,0.45);
  font-size: 0.87rem;
  margin-bottom: 10px;
  transition: var(--transition);
}
.footer-links-col a:hover { color: white; padding-left: 4px; }

.footer-bottom {
  padding: 20px 0;
  color: rgba(255,255,255,0.3);
  font-size: 0.82rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-btns { justify-content: center; }
  .cat-grid, .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .trust-divider { display: none; }
}

@media (max-width: 600px) {
  .nav { display: none; }
  .cat-grid, .products-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero { padding: 60px 0; }
}

/* ====================================================
   HEADER CONTROL STYLING
   ==================================================== */

/* Clean styling on custom header buttons */
.header .icon-btn {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
}

.header .icon-btn svg {
  stroke: rgba(255, 255, 255, 0.8) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.header .icon-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.header .icon-btn:hover svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Clean reset for navigation list and search toggles inside custom header */
.header .nav a {
  text-transform: none !important;
  background: none !important;
  box-shadow: none !important;
}

.header-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}