* {
    margin: 0;
    padding: 0;
}
li{
    list-style:none;
}
a{
    text-decoration:none;
    cursor:pointer;
    color:#222;
}
a:hover{
    text-decoration:none;
}
input[type=text]{
    -webkit-appearance:none;
    -webkit-border-radius:0;
    outline:0;
}
select{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    outline:0;
}
ul{
    margin:0 auto;
    padding:0;
}
img{
    max-width:100%;
}
.clearfix:after{
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
    content:"";}
.clearfix{
    *zoom:1;
}
h1,h2,h3,h4,h5,h6{margin: 0px;padding: 0px;}
.fl{float: left;}
.fr{float: right;}
section{background:#fff;}
body{margin: 0px;padding: 0px;}
.tit{
    width: 100%;
    height: 2rem;
    line-height:2.2rem;
    font-size: 1.25rem;
    background: url('../img/tit.png')no-repeat center;
    background-size:65%;
    color: #323232;
    text-align: center;
    font-weight: bold;
    margin-top: 1rem;
    padding-left:4rem;
    box-sizing: border-box;
}
.tit font{
    font-size: 1.05rem;
    color: #138749;
}
.tit span{
    width: 5.0rem;
    height: 1.65rem;
    background-size: 100%;
    display: block;
    margin: 0px auto;
}
.tit p{
    font-size: 1.05rem;
    color: #323232;
    text-align: center;
    font-weight: bold;
    margin: 0px;
}
.gradient-text{
      /* 1. 定义渐变背景：从左到右，从 #c7ddfc 到 #f7f9ff */
  background-image: linear-gradient(to right, #c7ddfc, #f7f9ff);
  /* 2. 规定背景的绘制区域为文字部分 */
  /* 标准属性 (目前兼容性极好，但为了保险通常加上 -webkit- 前缀) */
  background-clip: text;
  -webkit-background-clip: text;
  /* 3. 将文字本身的颜色设置为透明，从而漏出下方的背景渐变 */
  color: transparent;
  /* 或者使用 -webkit-text-fill-color (推荐，优先级更高且兼容性好) */
  -webkit-text-fill-color: transparent;
}
.ban{
    width:100%;
    height:18.9rem;
    background-image:url('../img/banner.png');
    background-repeat:no-repeat;
    background-size:100%;
    padding-left:0rem;
    box-sizing: border-box;
    line-height: 0.95rem;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}
.one{
    width: 100%;
    margin: 0px auto;
    border-radius:0rem;
    background: url('../img/one-cont.png')no-repeat center;
    background-size:100%;
    margin-top: 0rem;
    background-size: 100%;
    padding-bottom: 1rem;
    box-sizing: border-box;
}
.one h6{
    font-size: .75rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
    margin-top: .25rem;
    float: left;
    width: 100%;
}
.one_text{
    width: 17.25rem;
    height:18.75rem;
    margin:1.15rem 0px 0px 0.75rem;
        background: url('../img/one-center.png')no-repeat center top;
    background-size:105%;
}

.one_text .p1{
    margin:10.5rem 0.5rem 0rem 1rem;
    width:16.0rem;
    line-height:1.25rem;
    font-size:0.7rem;
    color:#323232;
}

.one_btn{
    width: 13.75rem;
    height: 2.5rem;
    background: url('../img/one_btn.png')no-repeat center;
    background-size: 100%;
    font-size: 0.75rem;
    color: #323232;
    text-align: center;
    line-height: 2.5rem;
    margin: 1.25rem 2.5rem;
}
.more_slide{
    display: block;
    margin: 1rem 0px 0px 7rem;
    width: 1.5rem;
    height: 1.5rem;
    background: url('../img/icon-gd.png') no-repeat center;
    background-size: 100%;
    position: relative;
    animation: test;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
@keyframes test {
    0% {
        top: 0px;
    }

    25% {
        top: -5px;
    }

    50% {
        top: -10px;
    }

    75% {
        top: -5px;
    }

    100% {
        top: 0px;
    }
}
.two_slide{
    display: block;
    margin: 1rem 0px 0px 7.9rem;
    width: 1.5rem;
    height: 1.5rem;
    background: url('../img/icon-gd.png') no-repeat center;
    background-size: 100%;
    position: relative;
    animation: test;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
@keyframes test {
    0% {
        top: 0px;
    }

    25% {
        top: -5px;
    }

    50% {
        top: -10px;
    }

    75% {
        top: -5px;
    }

    100% {
        top: 0px;
    }
}
.ym_form{
    background: url('../img/ym_form.png')no-repeat center;
    background-size:105%;
    width: 100%;
    padding: 0.71rem 0rem;
}
.ym_form h3{
    font-size: .9rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
    margin: 0rem 0px 1rem 0px;
}
.ym_form input{
    width: 12.3rem;
    height: 2.1rem;
    padding-left: 0.7rem;
    border: none;
    background: #fff;
    margin: 0rem 2.85rem 0.5rem 2.85rem;
    font-size: .6rem;
    line-height: 2.1rem;
}
.tel_code {
    height: 2.6rem;
}
.ym_form_btn{
    width: 13.1rem;
    height:2.35rem;
    background: url('../img/ym_form_btn.png')no-repeat center;
    margin: .3rem 2.85rem 0rem 2.85rem;
    font-size: .75rem;
    color: #323232;
    text-align: center;
    line-height: 2.35rem;
    background-size: 100%;
}
.two{
    width: 100%;
    margin: auto;
    background: url('../img/two-cont.png')no-repeat center;
    background-size:100%;
}
.two .tit{
        background: url(../img/tit2.png) no-repeat center;
    background-size: 65%;
}
.gradient-text-two{
  background: url('../img/sreen-tit.png')no-repeat center;
  background-size:33%;
  /* 2. 裁剪背景为文字形状 */
  background-clip: text;
  -webkit-background-clip: text;
  /* 3. 文字透明 */
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.two_info{
    padding:10.25rem 0.375rem 0rem 0.375rem;
    width: 17.25rem;
    height:18.75rem;
    margin: 1rem .75rem 0rem;
        background: url('../img/two-center.png')no-repeat center;
    background-size:100%;
    box-sizing:border-box;
}
.two_box{
    margin:0rem 0.2rem 0.25rem 0.2rem ;
    width:8.05rem;
    height:3.0rem;
        background: url('../img/two-icon1.png')no-repeat center;
    background-size:100%;
}
.two_box:nth-child(2){
     margin:0rem 0rem 0.25rem 0rem ;
         background: url('../img/two-icon2.png')no-repeat center;
    background-size:100%;
}
.two_box:nth-child(3){
         background: url('../img/two-icon3.png')no-repeat center;
    background-size:100%;
}
.two_box:nth-child(4){
     margin:0rem 0rem 0.25rem 0rem ;
         background: url('../img/two-icon4.png')no-repeat center;
    background-size:100%;
}
.two_box .p1{
    margin:0.5rem 0.5rem 0rem 0.5rem;
    font-size:0.65rem;
    color: #323232;
    font-weight:500;
    line-height:1rem;
    box-sizing: border-box;
}

.two_btn{
    width: 13.75rem;
    height: 2.5rem;
    background: url('../img/one_btn.png')no-repeat center;
    background-size: 100%;
    font-size: 0.75rem;
    color: #323232;
    text-align: center;
    line-height: 2.5rem;
    margin: 1rem 2.5rem 1.5rem;
}

.three{
    width: 100%;
    margin-top: 0rem;
    padding-top: 0rem;
    background: url('../img/three.png')no-repeat center;
    background-size:100%;
}
.gradient-text-three{
      /* 1. 定义渐变背景：从左到右，从 #c7ddfc 到 #f7f9ff */
  background-image: linear-gradient(to right, #c7ddfc, #fafbff);
  /* 2. 规定背景的绘制区域为文字部分 */
  /* 标准属性 (目前兼容性极好，但为了保险通常加上 -webkit- 前缀) */
  background-clip: text;
  -webkit-background-clip: text;
  /* 3. 将文字本身的颜色设置为透明，从而漏出下方的背景渐变 */
  color: transparent;
  /* 或者使用 -webkit-text-fill-color (推荐，优先级更高且兼容性好) */
  -webkit-text-fill-color: transparent;
}
.three .tit{
    width: 100%;
    height: 2rem;
    line-height:2.2rem;
    font-size: 1.25rem;
    background: url('../img/tit.png')no-repeat center;
    background-size:65%;
    background-position-x:0.5rem;
    color: #323232;
    text-align: center;
    font-weight: bold;
    margin-top: 1.375rem;
    padding-left:4rem;
    box-sizing: border-box;
}
.three_info{
    width: 17.25rem;
    height:19.375rem;
    margin: 1.375rem 0.75rem 0rem;
    background: url('../img/three_info.png')no-repeat center ;
    background-size:100%;
    padding:1.5rem 0rem 0rem 0.5rem;
    box-sizing:border-box;
}
.three_box{
    margin:0rem auto;
    width:16.45rem;
    height:3.625rem;
    background: url('../img/three-icon1.png')no-repeat left;
    background-size:20%;
    padding:0rem 0rem 0rem 4.0rem;
    box-sizing: border-box;
}

.three_box:nth-child(2){
    margin-top:0.7rem;
    background: url('../img/three-icon2.png')no-repeat left;
    background-size:20%;
}
.three_box:nth-child(3){
    margin-top:0.7rem;
    background: url('../img/three-icon3.png')no-repeat left;
    background-size:20%;
}
.three_box:nth-child(3) h3{
        width:9.15rem;
            line-height:1.1rem;
    background: url('../img/three-icon3-span.png')no-repeat left;
    background-size:99%;
}
.three_box:nth-child(4){
    margin-top:0.7rem;
    background: url('../img/three-icon4.png')no-repeat left;
    background-size:20%;
}
.three_box:nth-child(4) h3{
     width:9.15rem;
         line-height:1.1rem;
    background: url('../img/three-icon4-span.png')no-repeat left;
    background-size:99%;
}
.three_box h3{
    width:5.25rem;
    height:1.1rem;
    font-size:0.75rem;
    color:#d11c1d;
    line-height:1.15rem;
    text-align:center;
    background: url('../img/three-icon1-span.png')no-repeat left;
    background-size:99%;

}
.three_box .p1{
    margin-top:0.5rem;
    font-size:0.65rem;
    color:#323232;
    line-height:0.8rem;
}
.three_btn{
    width: 13.75rem;
    height: 2.5rem;
    background: url('../img/one_btn.png')no-repeat center;
    background-size: 100%;
    font-size: 0.75rem;
    color: #323232;
    text-align: center;
    line-height: 2.5rem;
    margin: 1.2rem 2.5rem 1.5rem;
}
.sreen{
    width: 100%;
    padding: 0rem 0px 0rem 0px;
        background: url('../img/sreen.png')no-repeat center;
    background-size: 100%;
}
.sreen .tit{
    background: url(../img/tit2.png) no-repeat center;
    background-size: 65%;
}
.gradient-text-sreen{
      /* 1. 定义渐变背景：从左到右，从 #c7ddfc 到 #f7f9ff */
  background: url('../img/sreen-tit.png')no-repeat center;
  background-size:33%;
  /* 2. 规定背景的绘制区域为文字部分 */
  /* 标准属性 (目前兼容性极好，但为了保险通常加上 -webkit- 前缀) */
  background-clip: text;
  -webkit-background-clip: text;
  /* 3. 将文字本身的颜色设置为透明，从而漏出下方的背景渐变 */
  color: transparent;
  /* 或者使用 -webkit-text-fill-color (推荐，优先级更高且兼容性好) */
  -webkit-text-fill-color: transparent;
}
.sreen_info{
    width: 17.25rem;
    margin: 1rem 0.75rem 0rem;
    box-sizing: border-box;
}
.sreen_box{
    width:17.25rem;
    height:2.0rem;
    background: url('../img/sreen-box.png')no-repeat top;
    background-size:100%;
    box-sizing: border-box;
}


.sreen_box .p1{
    font-size:0.7rem;
    color: #323232;
    font-weight:400;
    line-height:1.9rem;
    text-align:center;
}

.sreen_btn{
    width: 13.625rem;
    height: 2.55rem;
    background: url('../img/one_btn.png')no-repeat center;
    background-size: 100%;
    font-size: 0.75rem;
    color: #323232;
    text-align: center;
    line-height: 2.55rem;
    margin:1.05rem 1.6rem 1.5rem;
}

.four{
    width: 100%;
    margin: auto;
    padding: 1.5rem 0px 0rem 0px;
        background: url('../img/four.png')no-repeat center top;
    background-size: 100%;
    box-sizing: border-box;
}
.four .tit{
    width: 100%;
    height: 2rem;
    line-height:2.2rem;
    font-size: 1.25rem;
    background: url('../img/tit2.png')no-repeat center;
    background-size:65%;
    color: #323232;
    text-align: center;
    font-weight: bold;
    margin-top: 0rem;
    padding-left:4rem;
    box-sizing: border-box;
}
.gradient-text-four{
      /* 1. 定义渐变背景：从左到右，从 #c7ddfc 到 #f7f9ff */
  background: url('../img/sreen-tit.png')no-repeat center;
  background-size:34%;
  /* 2. 规定背景的绘制区域为文字部分 */
  /* 标准属性 (目前兼容性极好，但为了保险通常加上 -webkit- 前缀) */
  background-clip: text;
  -webkit-background-clip: text;
  /* 3. 将文字本身的颜色设置为透明，从而漏出下方的背景渐变 */
  color: transparent;
  /* 或者使用 -webkit-text-fill-color (推荐，优先级更高且兼容性好) */
  -webkit-text-fill-color: transparent;
}
.four_info{
    margin:0.75rem 0.75rem 0.75rem;
    width: 17.25rem;
    padding-top:6.75rem;
    background: url('../img/four_info.png')no-repeat top;
    background-size:100%;

    box-sizing: border-box;
}
.four_box{
    width:3.325rem;
    height:6.6rem;
    color:#fff;
    padding:0.45rem 0.5rem 0rem 1.45rem;
    line-height:0.87rem;
    font-weight:600;
    font-size:0.8rem;
    box-sizing: border-box;
}
.four_box1{
    margin-top:3.25rem;
    width:1.95rem;
    height:6.175rem;
    color:#fff;
    line-height:0.8rem;
    font-weight:600;
    font-size:0.75rem;
    padding:0.75rem 0.5rem 0rem 0.5rem;
    box-sizing: border-box;
}
.four_info_list{
    margin: 0rem 0.275rem 0.75rem;
}
.four_info_list .p1{
    margin-bottom:0.25rem;
    width:16.5rem;
    height:4.25rem;
    font-size:0.65rem;
    line-height:1.1rem;
    color:#323232;
    background: url('../img/four-icon1.png')no-repeat top;
    background-size:100%;
    padding:0rem 0.5rem;
    box-sizing:border-box;
}
.four_info_list .p1:nth-child(2){
    background: url('../img/four-icon2.png')no-repeat top;
    background-size:100%;
}
.four_info_list .p1:nth-child(3){
    background: url('../img/four-icon3.png')no-repeat top;
    background-size:100%;
}
.four_info_list .p1 span{
    margin:0.45rem 0rem 0.1rem 1.875rem;
    display: block;
    font-weight:600;
    font-size:0.75rem;
    color:#2e71a8;
}
.fourtit{
    width:17.25rem;
    height:1.9rem;
    line-height:2rem;
    font-weight:600;
    font-size:0.75rem;
    color:#fff;
    text-align:center;
    background: url('../img/fourtit.png')no-repeat center;
    background-size:100%;
}

.four_info2{
    width: 100%;
    background: url('../img/four_info2.png')no-repeat top;
    background-size:100%;
    margin-top:0rem;
    padding:0rem 0rem 0.09rem 0.25rem;
    box-sizing: border-box;
}
.four_info2 table{
    padding-top:0rem;
}
.four_info2 table tr th{
    font-size:0.55rem;
    color:#fff;
    font-weight:600;
    height:1.5rem;
    padding-top:0rem;
    box-sizing:border-box;
}

.four_info2 table tr td{
    font-size:0.5rem;
        font-weight:600;
    height:1.5rem;
    padding-top:0rem;
    text-align: center;
    box-sizing:border-box;
}
.four_info2 table tr td:nth-child(1){
    color:#323232;
    width:4.25rem;
    text-align: left;
}
.four_info2 table tr td:nth-child(2){
    color:#96262f;
        width:2.9rem;
}
.four_info2 table tr td:nth-child(3){
    color:#323232;
    width:3.5rem;
}
.four_info2 table tr td:nth-child(4){
    color:#323232;
    width:2.75rem;
    margin-right:0.55rem;
}
.four_info2 table tr td:nth-child(5){
    color:#323232;
    width:3rem;
}
.four_bottom{
    width:100%;
    height:2.625rem;
    background: #58101b;
    background-size: 100%;
    padding:0rem 0rem 0rem 0rem;
    box-sizing: border-box;
}
.four_bottom .four_img{
    margin:0.35rem 0.9rem 0rem 0.625rem;

    height: 1.825rem;
    font-size: 0.6rem;
    color: #fff;
    line-height: 0.9rem;
    font-weight:600;
    box-sizing: border-box;
}
 .four_btn{
    width: 13.05rem;
    height: 2.5rem;
    background: url(../img/one_btn.png)no-repeat center;
    background-size: 100%;
    font-size: 0.75rem;
    color: #323232;
    text-align: center;
    line-height: 2.5rem;
    margin:1.125rem 2.5rem 0.5rem;
 }



 .five{
    width: 100%;
    background: url(../img/five.png)no-repeat center;
    background-size: 100%;
    padding: 0rem 0px .9rem 0px;
    box-sizing: border-box;
 }
.five .tit{
    width: 100%;
    height: 2rem;
    line-height: 2.2rem;
    font-size: 1.25rem;
    background: url(../img/tit2.png) no-repeat center;
    background-size: 65%;
    color: #323232;
    text-align: center;
    font-weight: bold;
    margin-top: 1.1rem;
    padding-left: 4rem;
    box-sizing: border-box;
}
 .five_info{
     width: 100%;

 }
    .items1 {
     margin:1.1rem auto 0.625rem;
     width: 100%;
     height:8.775rem;
     background: url(../img/five_img1.png)no-repeat top left;
     background-size: 100%;

    }
    .items2 {
        margin:0rem 0.75rem 0rem 0.75rem;
     width: 3.175rem;
     height: 1.925rem;
     background: url(../img/five_img2.png)no-repeat top left;
     background-size: 100%;
    }
    .items3 {
       margin:0rem 0.75rem 0rem 0.75rem;
     width: 3.175rem;
     height: 1.925rem;
     background: url(../img/five_img3.png)no-repeat top left;
     background-size: 100%;
    }
    .items4{
       margin:0rem 0.75rem 0rem 0.75rem;
     width: 3.175rem;
     height: 1.925rem;
     background: url(../img/five_img4.png)no-repeat top left;
     background-size: 100%;
    }
    .items5 {
       margin:0rem 0.75rem 0rem 0.75rem;
     width: 3.175rem;
     height: 1.925rem;
     background: url(../img/five_img5.png)no-repeat top left;
     background-size: 100%;
    }

 .five_btn{
    width: 13.625rem;
    height: 2.55rem;
    background: url(../img/one_btn.png)no-repeat center;
    background-size: 100%;
    font-size: 0.75rem;
    color: #fff;
    text-align: center;
    line-height: 2.55rem;
    margin:0.25rem 1.6rem 1.25rem 1.6rem;
 }

 .six{
    width: 100%;
    padding: 1.375rem 0px 2.025rem 0px;
    background: url('../img/six.png')no-repeat center top;
    background-size: 100%;
    box-sizing: border-box;
 }
.six .tit{
    width: 100%;
    height: 2rem;
    line-height:2.2rem;
    font-size: 1.25rem;
    background: url('../img/tit.png')no-repeat center;
    background-size:65%;
    color: #323232;
    text-align: center;
    font-weight: bold;
    margin-top: 0rem;
    padding-left:4rem;
    box-sizing: border-box;
}
.gradient-text-six{
      /* 1. 定义渐变背景：从左到右，从 #c7ddfc 到 #f7f9ff */
      background-image: linear-gradient(to right, #c7ddfc, #fafbff);
  background-size:33%;
  /* 2. 规定背景的绘制区域为文字部分 */
  /* 标准属性 (目前兼容性极好，但为了保险通常加上 -webkit- 前缀) */
  background-clip: text;
  -webkit-background-clip: text;
  /* 3. 将文字本身的颜色设置为透明，从而漏出下方的背景渐变 */
  color: transparent;
  /* 或者使用 -webkit-text-fill-color (推荐，优先级更高且兼容性好) */
  -webkit-text-fill-color: transparent;
}
 .six_info{
     width: 17.25rem;
     height: 21.875rem;
     margin:1.2rem 0.75rem 0px 0.75rem;
     background: url('../img/six_info.png')no-repeat center top;
     position: relative;
     background-size: 100%;
 }
 .six_box{
    margin:1.375rem 0rem 0rem 0.35rem;
         width: 16.5rem;
     height: 21.875rem;
      background: url('../img/six-box.png')no-repeat center top;
     position: relative;
     background-size: 100%;
 }
 .six_info_list {
    font-size: .6rem;
    color: #fff;
    line-height: .95rem;
    position: absolute;
}
.six_list1 {
    left: 0.6rem;
    top: 1.5rem;
}
.six_list2 {
    left: 5.5rem;
    top: 1.5rem;
}
.six_list3 {
    left: 11.4rem;
    top: 1.5rem;
}
.six_list4 {
    left: 11rem;
    top: 6.6rem;
}
.six_list5 {
    left: 1.8rem;
    top: 6.6rem;
}
.six_list6 {
    left:.7rem;
    top: 11.1rem;
}
.six_list7{
    left: 5.5rem;
    top: 11.1rem;
}
.six_list8{
    left: 11.75rem;
    top: 11.1rem;
}
.six_list9{
    position: absolute;
    left:4.925rem;
    top: 16.425rem;
}


.six_btn{
    width: 7.125rem;
    height: 2.625rem;
    font-size: .75rem;
    color: #323232;
    text-align: center;
    line-height: 2.5rem;
    background: url('../img/six-btn.png')no-repeat center;

    background-size: 100%;
}

.subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        .project-tabs {
    margin-top: 0.75rem;
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            gap: 15px;
        }

        .tab-btn {
            width:5.275rem;
            height:1.8rem;
    line-height: 1.8rem;
            font-size: 0.9rem;
            background-color: #eeeeee;
            border: none;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            color: #323232;

        }

        .tab-btn:hover {
            background-color: #d1d7dc;
            transform: translateY(-2px);
        }

        .tab-btn.active {
            background: url('../img/tab-btn.png')no-repeat center;
            color: white;

        }

        .project-content {
            margin:0 auto;
            width:17.25rem;
            border-radius: 12px;
            min-height: 400px;
            transition: opacity 0.3s ease;
   	 box-sizing: border-box;
        }

        .project {
            display: none;
            animation: fadeIn 0.5s ease forwards;
	 width:17.25rem;
            height:20.5rem;
           padding-top:1rem;
     	box-sizing: border-box;
        }

        .project:nth-child(1){
 background: url('../img/tab-icon1.png')no-repeat center;
        }
        .project:nth-child(2){
  background: url('../img/tab-icon2.png')no-repeat center;
        }
        .project:nth-child(3){
   background: url('../img/tab-icon3.png')no-repeat center;
        }
        .project.active {
            display: block;
        }
        .project .p1{
            margin:0.5rem 0.25rem 0rem 0.625rem;
            font-size:0.65rem;
            color:#323232;
            line-height:1rem;
        }
        #project3 .p1{
            margin:0.5rem 0.25rem 0.5rem 0.625rem;
        }
        .project h3{
            margin:0.45rem 0.25rem 0.275rem 0.625rem;
            font-size:0.7rem;
            color:#323232;
        }
        .project .p2{
            float: left;
            width:7.25rem;
            margin:0rem 0rem 0.15rem 0.625rem;
            font-size:0.625rem;
            color:#323232;
        }
         .project .p3{
            margin:0rem 0rem 0.25rem 0.75rem;

            width:15.75rem;
            height:1.85rem;
            line-height:1.85rem;
            font-size:0.65rem;
            color:#323232;
         background: url('../img/five-icon1.png')no-repeat center;
         background-size:100%;
        }
        .project .p3 img{
         margin:0rem 0.25rem 0.1rem 0.25rem;

        }
        .project .p3 font{
            display: inline-block;
            width:14.5rem;
    font-size: 0.6rem;
        }
        .project-title {
            color: #0775c9;
            font-size: 1.05rem;
            text-align:center;
            margin-top:0.625rem;

        }
        #project1 img:nth-child(8){
            width:15.7rem;
            margin:0.5rem 0rem 0rem 0.75rem;
        }
        #project1 img:nth-child(9){
width: 7.75rem;
            margin:0rem 0rem 0rem 0.75rem;
        }
 #project1 img:nth-child(10){
width: 7.65rem;
            margin:0rem 0rem 0rem 0rem;
        }
        #project2 img:nth-child(4){
            width:15.0rem;
            margin:0.25rem 0rem 0rem 1rem;
        }
        #project2 img:nth-child(5){
            width:15.0rem;
            margin:0rem 0rem 0rem 1rem;
        }
        #project2 .p1{
            margin:0.5rem 0.9rem 0rem 1rem;
        }
         #project3 .p3:nth-child(3){
            line-height: 0.9rem;
         }
          #project3 .p3:nth-child(3) img{
            margin: 0rem 0.25rem 0.9rem 0.25rem;
          }
          #project3 img:nth-child(6){
            width:4.75rem;
            margin: 0.625rem 0.35rem 0rem 0.75rem;
          }
          #project3 img:nth-child(7){
            width:4.75rem;
            margin: 0.625rem 0.35rem 0rem 0rem;
          }
#project3 img:nth-child(8){
            width:4.75rem;
         
          }
        .project-image {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .project-text{
            margin:0rem auto 0rem;
            width:6.25rem;
            height:1.1rem;
            line-height:1.1rem;
           color: #f8e6c7;
font-weight:700;
            font-size: 0.75rem;
text-align:center;
              background: url('../img/tab-text.png') no-repeat center right;
        }
        .project-image img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            display: block;
        }

        .project-info {
            padding: 10px 0;
        }

        .project-info h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.4rem;
        }

        .project-features {
            margin-top: 20px;
        }

        .feature-list {
            list-style-type: none;
            margin-top: 10px;
        }

        .feature-list li {
            padding: 8px 0;
            border-bottom: 1px dashed #e9ecef;
            display: flex;
            align-items: center;
        }

        .feature-list li:before {
            content: "✓";
            color: #28a745;
            font-weight: bold;
            margin-right: 10px;
        }



        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {


            .project-tabs {
                        margin-left: 0.75rem;
        margin-bottom: 0.75rem;
        width: 17.25rem;
                align-items: center;
            }

            .tab-btn {
                width: 100%;
                max-width: 300px;
            }
        }