﻿



/*____________SLIDER / BANNER__________*/

    .product-slider.owl-carousel {
       padding-top:120px;
       margin-top:-120px;
       margin-bottom:30px;
}




    .product-slider.owl-carousel .owl-stage {
        display:flex;
}


         .product-slider .owl-item{
    flex: 1 0 auto;
}

            .product-slider .owl-item:first-of-type {
                margin-right: 222px;
            }






    .product-slider .owl-nav {
       position:absolute;
       top:0;
       left:222px;
}
.owl-carousel.product-slider .owl-nav button.owl-next,
.owl-carousel.product-slider .owl-nav button.owl-prev {

    padding:28px !important;
    border:1px solid #888;


}
.owl-carousel.product-slider .owl-nav button.owl-prev{
    margin-left:-1px;
}


.owl-carousel.product-slider .owl-nav button.owl-next.disabled,
.owl-carousel.product-slider .owl-nav button.owl-prev.disabled{

   cursor:not-allowed
}

.owl-carousel.product-slider.light .owl-nav button.owl-next,
.owl-carousel.product-slider.light .owl-nav button.owl-prev {

    border:1px solid #bbb;



}




.product-slider .owl-nav button span{
    font-size:32px;
    display:block;
    color:#fff;
            transition:all 0.3s;
}

.product-slider .owl-nav button:hover span{
    color:#f57120;

}

.product-slider .owl-nav button.disabled span{
    opacity:0.3;

}
.product-slider .owl-nav button.disabled:hover span{
   color:#fff;

}

.product-slider.light .owl-nav button span{
    color:#000;

}

.product-slider.light .owl-nav button:hover span{
    color:#f57120;

}

.product-slider.light .owl-nav button.disabled:hover span{
   color:#000;

}



.product-slider .slider-item{

    background-color:#2d2d2d;
    padding:30px;
    width:calc(33vw - 162px);
    height:100%;
    transition:all 0.3s;

}


.product-slider .slider-item:hover{

    background-color:#191919;

}



.product-slider .slider-item .img-con{
    width:100%;
    aspect-ratio:5/4;

}

.product-slider .slider-item .img-con img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scale(0.95);
    transition:all 0.3s;

}
.product-slider .slider-item:hover .img-con img{

    transform:scale(1);


}

.product-slider .slider-item .head-con{
    width:100%;
    margin:15px 0;

}


.product-slider .slider-item .head-con .head{
    color:#fff;
    font-size:22px;
    font-weight:500;
    margin:0;
    margin-bottom:5px;
}
.product-slider .slider-item .head-con .head-en{
    color:#fff;
    font-size:14px;
    font-weight:300;
    margin:0;
}



.product-slider .slider-item .desc-con{
   font-size:14px;
   font-weight:300;
   color:#bbb;


}






.services-grid{
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    grid-column-gap: 0;
    grid-row-gap: 0;
    width: 100%;

}

.services-grid .service-item{
    position:relative;
    aspect-ratio:3/1;
       display:flex;
   align-items:flex-end;
   transition:all 0.5s;
   overflow:hidden;
   background-color:#222;
}


.services-grid .service-item .img-con{

   position:absolute;
   height:100%;
   width:100%;
   top:0;
   left:0;
   z-index:2;
   opacity:0.20;

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .5s;
    transition: all .5s;
    transition-delay:0.2s;
}

.services-grid .service-item:hover .img-con {
        filter: none;
        -webkit-filter: grayscale(0%);
          opacity:1;
    }



.services-grid .service-item .img-con img{

 object-fit:cover;
   height:100%;
   width:100%;

 }
.services-grid .service-item .head-con{
       position:relative;
       z-index:3;
       padding:30px;
           background: rgb(0, 0, 0);

    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    min-width:100%;
    }



.services-grid .service-item .head-con .head{
       color:#fff;
       font-size:36px;
       font-weight:500;
       padding:0;
       margin:0;
       margin-bottom:5px;
    }


  .services-grid .service-item .head-con .head-en{
       color:#fff;
       font-size:18px;
       padding:0;
       margin:0;
         font-weight:300;
         text-transform:uppercase;
    }








.acco-list{

}


.acco-list .acco-list-item{
    margin-bottom: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow:none;
            border-bottom:1px solid #ccc;

}

.acco-list .acco-list-item .item-head{
    display:flex;
    justify-content:space-between;
    cursor:pointer;
    padding:15px 0;
    align-items:center;
}

.acco-list .acco-list-item .item-head .head{
    margin:0;
  font-size:22px;
  font-weight:600;
  color:#000;
}

.acco-list .acco-list-item .item-head .head2{

    margin:0;
  font-size:18px;
  font-weight:600;
  color:#000;
}



.acco-list .acco-list-item .item-head .btn-con{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:33px;
  width:33px;
  position:relative;
  height:33px;
  transition:all 0.5s;

  transform:rotate(135deg);
  margin-right:30px;
}

.acco-list .acco-list-item .item-head .btn-con span:first-child{
  width:100%;
  height:1px;
  background-color:#000;
  position:absolute;
  top:16px;
  right:0;

}

.acco-list .acco-list-item .item-head .btn-con span:nth-child(2){
  width:1px;
  height:100%;
  background-color:#000;
  position:absolute;
  top:0;
  right:16px;

}




.acco-list .acco-list-item .item-head.collapsed .btn-con{
transform:rotate(0);
}



.acco-list .acco-list-item .item-body{

            border-top:1px solid #ccc;

}






@media(max-width:1599px) {
    .product-slider .owl-item:first-of-type {
        margin-right: 45px;
    }

    .product-slider .owl-nav {
        left: 45px;
    }

    .product-slider .slider-item {
        width: calc(33vw - 106px);
    }
}


@media(max-width:1199px) {


    .product-slider .slider-item {
        width: calc(50vw - 150px);
    }
}

@media(max-width:991px) {

        .product-slider .slider-item {
        width: calc(50vw - 60px);
    }



.services-grid{
    grid-template-columns: repeat(2, 1fr);

}
.services-grid .service-item {

    aspect-ratio: 7 / 4;

}

.services-grid .service-item .head-con .head {
    font-size: 28px;
}
}

@media(max-width:767px) {

    .product-slider.owl-carousel {
        padding-top: 70px;
        margin-top: -70px;
        margin-bottom: 20px;
    }

    .product-slider .owl-nav {
        left: 20px;
    }

    .owl-carousel.product-slider .owl-nav button.owl-next,
    .owl-carousel.product-slider .owl-nav button.owl-prev {
        padding: 14px !important;
    }

    .product-slider .owl-nav button span {
        font-size: 20px;
    }

    .product-slider .owl-item:first-of-type {
        margin-right: 20px;
    }


    .product-slider .slider-item {
        width: calc(100vw - 155px);
        padding: 15px;
    }


        .product-slider .slider-item .head-con {
            margin: 10px 0 0 0;
        }


            .product-slider .slider-item .head-con .head {
                font-size: 16px;
            }

            .product-slider .slider-item .head-con .head-en {
                font-size: 10px;
            }



        .product-slider .slider-item .desc-con {
            font-size: 12px;
            display:none;
        }







.services-grid{
    grid-template-columns: repeat(1, 1fr);


}

.services-grid .service-item{

    aspect-ratio:3/1;

}

.services-grid .service-item .head-con{

       padding:15px;

    }



.services-grid .service-item .head-con .head{
       font-size:20px;
       margin-bottom:5px;
    }


  .services-grid .service-item .head-con .head-en{

       font-size:14px;

    }












.acco-list .acco-list-item .item-head{
    padding:10px 0;

}

.acco-list .acco-list-item .item-head .head{

  font-size:18px;
}

.acco-list .acco-list-item .item-head .head2{

  font-size:14px;

}



.acco-list .acco-list-item .item-head .btn-con{
  min-width:19px;
  width:19px;

  height:19px;

  margin-right:20px;
}

.acco-list .acco-list-item .item-head .btn-con span:first-child{

  top:9px;


}

.acco-list .acco-list-item .item-head .btn-con span:nth-child(2){

  right:9px;

}


}
