/* --------------------------------------------------------------------------
Author: Turtle Innovations
Version: 1.0

-----------------------------------------------------------------------------

Table of Content
----------------
1. Home Page
  1.1. Hero Section
  1.2. Second Section
  1.3. Third Section
  1.4. Fourth Section
2. Shop Page
  2.1. Video Section
  2.2. Card Section
  2.3. Shop Cast Section
  2.4. Event Section
  2.5. Twitter Section
  2.6. Sixth Section

3. Blog Page
  3.1. First section
  3.2. Second Section
  3.3. Third Section

4. Story Page
  4.1. First Section
  4.2. Second Section

5. Menu Page
  5.1. First Section
  5.2. Second Section

6. Content Page
  6.1. Hero Section
  6.2. First Section
  6.3. Second Section

7. Cast Page
  7.1. Hero Section
  7.2. First Section

8. Cast Detail Page
  8.1. Hero Section
  8.2. First Section

9. Card Rank Page
  9.1. Hero Section
  9.2. First Section

10. Recruit Page
  10.1. Hero Section
  10.2. First Section

11. Footer
12. Media Queries

--------------------------------------------------------------------------*/

body {
  font-family: "Roboto" !important;
   background-color: #140035 ;
}



/* 1. Home Page */

.home-page {
  background-color: #140035 !important;
}

.home-page a {
  color: white;
  z-index: 20;
  position: relative;
  /* text-decoration: none; */
}

.home-page a:hover {
  color: #8300c1;
}

/* 1.1. Hero Section */

.home-page .hero-section {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

/* Hero background video section */

.home-page .hero-section video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.home-page .hero-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("../images/noise.png");
  opacity: 0.5;
  z-index: 1;
}

/*--------------------------------- Ended Hero Section -------------------------------------*/

/* 1.2. Second Section */

.home-page .second-section .image-section p {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.8);
}

.home-page .second-section .image-section .border-1 {
  box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  border: 1.2px solid #32e9e9;
  box-sizing: border-box;
  position: relative;
}

.home-page .second-section .image-section .border-2 {
  box-shadow: 0px 0px 12px #c882ff, inset 0 0 15px #c882ff;
  -moz-box-shadow: 0px 0px 12px #c882ff, inset 0 0 15px #c882ff;
  -webkit-box-shadow: 0px 0px 12px #c882ff, inset 0 0 15px #c882ff;
  border: 1.2px solid #c882ff;
  box-sizing: border-box;
  position: relative;
}

.home-page .second-section .image-section .border-3 {
  box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  border: 1.2px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
}

.home-page .second-section .image-section .border-1::after,
.home-page .second-section .image-section .border-2::after,
.home-page .second-section .image-section .border-3::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0px;
  right: -3px;
  bottom: -3px;
  border: 0.6px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
}

.home-page .second-section .text {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  border: 6.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
}

.home-page .second-section .frame p {
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
}

.home-page .second-section .frame .frame-border0 {
    box-shadow: 0px 0px 12px #ffffff, inset 0 0 15px #ffffff;
    -moz-box-shadow: 0px 0px 12px #ffffff, inset 0 0 15px #ffffff;
    -webkit-box-shadow: 0px 0px 12px #ffffff, inset 0 0 15px #ffffff;
    border: 8.36667px solid #ffffff;
    box-sizing: border-box;
    position: relative;
  }

.home-page .second-section .frame .frame-border1 {
  box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  -moz-box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  -webkit-box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  border: 8.36667px solid #ffd56a;
  box-sizing: border-box;
  position: relative;
}

.home-page .second-section .frame .frame-border2 {
  box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  border: 6.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
}

.home-page .second-section .frame .frame-border3 {
  box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  border: 8.36667px solid #fb37ff;
  box-sizing: border-box;
  position: relative;
}

.home-page .second-section h4 {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }

.home-page .second-section .text:after,
.home-page .second-section .frame .frame-border1::after,
.home-page .second-section .frame .frame-border2::after,
.home-page .second-section .frame .frame-border3::after,
.frame .frame-border4::after,
.frame .frame-border5::after,
.frame .frame-border6::after,
.frame .frame-border8::after,
.frame .frame-border7::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
}

/*--------------------------------- Ended Second Section -------------------------------------*/

/* 1.3. Third Section */
.home-page .third-section h4 {
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.home-page .third-section a {
  background-color: #140035;
}

.home-page .third-section .card {
  width: 318px;
  height: 280px;
  left: 0px;
  top: 0px;
  background: #140035;
  box-shadow: 0px 0px 12px #c882ff, inset 0 0 15px #c882ff;
  -moz-box-shadow: 0px 0px 12px #c882ff, inset 0 0 15px #c882ff;
  -webkit-box-shadow: 0px 0px 12px #c882ff, inset 0 0 15px #c882ff;
  border: 8.36667px solid #c882ff;
  box-sizing: border-box;
  position: relative;
  /* background-image: url(../images/image-22.svg);
  background-repeat: no-repeat;
  background-size: cover; */
}

.home-page .third-section .card::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
}

.home-page .third-section .hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  z-index: 10;
}

.home-page .third-section .hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.home-page .third-section .hovereffect img {
  /* display: block; */
  position: relative;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.home-page .third-section .hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  padding: 10px;
}

.home-page .third-section .hovereffect a.info {
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  margin: 50px 0 0;
  padding: 7px 14px;
}

.home-page .third-section .hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.home-page .third-section .hovereffect:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.home-page .third-section .hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}

.home-page .third-section .hovereffect:hover h2,
.home-page .third-section .hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
}

.home-page .third-section .hovereffect:hover a.info {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

/*--------------------------------- Ended Third Section -------------------------------------*/

/* 1.4. Fourth Section */

.home-page .fourth-section h4 {
  font-weight: bold;
  font-size: 36px;
  line-height: 24px;
  /* identical to box height, or 67% */
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.home-page .fourth-section .heading {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* or 150% */
  color: rgba(255, 255, 255, 0.85);
}

.home-page .fourth-section .text {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  /* or 157% */
  color: rgba(255, 255, 255, 0.45);
}

/* button style */

.home-page .fourth-section button {
  width: 286px;
  height: 38px;
  border-radius: 10px;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 22px;
  /* identical to box height, or 157% */
  text-align: center;
  color: #ffffff;
  background-color: #140035;

  box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -moz-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -webkit-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  border: 8.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
  border-radius: 100px;
  padding-bottom: 26px;
}

.home-page .fourth-section button::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
  border-radius: 100px;
}

/*----------------------------------- Ended Fourth Section -------------------------------------*/

/*--------------------------------- Ended Home Page Section -------------------------------------*/

/* 2. Started Shop Page Section  */

.shop-page {
  background-color: #140035 ;
}

.shop-page a {
  color: white;
  z-index: 20;
  position: relative;
  /* text-decoration: none; */
}

.shop-page a:hover {
  color: #8300c1;
}

/* 2.1. Video Section */

.shop-page .video-section {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

/* Video background video section */

.shop-page .video-section video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.shop-page .video-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

/*--------------------------------- Ended Video Section -------------------------------------*/

/* 2.2. Card Section  */

.shop-page .card-section div {
  position: relative;
}



.shop-page .card-section .menu {
  width: 350px;
  height: 180.67px;
  mix-blend-mode: hard-light;
  border-radius: 10px;
  font-family: Poppins !important;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 72px;
  color: #33e9e9;
 
  border: 6.36667px solid #33e9e9;
  box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -moz-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -webkit-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  box-sizing: border-box;
  position: relative;
}

.shop-page .card-section .menu::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
  border-radius: 10px;
}

.shop-page .card-section .system {
  width: 100%;
  height: 180.67px;
  mix-blend-mode: hard-light;
  border-radius: 10px;
  border: 8.36667px solid #fb37ff;
  box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  box-sizing: border-box;
  position: relative;
}

.shop-page .card-section .system::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
  border-radius: 10px;
}

.shop-page .card-section .system h4 {
  font-family: Poppins !important;
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  line-height: 72px;
  color: #33e9e9;
}

.shop-page .card-section .system .system-text {
  top: unset;
  width: 100% !important;
  font-style: normal;
  font-size: 16px;
  line-height: 72px;
  color: white;
}

.shop-page .card-section .cast-line h4 {
  width: 535px;
  height: 180.67px;
  /* mix-blend-mode: hard-light; */
  border-radius: 10px;
  font-family: Poppins !important;
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  line-height: 72px;
  color: #33e9e9;
box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
    -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
    -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;

  border: 6.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
}

.shop-page .card-section .cast-line h4::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
  border-radius: 10px;
  box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
    -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
    -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
}

.shop-page .card-section .cast-line a:hover {
  color: #fff;
}

/*--------------------------------- Ended Card Section -------------------------------------*/

/* 2.3. Shop Cast Section */

.shop-cast-section .header {
  font-weight: bold;
  font-size: 36px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.shop-cast-section p {
  color: white;
}

.shop-page .shop-cast-section .container {
  box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  border: 6.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
}

.shop-page .shop-cast-section .container::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
  border-radius: 10px;
}

/*--------------------------------- Ended Shop Cast Section -------------------------------------*/

/* 2.4. Event Section */
.shop-page .event-section .header {
  font-weight: bold;
  font-size: 36px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.shop-page .event-section .frame p {
  /* width: 238.67px; */
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 24px;
  color: #ffffff;
}

.shop-page .event-section .frame .frame-border1 {
  box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  -moz-box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  -webkit-box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  border: 8.36667px solid #ffd56a;
  box-sizing: border-box;
  position: relative;
}

.shop-page .event-section .frame .frame-border2 {
  box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  border: 6.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
}

.shop-page .event-section .frame .frame-border3 {
  box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  border: 8.36667px solid #fb37ff;
  box-sizing: border-box;
  position: relative;
}

.shop-page .event-section .frame .frame-border1::after,
.shop-page .event-section .frame .frame-border2::after,
.shop-page .event-section .frame .frame-border3::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
}
/*--------------------------------- Ended Event Section -------------------------------------*/

/* 2.5. Twitter Section */
.shop-page .twitter-section .header {
  font-weight: bold;
  font-size: 36px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.shop-page .twitter-section .card-img {
  position: relative;
  width: 100%;
  /* height: 220px; */
  background-color: white;
  margin-top: 75px;

  box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  border: 6.36667px solid #33e9e9;
  box-sizing: border-box;
}

.shop-page .twitter-section .card-img iframe {
  z-index: 20;
  position: relative;
}

.shop-page .twitter-section .card-img::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
}

.shop-page .twitter-section .img-top {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  z-index: 10;
}

.shop-page .twitter-section .caption {
  position: absolute;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #000000;
  padding-top: 60px;
  left: 46%;
}

.shop-page .twitter-section .text {
  font-weight: 500;
  font-size: 24px;
  line-height: 40px;
  width: 960px;
  color: #000000;
  padding-top: 85px;
}
/*--------------------------------- Ended Twitter Section -------------------------------------*/

/* 2.6. Sixth Section */

.shop-page .sixth-section .map .text-border {
  box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  -moz-box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  -webkit-box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  border: 8.36667px solid #ffd56a;
  box-sizing: border-box;
  position: relative;
}

.shop-page .sixth-section .map .text-border::after {
  content: "";
  /* height: 434px; */
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 100;
}

.shop-page .sixth-section .business {
  mix-blend-mode: hard-light;
  border: 6.36667px solid #fb45ff;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
}

.shop-page .sixth-section .business::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
  border-radius: 10px;
}

.shop-page .sixth-section .business .main-text {
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  text-align: center;
  color: #fb52ff;
}

.shop-page .sixth-section .text {
  font-weight: bold;
  font-size: 19px;
  line-height: 42px;
  color: #fb52ff;
}

.shop-page .sixth-section .img-border img {
  /* height: 491px; */
  /* margin-left: 50px; */
  box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  border: 8.36667px solid #fb37ff;
  box-sizing: border-box;
  position: relative;
}

.shop-page .sixth-section .img-border img::after {
  content: "";
  /* height: 486px; */
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
}

.shop-page .sixth-section .frame p {
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
}

.shop-page .sixth-section h4 {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.shop-page .sixth-section h4.angel-header {
    color: var(--shisha-text-color);
    text-shadow: none;
}

.shop-page .sixth-section .frame .frame-border0 {
    border: 8.36667px solid #ffffff;
    box-shadow: 0px 0px 12px #ffffff, inset 0 0 15px #ffffff;
  -moz-box-shadow: 0px 0px 12px #ffffff, inset 0 0 15px #ffffff;
  -webkit-box-shadow: 0px 0px 12px #ffffff, inset 0 0 15px #ffffff;
    box-sizing: border-box;
    position: relative;
}

.shop-page .sixth-section .frame .frame-border1 {
  box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  -moz-box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  -webkit-box-shadow: 0px 0px 12px #ffab2d, inset 0 0 15px #ffd56a;
  border: 8.36667px solid #ffd56a;
  box-sizing: border-box;
  position: relative;
}

.shop-page .sixth-section .frame .frame-border2 {
  box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -moz-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  -webkit-box-shadow: 0px 0px 12px #32e9e9, inset 0 0 15px #32e9e9;
  border: 6.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
}

.shop-page .sixth-section .frame .frame-border3 {
  box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
  border: 8.36667px solid #fb37ff;
  box-sizing: border-box;
  position: relative;
}

.shop-page .sixth-section .frame .frame-border1::after,
.shop-page .sixth-section .frame .frame-border2::after,
.shop-page .sixth-section .frame .frame-border3::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
}
/*--------------------------------- Ended Sixth Section -------------------------------------*/

/*--------------------------------- Ended Shop Page Section -------------------------------------*/

/* 3. Blog Page */

.blog-page {
  background-color: #140035 !important;
}

.blog-page a {
  color: white;
  z-index: 20;
  position: relative;
  /* text-decoration: none; */
}

.blog-page a:hover {
  color: #8300c1;
}

/* 3.1. First Section */
.blog-page .first-section {
  height: 250px;
}
.blog-page .first-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

/*--------------------------------- Ended First Section -------------------------------------*/

/* 3.2. Second Section */
.blog-page .second-section form p {
  font-weight: bold;
  font-size: 18px;
  line-height: 21px;
  /* identical to box height */
  /* Gray 6 */
  color: #f2f2f2;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.blog-page .second-section input {
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* identical to box height, or 150% */
  color: #9150d2;
  background-color: rgba(20, 0, 53, 0.5);
  box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.blog-page .second-section form button {
  width: 142px;
  background: #140035 !important;
  border-radius: 10px;
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;

  box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -moz-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -webkit-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  border: 8.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 26px;
}

.blog-page .second-section form button::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
  border-radius: 10px;
}

.blog-page .second-section .card-section {
  mix-blend-mode: hard-light;
  box-shadow: 0px 0px 12px #c882ff, inset 0 0 15px #c882ff;
  -moz-box-shadow: 0px 0px 12px #c882ff, inset 0 0 15px #c882ff;
  -webkit-box-shadow: 0px 0px 12px #c882ff, inset 0 0 15px #c882ff;
  border: 8.36667px solid #c882ff;
  box-sizing: border-box;
  position: relative;
  box-sizing: border-box;
}

.blog-page .second-section .card-section::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
}

.blog-page .second-section .card-section strong {
  font-weight: 500;
  font-size: 24px;
  line-height: 24px;
  /* identical to box height, or 100% */
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.blog-page .second-section .card-section p {
  font-weight: normal;
  font-size: 24px;
  line-height: 30px;
  width: 407.5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/*--------------------------------- Ended Second Section -------------------------------------*/

/* 3.3. Third Section */

.blog-page .third-section h4 {
  font-weight: bold;
  font-size: 36px;
  line-height: 24px;
  /* identical to box height, or 67% */
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.blog-page .third-section .heading {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  /* or 150% */
  color: rgba(255, 255, 255, 0.85);
}

.blog-page .third-section .text {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  /* or 157% */
  color: rgba(255, 255, 255, 0.45);
}

/* button style */

.blog-page .third-section button {
  width: 286px;
  height: 38px;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 22px;
  /* identical to box height, or 157% */
  text-align: center;
  color: #ffffff;
  background-color: #140035;

  box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -moz-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -webkit-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  border: 8.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 26px;
  border-radius: 100px;
}

.blog-page .third-section button::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
  border-radius: 100px;
}

.blog-page .third-section .text-border {
  mix-blend-mode: hard-light;
  box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -moz-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -webkit-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  border: 8.36667px solid #33e9e9;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 26px;
  width: 1011px;
  /* height: 180px; */
}

.blog-page .third-section .text-border::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
}

.blog-page .third-section .text-border p {
  font-size: 24px;
  line-height: 30px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/*----------------------------------- Ended Third Section -------------------------------------*/

/*--------------------------------- Ended Blog Page -------------------------------------*/

/* 4. Started Story Page */
.story-page a {
  color: white;
  z-index: 20;
  position: relative;
}

.story-page a:hover {
  color: #8300c1;
}

/* 4.1. First Section */
.story-page .first-section {
  height: 250px;
}
.story-page .first-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

/*--------------------------------- Ended First Section -------------------------------------*/

/* 4.2. Second Section */
.story-page .second-section {
  width: 993px;
}

.story-page .second-section p {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 30px;
  color: #fff;
  /* margin: 40px 0px; */
}

h5.footer_logoe img {
    width: 60%;
    margin: 0px auto;
    TEXT-ALIGN: CENTER;
    margin-bottom: 30px;
    padding-top: 5px;
}

.shop_link li {
    margin-bottom: 10px;
}
.shop_link {
    margin-top: 30px;
}

.quick_links li {
    margin-bottom: 10px;
}

.quick_links {
    /* margin-top: 25px; */
    margin-top: 30px;
    /* line-height: 32px; */
}

.quick_links_c3 {
  margin-top: 12px;
}

/*--------------------------------- Ended Second Section -------------------------------------*/

/*--------------------------------- Ended Story Page -------------------------------------*/

/* 5.1. Menu Page */
.menu-page a {
  color: black;
  z-index: 20;
  position: relative;
}

.menu-page a:hover {
  color: #8300c1;
}

/* 5.1. First Section */
.menu-page .first-section {
  height: 250px;
}
.menu-page .first-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

/*--------------------------------- Ended First Section -------------------------------------*/

/* 5.2. Second Section */


.menu-page .second-section h4 {
  font-weight: bold;
  font-size: 36px;
  line-height: 42px;
  text-align: center;
  color: #000000;
}

.menu-page .second-section .header {
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  text-align: center;
  color: #000000;
  padding-bottom: 20px;
}



.menu-page .second-section p {
  font-weight: 300;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  color: rgba(14, 0, 21, 0.7);
}

.menu-page .second-section .price {
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  color: rgba(14, 0, 21, 0.7);
}

/*--------------------------------- Ended Second Section -------------------------------------*/
/*--------------------------------- Ended Menu Page -------------------------------------*/

/* 6. Started Content Page */

.content-page {
  background-color: #140035;
}

/* 6.1. Heor Section */
.content-page .hero-section {
  height: 250px;
}
.content-page .hero-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

/*--------------------------------- Ended Heor Section -------------------------------------*/

/* 6.2. First Section */
.content-page .first-section .box {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 5px;
  border: 2px solid #b78846;
}
/* .content-page .first-section .box:before,
.content-page .first-section .box:after {
  content: "•";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #b78846;
  border: 2px solid #b78846;
  line-height: 12px;
  top: 5px;
  text-align: center;
} */
.content-page .first-section .box:before {
  left: 5px;
}
.content-page .first-section .box:after {
  right: 5px;
}
.content-page .first-section .box .box-inner {
  position: relative;
  border: 2px solid #b78846;
  padding: 40px;
}
.content-page .first-section .box .box-inner:before,
.content-page .first-section .box .box-inner:after {
  content: "•";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #b78846;
  border: 2px solid #b78846;
  line-height: 12px;
  bottom: -2px;
  text-align: center;
}
.content-page .first-section .box .box-inner:before {
  left: -2px;
}
.content-page .first-section .box .box-inner:after {
  right: -2px;
}

.content-page .first-section .box .box-inner hr {
  background-image: url(../images/border.svg);
  background-repeat: no-repeat;
  height: 35px;
}

.content-page .first-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

.content-page .first-section p {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 30px;
  color: white;
  width: 993px;
}

/*--------------------------------- Ended First Section -------------------------------------*/

/* 6.3. Second Section */
.content-page .second-section {
  width: 993px;
}

.content-page .second-section p {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 30px;
  color: white;
  /* margin: 40px 0px; */
}

/*--------------------------------- Ended Second Section -------------------------------------*/

/*--------------------------------- Ended Content Page -------------------------------------*/

/* 7. Started Cast Page */

.cast-page {
  background-color: #140035;
}

/* 7.1. Heor Section */
.cast-page .hero-section {
  height: 250px;
}
.cast-page .hero-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

/*--------------------------------- Ended Heor Section -------------------------------------*/

/* 7.2. First Section */
.cast-page .first-section .box {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 5px;
  border: 2px solid #b78846;
}
/* .cast-page .first-section .box:before,
.cast-page .first-section .box:after {
  content: "•";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #b78846;
  border: 2px solid #b78846;
  line-height: 12px;
  top: 5px;
  text-align: center;
} */
.cast-page .first-section .box:before {
  left: 5px;
}
.cast-page .first-section .box:after {
  right: 5px;
}
.cast-page .first-section .box .box-inner {
  position: relative;
  border: 2px solid #b78846;
  padding: 40px;
}
.cast-page .first-section .box .box-inner:before,
.cast-page .first-section .box .box-inner:after {
  content: "•";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #b78846;
  border: 2px solid #b78846;
  line-height: 12px;
  bottom: -2px;
  text-align: center;
}
.cast-page .first-section .box .box-inner:before {
  left: -2px;
}
.cast-page .first-section .box .box-inner:after {
  right: -2px;
}

.cast-page .first-section .box .box-inner hr {
  background-image: url(../images/border.svg);
  background-repeat: no-repeat;
  height: 35px;
}

.cast-page .first-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

.cast-page .first-section p {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 30px;
  color: white;
  width: 993px;
}

.cast-page .first-section .hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  z-index: 10;
}

.cast-page .first-section .hovereffect .overlay {
  width: 100%;
  /* height: 100%; */
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.cast-page .first-section .hovereffect img {
  /* display: block; */
  position: relative;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

.cast-page .first-section .hovereffect a {
  color: #fff;
}

.cast-page .first-section .hovereffect h2 {
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  position: relative;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  padding: 10px;
  margin-bottom: unset;
}

.cast-page .first-section .hovereffect:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.cast-page .first-section .hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}

.cast-page .first-section .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
}

/*--------------------------------- Ended First Section -------------------------------------*/

/*--------------------------------- Ended Cast Page -------------------------------------*/

/* 8. Started Cast Detail Page */

.cast-detail-page {
  background-color: #140035;
}

/* 8.1. Heor Section */
.cast-detail-page .hero-section {
  height: 250px;
}
.cast-detail-page .hero-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

/*--------------------------------- Ended Heor Section -------------------------------------*/

/* 8.2. First Section */
.cast-detail-page .first-section .box {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 5px;
  border: 2px solid #b78846;
}
.cast-detail-page .first-section .box:before {
  left: 5px;
}
.cast-detail-page .first-section .box:after {
  right: 5px;
}
.cast-detail-page .first-section .box .box-inner {
  position: relative;
  border: 2px solid #b78846;
  padding: 40px;
}
.cast-detail-page .first-section .box .box-inner:before,
.cast-detail-page .first-section .box .box-inner:after {
  content: "•";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: #b78846;
  border: 2px solid #b78846;
  line-height: 12px;
  bottom: -2px;
  text-align: center;
}
.cast-detail-page .first-section .box .box-inner:before {
  left: -2px;
}
.cast-detail-page .first-section .box .box-inner:after {
  right: -2px;
}

.cast-detail-page .first-section .box .box-inner hr {
  background-image: url(../images/border.svg);
  background-repeat: no-repeat;
  height: 35px;
  margin-left: 25% !important;
  margin-right: 25% !important;
}

.cast-detail-page .first-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

.cast-detail-page .first-section p {
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 30px;
  color: white;
}

/*--------------------------------- Ended First Section -------------------------------------*/

/*--------------------------------- Ended Cast Detail Page -------------------------------------*/

/* 9. Started Card Rank Page */
.card-rank-page {
  background-color: #140035;
}

.card-rank-page a {
  color: white;
  z-index: 20;
  position: relative;
}

.card-rank-page a:hover {
  color: #8300c1;
}

/* 9.1. Hero Section */
.card-rank-page .hero-section {
  height: 250px;
}
.card-rank-page .hero-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

/*--------------------------------- Ended Hero Section -------------------------------------*/

/* 9.2. First Section */

.card-rank-page .first-section p {
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.8);
  /* margin: 40px 0px; */
}

/*--------------------------------- Ended First Section -------------------------------------*/

/*--------------------------------- Ended Card Rank Page -------------------------------------*/

/* 10. Recruit Page */

/* 9.1. Hero Section */
.recruit-page .hero-section {
  height: 250px;
}
.recruit-page .hero-section h4 {
  font-style: normal;
  font-weight: bold;
  font-size: 48px;
  line-height: 56px;
  /* identical to box height, or 117% */
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
}

/*--------------------------------- Ended Hero Section -------------------------------------*/

/* 9.2. First Section */
.recruit-page .first-section {
  background-color: #140035;
}

.recruit-page .first-section p {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 35px;
  color: rgba(255, 255, 255, 0.8);
}

.recruit-page .first-section h4 {
  font-weight: bold;
  font-size: 36px;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
/*--------------------------------- Ended First Section -------------------------------------*/

/* 9.3. Second Section */
.recruit-page .second-section h4 {
  font-weight: bold;
  font-size: 30px;
  line-height: 24px;
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.recruit-page .nav-pills .nav-link.active,
.recruit-page .nav-pills .show > .nav-link {
  background-color: rgb(131, 0, 193);
}
/*--------------------------------- Ended Second Section -------------------------------------*/

/*--------------------------------- Ended Recruit Page -------------------------------------*/

/* 11. Started Footer Section  */
.footer {
  background-color: #140035;
  padding: 12px 10px;
}

.footer p {
  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  color: #ffffff;
  margin-bottom: unset !important;
}

.footer p a {
  color: #33e9e9;
}

.footer p a:hover {
  color: #140035;
}
/*--------------------------------- Ended Footer Section -------------------------------------*/

/* 12. Media Queries */
/* Small devices  */
@media only screen and (max-width: 600px) {
  .logo {
    width: 125px !important;
  }

  .home-page .second-section .text {
    font-size: 18px;
    line-height: 27px;
  }

  .home-page .second-section .image-section .ribbon a {
    font-size: 18px !important;
  }
  /* Shop page style */


  .shop-page .card-section h4 {
    width: 335px !important;
  }

  .shop-page .twitter-section .text {
    font-size: 12px;
    line-height: 25px;
    padding-top: 95px;
    padding-left: 17px;
    width: 310px;
  }

  .shop-page .sixth-section .text {
    font-weight: bold;
    font-size: 12px;
    line-height: 25px;
    color: rgba(255, 255, 255, 0.85);
  }

  .shop-page .twitter-section .caption {
    left: 39%;
  }

  .shop-page .twitter-section .card-img iframe {
    width: 315px !important;
  }

  .shop-page .sixth-section .img-border img {
    /* height: 439px; */
    /* margin-left: 50px; */
    box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    border: 8.36667px solid #fb37ff;
    box-sizing: border-box;
    position: relative;
  }

  .shop-page .sixth-section .img-border img::after {
    content: "";
    /* height: 434px; */
    position: absolute;
    top: -5px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    border: 3.18333px solid #ffffff;
    box-sizing: border-box;
    filter: blur(1.06111px);
    z-index: 9;
  }

  /* Blog page style */
  .blog-page .first-section {
    height: unset !important;
  }
  .blog-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .blog-page .second-section .card-section {
    width: 100% !important;
       padding: 20px;
  }

  .blog-page .second-section .card-section p {
    width: 100% !important;
    font-size: 12px;
  }

  .blog-page .second-section .card-section-2 {
    height: unset !important;
  }

  .blog-page .second-section .card-section-2 .card-inner {
    width: 100% !important;
  }


.blog-page .second-section .card-section-2 .card-inner p{
    width: 100% !important;
    padding:0px 10px !important;
  }
  
  
  .blog-page .third-section .text-border {
    width: 100% !important;
    padding:10px !important;
  }

  .blog-page .third-section .text-border p {
    font-size: 18px;
  }

  /* Story page style */

  .story-page .second-section {
        width: 100%;
    padding: 0px 25px;
  }

  .story-page .first-section {
    height: unset !important;
  }
  .story-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .story-page .first-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Menu page style */



  .menu-page .first-section {
    height: unset !important;
  }
  .menu-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-27-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .menu-page .first-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Content page style */
  .content-page .first-section p {
        width: 100%;
  }

  .content-page .second-section {
        width: 100%;
  }

  /* Content page style */
  .content-page .first-section p {
        width: 100%;
  }

  .content-page .second-section {
        width: 100%;
  }
  
  
  .content-page .first-section .box .box-inner {
    padding: 10px;
}

  .content-page .hero-section {
    height: unset !important;
  }
  .content-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .content-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Cast page style */
  .cast-page .hero-section {
    height: unset !important;
  }
  .cast-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .cast-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Cast Detail page style */
  .cast-detail-page .hero-section {
    height: unset !important;
  }
  .cast-detail-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .cast-detail-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Card Rank page style */
  .card-rank-page .hero-section {
    height: unset !important;
  }
  .card-rank-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .card-rank-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Recuit page style */
  .recruit-page .hero-section {
    height: unset !important;
  }
  .recruit-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .recruit-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  .recruit-page .first-section h4,
  .recruit-page .second-section h4 {
    line-height: 45px;
  }
}

@media only screen and (max-width: 767px) and (min-width: 601px) {
  .home-page .second-section .text {
    font-size: 12px;
    line-height: 40px;
  }

  .home-page .second-section .image-section .ribbon a {
    font-size: 12px;
  }
  /* Shop page style */


  .shop-page .twitter-section .text {
    font-size: 16px;
    line-height: 31px;
    padding-top: 95px;
    padding-left: 17px;
    width: 445px;
  }

  .shop-page .twitter-section .caption {
    left: 42%;
  }

  .shop-page .sixth-section .text {
    font-size: 12px;
    line-height: 42px;
  }

  .shop-page .twitter-section .card-img iframe {
    width: 480px !important;
  }

  .shop-page .sixth-section .img-border img {
    /* height: 647px;
    margin-left: 50px; */
    box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    border: 8.36667px solid #fb37ff;
    box-sizing: border-box;
    position: relative;
  }

  .shop-page .sixth-section .img-border img::after {
    content: "";
    /* height: 643px; */
    position: absolute;
    top: -5px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    border: 3.18333px solid #ffffff;
    box-sizing: border-box;
    filter: blur(1.06111px);
    z-index: 9;
  }

  /* Blog page first section style */
  .blog-page .first-section {
    height: unset !important;
  }
  .blog-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .blog-page .third-section .text-border p {
    font-size: 24px;
    line-height: 30px;
  }

  .blog-page .third-section .text-border {
    width: 470px;
    /* height: 180px; */
  }

  .blog-page .third-section .text-border p {
    font-size: 18px;
    line-height: 30px;
  }

  .blog-page .second-section .card-section {
    width: 475px !important;
    /* height: 340px !important; */
  }

  .blog-page .second-section .card-section p {
    width: 325px !important;
    font-size: 12px;
  }

  .blog-page .second-section .card-section-2 {
    height: unset !important;
    width: 382px !important;
  }

  .blog-page .second-section .card-section-2 .card-inner {
    width: 100% !important;
  }

  .blog-page .third-section .text-border {
    width: 380px !important;
  }

  .blog-page .third-section .text-border p {
    font-size: 18px;
  }

  /* Story page style */

  .story-page .second-section {
    width: 580px;
  }

  .story-page .first-section {
    height: unset !important;
  }
  .story-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .story-page .first-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Menu page style */



  .menu-page .first-section {
    height: unset !important;
  }
  .menu-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-27-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .menu-page .first-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Content page style */
  .content-page .first-section p {
    width: 445px;
  }

  .content-page .second-section {
    width: 445px;
  }

  .content-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .content-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Cast page style */
  .cast-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .cast-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Cast Detail page style */
  .cast-detail-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .cast-detail-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Card Rank page style */
  .card-rank-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .card-rank-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }

  /* Recuit page style */
  .recruit-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-sm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .recruit-page .hero-section h4 {
    font-size: 34px;
    line-height: 70px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  .home-page .second-section .text {
    font-size: 12x;
    line-height: 40px;
  }

  .home-page .second-section .image-section .ribbon a {
    font-size: 24px;
  }
  /* Shop page style */
 

  .shop-page .twitter-section .text {
    font-size: 16px;
    line-height: 31px;
    padding-top: 95px;
    padding-left: 17px;
    width: 665px;
  }

  .shop-page .twitter-section .caption {
    left: 44%;
  }

  .shop-page .sixth-section .text {
    font-size: 19px;
    line-height: 42px;
  }

  .shop-page .sixth-section .img-border img {
    /* height: 464px; */
    /* margin-left: 50px; */
    box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    border: 8.36667px solid #fb37ff;
    box-sizing: border-box;
    position: relative;
  }

  .shop-page .sixth-section .img-border img::after {
    content: "";
    /* height: 458px; */
    position: absolute;
    top: -5px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    border: 3.18333px solid #ffffff;
    box-sizing: border-box;
    filter: blur(1.06111px);
    z-index: 9;
  }

  /* Blog page first section style */
  .blog-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-md.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .blog-page .third-section .text-border {
    width: 740px;
    /* height: 180px; */
  }

  .blog-page .third-section .text-border p {
    font-size: 22px;
    line-height: 40px;
  }

  .blog-page .second-section .card-section {
    width: 710px !important;
    /* height: 375px !important; */
  }

  .blog-page .second-section .card-section p {
    width: 510px !important;
    font-size: 24px;
    line-height: 40px;
  }

  .blog-page .second-section .card-section-2 {
    height: unset !important;
    width: 382px !important;
  }

  /* Story page style */

  .story-page .second-section {
    width: 740px;
  }

  .story-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-md.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .story-page .first-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Menu page style */



  .menu-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-27-md.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .menu-page .first-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Content page style */
  .content-page .first-section p {
    width: 630px;
  }

  .content-page .second-section {
    width: 630px;
  }

  .content-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-md.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .content-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Cast page style */
  .cast-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-md.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .cast-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Cast Detail page style */
  .cast-detail-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-md.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .cast-detail-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Card Rank page style */
  .card-rank-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-md.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .card-rank-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Recuit page style */
  .recruit-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-md.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .recruit-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  .home-page .second-section .text {
    font-size: 24px;
    line-height: 40px;
  }

  .home-page .second-section .image-section .ribbon a {
    font-size: 24px;
  }
  /* Shop page style */


  .shop-page .twitter-section .text {
    font-size: 22px;
    line-height: 40px;
    padding-top: 85px;
    width: 910px;
  }

  .shop-page .twitter-section .caption {
    left: 46%;
  }

  .shop-page .sixth-section .text {
    font-size: 14px;
    line-height: 30px;
  }

  .shop-page .sixth-section .img-border img {
    /* height: 521px; */
    /* margin-left: 50px; */
    box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    border: 8.36667px solid #fb37ff;
    box-sizing: border-box;
    position: relative;
  }

  .shop-page .sixth-section .img-border img::after {
    content: "";
    /* height: 516px; */
    position: absolute;
    top: -5px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    border: 3.18333px solid #ffffff;
    box-sizing: border-box;
    filter: blur(1.06111px);
    z-index: 9;
  }

  /* Blog page first section style */
  .blog-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-lg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .blog-page .third-section .text-border {
    width: 740px;
    /* height: 180px; */
  }

  .blog-page .third-section .text-border p {
    font-size: 22px;
    line-height: 40px;
  }

  .blog-page .second-section .card-section {
    /* height: 422px !important; */
    width: 445px !important;
  }

  .blog-page .second-section .card-section p {
    width: 407.5px !important;
    font-size: 24px;
    line-height: 40px;
  }

  .blog-page .second-section .card-section-2 {
    height: unset !important;
    width: 450px !important;
  }

  /* Story page style */

  .story-page .second-section {
    width: 870px;
  }

  .story-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-lg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .story-page .first-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Menu page style */

   /* {
    width: 870px;
  } */

  .menu-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-27-lg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .menu-page .first-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Content page style */
  .content-page .first-section p {
    width: 870px;
  }

  .content-page .second-section {
    width: 870px;
  }

  .content-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-lg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .content-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Cast page style */
  .cast-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-lg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .cast-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Cast Detail page style */
  .cast-detail-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-lg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .cast-detail-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Card Rank page style */
  .card-rank-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-lg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .card-rank-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Recuit page style */
  .recruit-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20-lg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .recruit-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  /* Index page */
  .home-page .second-section .text {
    font-size: 24px;
    line-height: 40px;
  }

  .home-page .second-section .image-section .ribbon a {
    font-size: 24px;
  }
  /* Shop page style */
 

  .shop-page .twitter-section .text {
    font-size: 24px;
    line-height: 40px;
    padding-top: 85px;
    width: 960px;
  }

  .shop-page .twitter-section .caption {
    left: 46%;
  }

  .shop-page .sixth-section .text {
    font-size: 19px;
    line-height: 35px;
  }

  .shop-page .sixth-section .img-border img {
    /* height: 491px; */
    /* margin-left: 50px; */
    box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -moz-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    -webkit-box-shadow: 0px 0px 12px #fb37ff, inset 0 0 15px #fb37ff;
    border: 8.36667px solid #fb37ff;
    box-sizing: border-box;
    position: relative;
  }

  .shop-page .sixth-section .img-border img::after {
    content: "";
    /* height: 486px; */
    position: absolute;
    top: -5px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    border: 3.18333px solid #ffffff;
    box-sizing: border-box;
    filter: blur(1.06111px);
    z-index: 9;
  }

  /* Blog page first section style */
  .blog-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .blog-page .third-section .text-border {
    width: 1011px;
    /* height: 180px; */
  }

  .blog-page .third-section .text-border p {
    font-size: 24px;
    line-height: 40px;
  }

  /* Story page style */

  .story-page .second-section {
    width: 993px;
  }

  .story-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .story-page .first-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Menu page style */



  .menu-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .menu-page .first-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Content page style */
  .content-page .first-section p {
    width: 993px;
  }

  .content-page .second-section {
    width: 993px;
  }

  .content-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .content-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Cast page style */
  .cast-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .cast-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Cast Detail page style */
  .cast-detail-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .cast-detail-page .hero-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Card Rank page style */
  .card-rank-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .card-rank-page .first-section h4 {
    font-size: 48px;
    line-height: 56px;
  }

  /* Recuit page style */
  .recruit-page .background-image {
    background-image: linear-gradient(
        0deg,
        rgba(20, 0, 53, 0.3),
        rgba(20, 0, 53, 0.3)
      ),
      url("../images/image-20.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .recruit-page .first-section h4 {
    font-size: 48px;
    line-height: 56px;
  }
}

/*--------------------------------- Ended Media Queries -------------------------------------*/


.slick-slide img {
    width: 100%;
}

/*--------------------------------- 240131 footer edit -------------------------------------*/
@media only screen and (max-width: 992px) and (min-width: 768px){

  .col-lg-4.col-md-6.ex-links.px-md-2.px-0 {
    padding-top: 20px;
  }

}

@media only screen and (min-width: 993px){

  .col-lg-4.col-md-6.ex-links.px-md-2.px-0 {
    padding-top: 10px;
  }

}
/*--------------------------------- 240131 footer edit -------------------------------------*/
.cyber-line{
  min-height: 350px;
  max-height: 350px;
}


.shop-page .card-section .menu-cyber {
  /* width: 350px; */
  height: 180.67px;
  mix-blend-mode: hard-light;
  border-radius: 10px;
  font-family: Poppins !important;
  font-style: normal;
  font-weight: bold;
  font-size: 30px;
  line-height: 72px;
  color: #33e9e9;
 
  border: 6.36667px solid #33e9e9;
  box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -moz-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  -webkit-box-shadow: 0px 0px 12px #33e9e9, inset 0 0 15px #33e9e9;
  box-sizing: border-box;
  position: relative;
}

.shop-page .card-section .menu-cyber::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: -4px;
  bottom: -5px;
  border: 3.18333px solid #ffffff;
  box-sizing: border-box;
  filter: blur(1.06111px);
  z-index: 9;
  border-radius: 10px;
}