@font-face {
	font-family: 'Conv_DINCondensedC';
	src: url('../font/DINCondensedC.eot');
	src: local('☺'), url('../font/DINCondensedC.woff') format('woff'), url('../font/DINCondensedC.ttf') format('truetype'), url('../font/DINCondensedC.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
   margin: 0;
   padding: 0;
   outline: 0;
}

ul,
ol {
   list-style: none;
}

a {
   text-decoration: none;
   display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
li,
ul {
   margin: 0;
   padding: 0;
}


:root {
   --brand: #dc143c;
   --subclr: #fff;
   --cl1: #444;
   --ff1: "Yu Gothic UI", sans-serif;
}
.dropdown:hover .dropdown-menu {
   display: block;
}

body{
   font-family: var(--ff1);
   color: #f1f1f1;
}
section{
   padding: 20px 0;
}
/* common css end */
.navbar{
        background-color: #fff;
}
.bg-gray {
    background: #000;
}
.line {
    margin: 0;
    padding: 0;
}
.x12 {
    width: 100%;
        margin: 0px auto;
    text-align: center;
}
/* =========

/* owl-carousel轮播插件 */
.owl-carousel .owl-dots{position:absolute;top:50%;padding:0;text-align:left;width:20px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
.owl-carousel .owl-dots .owl-dot{display:inline-block;position:relative;vertical-align:middle}
.owl-carousel .owl-dots .owl-dot span{width:8px;height:8px;margin:0 5px;border-radius:50%;background:#d3d3d3;display:inline-block;text-align:center;-webkit-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s}
.owl-carousel .owl-dots .owl-dot.active span{width:16px;height:8px;background:#000;border-radius:20px}
.owl-carousel .owl-nav i{font-size:23px;color:#fff}
.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{background:#000;width:42px;height:42px;line-height:42px;-webkit-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;position:absolute;text-align:center;border-radius:50%;opacity:0}
.owl-carousel .owl-nav .owl-prev{background:#000;left:20px;right:auto}
.owl-carousel .owl-nav .owl-prev i{position:absolute;left: 8px;}
.owl-carousel .owl-nav .owl-next{right:20px}
.owl-carousel .owl-nav .owl-next i{position:absolute;right:8px}
/* owl-carousel轮播插件 */

/* 首页轮播 */
.slides-arrow:hover .owl-nav .owl-next,.slides-arrow:hover .owl-nav .owl-prev{opacity:.3}
.slides-arrow.dot-center .owl-dots{position:relative;top:-30px;padding:0;text-align:center;vertical-align:middle;display:inline-block;width:100%}
/* 首页轮播 */
===============================
               menu part start
  ========================================*/
.main-menu{
   background-color: #000; 
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 999;
}
.main-menu ul li a{
   color:#231815;
   font-size: 18px;
   font-weight: 400;
   line-height: 70px;
}
.main-menu ul li a:hover{
   color:#fff;
}
.active{
   color: var(--brand) !important;
}
.abc{
   background-color: #fff;
   padding: 10px 20px;
   border-radius: 10px;
}
.dropdown-menu{
   background: rgba(255, 255, 255, 0.6);
}

.dropdown-menu li a:hover{
   color: var(--brand);
   background-color: transparent !important;
}
.dropdown-item {
  line-height: 40px !important;
}
/* ========================================
               menu part end
  ========================================*/


/* ========================================
               banner part start
  ========================================*/
#banner{
   padding-top: 100px;
   padding-bottom: 0 !important;
   position: relative;
   z-index: 1;
}
#banner::after{
   position: absolute;
   content: '';
   background-color: var(--brand);
   /* height: 94.2vh; */
   height: 100%;
   clip-path: polygon(71% 0, 100% 0%, 100% 100%, 24% 100%);
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   opacity: 0.6;
}
#banner::before{
   position: absolute;
   content: '';
   background: rgba(0, 0, 0, 0.637);
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
   opacity: 0.8;
}
.banner-img img{
   width: 100%;
   max-width: 100%;
}
.banner-text{
   /* padding: 230px 0; */
   padding-top: 200px;
}
.event-text h3,
.banner-text h3{
   background-color: rgba(0, 0, 0, 0.8);
   width: 80%;
   padding: 15px 10px;
   border-radius: 30px;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   margin-bottom: 15px;
   text-transform: uppercase;
}
.event-text h3 span,
.banner-text h3 span{
  background: var(--brand);
  padding: 6px 20px;
  border-radius: 30px;
  padding-left: 10px;
}
.banner-text h1{
   font-size: 57px;
   font-weight: 600;
   line-height: 70px;
   margin-bottom: 15px;
}
.banner-text h1 span{
   color: var(--brand);
   /* text-shadow: 1px 1px 2px var(--brand), 0 0 1em #fcfcfc, 0 0 0.1em white; */
   text-shadow: 1px 1px 2px white;
}
.banner-text p{
   font-size: 18px;
   font-weight: 400;
   line-height: 30px;
   margin-bottom: 15px;
}
/* ========================================
               banner part end
  ========================================*/

/* ========================================
               button part start
  ========================================*/
  .button {
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   border: none;
   background: none;
   color: #0f1923;
   cursor: pointer;
   position: relative;
   padding: 8px;
   margin-bottom: 20px;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 14px;
   transition: all .15s ease;
   margin-right: 10px;
 }
 
 .button::before,
 .button::after {
   content: '';
   display: block;
   position: absolute;
   right: 0;
   left: 0;
   height: calc(50% - 5px);
   border: 1px solid #7D8082;
   transition: all .15s ease;
 }
 
 .button::before {
   top: 0;
   border-bottom-width: 0;
 }
 
 .button::after {
   bottom: 0;
   border-top-width: 0;
 }
 
 .button:active,
 .button:focus {
   outline: none;
 }
 
 .button:active::before,
 .button:active::after {
   right: 3px;
   left: 3px;
 }
 
 .button:active::before {
   top: 3px;
 }
 
 .button:active::after {
   bottom: 3px;
 }
 
 .button_lg {
   position: relative;
   display: block;
   padding: 10px 20px;
   color: #fff;
   background-color: var(--brand);
   overflow: hidden;
   box-shadow: inset 0px 0px 0px 1px transparent;
 }
 
 .button_lg::before {
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 2px;
   height: 2px;
   background-color: #0f1923;
 }
 
 .button_lg::after {
   content: '';
   display: block;
   position: absolute;
   right: 0;
   bottom: 0;
   width: 4px;
   height: 4px;
   background-color: #0f1923;
   transition: all .2s ease;
 }
 
 .button_sl {
   display: block;
   position: absolute;
   top: 0;
   bottom: -1px;
   left: -8px;
   width: 0;
   background-color: #ff4655;
   transform: skew(-15deg);
   transition: all .2s ease;
 }
 
 .button_text {
   position: relative;
 }
 .button_text a{
  color: var(--subclr);
 }
 .button:hover {
   color: #0f1923;
 }
 
 .button:hover .button_sl {
   width: calc(100% + 15px);
 }
 
 .button:hover .button_lg::after {
   background-color: #fff;
 }
 .nav-link:focus, .nav-link:hover {
	color: var(--brand) !important;
}
/* ========================================
               button part end
  ========================================*/

/* ========================================
               element part start
  ========================================*/
  #element{
   background-color: transparent;
  background-image: linear-gradient(180deg, #000 0%, #000 100%);
  }
  .element-item {
    text-align: center;
  }

.element-item img{
  width: 80px;
  height: 80px;
}
.element-text h3{
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  padding-top: 10px;
}
.element-text p{
  font-size: 14px;
  color: #fff;
  padding-top: 5px;
}
.element-content{
  padding: 50px 0;
  background: #000;
  border-radius: 10px;
}
/* ========================================
               element part end
  ========================================*/

/* ========================================
               about part start
  ========================================*/
  #contact,
  #gallery,
  #gallery-1,
  #vision,
  #about{
    background: #000;
  }

  /* .choose-img img,
  .about-img img{ */
    /* clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); */
    /* clip-path: polygon(45% 0, 100% 0%, 57% 100%, 0% 100%); */
    /* clip-path: polygon(37% 0, 100% 0, 68% 100%, 0% 100%); */
  /* } */
  .vision-text h5,
  .mission-text h5,
  .about-text h5{
    color: var(--brand);
    margin-top: 20px;
    text-transform: uppercase;
  }
  .about-text {
    width: 100%;
  }
  .common-header h2{
    width: 50%;
  }
  .cmn-head h2{
    width: 100% !important; 
  }
  .common-header .cmn-text h2 {
    width: 100% !important;
  }
.cmn-text{
    width: 100%;
    text-align: center;
}
  .vision-text h2,
  .mission-text h2,
  .common-header h2,
  .about-text h2{
    font-weight: 700;
    font-size: 40px;
    margin-top: 20px;
    line-height: 1.2;
    text-transform: uppercase !important;
  }
  .vision-text h2 span ,
  .mission-text h2 span ,
  .common-header h2 span ,
  .choose-text h2 span ,
  .about-text h2 span {
    color: var(--brand);
    text-shadow: 1px 1px 2px var(--subclr);
    
  }
  .about-text p{
    color: #fff;
    margin-top: 20px;
    opacity: .8;
  }




 /* Base styles (for larger devices like desktops) */
.about-section {
  position: relative;
  padding: 30px 0 10px;
}

.about-section .sec-title {
  margin-bottom: 45px;
}

.about-section .content-column {
  position: relative;
  margin-bottom: 50px;
}

.about-section .content-column .inner-column {
  position: relative;
  padding-left: 30px;
}

.about-section .text {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 26px;
  color: #848484;
}

.about-section .btn-box a {
  padding: 15px 50px;
}

.about-section .image-column .inner-column {
  position: relative;
  padding-left: 80px;
}

.about-section .image-column .inner-column .author-desc {
	position: absolute;
	bottom: -40px;
	background: var(--brand);
	padding: 10px 15px;
	left: 110px;
	width: calc(100% - 145px);
	border-radius: 10px;
}

.about-section .image-column .image-1 img {
	box-shadow: 0 30px 50px rgba(8,13,62,.15);
	border-radius: 10px;
}
/* Media queries for smaller devices */

/* For large tablets (768px and above) */
@media screen and (max-width: 992px) {
  .about-section {
      padding: 100px 0 50px;
  }

  .about-section .content-column .inner-column {
      padding-left: 0;
  }

  .about-section .image-column .inner-column {
      padding-left: 0;
  }
}

/* For medium devices (576px to 767px) */
@media screen and (max-width: 767px) {
  .about-section {
      padding: 80px 0 40px;
  }

  .about-section .content-column {
      margin-bottom: 40px;
  }

  .about-section .content-column .inner-column {
      padding-left: 20px;
  }

  .about-section .text {
      font-size: 14px;
      line-height: 24px;
  }

  .about-section .btn-box a {
      padding: 12px 30px;
  }

  .about-section .image-column .inner-column .author-desc {
      padding: 8px 10px;
      width: calc(100% - 100px);
      left: 50px;
  }
}

/* For small devices (max-width: 576px) */
@media screen and (max-width: 576px) {
  .about-section {
      padding: 60px 0 30px;
  }

  .sec-title h2 {
      font-size: 28px;
  }

  .about-section .content-column {
      margin-bottom: 30px;
  }

  .about-section .content-column .inner-column {
      padding-left: 0;
  }

  .about-section .text {
      font-size: 14px;
      line-height: 22px;
  }

  .about-section .btn-box a {
      padding: 10px 25px;
  }

  .about-section .image-column .inner-column .author-desc {
      padding: 5px 8px;
      left: 40px;
      width: calc(100% - 80px);
  }

  .about-section .image-column .image-1 img {
      box-shadow: none;
  }
}

/* Extra small devices (max-width: 400px) */
@media screen and (max-width: 400px) {
  .sec-title h2 {
      font-size: 24px;
  }

  .about-section .btn-box a {
      padding: 8px 20px;
  }

  .about-section .image-column .inner-column .author-desc {
      left: 20px;
      width: calc(100% - 50px);
  }

  .about-section .image-column .image-1 img {
      border-radius: 30px;
  }
}
.choose-item{
  background-color: #000;
  padding: 20px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 10px;
}
/* ========================================
               about part end
  ========================================*/

/* ========================================
               choose part start
  ========================================*/
  #mission,
  #testimonials,
  #tournament,
  #event,
  #choose{
   background-color: #000;
  }
  .skills_items{
    margin-top: 20px;
  }
  .choose-text h2{
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    padding-bottom: 15px;
  }
/* ========================================
               choose part end
  ========================================*/

/* ========================================
               programs part start
  ========================================*/
  #blog,
  #match{
    background: #000;
  }
  #programs,
  #benefits{
    background: #dc173e;
  }
  .common-header h4{
    color: var(--brand);
    font-weight: 700;
    font-size: 20px;
  }
  .tournament-card,
  .programs-card{
    background: #000;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  }
  .programs-img img{
    border-radius: 10px 10px 0 0;
  }
  
  .tournament-text,
  .programs-text{
    padding: 20px;
  }
  .blog-text h4,
  .tournament-text h4,
  .programs-text h4{
    font-weight: 700;
    font-size: 16px;
    color: var(--subclr);
    text-transform: uppercase;
  }
  .blog-text a,
  .tournament-text a,
  .programs-text a{
    color: var(--brand);
    font-weight: 700;
    font-size: 15px;
    padding-top: 10px;
  }
  .blog-text a i,
  .tournament-text a i,
  .programs-text a i{
    padding-left: 5px;
    opacity: 0;
  }
  .blog-text a:hover i,
  .tournament-text a:hover i,
  .programs-text a:hover i{
    opacity: 1;
    padding-left: 7px;
    color: #fff;
    transition: all 0.5s;
  }
  .tournament-content,
  .programs-content{
  }
/* ========================================
               programs part end
  ========================================*/

/* ========================================
               event part start
  ========================================*/
  #event{
    padding-bottom: 0 !important;
  }
  .event-text{
    padding: 140px 0;
  }
  .event-text h2 {
    width: 100% !important;
    font-size: 48px !important;
    letter-spacing: 1px;
  }
  .event-text p{
    margin: 20px 0;
    line-height: 1.8;
    opacity: .8;
  }
  .benefits-img img{
    border-radius: 15px 15px 0 0 !important;
  }
  .event-text h5{
    color: var(--brand);
    margin: 20px 0;
    font-weight: 700;
    font-size: 25px;
    text-shadow: 1px 1px 2px #959595;
  }
  .location h6 i{
    color: var(--brand);
    padding-right: 10px;
    font-size: 30px;
  }
  .location h6{
    font-weight: 600;
    font-size: 20px;
    margin: 20px 0;
  }
  .benefits-card{
    background: #000;
    border-radius: 15px;
  }
  .benefits-text{
    padding: 20px;
  }
  .benefits-text h4{
    font-weight: 700;
    font-size: 25px;
    color: var(--subclr);
    text-transform: uppercase;
  }
  .benefits-text p{
    margin: 10px 0;
    line-height: 1.8;
    opacity: .8;
  }
  .benefits{
    margin-top: 80px;
  }
/* ========================================
               event part end
  ========================================*/

/* ========================================
            player-join part start
  ========================================*/
  #subscribe,
  #player-join{
    position: relative;
    z-index: 1;
  }
  #subscribe::after,
  #player-join::after{
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    z-index: -1;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  }
  .Join-header h4{
    color: var(--brand);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
  }
  .Join-header h2{
    font-size: 40px;
    font-weight: 700;
    width: 50%;
    margin: 0 auto;
    padding-top: 20px;
    letter-spacing: 2px;
    padding-bottom: 40px;
  }

/* ========================================
            player-join part end
  ========================================*/

/* ========================================
            tournament part start
  ========================================*/
  .tournament-img img{
    margin: 0 auto;
    text-align: center !important;
    width: 20% !important;
    height: 50% !important;
  }
  .tournament-text p{
    line-height: 1.3;
    opacity: .8;
    font-weight: 400;
    font-size: 16px;
    padding-top: 10px;
  }
/* ========================================
            tournament part end
  ========================================*/

  
/* ========================================
            match part end
  ========================================*/
  .match-header-text h2{
    width: 100% !important;
  }
  .match-card {
    background: #000;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    padding: 20px;
}

.match-img {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.first-team, .second-team {
    text-align: center;
}

.first-team img, .second-team img {
    max-width: 100px;
    /*! border-radius: 50%; */
}

.vs-text {
    text-align: center;
}

.vs-text h4 {
    font-size: 30px;
    margin: 0;
    font-weight: 700;
    color: var(--subclr);
}

.vs-text h5 {
    font-size: 18px;
    margin: 5px 0;
    color: var(--subclr);
}
.vs-text h5 i{
    color: var(--brand);
}
.vs-text p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
.vs-text p i{
    color: var(--brand);
}

.first-team h4, .second-team h4 {
    color: var(--brand);
    font-weight: 700;
    font-size: 20px;
  margin-top: 20px;
}
.match-content{
  margin-top: 80px;
}
/* ========================================
            match part end
  ========================================*/


/* ========================================
            blog part end
  ========================================*/
  .blog-card{
    background: #000;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  }
  .blog-img img{
    position: relative;
    border-radius: 10px 10px 0 0;
    transition: all linear .3s;
  }
  .blog-img{
    position: relative;
    overflow: hidden;
  }
  .blog-img:hover img{
    transform: scale(1.1) rotate(1deg);
  }
  .blog-text{
    padding: 20px;
    text-align: center;
  }
  .blog-text p{
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    opacity: .8;
    margin-top: 10px;
  }
  .blog-content{
    margin-top: 40px;
  }
/* ========================================
            blog part end
  ========================================*/


/* ========================================
            testimonials part end
  ========================================*/

  .testimonials .slider{
    /* border:1px solid #7e8bb6; */
    max-width: 600px;
    margin: auto;
    text-align: center;
    padding:30px;
    border-radius: 50px;
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
    background: #000;
     }
     .testimonials .slider p{
      color: var(--subclr) !important;
      font-size: 18px;
      line-height: 30px;
      text-align: center;
     }
     .testimonials .slider-indicator{
    text-align: center;
    padding-bottom:30px;
  }
  
  .testimonials .slider-indicator img{
    max-height:80px;
    max-width:80px;
    border-radius:50% 0% 50% 0%;
    display: inline-block;
    margin:0 8px;
    opacity:0.2;
    border:4px solid #fff;
    box-shadow: 0px 8px 15px rgb(9, 4, 4);
    cursor: pointer;
    transition: opacity 1s ease;
  }
  
  .testimonials .slider-indicator img.active{
    opacity:1;
  }
  
  .testimonials .slider p{
    font-size:18px;
    color:#fff;
    word-spacing: 2px;
  }
  
  .testimonials .slider .client-info h3{
    font-weight: bold;
    color:var(--brand);
    font-size: 18px;
    margin:30px 0 10px;
  }
  
  .testimonials .slider .client-info span{
    display: block;
    font-size:16px;
    color: var(--subclr);
  }
  
  .testimonials .slider .slide{
    display: none;
  }
  
  .testimonials .slider .slide.active{
    display: block;
    animation: slide 1s ease;
  }
  
  @keyframes slide{
    0%{
      opacity: 0;
      transform: translateX(-15px);
    }
    100%{
      opacity: 1;
      transform: translateX(0px)
    }
  }
  .pre-title {
    font-weight: 700;
  font-size: 40px;
  margin-top: 20px;
  line-height: 1.2;
  text-transform: uppercase !important;
  padding-top: 100px;
  padding-bottom: 20px;
  }
  .subscribe h2 span,
  .pre-title span{
    color: var(--brand);
    text-shadow: 1px 1px 2px var(--subclr);
  }
  .common-heading p{
    color: var(--subclr);
    font-size: 19px;
    line-height: 1.7;
    margin-top: 10px;
    margin-bottom: 0;
    opacity: .8;
  }
/* ========================================
            testimonials part end
  ========================================*/


/* ========================================
            subscribe part end
  ========================================*/
  .subscribe h2{
    font-weight: 700;
    font-size: 60px;
    line-height: 1.2;
    text-transform: uppercase !important;
    padding-bottom: 20px;
    /*! width: 50% !important; */
  }
  .subscribe form input{
    height: 56px;
    border-radius: 5px;
    padding: 0 20px;
    border: none;
    outline: none;
  }
  
/* ========================================
            subscribe part end
  ========================================*/


/* ========================================
            footer part end
  ========================================*/
.footer-section {
    position: relative;
    background: #000;
}
.single-cta svg{
    font-size: 45px;
}
.cta-text {
    padding-left: 15px;
    display: inline-block;
}
.cta-text h4 {
    color: #444;
    font-size: 20px;
    font-weight: 600;
    /* margin-bottom: 2px; */
}
.cta-text span {
    color: #757575;
    font-size: 15px;
}
.cta-text span a{
    color: #757575;
}
.footer-content {
    position: relative;
    z-index: 2;
}
.footer-pattern img {
    position: absolute;
    top: 0;
    left: 0;
    height: 330px;
    background-size: cover;
    background-position: 100% 100%;
}
.footer-logo {
    margin-bottom: 30px;
}
.navbar-brand:focus, .navbar-brand:hover {
    color: var(--brand) !important;
}
.footer-logo img {
    max-width: 200px;
}
.footer-text p {
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--subclr);
    line-height: 28px;
    opacity: .8;
}
.social-icon{
    margin-top: 30px;
}
.social-icon a {
    color: var(--subclr);
    font-size: 16px;
    margin-right: 15px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 50%;
    text-align: center;
    transition: all .3s ease;
    border: 1px solid #000;
    background-color: #000;
}
.social-icon a:hover{
    background-color: var(--brand);
    color: var(--subclr);
    border-color: var(--brand);
}
.footer-widget-heading h3 {
    color: var(--subclr);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 40px;
    position: relative;
}
.footer-widget-heading h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    height: 2px;
    width: 50px;
    background: var(--brand);
}
.footer-widget ul li {
    /* display: inline-block; */
    float: left;
    width: 50%;
    margin-bottom: 12px;
}
.footer-widget ul li a:hover {
    color: var(--brand);
}
.footer-widget ul li a {
    color: var(--subclr);
    text-transform: capitalize;
    opacity: .8;
}
.subscribe-form {
    position: relative;
    overflow: hidden;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.contact-info p{
  padding-bottom: 20px;
  opacity: .8;
  cursor: pointer;
  transition: all .3s ease;
}
.contact-info p:hover{
  color: var(--brand);
}
.contact-info p i{
  padding-right: 8px;
  font-size: 20px;
}
.copyright-area {
    /* background: #f1f1f1; */
    padding: 25px 0;
    border-top: 5px solid#000;
}
.copyright-text p {
    margin: 0;
    font-size: 14px;
    color: #878787;
}
.copyright-text p a {
    color: var(--brand);
}
.footer-menu li {
    display: inline-block;
    margin-left: 20px;
}
.footer-menu li:hover a {
    color: var(--brand);
}
.footer-menu li a {
    font-size: 14px;
    color: var(--subclr);
    opacity: .8;
}
/* ========================================
            footer part end
  ========================================*/


/* ========================================
            btn_top_bottom part end
  ========================================*/
.btn_top_bottom {
    color: #fff;
    text-align: center;
    background: var(--brand);
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 99999999999;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    padding: 8px;
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}

.btn_top_bottom i p {
    color: var(--subclr);
    font-size: 8px;
    padding-top: 10px;
    letter-spacing: 2px;
}

.btn_top_bottom {
    display: none;
}
/* ========================================
            btn_top_bottom part end
  ========================================*/


/* ========================================
          common-banner part end
  ========================================*/
  #common-banner{
    padding: 100px 0;
    position: relative;
    z-index: 1;
  }
  #common-banner::after{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
  }
  .common-banner-text h4{
    font-size: 40px;
    text-transform: uppercase;
  }
  .common-banner-text a{
    color: var(--subclr);
    font-weight: 400;
    font-size: 20px;
    margin-top: 5px;
  }
  .common-banner-text span {
    color: var(--brand) !important;
    font-weight: 400;
    font-size: 20px;
    
  }
/* ========================================
          common-banner part end
  ========================================*/


/* ========================================
            mission part end
  ========================================*/
  .mission-text,
  .vision-text{
    margin-top: 18%;
  }
  .mission-text p,
  .vision-text p{
    margin-top: 24px;
    font-size: 21px;
    font-weight: 400;
    line-height: 39px;
    opacity: .9;
  }
  .mission-img img,
  .vision-img img{
    border-radius: 10px;
  }
/* ========================================
            mission part end
  ========================================*/
  
/* ========================================
            gallery-1 part start
  ========================================*/
  .image-gallery ul {
    display: flex;
    justify-content: center;
}

.filter_menu ul {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.filter_menu ul li {
    padding: 10px 20px;
    background-color: transparent;
    position: relative;
    margin: 0 10px;
    overflow: hidden;
    cursor: pointer;
    font-weight: 500;
    font-size: 17px;
    border: 1px solid;
    text-transform: uppercase;
    color: var(--brand);
    z-index: 1;
    transition: all linear .5s;
    -webkit-transition: all linear .5s;
    -moz-transition: all linear .5s;
    -ms-transition: all linear .5s;
    -o-transition: all linear .5s;
    border-radius: .3em;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
}

.filter_menu ul li.mixitup-control-active {
    background: var(--brand);
    color: var(--subclr);
}

.filter_menu ul li::before,
.filter_menu ul li::after {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: -1;
    background-color: var(--brand);
    transition: 1s ease;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -ms-transition: 1s ease;
    -o-transition: 1s ease;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.filter_menu ul li::before {
    top: -1em;
    left: -1em;
}

.filter_menu ul li::after {
    left: calc(100% + 1em);
    top: calc(100% + 1em);
}

.filter_menu ul li:hover::before,
.filter_menu ul li:hover::after {
    height: 410px;
    width: 410px;
}

.filter_menu ul li:hover {
    color: var(--subclr);
    border-color: var(--brand);
}

.filter_menu ul li:active {
    filter: brightness(.8);
}


.filter_img {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}

.filter_img .img {
    width: 25%;
    padding: 10px;
}

.filter_img .img img {
    width: 100%;
    max-width: 100%;
    box-shadow: 13px 22px 22px -6px rgba(9, 8, 8, 0.86);
}

.filter_img .img {
    position: relative;
}

.filter_img .overly {
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    right: 10px;
    background: rgba(229, 46, 113, 0.5);
    visibility: 0;
    opacity: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.filter_img .overly i {
    color: var(--subclr);
    font-size: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.filter_img .img:hover .overly {
    visibility: visible;
    opacity: 1;
}

.filter_img .overlay a {
    color: #fff;
    font-size: 40px;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.filter_img .overlay:hover a {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    color: var(--brand);
}
/* ========================================
            gallery-1 part end
  ========================================*/
  
/* ========================================
            gallery-2 part start
  ========================================*/
  .video-last-inner,
.video-btm-inner {
    margin-top: 24px;
}
  .video_img,
  .video-img {
      position: relative;
      /* border: 5px solid var(--brand); */
  }
  .video_img img{
    border-radius: 10px;
    box-shadow: 13px 22px 22px -6px rgba(9, 8, 8, 0.86);
  }
  .video_img .overly,
  .video-img .overly {
      position: absolute;
      left: 50%;
      bottom: 35px;
      transform: translateX(-50%);
  }
  
  .video_img .overly h4,
  .video-img .overly h4 {
      color: var(--brand);
      font-weight: 700;
      font-size: 40px;
  }
  
  .wrapper {
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
  }
  
  /* play wave start */
  
  
  .video-main {
      position: relative;
      display: inline-block;
  }
  
  .video-main i {
  
      font-size: 19px;
      line-height: 35px;
  
  }
  
  .video {
      height: 50px;
      width: 50px;
      line-height: 25px;
      text-align: center;
      border-radius: 100%;
      background: transparent;
      color: #000;
      display: inline-block;
      background: #fff;
      /*! z-index: 999; */
      /*! font-size: 15px; */
  }
  
  @keyframes waves {
      0% {
          -webkit-transform: scale(0.2, 0.2);
          transform: scale(0.2, 0.2);
          opacity: 0;
      }
  
      50% {
          opacity: 0.9;
      }
  
      100% {
          -webkit-transform: scale(0.9, 0.9);
          transform: scale(0.9, 0.9);
          opacity: 0;
      }
  }
  
  /* impotant css */
  .waves {
      position: absolute;
      width: 150px;
      height: 150px;
      background: var(--brand);
      opacity: 0;
      border-radius: 100%;
      right: -50px;
      bottom: -50px;
      z-index: -1;
      -webkit-animation: waves 3s ease-in-out infinite;
      animation: waves 3s ease-in-out infinite;
  }
  
  .wave-1 {
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
  }
  
  .wave-2 {
      -webkit-animation-delay: 1s;
      animation-delay: 1s;
  }
  
  .wave-3 {
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
  }
/* ========================================
            gallery-2 part end
  ========================================*/
  
/* ========================================
            contact part start
  ========================================*/

  
  .contact_us_6 .text-blk {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    line-height: 25px;
  }
  
  .contact_us_6 .responsive-cell-block {
    min-height: 75px;
  }
  
  .contact_us_6 input:focus,
  .contact_us_6 textarea:focus {
    outline-color: initial;
    outline-style: none;
    outline-width: initial;
  }
  
  .contact_us_6 .container-block {
    min-height: 75px;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    display: block;
  }
  
  .contact_us_6 .responsive-container-block {
    min-height: 75px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }
  
  .contact_us_6 .responsive-container-block.big-container {
    padding-top: 10px;
    padding-right: 30px;
    width: 35%;
    padding-bottom: 10px;
    padding-left: 30px;
    background-color: #03a9f4;
    position: absolute;
    height: 950px;
    right: 0px;
  }
  
  .contact_us_6 .responsive-container-block.container {
    position: relative;
    min-height: 75px;
    flex-direction: row;
    z-index: 2;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
    max-width: 1320px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
  }
  
  .contact_us_6 .container-block.form-wrapper {
    background-color: #000;
    max-width: 450px;
    text-align: center;
    padding-top: 50px;
    padding-right: 40px;
    padding-bottom: 50px;
    padding-left: 40px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 7px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    margin-top: 90px;
    margin-right: 0px;
    margin-bottom: 60px;
    margin-left: 0px;
  }
  
  .contact_us_6 .text-blk.contactus-head {
    font-size: 36px;
    line-height: 52px;
    font-weight: 900;
  }
  
  .contact_us_6 .text-blk.contactus-subhead {
    color: #9c9c9c;
    width: 300px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;
    display: none;
  }
  
  .contact_us_6 .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 26px;
    margin-left: 0px;
    min-height: 50px;
  }
  
  .contact_us_6 .input {
    width: 100%;
    height: 50px;
    padding-top: 1px;
    padding-right: 15px;
    padding-bottom: 1px;
    padding-left: 15px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #eeeeee;
    border-right-color: #eeeeee;
    border-bottom-color: #eeeeee;
    border-left-color: #eeeeee;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    font-size: 16px;
    color: black;
    background: transparent;
    border-radius: 5px;
  }
  
  .contact_us_6 .textinput {
    width: 98%;
    min-height: 150px;
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #eeeeee;
    border-right-color: #eeeeee;
    border-bottom-color: #eeeeee;
    border-left-color: #eeeeee;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    font-size: 16px;
    background: transparent;
    border-radius: 5px;
  }
  
  .contact_us_6 .submit-btn {
    width: 98%;
    background-color: #03a9f4;
    height: 60px;
    font-size: 20px;
    font-weight: 700;
    color: white;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: outset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: outset;
    border-top-color: #767676;
    border-right-color: #767676;
    border-bottom-color: #767676;
    border-left-color: #767676;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
  }
  
  .contact_us_6 .form-box {
    z-index: 2;
    margin-top: 0px;
    margin-right: 48px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  
  .contact_us_6 .text-blk.input-title {
    text-align: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-size: 14px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    color: #9c9c9c;
  }
  
  .contact_us_6 ::placeholder {
    color: #dadada;
  }
  
  .contact_us_6 .mob-text {
    display: block;
    text-align: left;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 25px;
    margin-left: 0px;
  }
  
  .contact_us_6 .responsive-cell-block.wk-tab-12.wk-mobile-12.wk-desk-12.wk-ipadp-12 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
  }
  
  .contact_us_6 .text-blk.contactus-subhead.color {
    color: white;
  }
  
  .contact_us_6 .map-box iframe{
    max-width: 800px;
    max-height: 520px;
    width: 100%;
    height: 520px;
    /* background-color: #d9d9d9;
    background-image: url("https://workik-widget-assets.s3.amazonaws.com/widget-assets/images/sc23.png");
    background-size: cover;
    background-position-x: 50%;
    background-position-y: 50%; */
  }
  
  .contact_us_6 .map-part {
    width: 100%;
    height: 100%;
  }
  
  .contact_us_6 .text-blk.map-contactus-head {
    font-weight: 900;
    font-size: 36px;
    line-height: 32px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    color: var(--brand);
    text-transform: uppercase;
  }
  
  .contact_us_6 .text-blk.map-contactus-subhead {
    /* max-width: 300px; */
    max-width: 60%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
  }
  
  .contact_us_6 .social-media-links.mob {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 30px;
    margin-left: 0px;
    width: 230px;
    display: flex;
    justify-content: flex-start;
  }
  
  .contact_us_6 .link-img {
    width: 30px;
    height: 30px;
    margin-top: 0px;
    margin-right: 25px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  
  .contact_us_6 .link-img.image-block {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  
  .contact_us_6 .social-icon-link {
    margin: 0 25px 0 0;
    padding: 0 0 0 0;
  }
  
  @media (max-width: 1024px) {
    .contact_us_6 .responsive-container-block.container {
      justify-content: center;
    }
  
    .contact_us_6 .map-box {
      position: absolute;
      top: 0px;
      max-height: 320px;
    }
  
    .contact_us_6 .map-box {
      max-width: 100%;
      width: 100%;
    }
  
    .contact_us_6 .responsive-container-block.container {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
    }
  
    .contact_us_6 .map-part {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .contact_us_6 .container-block.form-wrapper {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    }
  
    .contact_us_6 .mob-text {
      display: block;
    }
  
    .contact_us_6 .form-box {
      margin-top: 200px;
      margin-right: 60px;
      margin-bottom: 40px;
      margin-left: 0px;
    }
  
    .contact_us_6 .link-img {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      display: flex;
      justify-content: space-evenly;
    }
  
    .contact_us_6 .social-media-links.mob {
      justify-content: space-evenly;
    }
  
    .contact_us_6 .responsive-cell-block.wk-desk-7.wk-ipadp-12.wk-tab-12.wk-mobile-12 {
      text-align: center;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: row;
    }
  
    .contact_us_6 .text-blk.contactus-subhead {
      display: block;
    }
  
    .contact_us_6 .mob-text {
      text-align: center;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    }
  
    .contact_us_6 .responsive-container-block.container {
      flex-wrap: wrap;
    }
  
    .contact_us_6 .form-box {
      margin-top: 200px;
      margin-right: 0px;
      margin-bottom: 40px;
      margin-left: 0px;
    }
  }
  
  @media (max-width: 768px) {
    .contact_us_6 .submit-btn {
      width: 100%;
    }
  
    .contact_us_6 .input {
      width: 100%;
    }
  
    .contact_us_6 .textinput {
      width: 100%;
    }
  
    .contact_us_6 .container-block.form-wrapper {
      margin-top: 80px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    }
  
    .contact_us_6 .text-blk.input-title {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
    }
  
    .contact_us_6 .form-box {
      padding-top: 0px;
      padding-right: 20px;
      padding-bottom: 0px;
      padding-left: 20px;
    }
  
    .contact_us_6 .container-block.form-wrapper {
      padding-top: 50px;
      padding-right: 15px;
      padding-bottom: 50px;
      padding-left: 15px;
    }
  
    .contact_us_6 .mob-text {
      display: block;
    }
  
    .contact_us_6 .responsive-container-block.container {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
    }
  
    .contact_us_6 .form-box {
      margin-top: 200px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    }
  
    .contact_us_6 .container-block.form-wrapper {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    }
  
    .contact_us_6 .form-box {
      margin-top: 220px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    }
  
    .contact_us_6 .form-box {
      margin-top: 220px;
      margin-right: 0px;
      margin-bottom: 50px;
      margin-left: 0px;
    }
  
    .contact_us_6 .text-blk.contactus-head {
      font-size: 32px;
      line-height: 40px;
    }
  }
  
  @media (max-width: 500px) {
    .contact_us_6 .container-block.form-wrapper {
      padding-top: 50px;
      padding-right: 15px;
      padding-bottom: 50px;
      padding-left: 15px;
    }
  
    .contact_us_6 .container-block.form-wrapper {
      margin-top: 60px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    }
  
    .contact_us_6 .responsive-cell-block.wk-ipadp-6.wk-tab-12.wk-mobile-12.wk-desk-6 {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 15px;
      margin-left: 0px;
    }
  
    .contact_us_6 .responsive-container-block {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 35px;
      margin-left: 0px;
    }
  
    .contact_us_6 .text-blk.input-title {
      font-size: 12px;
    }
  
    .contact_us_6 .text-blk.contactus-head {
      font-size: 26px;
      line-height: 35px;
    }
  
    .contact_us_6 .input {
      height: 45px;
    }
  }
/* ========================================
            contact part end
  ========================================*/
  .wk-desk-1 {
    width: 8.333333%;
  }
  
  .wk-desk-2 {
    width: 16.666667%;
  }
  
  .wk-desk-3 {
    width: 25%;
  }
  
  .wk-desk-4 {
    width: 33.333333%;
  }
  
  .wk-desk-5 {
    width: 41.666667%;
  }
  
  .wk-desk-6 {
    width: 50%;
  }
  
  .wk-desk-7 {
    width: 58.333333%;
  }
  
  .wk-desk-8 {
    width: 66.666667%;
  }
  
  .wk-desk-9 {
    width: 75%;
  }
  
  .wk-desk-10 {
    width: 83.333333%;
  }
  
  .wk-desk-11 {
    width: 91.666667%;
  }
  
  .wk-desk-12 {
    width: 100%;
  }
  
  @media (max-width: 1024px) {
    .wk-ipadp-1 {
      width: 8.333333%;
    }
  
    .wk-ipadp-2 {
      width: 16.666667%;
    }
  
    .wk-ipadp-3 {
      width: 25%;
    }
  
    .wk-ipadp-4 {
      width: 33.333333%;
    }
  
    .wk-ipadp-5 {
      width: 41.666667%;
    }
  
    .wk-ipadp-6 {
      width: 50%;
    }
  
    .wk-ipadp-7 {
      width: 58.333333%;
    }
  
    .wk-ipadp-8 {
      width: 66.666667%;
    }
  
    .wk-ipadp-9 {
      width: 75%;
    }
  
    .wk-ipadp-10 {
      width: 83.333333%;
    }
  
    .wk-ipadp-11 {
      width: 91.666667%;
    }
  
    .wk-ipadp-12 {
      width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    .wk-tab-1 {
      width: 8.333333%;
    }
  
    .wk-tab-2 {
      width: 16.666667%;
    }
  
    .wk-tab-3 {
      width: 25%;
    }
  
    .wk-tab-4 {
      width: 33.333333%;
    }
  
    .wk-tab-5 {
      width: 41.666667%;
    }
  
    .wk-tab-6 {
      width: 50%;
    }
  
    .wk-tab-7 {
      width: 58.333333%;
    }
  
    .wk-tab-8 {
      width: 66.666667%;
    }
  
    .wk-tab-9 {
      width: 75%;
    }
  
    .wk-tab-10 {
      width: 83.333333%;
    }
  
    .wk-tab-11 {
      width: 91.666667%;
    }
  
    .wk-tab-12 {
      width: 100%;
    }
  }
  
  @media (max-width: 500px) {
    .wk-mobile-1 {
      width: 8.333333%;
    }
  
    .wk-mobile-2 {
      width: 16.666667%;
    }
  
    .wk-mobile-3 {
      width: 25%;
    }
  
    .wk-mobile-4 {
      width: 33.333333%;
    }
  
    .wk-mobile-5 {
      width: 41.666667%;
    }
  
    .wk-mobile-6 {
      width: 50%;
    }
  
    .wk-mobile-7 {
      width: 58.333333%;
    }
  
    .wk-mobile-8 {
      width: 66.666667%;
    }
  
    .wk-mobile-9 {
      width: 75%;
    }
  
    .wk-mobile-10 {
      width: 83.333333%;
    }
  
    .wk-mobile-11 {
      width: 91.666667%;
    }
  
    .wk-mobile-12 {
      width: 100%;
    }
  }

/*  */

.progressbar-item {
  margin-bottom: 20px;
}

.progress-title {
  margin-bottom: 10px;
}

.progress-bg {
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  background-color: #3498db;
  height: 10px;
  width: 0;
  border-radius: 5px;
  transition: width 2s ease-in-out;
}

.progress-number-mark {
  position: absolute;
  top: -25px;
  right: 0;
  display: flex;
  align-items: center;
}

.percent {
  font-size: 14px;
  font-weight: bold;
}

.down-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #3498db;
  margin-left: 5px;
}

/*  */
/* 

/* 新闻列表 */
.list-news {display: flex;align-items: center;justify-content: center;margin-bottom:30px}
.list-news .time{margin-right:-20px;padding:15px 0 10px 0;border-right:1px solid #eee;}
.list-news .time .text-large{font-size:52px;line-height:54px;}
.list-news .news {margin-left:50px;margin-right:30px}
.list-news .news h3 a{display:block;font-size:24px;color:#333;margin-bottom:20px}
.list-news .button{width:70px;line-height:56px;font-size:24px;border:1px solid #ebebeb;}
.list-news .button i{font-size: 22px;}
.list-news:hover .button{background:#ff9600;color:#fff;border:1px solid #ff9600}
.list-news:hover h3 a{color:#ff9600}
/* 新闻列表 */

/* 纯文字列表  begin*/
.list-post-text li {padding:5px 0;}
.list-post-text li a{display:block;}
.list-post-text li.dot a{padding-left:15px;position:relative;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.list-post-text li.dot:hover a:before {background:#ff9600;}
.list-post-text li.dot a:before {content:'';position:absolute;left:-2px;background:#ccc;width:6px;height:6px;top:9px;border-radius:50%}
/* 纯文字列表  end*/



.langu{ position:relative; padding:0 14px 0 10px; cursor:pointer; transition:all .3s;height: 30px;}
.langu img{ margin-top:-3px; }
.langu span{ padding:0 4px;    color: brown; }
.langu:after{ position:absolute; content:"";top:50%; right:0; margin-top:-8px; border:6px solid brown; border-color:transparent transparent brown transparent ; }
.langu:hover span{ color:#272727; transition: all .3s; }
.langu:hover:after{ margin-top:-2px; border:6px solid #272727; border-color: #272727 transparent transparent transparent;transition: all .3s; }
.langu .languageBox{ display:none; position:absolute; width:114px; left:50%;transform:translateX(-50%);top:30px; text-align:center;z-index:10; }
.langu .language{ width:100%; margin-top:6px;border: 1px solid #e6e6e6;background-color: #fff; }
.langu .language a{ display:block; padding:6px 0; color:#808080; }
.langu .language a:hover{ color:#333; background-color: #f5f5f5; transition:all .3s; }
.langu:hover .languageBox{ display:block; transition:all .3s; }


.product-map-section {
    position: relative;
    width: 100vw;
    max-width: 1200px;
    min-height: 520px;
    background: #000;
    overflow: hidden;
    margin: 0 auto 40px auto;
    font-family: 'Yu Gothic UI', sans-serif;
    box-sizing: border-box;
  }
  .product-map-bg {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
  }
  .product-map-title {
    color: #fff;
    font-size: 2.1rem;
    font-weight: bold;
    position: absolute;
    left: 60px;
    top: 60px;
    z-index: 3;
    letter-spacing: 2px;
  }
  .product-map-item {
    position: absolute;
   
    border-radius: 16px;
     
    padding: 16px 18px 12px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 180px;
    z-index: 4;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .product-map-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .product-map-link:hover .product-map-item {
    transform: scale(1.1);
    
  }
  .product-map-img {
    width: 220px;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .product-map-item-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 4px;
    text-align: center;
  }
  .product-map-item-desc {
    font-size: 0.98rem;
    color: #444;
    text-align: center;
    line-height: 1.5;
  }
  .product-map-line1, .product-map-line2, .product-map-line3, .product-map-line4 {
    position: absolute;
    width: 6px;
    background: #d90000;
    border-radius: 3px;
    z-index: 2;
    transform-origin: top center;
    pointer-events: none;
    box-shadow: 0 0 8px #d9000044;
    transition: box-shadow 0.2s;
  }
  @media (max-width: 1300px) {
    .product-map-section {
      max-width: 100vw;
    }
  }
  @media (max-width: 900px) {
    .product-map-section {
      min-height: 400px;
      padding: 0 0 40px 0;
    }
    .product-map-title {
      font-size: 1.3rem;
      left: 18px;
      top: 18px;
    }
    .product-map-item {
      min-width: 90px;
      padding: 6px 4px 6px 4px;
    }
    .product-map-img {
      width: 60px;
      height: 60px;
    }
    .product-map-item-title {
      font-size: 0.95rem;
    }
    .product-map-item-desc {
      font-size: 0.85rem;
    }
  }
  @media (max-width: 600px) {
    .product-map-section {
      min-height: 260px;
      margin-bottom: 20px;
    }
    .product-map-title {
      font-size: 1.1rem;
      left: 8px;
      top: 8px;
    }
    .product-map-img {
      width: 38px;
      height: 38px;
    }
    .product-map-item {
      min-width: 60px;
      padding: 2px 2px 2px 2px;
    }
    .product-map-item-title {
      font-size: 0.8rem;
    }
    .product-map-item-desc {
      font-size: 0.7rem;
    }
  }
    
.bialcdall{
    width:100%;
    height: 200px;
    margin: 20px;
}
.bialcdall_r{
    width:100%;
    height: 200px;
}
.bialcdalpdl{
    width:20%;
    color: #fff;
    float: left;
}
.bialcd{
    width:60%;
    color: #fff;
    padding: 20px;
    background-color: #000;
    height: 200px;
    float: left;
}
.bialcdred{
    width:80%;
    color: #fff;
    padding: 20px;
    background-color: #dc143c;
    height: 200px;
    float: right;
}

.bialcdred33{
    width:33%;
    color: #fff;
    padding: 20px;
    background-color: #dc143c;
    height: 200px;
    float: right;
}

.bialcd33{
    width:33%;
    color: #fff;
    padding: 20px;
    background-color: #000;
    height: 200px;
    float: right;
}