/* ==========================
   SCROLLBAR STYLING
   ========================== */

/* Scrollbar width */
::-webkit-scrollbar {
  width: 15px;
}

/* Scrollbar track */
::-webkit-scrollbar-track {
  background: #800505;
}

/* Scrollbar corner */
::-webkit-scrollbar-corner {
  background: SlateBlue;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: #ffc300;
}

/* Scrollbar thumb hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}


/* ==========================
   FONT DEFINITION
   ========================== */
@font-face {
  font-family: Nafees Nastaleeq;
  src: url("../fonts/SakkalMajalla.ttf");
}

.font_Nastaleeq {
  font-family: Nafees Nastaleeq;
}


/* ==========================
   LINK STYLING
   ========================== */
a:link {
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0;
  padding-bottom: 0;
  font-family: ARIAL;
}

a:visited {
  color: #ffffff;
  font-size: 18px;
  text-decoration: none;
}

a:hover {
  color: #fffb00;
  font-size: 20px;
  text-decoration: none;
}

a:active {
  color: #e9c949;
  font-size: 18px;
  text-decoration: none;
}


/* ==========================
   BUTTON STYLING
   ========================== */
.button {
  width: 330px;
  padding: 8px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  border-radius: 2rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border: solid 3px grey;
  /* Gradient background improved */
  background: linear-gradient(135deg, #0b2a4a 0%, #0f3a5b 50%, #05192d 100%);
}

/* Glossy top overlay */
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  border-radius: 2rem;
  z-index: 1;
}

/* Button hover wave effect */
.button:hover .wave {
  top: -200px;
}

/* Button text styling */
.text {
  position: relative;
  z-index: 2;
  color: #e8e8e8;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Urdu text styling */
.urdu {
  font-family: "Nafees Nastaleeq";
  font-size: 28px;
  direction: rtl;
  color: #fdf6e3;
  -webkit-text-stroke: 0.1px #fdf6e3; /* متن کے اردگرد موٹائی */
}


/* ==========================
   WAVE EFFECT
   ========================== */
.wave {
  width: 330px;
  height: 330px;
  background: #0f3a5b; /* darkened to match button gradient */
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: -118px;
  transition: 0.5s;
}

.wave::before,
.wave::after {
  width: 200%;
  height: 200%;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
}

/* Main wave color matching button gradient */
.wave::before {
  border-radius: 45%;
  background: linear-gradient(135deg, rgba(11, 42, 74, 0.8), rgba(15, 58, 91, 0.6));
  animation: wave 5s linear infinite;
}

/* Darker overlay wave */
.wave::after {
  border-radius: 40%;
  background: linear-gradient(135deg, rgba(5, 25, 45, 0.6), rgba(0, 0, 20, 0.4));
  animation: wave 10s linear infinite;
}

/* Wave animation keyframes */
@keyframes wave {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}


/* ==========================
   BODY STYLING
   ========================== */
/* ==========================
   ROTATING SPACE BACKGROUND
   ========================== */

body {
  background: #000000;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

/* Rotating background layer */

body::before {
  content: "";
  position: fixed;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;

  background-image: url("../images/background.webp");
  background-repeat: repeat;
  background-size: 700px;

  animation: circle 250s linear infinite;

  z-index: -4;
}
/* Twinkling stars layer */

/* body::after {
  content: "";
  position: fixed;
  inset: 0;

  background-image: radial-gradient(white 0.7px, transparent 1px);
  background-size: 4px 4px;

  opacity: 0.35;

  pointer-events: none;

  animation: stars 4s ease-in-out infinite alternate;

  z-index: -2;
} */

/* Stars animation */

@keyframes stars {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 0.4;
  }
}


/* ==========================
   SITE WRAPPER
   ========================== */
#site-wrapper {
  width: 1115px;
  height: 850px;
  position: relative;
  z-index: 5;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  transform-origin: top center;
  display: block;
  text-align: center; /* اس سے بٹن اور ٹیبل سینٹر ہو جائیں گے */
}

/* ==========================
   TABLE STYLING
   ========================== */
table {
  border-spacing: 8px 8px;
  margin: auto;
}


/* ==========================
   SOLAR SYSTEM SECTION
   ========================== */
.solar-system {
  /* position: absolute; */
  margin: auto;
  height: 736px;
  overflow: hidden;
  padding: 50px 0px;
  background-image: url("../images/AalmiMajlis.webp");
  background-size: cover;
}

/* MONOGRAM IMAGE */
.monogram {
  position: absolute;
  top: 20px;
  bottom: 100px;
  left: 360px;
  right: 0;
  width: 80px;
  height: 121px;
  background-image: url("../images/monogram.webp");
  background-size: cover;
}

/* PLANET IMAGES */
.khatmeEnubuwwat {
  position: absolute;
  top: 160px;
  bottom: 0;
  left: 260px;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url("../images/khatm-e-nubuwwat.webp");
  background-size: cover;
  border-radius: 50%;
  box-shadow: -20px -20px 50px 2px #000 inset, 1 1 1px 0.1px #000;
  animation: circle 30s linear infinite;
}

.laulak {
  position: absolute;
  top: 290px;
  bottom: 0;
  left: 220px;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url("../images/laulak.webp");
  background-size: cover;
  border-radius: 50%;
  box-shadow: -20px -20px 50px 2px #000 inset, 1 1 1px 0.1px #000;
  animation: circle 30s linear infinite;
}

.haftRoza {
  position: absolute;
  top: 430px;
  bottom: 0;
  left: 260px;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url("../images/haftRoza.webp");
  background-size: cover;
  border-radius: 50%;
  box-shadow: -20px -20px 50px 2px #000 inset, 1 1 1px 0.1px #000;
  animation: circle 30s linear infinite;
}

.facebook {
  position: absolute;
  top: 520px;
  bottom: 0;
  left: 360px;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url("../images/facebook.webp");
  background-size: cover;
  border-radius: 50%;
  box-shadow: -20px -20px 50px 2px #000 inset, 1 1 1px 0.1px #000;
  animation: circle 30s linear infinite;
}

.emaktaba {
  position: absolute;
  top: 580px;
  bottom: 0;
  left: 490px;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url("../images/emaktaba.webp");
  background-size: cover;
  border-radius: 50%;
  box-shadow: -20px -20px 50px 2px #000 inset, 1 1 1px 0.1px #000;
  animation: circle 30s linear infinite;
}

.siteMap {
  position: absolute;
  top: 580px;
  bottom: 0;
  left: 630px;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url("../images/siteMap.webp");
  background-size: cover;
  border-radius: 50%;
  box-shadow: -20px -20px 50px 2px #000 inset, 1 1 1px 0.1px #000;
  animation: circle 30s linear infinite;
}

.contactUs {
  position: absolute;
  top: 650px;
  bottom: 0;
  left: 920px;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url("../images/contactUs.webp");
  background-size: cover;
  border-radius: 50%;
  box-shadow: -20px -20px 50px 2px #000 inset, 1 1 1px 0.1px #000;
  animation: circle 30s linear infinite;
}

.amtknApps {
  position: absolute;
  top: 651px;
  bottom: 0;
  left: 180px;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url("../images/amtknApps.webp");
  background-size: cover;
  border-radius: 50%;
  box-shadow: -20px -20px 50px 2px #000 inset, 1 1 1px 0.1px #000;
  animation: circle 30s linear infinite;
}

/* MAIN CENTER IMAGES */
#makkah {
  position: absolute;
  width: 500px;
  height: 406px;
  background-image: url("../images/makkah.webp");
  background-size: cover;
  left: 364px;
  top: 120px;
    z-index: 22;
}

#galaxy {
  position: absolute;
  width: 482px;
  height: 482px;
  border-radius: 100%;
background-image: url("../images/galaxy.webp");
  background-size: cover;
  left: 387px;
  top: 86px;
  z-index: -3;
  animation: circle 200s linear infinite;
}

/* TEXT LINE COLOR */
.lakeer {
  color: #6a5ba5;
}

/* ==========================
   CIRCLE ANIMATION
   ========================== */
@keyframes circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}