:root {

  color-scheme: light;

}



* {box-sizing:border-box}



.slider-container {

  position: relative;

  height: 100%;

  width: 100%;

  overflow: hidden;

  background-image: url("/assets/img/streak-trans.png");

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

}

.slider-wrapper .slider-item {

  position: relative;

  width: 100%;

  height: 570px;

  display: flex;

  align-items: center;



}

.slider-wrapper .slider-item::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;



}

.slider-wrapper .slider-item:nth-child(1):before {

  background-image: url("/assets/img/leaflet2.png");

  background-repeat: no-repeat;

  background-position: 70% center; 



}



.slider-wrapper .slider-item:nth-child(2):before {

  background-image: url("/assets/img/earth.png");

  background-repeat: no-repeat;

  background-position: 70% center; 

}



.slider-wrapper .slider-item:nth-child(3):before {

  background-image: url("/assets/img/mobile.png");

  background-repeat: no-repeat;

  background-position: 70% center; 

}



.slider-wrapper .slider-item:nth-child(4):before {

  background-image: url("/assets/img/canvas.png");

  background-repeat: no-repeat;

  background-position: 70% center; 

}







.slider-wrapper .slider-item .slide-content {

  position: relative;

  z-index: 10;

  color: #000;

  width: 100%;

  opacity: 0;

  margin: 0 auto;

  max-width: 900px;

  padding: 0 20px 10px;

}

.slider-item.swiper-slide-active .slide-content {

  animation: animate_opacity 0.8s 0.6s linear forwards;

}

@keyframes animate_opacity {

  100% {

    opacity: 1;

  }

}

.slider-wrapper .slider-item .slide-content > * {

  max-width: 35%;

}

.slider-item .slide-content .slide-title {

  font-size: 1.5rem;

  font-weight: 700;

  margin-top: 5px;

  opacity: 0;

  text-transform: uppercase;

  transform: translateY(60%);

}

.slider-item .slide-content .slide-subtitle {

  font-size: 1rem;

  font-weight: normal;

  opacity: 0;

  transform: translateY(60%);

}

.slider-item.swiper-slide-active :where(.slide-title, .slide-subtitle) {

  animation: animate_text 0.6s 0.6s linear forwards;

}

@keyframes animate_text {

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

.slider-item .slide-content .slide-description {

  margin-top: 25px;

  line-height: 25px;

  opacity: 0;

  transform: translateY(60%);

}

.slider-item.swiper-slide-active .slide-description {

  animation: animate_text 0.6s 1s linear forwards;

}

.slider-item .slide-content .slide-button {

  display: block;

  margin-top: 10px;

  color: #fff;

  width: 0;

  padding: 13px 0;

  font-size: 0.8rem;

  font-weight: 600;

  text-align: center;

  text-transform: uppercase;

  letter-spacing: 1px;

  text-decoration: none;

  border: 2px solid #fff;

  transition: 0.5s ease;

  opacity: 0;

  white-space: nowrap;

}

.slider-item.swiper-slide-active .slide-button {

  animation: animate_button 0.5s 1.3s linear forwards;

}

@keyframes animate_button {

  100% {

    width: 250px;

    opacity: 1;

  }

}

.slider-item .slide-content .slide-button span {

  opacity: 0;

}

.slider-item.swiper-slide-active .slide-button span {

  animation: animate_opacity 0.5s 1.5s linear forwards;

}

.slider-item .slide-content .slide-button:hover {

  color: #fff;

  background: #fff;

}

.slider-container .slider-controls {

  position: absolute;

  bottom: 45px;

  z-index: 30;

  width: 100%;

  overflow-x: auto;

  scrollbar-width: none;

}

.slider-controls .slider-pagination {

  display: flex;

  list-style: none;

  margin: 0 auto;

  max-width: 1100px;

  padding: 0 20px;

  position: relative;

  justify-content: space-between;

}

.slider-pagination .slider-indicator {

  position: absolute;

  bottom: 0;

  border-bottom: 2px solid #ee005f;

  transition: 0.4s ease-in-out;

}

.slider-pagination .slider-tab {

  color: #000;

  padding: 20px 30px;

  cursor: pointer;

  text-align: center;

  font-size: 0.85rem;

  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);

  border-bottom: 1px solid rgba(80, 80, 80, 0.5);

}

.slider-controls .slider-tab.current {

  color: #ee005f;

  font-weight: 700;

}

.slider-navigations button {

  position: absolute;

  top: 50%;

  color: #fff;

  z-index: 20;

  border: none;

  height: 40px;

  width: 40px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #202022;

  transform: translateY(-50%);

  transition: 0.4s ease;

}

.slider-navigations button:hover {

  background: #323235;

}

.slider-navigations button.swiper-button-disabled {

  display: none;

}

.slider-navigations button#slide-prev {

  left: 20px;

}

.slider-navigations button#slide-next {

  right: 20px;

}

@media (max-width: 1536px) {

  .slider-wrapper .slider-item .slide-content,

  .slider-controls .slider-pagination {

    width: 95%;

  }

}

@media (max-width: 1024px) {

  .slider-wrapper .slider-item .slide-content,

  .slider-controls .slider-pagination {

    width: 100%;

  }

  .slider-wrapper .slider-item .slide-content > * {

    max-width: 66%;

  }

  .slider-container .slider-controls {

    bottom: 50px;

  }

  @keyframes animate_button {

    100% {

      width: 100%;

      opacity: 1;

    }

  }

  .slider-navigations button {

    top: unset;

    bottom: -15px;

    background: none;

  }

  .slider-navigations button:hover {

    background: none;

  }

}

@media (max-width: 768px) {

  .slider-wrapper .slider-item .slide-content > * {

    max-width: 100%;

  }

  .slider-wrapper .slider-item:nth-child(1)::before {

    opacity: 0.4;

  }

  .slider-wrapper .slider-item:nth-child(2)::before {

    opacity: 0.4;

  }

  .slider-wrapper .slider-item:nth-child(3)::before {

    opacity: 0.4;

  }

    .slider-wrapper .slider-item:nth-child(4)::before {

    opacity: 0.4;

  }

}



 /* MODAL here bro*/

#myImg {

  border-radius: 5px;

  cursor: pointer;

  transition: 0.3s;

}



#myImg:hover {opacity: 0.7;}



.modal {

  display: none; 

  position: fixed; 

  z-index: 1; 

  padding-top: 100px; 

  left: 0;

  top: 0;

  width: 100%; 

  height: 100%; 

  overflow: auto; 

  background-color: rgb(0,0,0); 

  background-color: rgba(0,0,0,0.9); 

}



.modal-content {

  margin: auto;

  display: block;

  width: 80%;

  max-width: 700px;

}



#caption {

  margin: auto;

  display: block;

  width: 80%;

  max-width: 700px;

  text-align: center;

  color: #ccc;

  padding: 10px 0;

  height: 150px;

}



.modal-content, #caption {

  animation-name: zoom;

  animation-duration: 0.6s;

}



@keyframes zoom {

  from {transform:scale(0)}

  to {transform:scale(1)}

}



.close {

  position: absolute;

  top: 15px;

  right: 35px;

  color: #f1f1f1;

  font-size: 40px;

  font-weight: bold;

  transition: 0.3s;

}



.close:hover,

.close:focus {

  color: #bbb;

  text-decoration: none;

  cursor: pointer;

}



/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

  .modal-content {

    width: 100%;

  }

} 



h2 {



  font-optical-sizing: auto;

  font-weight: 400;

  font-style: normal;

}

.card {

  position: relative;

}

.card::before {

  position: absolute;

  content: "";

  width: 100%;

  height: 100%;

  transition: 0.6s;

  z-index: 0;

  background-color: #99004a;

}

.card:hover {

  box-shadow: 0.063rem 0.063rem 1.25rem 0.375rem #000;

}

.card:nth-child(1)::before {

  bottom: 0;

  right: 0;

  clip-path: circle(calc(7.25rem + 7.5vw) at 100% 100%);

}

.card:nth-child(2)::before {

  bottom: 0;

  left: 0;

  clip-path: circle(calc(7.25rem + 7.5vw) at 0% 100%);

}

.card:nth-child(3)::before {

  top: 0;

  right: 0;

  clip-path: circle(calc(7.25rem + 7.5vw) at 100% 0%);

}

.card:nth-child(4)::before {

  top: 0;

  left: 0;

  clip-path: circle(calc(7.25rem + 7.5vw) at 0% 0%);

}

.card p {

  transition: 0.8s;

}

.card:hover::before {

  clip-path: circle(110vw at 100% 100%);

}

.card:hover p {

  color: #fff;

}

@media screen and (min-width: 62.5rem) {

  .circle {

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 0;

  }

}

.card:nth-child(1) .circle {

background: url("/assets/img/print.png") no-repeat;

  background-size: 100%; 

  bottom: 0;

  right: 0;

  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%)

}



.card:nth-child(2) .circle {

background: url("/assets/img/digital.png") no-repeat;

  background-size: 100% auto; 

  bottom: 0px;

  left: 0;

  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);

}

.card:nth-child(3) .circle {

  background: url("/assets/img/web.png") no-repeat;

  background-size: 100% auto; 

  top: 0;

  right: 0;

  clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);

}

.card:nth-child(4) .circle {

  background: url("/assets/img/paint.png") no-repeat;

  background-size: 100% auto; 

  top: 0;

  left: 0;

  clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);

}