/* Color Variables */
:root {
  --color-white: #fff;
  --color-malibu: #88CEF7;
  --color-coral-red: #F93442;
  --color-apple: #33B540;
  --color-yellow-orange: #FEBB43;
  --color-pumpkin: #FF791C;
  --color-lavender: #CE73D5;
  --color-cerulean: #0f8ed6;
  --color-teal-blue: #074569;
  --color-wild-sand: #F5F5F5;
  --color-mine-shaft: #333333;
  --color-cod-gray: #1A1A1A;
}

:root {
  --box-radius: 20px;
}

/* Social Icon */
[class^="social__icon"] {
  padding-top: 100% !important;
  border-radius: 50% !important;
  background-size: 50% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform 0.3s ease !important, box-shadow 0.3s ease !important, filter 0.3s ease !important, background-color 0.3s ease !important;
}

/* Default Colors */
.social__icon--red { background-color: var(--color-coral-red) !important; }
.social__icon--green { background-color: var(--color-apple) !important; }
.social__icon--yellow { background-color: var(--color-yellow-orange) !important; }
.social__icon--orange { background-color: var(--color-pumpkin) !important; }
.social__icon--purple { background-color: var(--color-lavender) !important; }

/* Hover Effects - Apply Bounce Animation */
.social__icon:hover {
  animation: bounce 0.5s ease !important;
}

/* Hover Effect - Change Background Colors */
.social__icon--red:hover { background-color: var(--color-yellow-orange) !important; }
.social__icon--green:hover { background-color: var(--color-malibu) !important; }
.social__icon--yellow:hover { background-color: var(--color-coral-red) !important; }
.social__icon--orange:hover { background-color: var(--color-lavender) !important; }
.social__icon--purple:hover { background-color: var(--color-cerulean) !important; }

/* Footer */
footer {
  background-color: var(--color-cerulean) !important;
  color: var(--color-white) !important;
  padding: 48px 15px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
}

.footer__link { color: var(--color-wild-sand) !important; text-decoration: none !important; }
.footer__link:not(:last-child) { margin-right: 16px !important; }
.footer__copy { margin-top: 36px !important; }

/* Background Image Swap for GitHub */
.social__icon[data-icon="github"] { background-image: url('image/github.png') !important; }
.social__icon[data-icon="github"]:hover { background-image: url('image/github-hover.png') !important; }

@media screen and (min-width: 1024px) {
  .footer__copy { margin-top: 0 !important; }
}

/* Bounce Animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) !important; }
  40% { transform: translateY(-15px) !important; }
  60% { transform: translateY(-8px) !important; }
}

/* Download Button */
.download-btn {
  display: inline-block !important;
  padding: 15px 30px !important;
  font-size: 1em !important;
  font-weight: bold !important;
  background-color: #0f8ed6 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.download-btn:hover {
  font-size: 1.2em !important;
  color: #ffcc00 !important; /* Schimbă culoarea textului */
  cursor: pointer !important;
  transform: scale(1.1) !important;
}