/*=================== Importing Google Font - Roboto, Roboto Condensed ===================*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
   font-family: 'Roboto', sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   background: url("../../images/bg-aimag.jpg") #030728 no-repeat center;
   background-size: cover;
}

.slider-wrapper {
   overflow: hidden;
   max-width: 1200px;
   margin: 0 70px 55px;
}

.intro {
   width: 100%;
   color: #fff;
   padding-bottom: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.intro .aimag-logo {
   text-align: right;
   width: 35%;
}

.intro .sta-logo {
   text-align: left;
   width: 35%;
}

.intro .intro-text {
   text-shadow: 3px 5px 2px #474747;
}

.intro h1 {
   margin: 0 5px 0 5px;
   text-align: center;
   text-transform: uppercase;
}

.intro p {
   margin: 15px 5px 0 5px;
   text-align: center;
}

.swiper .aimag-image,
.swiper .sta-image {
   width: 200px;
   height: 200px;
   border-radius: 50%;
   margin-bottom: 10px;
   border: 3px solid #ffffff;
   padding: 4px;
}

.card-list .card-item {
   color: #fff;
   user-select: none;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   backdrop-filter: blur(2px);
   background: rgba(2, 144, 250, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.5);
}

.card-list .card-item .user-image {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   margin-bottom: 10px;
   border: 3px solid #ffffff;
   padding: 4px;
}

.card-list .card-item .years-name {
   color: #000000;
   text-shadow: 3px 4px 5px #000000;
   font-weight: 500;
   margin: 10px 0 20px;
}

.card-list .card-item a {
   text-decoration: none;
}

.card-list .card-item .view-button {
   font-size: 1.25rem;
   padding: 10px 35px;
   color: #030728;
   border-radius: 6px;
   font-weight: 500;
   cursor: pointer;
   background: #ffffff;
   border: 1px solid transparent;
   transition: 0.3s ease;
}

.card-list .card-item .view-button:hover {
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid #ffffff;
   color: #fff;
}

.slider-wrapper .swiper-pagination-bullet {
   background: #0000ff;
   height: 15px;
   width: 15px;
}

.slider-wrapper .swiper-slide-button {
   color: #ffffff;
   margin-top: -50px;
   transition: 0.3s ease;
}

.slider-wrapper .swiper-slide-button:hover {
   color: #4658ff;
}

@media (max-width: 768px) {
   .swiper .aimag-image,
   .swiper .sta-image {
      display: none;
   }
   .slider-wrapper {
      margin: 0 10px 40px;
   }

   .slider-wrapper .swiper-slide-button {
      display: none;
   }
}