/* 
Copyright © 2024 Kurdscience
All rights reserved.

This code is the intellectual property of Janan and Hakar, the creators of Kurdscience.
Unauthorized copying, modification, or distribution of this code or any of its components is strictly prohibited without prior written permission from the authors.

For inquiries or permissions, please contact Janan and Hakar via the official Kurdscience website.

Thank you for respecting the hard work and creativity that went into developing this project.
*/


/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
  font-family: "Poppins", sans-serif;
}

body {
  background: #15292B !important;
}

body .container {
  max-width: 1100px;
}

#filter-buttons button {
  border-radius: 3px;
  background: #7782e9;
  border-color: transparent;
  color:#fff ;
 
}
#filterable-cards .card-title:hover {
  background: #000000;
  color: #fff;
}
#filter-buttons button:hover {
  background: #C2703D;
}

#filter-buttons button.active {
  color: #fff;
  background: #6c757d;
}

#filterable-cards .card {
  width: 15rem;
  border: 3px solid rgb(51, 29, 29);
  box-shadow: 0 8px 16px 0 rgb(0, 0, 0), 0 6px 20px 0 rgba(0, 0, 0, 0.991);
  border-radius: 25px;
  color:#091400;
}

#filterable-cards .card.hide {
  display: none;
}

@media (max-width: 600px) {
  #filterable-cards {
    justify-content: center;
  }

  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
}
img {
  border-radius: 22px;
}
.card-title{
  
  display: block;
  width: 140px;
  position: relative;
  margin: 10px auto;
  text-align: center;
  background-color: rgb(121, 118, 118);
  color: #ffffff;
  text-decoration: none;
  padding: 5px 0;
  border-radius: 4px ;
  font-weight: bold;
  

}
.card-text {
  display: block;
  width: 150px;
  position: relative;
  margin: 10px auto;
  text-align: center;
  text-decoration: none;
}

h2 { 
  display: block;
  width: 320px;
  position: relative;
  margin: 10px auto;
  text-align: center;
  background-color: #fff;
  color: #ffffff;
  text-decoration: none;
  padding: 5px 0;
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgb(56, 45, 45), 0 6px 20px 0 rgba(0, 0, 0, 0.991);

}
.home {
  padding: 8px 5px;
  background: none;
  border: 2px solid #fff;
  font-size: 15px;
  color: #131313;
  cursor: pointer;
  display: block;
  width: 100px;
  position: relative;
  margin:  auto;
  text-align: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s;
  border-radius: 12px;
  background-color: #ecd448;
  font-weight: bolder;
  box-shadow: 0 2px 0 2px #000;;
  text-decoration: none;

 }
 
 .home:before {
  content: "";
  position: absolute;
  width: 100px;
  height: 120%;
  background-color: #ff6700;
  transform: skewX(30deg) translate(-150%, -50%);
  transition: all 0.5s;
 }
 
 .home:hover {
  background-color: #4cc9f0;
  color: #fff;
  box-shadow: 0 2px 0 2px #0d3b66;
 }
 
 .home:hover::before {
  transform: skewX(30deg) translate(150%, -50%);
  transition-delay: 0.1s;
 }
 
 .home:active {
  transform: scale(0.9);
 }
 


 .zaxo {
  padding: 8px 5px;
  background: none;
  border: 2px solid #fff;
  font-size: 15px;
  color: #131313;
  cursor: pointer;
  display: inline-block;  /* Changed from block to inline-block */
  width: 100px;
  position: relative;
  margin: 0 10px;  /* Added margin to add spacing between buttons */
  text-align: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s;
  border-radius: 12px;
  background-color: #ec4848;
  color: white;
  font-weight: bolder;
  box-shadow: 0 2px 0 2px #000;
  text-decoration: none;
}

.zaxo:before {
  content: "";
  position: absolute;
  width: 100px;
  height: 120%;
  background-color: #ff6700;
  transform: skewX(30deg) translate(-150%, -50%);
  transition: all 0.5s;
}

.zaxo:hover {
  background-color: #4cc9f0;
  color: #fff;
  box-shadow: 0 2px 0 2px #0d3b66;
}

.zaxo:hover::before {
  transform: skewX(30deg) translate(150%, -50%);
  transition-delay: 0.1s;
}

.zaxo:active {
  transform: scale(0.9);
}

.center-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;    /* Centers vertically */
}