@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

* {
   font-family: "Rubik", sans-serif !important;
}

body {
   font-family: "Rubik", sans-serif;
   background-image: radial-gradient(
       circle at 50% 0%,
       rgb(54, 55, 74) 16.4%,
       rgb(47, 48, 67) 68.2%,
       rgb(23, 31, 36) 99.1%
   );
   color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   margin: 0;
   direction: rtl;
   text-align: right;
   transition: background-image 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.container {
   width: min-content;
   background-color: #333333;
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 60%;
   border-radius: 16px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
   padding: 2rem;
   text-align: center;
   margin: 12px auto;
   transition: background-image 0.3s ease, background-color 0.3s ease;
}

h1 {
   font-size: 1.75rem;
   margin-bottom: 0.5rem;
   color: #ffffff;
   display: flex;
   align-items: center;
   direction: rtl;
}

#dynamic-quote {
   font-size: 0.7em;
   margin: 8px 0 7px 0;
   text-align: center;
   color: #f2f2f2;
   word-wrap: break-word;
}

/* Simple Button Styles */
button, .button-link {
   background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
   color: black;
   font-weight: 600;
   font-family: "Rubik", sans-serif !important;
   padding: 1rem 1.5rem;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   margin: 0.5rem;
   width: 250px;
   text-align: center;
   font-size: 1.1rem;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}

button:hover, .button-link:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

button:active, .button-link:active {
   transform: translateY(0);
   box-shadow: 0 2px 10px rgba(79, 172, 254, 0.3);
}

/* Green Button Styles */
.green-button {
   background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
   color: black;
   font-weight: 600;
   font-family: "Rubik", sans-serif !important;
   padding: 1rem 1.5rem;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   margin: 0.5rem;
   width: 250px;
   text-align: center;
   font-size: 1.1rem;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
}

.green-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
}

.green-button:active {
   transform: translateY(0);
   box-shadow: 0 2px 10px rgba(17, 153, 142, 0.3);
}

.icons {
   width: 20px;
   height: 20px;
   margin-left: 8px;
   vertical-align: middle;
}

.footer-text {
   font-size: 0.8em;
   margin-top: 2rem;
   text-align: center;
   color: #000000;
   line-height: 1.4;
}
/* Special Tools Button Styles */
.special-tools-button {
   background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
   color: black;
   font-weight: 700 !important;
   font-size: 1.3rem !important;
   padding: 0.8rem 0.7rem !important;
   border-radius: 20px !important;
   border: 3px solid #007eff !important;
   /* box-shadow: 0 0 20px rgba(79, 172, 254, 0.5),
               inset 0 0 15px rgba(255, 255, 255, 0.3) !important; */
   animation: glow 2s infinite alternate !important;
   width: 280px !important;
   margin: 1rem 0.5rem !important;
   position: relative !important;
   overflow: hidden !important;
}

.special-tools-button:hover {
   transform: translateY(-3px) !important;
}

.special-tools-button:active {
   transform: translateY(0) !important;
  }

@keyframes glow {
   from {
      box-shadow: 0 0 20px rgba(79, 172, 254, 0.5),
                  inset 0 0 15px rgba(255, 255, 255, 0.3);
   }
   to {
      box-shadow: 0 0 30px rgba(79, 172, 254, 0.7),
                  inset 0 0 20px rgba(255, 255, 255, 0.4);
   }
}
/* Responsive adjustments for special tools button */
@media (max-width: 1000px) {
   .special-tools-button {
      font-size: 1.2rem !important;
      padding: 0.7rem 0.5rem !important;
      width: 250px !important;
   }
}

@media (max-width: 768px) {
   .special-tools-button {
      font-size: 1ز1rem !important;
      padding: 0.5rem 1.3rem !important;
      width: 191px !important;
   }
}

/* Responsive Design */
@media (max-width: 1000px) {
   .container {
       padding: 1rem;
       max-width: 90%;
   }

   h1 {
       font-size: 1.5rem;
   }

   button, .button-link, .green-button {
       font-size: 1rem;
       padding: 0.8rem 1.2rem;
       width: 220px;
   }
}

@media (max-width: 768px) {
   .container {
       padding: 0.5rem;
  max-width: min-content;
   }

   button, .button-link, .green-button {
       width: 200px;
       font-size: 0.95rem;
   }
}

input[type="number"]#inputs {
   width: 60%;
   padding: 0.5rem;
   margin: 0.5rem;
   font-family: "Rubik", sans-serif;
   border: 1px solid #ccc;
   border-radius: 8px;
   font-size: 1rem;
   color: #333;
   background-color: #f9f9f9;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   outline: none;
   transition: box-shadow 0.3s ease;
   justify-content: center;
   align-items: center;
   text-align: center;
}

input[type="number"]#inputs:focus {
   box-shadow: 0 0 8px rgba(58, 150, 255, 0.5);
   border-color: #007bff;
}

/* Gold Button Styles */
.gold-button {
   background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
   color: white;
   font-weight: 600;
   font-family: "Rubik", sans-serif !important;
   padding: 1rem 1.5rem;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   margin: 0.5rem;
   width: 250px;
   text-align: center;
   font-size: 1.1rem;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 4px 15px rgba(247, 151, 30, 0.3);
}

.gold-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(247, 151, 30, 0.4);
}

.gold-button:active {
   transform: translateY(0);
   box-shadow: 0 2px 10px rgba(247, 151, 30, 0.3);
}

@media (max-width: 1000px) {
   .gold-button {
       font-size: 1rem;
       padding: 0.8rem 1.2rem;
       width: 220px;
   }
}

@media (max-width: 768px) {
   .gold-button {
       width: 200px;
       font-size: 0.95rem;
   }
}
/* Update button styles to work with gradients */
.button-link, button {
   background-size: 200% 200%;
   background-position: center;
   transition: all 0.3s ease;
}

.button-link:hover, button:hover {
   background-position: 100% 100%;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}