/*!
 * Start Bootstrap - Agency Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
*{
  margin: 0;
    padding: 0;
}
body {
    overflow-x: hidden;
    font-family: Arial, "microsoft-yahei";
    margin: 0;
    padding: 0;
}

.text-muted {
    color: #000;
}

.text-primary {
    color: #153e67;
}

p {
    font-size: 0.32rem;
    line-height: 1.85;
}

p.large {
    font-size: 16px;
}

p.left{
    text-align: left;
    text-indent: 2em;
}
p.right{
    text-align: right;
}
p.white{
    color: #000;
}
p.white a{color: #c30d23;}
p.f{padding:0;
    margin: 0;
    line-height: 1.5em;
}
a,
a:hover,
a:focus,
a:active,
a.active {
    outline: 0;
}

a {
    color: #153e67;
}

a:hover,
a:focus,
a:active,
a.active {
    color: #153e67;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: Arial,"微软雅黑";
    font-weight: 700;
}

.six_ww_wai{background-color: #fcf8f4; padding: 0.6rem 0px;}
.comdiv{max-width:7.5rem; margin: 0px auto;}
.fj_header{background-image: url(../img/blue_bg.png); background-repeat: no-repeat;background-size: cover; width: 100%; height: 100vh; position: relative; overflow: hidden;}
.com_posi_a{position: absolute;}
.yuncai{width: 100%; bottom: 0px; left: 0px;}
.yuncai1{width: 4.56rem; height: 2.29rem; bottom: 0px; left: -0.9rem;}
.yuncai2{width: 4.17rem; height: 2.21rem; bottom:0; right: -1.3rem;}
.yuncai3{width: 2.24rem; height: 1.65rem; bottom: 0px; right: 1.58px;}
.yuncai4{width: 2.92rem;height: 1.69rem; bottom: 0px; right: 2rem;}
.yuncai5{width: 1.19rem;height: 0.53rem; bottom: 0.99rem; left: 2.49rem;}
.logo{width: 6rem; height: 0.8rem; margin: 0.3rem auto;}
.logo img{width: 100%;}
/*.feiji{bottom: 3rem; left: 0rem;}*/
.bant1{top: 3.24rem; left: 0; text-align:center; width: 100%;opacity: 0; transform: translateY(20px);}
.bant1 img{width: 6.49rem;height: 0.99rem;}
.bant2{width: 3.19rem;height: 1.3rem; top: 5rem; right: 0; text-align:center;opacity: 0; transform: translateY(20px);}
.bant2 img{width: 3.19rem;height: 1.3rem;}
.bant3{width: 3.19rem;height: 1.58rem; top: 8.57rem; left: 0; text-align:center; opacity: 0;transform: translateY(20px);}
.bant3 img{width: 3.19rem;height: 1.58rem;}

.com_padd{padding: 0.8rem 0.3rem;}
.fj_com_title{ margin-bottom: 0.54rem; /*opacity: 0;transform: translateY(20px);*/}
.fj_com_title dt{font-size: 0.54rem; color: #000; font-weight: normal;}
.fj_com_title span{display: inline-block; }
.fj_com_title dd{font-size: 0.35rem; color: #666; padding-top: 0.1rem;}

.gbjsh_p{opacity: 0;transform: translateY(20px);}

.beijin1_wai{background-image: url(../img/bg1.png); background-position: top center; background-size: 100% 100%; position: relative; overflow: hidden; }
.yuansu1{top: 1.8rem; left: -2.1rem; width: 4.99rem; height: 4.99rem; z-index: 0;}
.yuansu2{top: 10.08rem; right: -0.3rem; width: 3.94rem; height: 3.94rem; z-index: 0;}
.yuansu3{top: 10.68rem; right: -0.8rem; width: 4.5rem; height: 1.89rem; z-index: 0;}
.yuansu4{top: 2.58rem; left: 0.3rem; width: 5.12rem; height: 1.99rem; z-index: 0;}
.yuansu5{top: 1.78rem; right: -0.8rem; width: 4.91rem; height: 4.91rem; z-index: 0;}
.yuansu6{top: 3.18rem; left: 0rem; width: 6.5rem; height: 1.74rem; z-index: 0;}
.beijin2_wai{background-image: url(../img/bg2.png); background-position: top center; background-size: 100% 100%; position: relative; overflow: hidden;padding-top: 1.3rem;}
.yuansu11{top: -1.1rem; left: -0.3rem; width: 4.79rem; height: 4.79rem; z-index: 0;}
.yuansu22{top: 0.48rem; right: -0.5rem; width: 4.79rem; height: 2.29rem; z-index: 0;}
.yuansu33{top: 10.68rem; right: -0.8rem; width: 3.51rem; height: 1.73rem; z-index: 0;}
.yuansu44{top: 18.68rem; right: -1.8rem; width: 5.97rem; height: 5.96rem; z-index: 0;}
.yuansu55{top: 20.68rem; right: -0.8rem; width: 3.56rem; height: 1.95rem; z-index: 0;}
.yuansu66{top: 38.68rem; left: -0.9rem; width: 5.9rem; height: 5.9rem; z-index: 0;}
.yuansu77{top: 40.58rem; right: -0.9rem; width: 7.5rem; height: 2rem; z-index: 0;}
.gbjj{padding-left: 0.3rem; padding-right: 0.3rem; padding-top: 0.8rem;}
#six_con{margin-bottom: 5.5rem; opacity: 0;transform: translateY(20px);}
.six_wai{margin-top:1.2rem;padding-bottom: 1.1rem; position: relative; padding-left: 0.3rem; padding-right: 0.3rem;}
.six_wai .swiper-container {
      width: 100%;
      height: 100%;
    }
.six_wai .swiper-wrapper{
  /* 通过改变animation-timing-function 制作弹性切换效果 */
      transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
  }
.six_wai .swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.six_wai .swiper-button-next, .six_wai .swiper-button-prev{
  position: static;
  margin-top: 0px;
  width: 0.6rem;
  height: 0.6rem;
  font-size: 0.4rem;
  background: #0062b2;
      background: linear-gradient(135deg, #0062b2 0%, #1670b9 50%, #72a8d4 100%);
  border-radius: 100%;
  padding: 0.1rem;
  margin:0 0.2rem;
}
.six_wai .swiper-button-next:after, .six_wai .swiper-button-prev:after{
  font-size: 0.3rem;
  color: #fff;
}
.left_right_button{
  display: flex;
  flex-direction: row;
  justify-content: center;
 
}
.six_w{}
.six_w dt img{width: 70%;}
.six_w dd h2{font-size: 0.35rem; font-weight: normal;} 
.six_w dd p{font-size: 0.3rem;}


.twti_wai{position: relative; margin-top:5rem;}
.tw1{top: 0rem; left: 0rem; width: 1.57rem; height: 1.64rem;opacity: 0;transform: translateY(20px);}
.tw2{top: 0.3rem; left: 2.5rem;width: 1.57rem; height: 1.58rem;opacity: 0;transform: translateY(20px);}
.tw3{top: 1.75rem; right: 0rem;width: 1.75rem; height: 1.77rem;opacity: 0;transform: translateY(20px);}
.tw4{top: 3.28rem; right: 1.9rem;width: 0.88rem; height: 1.51rem;opacity: 0;transform: translateY(20px);}
.tw5{top: 3.52rem; left: 1.52rem;width: 1.96rem; height: 1.54rem;opacity: 0;transform: translateY(20px);}
.tw6{top: 5.16rem; left: 0rem;width: 1.94rem; height: 1.42rem;opacity: 0;transform: translateY(20px);}
.tw7{top: 5.36rem; left: 3.13rem;width: 1.12rem; height: 2.02rem;opacity: 0;transform: translateY(20px);}
.tw8{top: 8.86rem; right: 2.43rem;width: 1.61rem; height: 1.65rem;opacity: 0;transform: translateY(20px);}
.tw9{top: 6.6rem; right: 0rem;width: 1.47rem; height: 2.51rem;opacity: 0;transform: translateY(20px);}
.tw10{top: 10.04rem; left: 0rem;width: 1.4rem; height: 2.4rem;opacity: 0;transform: translateY(20px);}
.tw11{top: 11.43rem; left: 1.31rem;width: 2.12rem; height: 2.67rem;opacity: 0;transform: translateY(20px);}
.tw12{top: 11.87rem; right: 0rem;width: 1.91rem; height: 1.78rem;opacity: 0;transform: translateY(20px);}

.tx1{top: 1.9rem; left: 0.3rem; font-size: 0.25rem; color: #b6742f;opacity: 0;transform: translateY(20px); text-align: center;}
.tx2{top: 0.7rem; left: 4.2rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx3{top: 2.25rem; right: 2rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx4{top: 4.28rem; right: 1.2rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx5{top: 3.12rem; left: 1.92rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx6{top: 7.06rem; left: 0.5rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx7{top: 7.66rem; left: 3.03rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx8{top: 8.56rem; right: 4.13rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx9{top: 9.2rem; right: 0.2rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx10{top: 10.64rem; left: 1.6rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx11{top: 13.13rem; left: 2.91rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}
.tx12{top: 10.97rem; right: 0.3rem;opacity: 0;transform: translateY(20px);font-size: 0.25rem; color: #b6742f;text-align: center;}

.twti_bg{padding-left: 0.13rem;   padding-right: 0.33rem;}
.twti_bg img{width: 100%; margin-top: 1.23rem; padding-bottom: 1.17rem; }




.shiping_zong{opacity: 0;transform: translateY(20px);}
.layer_img{ width: 100%; overflow: hidden; margin-bottom: 0.3rem;}
.layer_img_main{ width: auto; height: auto; }
.layer_img_close{ width: 30px; height: 30px; position: absolute; top: 20px; right: 10px; z-index: 101;  cursor: pointer; transition: all .2s ease-out 0s;}
.layer_img_main dl{width: 100%; height: auto; margin: 0px auto;}
.layer_img_main dl dt{ width: 100%; text-align: center; height:auto; position: relative; overflow: hidden;}
.layer_img_main dl dt video{display: block; max-height: 658px; background: #000;}
.xqb_y{width: 100%;cursor: pointer;}



#bzxz{position: relative;margin-top: 1.5rem;}
#bzxz .swiper {
  width: 100%;
  height: 100%;
  padding-bottom: 0.8rem;
   opacity: 0;transform: translateY(20px);
}
#bzxz .swiper-horizontal>.swiper-pagination-bullets, #bzxz .swiper-pagination-bullets.swiper-pagination-horizontal, #bzxz .swiper-pagination-custom, .swiper-pagination-fraction{
  bottom: 0px;
}

#bzxz .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

#bzxz .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jcsp_wai .swiper-slide p{line-height: 1.6; padding-top: 0.2rem;}
.liebiaoyetan .img-centered{margin: 0.2rem auto 0.2rem;}

#gbzhx{position: relative;margin-top: 1.5rem;}
.gbzhx_list{opacity: 0;transform: translateY(20px);}
.gbzhx_list li{list-style: none; margin-bottom: 0.3rem;}
.ggzhx_demo{overflow: hidden;}
.ggzhx_demo dt{width: 40%; float: left;}
.ggzhx_demo dt img{width: 100%;}
.ggzhx_demo dd{width: 60%; float: left;}
.ggzhx_demo dd div{ padding-left: 0.3rem; padding-top: 0.3rem;}
.ggzhx_demo  dd h2{font-size: 0.3rem; font-weight: normal; margin:0; line-height: 1.6; color: #333}
.ggzhx_demo  dd p{font-size: 0.3rem; padding-top: 0.3rem; margin: 0;color: #333}

.rmtjz_list {position: relative; margin-top: 1.8rem;}
.rmtjz_list ul{
      display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.rmtjz_list ul li{list-style: none;}
.rmtjz_demo{}
.rmtjz_demo dt{border-radius: 100%; width: 1.2rem; height: 1.2rem; text-align: center; margin: 0 auto;}
.rmtjz_demo dt img{width: 0.75rem; height: 0.75rem;margin-top: 0.18rem;}
.rmtjz_demo dt.yanse1{
  background-color: #d8ecdd;
}
.rmtjz_demo dt.yanse2{
  background-color: #cedbf5;
}
.rmtjz_demo dt.yanse3{
  background-color: #f5e3d1;
}
.rmtjz_demo dd{font-size: 0.3rem; padding-top: 0.2rem;}

#yshyd{position: relative; margin-top: 4.5rem;}


.footer{background-color: #0062b2; color: #fff; text-align: center; padding: 0.57rem 0; font-size: 0.3rem;}

.jcsp_wai {}
.jcsp_wai .swiper-button-next, .jcsp_wai .swiper-button-prev{
  position: static;
  margin-top: 0px;
  width: 0.6rem;
  height: 0.6rem;
  font-size: 0.4rem;
  background: #0062b2;
      background: linear-gradient(135deg, #0062b2 0%, #1670b9 50%, #72a8d4 100%);
  border-radius: 100%;
  padding: 0.1rem;
  margin:0 0.2rem;
}
.jcsp_wai .swiper-button-next:after, .jcsp_wai .swiper-button-prev:after{
  font-size: 0.3rem;
  color: #fff;
}
.jcsp_wai .left_right_button{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top:0.3rem;
}


.list-inline{font-size: 0.3rem; margin-bottom: 0.4rem; color: #666;}
.list-inline li{display: block;}
.fuzeren p{text-indent: 2em;}
.fuzeren h2{text-align: center; font-size: 0.5rem; font-weight: normal;}
.airplane-container {
    position: absolute;
    width: 100%;
    height: 40vh;
    left: 0px;
    top: 5rem;
    overflow: visible;
}

.feiji {
    position: absolute;
    width: 7.5rem;
    height: 1.93rem;
    z-index: 20;
    /* 初始位置设置为右下角外部 */
    right: -18rem;
    bottom: -18rem;
    /*transform: rotate(225deg);*/ /* 45度角朝向 */
    transform-origin: center;
}

/*.airplane img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0px 0px 8px rgba(50, 250, 250, 0.7));
}*/

.contrail {
    position: absolute;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(100, 200, 255, 0.9) 0%, rgba(200, 230, 255, 0.3) 100%);
    border-radius: 10px;
    transform-origin: left center;
    z-index: 10;
    pointer-events: none;
}

.clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
}

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
}





.bzxz_tan{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-size: cover; z-index: 10;display: none;}
.bz1_bg{background-image:url(../img/bz1_bg.jpg);}
.bzxz_img{ text-align: center; width: 100%; height: 100%;
display: flex;
    flex-direction: column;
    justify-content: center;}
.bzxz_img img{width: 6rem;}
.bzxz_img dd{font-size:0.3rem; color: #fff; padding-top: 0.3rem;}
.guanbi{position: absolute; top: 0.3rem; right: 0.3rem; width: 0.8rem; height: 0.8rem;}
.guanbi img{width: 100%;}

#bzxz .swiper-horizontal>#bzxz .swiper-pagination-bullets .swiper-pagination-bullet, #bzxz .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 0 0.08rem;
}
#bzxz .swiper-pagination-bullet{
    width: 0.15rem;
    height: 0.15rem;
}


.splist_qiehuan{}
.splist_qiehuan li{
  background: linear-gradient(135deg, #bcdaf7 0%, #cde4fa 50%, #eaf3fc 100%);
    color: #333;
    list-style: none;
    font-size: 0.26rem;
    line-height: 1.6;
    padding: 0.3rem 0.15rem;
    margin-bottom: 0.3rem;
    border-radius: 0.5rem;
}
.splist_qiehuan li.activesp{
    background: linear-gradient(135deg, #0062b2 0%, #1670b9 50%, #72a8d4 100%);
    color: #fff;
}
.feijibody{margin-bottom: 0.3rem;margin-top: 0.1rem;}
.feijibody tr td{padding: 0.2rem 0; font-size: 0.3rem; color: #333; }


.portfolio-modal .close-modal {
    position: fixed;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.6rem;
    height: 0.6rem;
    background-color: transparent;
    cursor: pointer;
    background: #e4e4e4;
    color: #000;
    box-shadow: 0 0.1rem 0.5rem rgba(30, 58, 138, 0.2);
    z-index: 100;
    border-radius: 100%;
    padding: 0.1rem;
}
.portfolio-modal .close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 0.4rem;
    margin-left: 0.2rem;
    background-color: #000;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.portfolio-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 0.4rem;
    background-color: #000;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.portfolio-modal .modal-content {
    padding: 0.8rem 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.banggnag{font-size: 0.4rem; margin-bottom: 0.2rem; display: block;}
.modal-body{padding: 0.15rem;}


.erjiliebiao{overflow: hidden; background-image: url(../img/bg2.png); background-position: top center; background-size: 100% 100%; padding: 0 0.2rem;}
.wenwulister{display: flex;
    flex-direction: row;
    flex-wrap: wrap; margin-left: 0; margin-right: 0; margin-top:1.2rem; margin-bottom: 0.8rem;}
.wenwulister li{list-style: none; padding-left: 0.1rem; padding-right: 0.1rem;}
.wenwulister li dl dt{

}
.wenwulister li dl dt img{width:100%;

}
.wenwulister li dl dd{text-align: center; font-size: 0.32rem; padding-top: 0.2rem;}
.fanhuihome{    
  border-color: transparent;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.2rem 0.3rem;
    z-index: 10;
  }
.fanhuihome a{font-size: 0.3rem;
    color: #fff;
    display: block;
    background-image: url(../img/fan.png);
    background-size: 0.3rem 0.3rem;
    background-repeat: no-repeat;
    background-position: 0.1rem 0.02rem;
    padding-left: 0.5rem;}




.button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
}

.button-label {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.shine-button {
  position: relative;
  padding: 0.16rem 1.2rem;
  font-size: 0.28rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  min-width: 200px;
}

.shine-button::before {
  content: '';
  position: absolute;
  height: 250%;
  width: 40px;
  top: 0;
  left: -60px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(45deg) translateY(-35%);
  animation: shine 3s ease infinite;
}

@keyframes shine {
  0% {
    left: -80px;
  }
  40% {
    left: calc(100% + 20px);
  }
  100% {
    left: calc(100% + 20px);
  }
}

.button-ocean {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(102, 126, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-ocean:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(102, 126, 234, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-emerald {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(17, 153, 142, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-emerald:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(17, 153, 142, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-sunset {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(240, 147, 251, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-sunset:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(240, 147, 251, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-deep {
  background: linear-gradient(135deg, #0062b2 0%, #1670b9 50%, #72a8d4 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(30, 58, 138, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-deep:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(30, 58, 138, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-gold {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(247, 151, 30, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-gold:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(247, 151, 30, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.button-chrome {
  background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(45, 62, 80, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.button-chrome:hover {
  background: linear-gradient(135deg, #d5dbdb 0%, #34495e 100%);
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(45, 62, 80, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.button-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(139, 92, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-purple:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(139, 92, 246, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-mint {
  background: linear-gradient(135deg, #2dd4bf 0%, #06b6d4 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(45, 212, 191, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-mint:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(45, 212, 191, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-electric {
  background: linear-gradient(135deg, #32ff32 0%, #65ff65 50%, #98ff98 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(50, 255, 50, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-electric:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(50, 255, 50, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-lavender {
  background: linear-gradient(135deg, #9ca3af 0%, #c084fc 50%, #a78bfa 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(192, 132, 252, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-lavender:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(192, 132, 252, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.button-fire {
  background: linear-gradient(135deg, #ff4500 0%, #ff6347 50%, #ffa500 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(255, 69, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-fire:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(255, 69, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-forest {
  background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
  color: #fff;
  box-shadow: 
    0 10px 30px rgba(19, 78, 94, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button-forest:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 15px 40px rgba(19, 78, 94, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.shine-button:active {
  transform: translateY(-1px);
  transition: transform 0.1s ease;
}

@media (max-width: 768px) {
  .button-collection {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .main-title {
    font-size: 2.5rem;
    letter-spacing: 1px;
  }

  .description {
    font-size: 1.1rem;
  }
}