@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background: linear-gradient(#3f51b5, #000);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  width: 350px;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #fdfdfd;
}

.header {
  width: 100%;
  padding: 10px 0;
  background: #f9f9f9;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  position: relative;
}
.header i {
  font-size: 25px;
  position: absolute;
  top: 10px;
  cursor: pointer;
  color: #007aff;
}

.header p {
  color: #007aff;
  text-align: center;
}

.header .fa-bars {
  left: 20px;
}

.header .fa-bell {
  right: 20px;
}

.main-text {
  width: 300px;
  margin: 50px auto 0;
  color: #777;
}

.main-text h2 {
  margin-bottom: 20px;
}

.footer-menu {
  width: 100%;
  position: absolute;
  bottom: -10px;
  padding: 17px 5px;
  background: #f9f9f9;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
}

.footer-menu i {
  font-size: 25px;
  margin: 0 28px;
  cursor: pointer;
  color: #007aff;
}

.swiper-container {
  margin-top: 40px;
  height: 450px;
}

.swiper-wrapper {
  align-items: center;
}

.swiper-slide {
  width: 200px;
  height: 250px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
}
.swiper-slide img {
  margin-top: 30px;
  width: 200px;
  height: 250px;
  border-radius: 7px;
}

.swiper-slide-active {
  transform: scale(1.2);
  transform: 0.4s;
}

.info {
  width: 75%;
  padding: 8px 0;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  bottom: 0;
  text-align: justify;
  border-radius: 0 0 5px 5px;
  margin-bottom: 100px;
}

.info h3 {
  font-size: 15px;
  margin-left: 7px;
  font-weight: 100;
  color: #fff;
}

.info p {
  font-size: 10px;
  margin-left: 7px;
  color: #fff;
}

.info a {
  text-decoration: none;
  color: #fff;
  float: right;
  margin-right: 7px;
  margin-top: -28px;
  border: 1px solid #fff;
  border-radius: 20px;
  font-size: 10px;
  padding: 2px;
}

.swiper-pagination {
  bottom: 0px !important;
}