/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */



:root {
  --jumbotron-padding-y: 3rem;
}


.container1 {
    width: 100vh;
    height: 100vh;
    display: grid;
    grid-template-rows: 5fr 1fr;
    background: #021919;
}



ul {
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    display: flex;
}

.tab {
    width: calc(10vh + 8px);
    height: calc(10vh + 8px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
    shape-outside: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
    z-index: 0;
    transition: width 0.5s;
}

.tab img {
    width: 10vh;
    height: 10vh;
    z-index: 10;
    cursor: pointer;
    clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
    shape-outside: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%);
    transition: width 0.5s;
}

[type=radio] {
    display: none;   
}

.preview-list {
    background: linear-gradient(
        #021919,
        #021919 var(--line-offset),
        #efefef var(--line-offset)
    );
}

.tab {
    background: linear-gradient(
        #efefef,
        #efefef var(--line-offset),
        #021919 var(--line-offset)
    );
}

[type=radio]:checked ~ label ~ .content{
    text-align: center;
    z-index: 8;
}


[type=radio]:checked ~ label .tab{
    width: 0;
}

.content {
    position: absolute;
    background: #021919;
    top: 1vh;
    left: 0;
    width: 100vh;
    height: 80vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.content img {
    height: auto;
    width: 100vh;  
}



#videoframe {
  position: relative;

}
#videoframe video {
  /*height: 30%;*/
  width: 100%;
  /*background-position: absolute;*/
    position: relative;
  /*z-index: 10;*/
  /*object-fit: cover;*/
  font-family: 'object-fit:cover;';
}
#videoframe .videocontent {
  /*background-color: rgba(0,0,0,0.5);*/
  /*height: 100%;*/
  width: 100%;
  /*z-index: 20;*/
  position: absolute;
  top: 0;
  left: 0;

}
#videoframe .videocontent h1 {
  color: white;
  font-weight: 600;

}
#videoframe .videocontent h2 {
  color: burlywood;
  font-weight: 400;
  
}
#videoframe .videocontent h3 {
  color: white;
  font-weight: 300;
  
}























*, *:after, *:before {
  padding:0;
  margin:0;
  font-family:Arial;
}


.ul {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  list-style:none;
  width:955px;
  height:450px;
  border-radius:3px;
  overflow:hidden;
  box-shadow:1px 1px 3px 1px;
}


.li {
  position:relative;
  width:90px;
  height:450px;
  float:left;
  border-left:1px solid white;
  -webkit-transition:all 0.7s;
  -moz-transition:all 0.7s;
  transition:all 0.7s;
  box-shadow:-2px 0 10px 2px;
}

.ul .li:first-child {
  border:none;
}

.span {
  display:block;
  position:absolute;
  bottom:0;
  width:50%;
  color:white;
  white-space:nowrap;
  padding:20px;
  background: -moz-linear-gradient(left,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */

}

.img {
  width:800px;
  height:450px;
  background-size: cover;
}

.ul:hover .li {
  width:30px;  
}


.ul .li:hover {
  width:450px;
  background-size: cover;
}







































.product-device {
  position: absolute;
  right: 30%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 15%;
  background-color: #e5e5e5;
  background-size: cover;
}
.product-device-3 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 60%;
  background-color: #e5e5e5;
  background-size: contain;

}


/*
 * Extra utilities
 */

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.flex-equal > * {
  -ms-flex: 1;
  -webkit-box-flex: 1;
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
  }
}

.overflow-hidden { overflow: hidden; }








.jumbotron1 {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
  width: 100%;
  background-image: url(pics/pic9.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}








.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
  width: 100%;
  /*background-image: url(pics/ramadankareem.png);*/
  background-image: url(pics/interiorsm-min.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }













/**{margin: 0; padding: 0;}*/
/*body{background-color: black;}*/
.first-slide {
    background-size:contain;
}

#firstslide {
    background-size: cover;
}


.containe
{
  width: 100%;
  height: 100%;
}
.trans
{
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
}
.top
{
  display: flex;
  width: 50vw;
  height: 50vh;
  margin-top: 10vh;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10vh;
}
.top ul
{
  list-style: none;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: border-box;
}
.top ul li
{
  position: relative;
  float: left;
  width: 25%;
  height: 25%;
  overflow: hidden;
}

.top ul li::before
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  content: '';
  color: white;
  opacity: 0.4;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.top ul li:hover::before
{
  opacity: 0;
  background-color: rgba(0,0,0,0.90);
}
.top ul li img
{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lightbox
{
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.75);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}
.lightbox img
{
  max-width: 90%;
  max-height: 80%;
  position: relative;
  top: -100%;
  /* Transition */
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
}
.lightbox:target
{
  outline: none;
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 1.2s ease;
  -moz-transition: all 1.2s ease;
  -ms-transition: all 1.2s ease;
  -o-transition: all 1.2s ease;
  -webkit-transition: all 1.2s ease;
}
.lightbox:target img
{
  top: 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}










body {
  background-color: rgb(40,40,40);
  
}

#menu, #aboutus, #contactus, #testimonial, #gallery{
  background-image: url(pics/img4.png);
  background-size: cover;
  /*background-position: top;*/
  background-repeat: no-repeat;
}
#firstslide, #secondslide, #thirdslide{
    background-size: contain;
}

.carousel-inner, .first-slide, .second-slide, .third-slide, #myCarousel, .carousel-item {
  height: 50rem;
}

#gallery {
 width: 100vw;
}



/*.jumbotron {
  height: 35rem;
  width: 100%;
  background-image: url(pics/pic9.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}*/
.nobg {
  height: 15rem;
  width: 100%;
  background-image: url(pics/img28-min.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.ftimage {
  height: 20rem;
  background-image: url(pics/chef.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 0 10px 10px white inset;
}
.ftimage1 {
  height: 20rem;
  background-image: url(pics/img25-min.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 0 10px 10px white inset;
}
.ftimage2 {
  height: 20rem;
  background-image: url(pics/img29-min.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 0 10px 10px white inset;
}
.ramadan {
     background-image: url(pics/RamadanMobarak.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


footer {
  /*height: 20rem;*/
  background-color: grey;
}





#Testimonials {
  /*background-image: url(pics/img28.jpg), url(pics/img23.jpg), url(pics/img21.jpg);*/
  background-size: contain;
  /*background-position: right, left, center;*/
  background-repeat: no-repeat, no-repeat, no-repeat;
}













/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
















/*Fading images*/

.fadingpics {
  height: 35rem;
}


.cb-slideshow,
.cb-slideshow:after { 
    position: static;
    width: 100%;
    height: 100%;
    /*top: 0px;*/
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    /*background: transparent url(../images/pattern.png) repeat top left; */
}
.cb-slideshow li span { 
    width: 100%;
    height: 35rem;
    position: absolute;
    /*top: 0px;*/
    left: 0px;
    color: transparent;
    background-size: cover;
    /*background-position: 50% 50%;*/
    background-repeat: none;
    opacity: 0;
    z-index: 0;
  -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    /*bottom: 30px;*/
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 140px;
    padding: 0;
    line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(pics/pic1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(pics/pic2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(pics/pic3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(pics/pic4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(pics/pic5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(pics/pic6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
  opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}















#videoframe {
  position: relative;

}
#videoframe video {
  height: 90vh;
  width: 100%;
  /*background-position: absolute;*/
  z-index: 10;
  object-fit: cover;
  font-family: 'object-fit:cover;';
}
#videoframe .videocontent {
  /*background-color: rgba(0,0,0,0.5);*/
  height: 90%;
  width: 100%;
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;

}
#videoframe .videocontent h1 {
  color: white;
  font-weight: 600;

}
#videoframe .videocontent h2 {
  color: red;
  font-weight: 400;
  
}
#videoframe .videocontent h3 {
  color: white;
  font-weight: 600;
}






/*.gallery {
  background: #EEE;
}

.gallery-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;

}

 cell number 
.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.g1 {
  background-image: url(pics/IMG_2320.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  margin: auto;
}*/






.carousel {
  background: black;
}

.carousel-cell {
  width: 70%;
  height: 200px;
  /* flex-box, center image in cell */
  display: -webkit-box;
  display: -webkit-flex;
  display:         flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}

.carousel-cell img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  /* dim unselected */
  opacity: 0.7;
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s;
          transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}

/* brighten selected image */
.carousel-cell.is-selected img {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-filter: none;
          filter: none;
}

@media screen and ( min-width: 768px ) {
  .carousel-cell {
    height: 400px;
  }
}

@media screen and ( min-width: 960px ) {
  .carousel-cell {
    width: 60%;
  }
}

/* buttons, no circle */
.flickity-prev-next-button {
  width: 60px;
  height: 60px;
  background: transparent;
  opacity: 0.6;
}
.flickity-prev-next-button:hover {
  background: transparent;
  opacity: 1;
}
/* arrow color */
.flickity-prev-next-button .arrow {
  fill: white;
}
.flickity-prev-next-button.no-svg {
  color: white;
}
/* closer to edge */
.flickity-prev-next-button.previous { left: 0; }
.flickity-prev-next-button.next { right: 0; }
/* hide disabled button */
.flickity-prev-next-button:disabled {
  display: none;
}


.sliderholder {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 300px;
  justify-content: center;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}

.slider .slide {
  height: 100px;
  width: 250px;
}