/* Global Footer */
:root{
  --footer:#3A0C6E;          /* base purple */
  --footer-deeper:#2f095b;
  --ink:#ffffff;
  --muted:#c9b9f4;
  --gap:20px;
}

.tasseer-footer{
  color:var(--ink);
  background:
    url("images/Footer\ \(1\).png") no-repeat, /* light watermark pattern */
    linear-gradient(180deg, var(--footer) 0%, var(--footer-deeper) 100%);
  padding-top:18px;
  font-family:"IBM Plex Sans Arabic", system-ui, sans-serif;
}

.tf-container{
  width:min(1288px,92vw);
  margin-inline:auto;
  display:grid;
  grid-template-columns: 1fr auto; /* left badges, right nav+logo */
  align-items:center;
  gap:var(--gap);
  padding-block:10px 6px;
}

/* right side */
.tf-right{
  display:grid;
  grid-auto-flow: row;
  justify-items:end;
  gap:10px;
  margin-left: 430px;
}
.tf-logo img{
  height:35.02px;
  width:120px;
  display:block;
  margin-left: 440px;
 }

.tf-nav{
  display:flex; gap:22px; flex-wrap:wrap;
}
.tf-nav a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  opacity:.95;
  color: white;
}
.tf-nav a:hover{ opacity:1; text-decoration:underline; }

.tf-social{
  display:flex; gap:12px;
  margin-left: 430px;

}
.tf-social a{
  color:var(--ink);
  width:32px; height:32px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(255, 255, 255, 0.1);
  transition: background .15s ease, transform .15s ease;
}
.tf-social a:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); }

/* left side */
.tf-left{
  display:grid; gap:8px; justify-items:start;
}
.tf-get{ margin:0; color:var(--muted); font-weight:600; }
.tf-badges{ display:flex; gap:10px; }
.tf-badges img{ height:36px; display:block; }

/* copyright */
.tf-copy{
  text-align:center;
  color:var(--muted);
  font-size:14px;
  padding:10px 0 16px;
  border-top:1px solid rgba(255, 255, 255, 0.08);
  margin-top:6px;
}

/* responsive */
@media (max-width: 900px){
  .tf-container{
    grid-template-columns: 1fr;
    justify-items:center;
    text-align:center;
  }
  .tf-right{ justify-items:center; }
  .tf-left{ justify-items:center; }
}