@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//bncdigitalagency.com/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.0.6") format("woff2");
}

:root {
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(74,74,74);
	--wd-text-font-size: 16px;
	--wd-title-font: "Urbanist", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 18px;
	--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 16px;
	--wd-primary-color: rgb(13,0,228);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: rgb(74,74,74);
	--wd-link-color-hover: #242424;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: #83b735;
	--btn-accented-bgcolor-hover: #74a32f;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	--wd-popup-width: 800px;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: #0a0a0a;
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: rgb(13,0,228);
	background-image: none;
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-color: rgb(255,255,255);
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


/*GLOBAL*/
.yuzde .counter-value:after {content: "%";}
.coun .counter-value {font-size: 56px !important;color: #242424 !important;}
.coun .counter-label {font-size: 18px;color: #242424 !important;}
.coun {margin-bottom: 0px;border-right: 1px solid #80808040;}
.basarihikayebanner {background: linear-gradient(to right, #e7e9f8, #ffffff,#e7e9f8);}
.neleryptkleft {background: linear-gradient(to right, #e7e9f8, rgba(255, 255, 255, 0.95));padding: 24px;border-radius: 8px;font-size:20px;color:#333333;padding: 38px 30px;padding: 38px 30px;}
.neleryptkright {background: linear-gradient(to right, rgba(255, 255, 255, 0.95), #f5d7ff);padding: 24px;border-radius: 8px;font-size:20px;color:#333333;}
.kucukh2 h2 {
    font-size: 38px;
    line-height: 46px;
}
img[title]:hover::after {
    display: none !important;
}
h3 {font-size: 38px;line-height: 42px;}
.anahtarbox {border: 1px solid #80808024;border-radius: 16px;text-align: left;padding: 32px;font-size: 18px;color: black;}
.bnone {border: none !important;}
.ucluyapi {padding: 48px;border-radius: 16px !important;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);transition: 0.3s ease;}
.ucluyapi:hover {background: #e2e0fc;}
.iletisimbox {transition: 0.3s ease;}
.iletisimbox img {transition: 0.3s ease;}
.iletisimbox:hover {background: #000000e0 !important;}
.socialmedia-footer {display: flex;gap: 12px;align-items: center;}
.socialmedia-footer a{transition: 0.3s ease;}
.socialmedia-footer a:hover{filter: brightness(100);transform: scale(1.43);}
a.bulasin {overflow: visible;display: flex;gap: 8px;width: 280px;}
.wd-single-post-img img {border-radius: 24px;}
.wd-post-cat.wd-style-with-bg {border-radius: 12px;}
.single-post h1 {font-size: 42px !important; line-height:52px !important;}
.single-post h2 {font-size: 32px;line-height: 42px;}
div#comments {display: none;}
.wd-post-meta {display: none !important;}
.blogrid .vc_gitem-post-data-source-post_title {line-height: 36px;font-size: 26px;color:#0d00e4;margin-bottom: 6px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; font-weight:500;min-height:108px;}
.blogrid .vc_gitem-animated-block .vc_gitem-zone{border-radius: 16px;}
.blogrid .vc_gitem-post-data-source-post_excerpt {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.post-single-page {margin-top: 12em;}
.footer-column-3 a:hover, 
.footer-column-4 a:hover,
.footer-column-5 a:hover {
    background: #ffffff0a;
    border-radius: 8px;
    padding: 0px 10px;
    border: 1px solid white !important;
}
.container.main-footer a {color: white; border:1px solid #ffffff00;}
.container.main-footer {color: white;}
.whb-sticked .whb-row.whb-general-header {border-radius: 0px !important;}
.subTitle {color: #0d00e4;font-weight: 900;font-family: 'Urbanist';letter-spacing: .8px;font-size: 18px;}
h1{font-size:56px; line-height:66px;}
h2{font-size:52px; line-height:62px;}
.whb-column.whb-col-center .menu-item:hover {background-color: #0d00e41f;border-radius: 12px;}
.whb-column.whb-col-center .menu-item {border-radius: 12px;padding: 0px 8px;transition:0.4s ease;}
.whb-row.whb-general-header {border-radius: 24px;}
.beyazbtn {background: white;color: #333;border-radius: 24px;padding: 4px 24px;text-transform: capitalize;font-size: 16px;transition: background 0.3s linear;transition: 0.3s ease;}
.beyazbtn:hover {background:#86868629; color:white; padding:4px 36px;}
.svgbanner {display: flex;justify-content: center;}
.wd-dropdown-menu {border-radius: 0px 0px 12px 12px;margin-top:14px;}
/*GLOBAL*/
/*HAKKIMIZDA*/
.countdownplus {margin-bottom: 0px;border-right: 3px solid #ffffff12;}
.countdownplus .counter-value {font-size: 74px !important;}
.countdownplus .counter-value:after {content: "+";}
.countdownplus .counter-label {color: #ffffffe0;}
/*Landingler*/
.surecreklamlar .info-box-subtitle {font-weight: 600;color: #454eff !important;font-size: 24px !important;background: #e2e0fc;width: fit-content;border-radius: 8px;padding: 2px 12px;}
.surecreklamlar {background: white;border-radius: 16px !important;padding: 28px;}
.process-card {background: #fff;border-radius: 12px;box-shadow: 0 4px 12px rgba(0,0,0,0.08);padding: 39px 26px;transition: transform 0.3s ease;position: relative;border-top: 8px solid #ff5252;display: flex;flex-direction: column;}
.process-card:hover {transform: translateY(-5px);}
.process-card.green {border-top-color: #4caf50 !important;}
.process-card.blue {border-top-color: #03a9f4;}
.process-card.orange {border-top-color: #ff9800;}
.process-step-number {font-size: 74px;font-weight: 700;color: #333;margin-bottom: 10px;line-height: 80px;margin-top: -12px;}
.process-title {font-size: 20px;color: #000000;text-transform: capitalize;margin-bottom: 10px;font-weight: 700 !important;}
.process-description {font-size: 14px;color: #777;line-height: 1.5;min-height: 68px;}
.grafiktasrmbox img {border-radius: 16px;}
.tasarim-surecimiz h4.wd-timeline-title{font-size: 24px;color: #0d00e4;}
.landingherobackground{  background: linear-gradient(90deg, rgba(200, 200, 200, 0.2) 1px, transparent 1px),
              linear-gradient(rgba(200, 200, 200, 0.2) 1px, transparent 1px);
  background-size: 25px 25px; /* Karelerin boyutunu ayarlar */
  background-color: #ffffff; /* Hafif gri arka plan rengi */}
.whyusbox {background: #f5f5f500;border-radius: 16px !important;padding: 20px 24px;border: 1px solid #f1f1f1;transition: 0.3s ease;}
.whyusbox .info-box-inner {min-height: 90px;}
.whyusbox:hover {background: #e2e0fc;}
.landinghero h1 {font-size: 62px;font-weight: 900; line-height:74px;}
.landinghero h1 strong {color: grey !important;font-weight:900 !important; }
.landingherosub .subtitle {background: #0d00e41f;border-radius:16px;padding: 4px 16px;font-weight: 600;color:rgb(13,0,228);display: flex;align-items: center;gap: 6px;}
.landingherosub .subtitle img {width: 16px;}
.landingherosub {display: flex;justify-content: center;}
/*Landingler*/
.testbnc .testimonial-inner {background: #ffffff !important;border-radius: 21px !important;}
.testbnc .testimonial-content {color: #303030;}
.testbnc .testimonial-content footer {color: blue;}
.testbnc .testimonial-content footer>span {color: #6876eb;}
.anasayfablog .subTitle {color: #efefef;}
.anasayfablog h1 {color: white;}
.anasayfablog .vc_grid-item-mini.vc_clearfix {background: white;border-radius: 18px;}
.anasayfablog .blogrid .vc_gitem-animated-block .vc_gitem-zone {border-radius: 16px 16px 0px 0px;}
.anasayfablog .vc_gitem-zone.vc_gitem-zone-c {padding: 6px 6px;}
/*Iletisim*/
.teklif-row {display: flex;gap: 30px;}
.teklif-form input, select, textarea {border-radius: 12px !important;border: 1px solid #dededed1;resize: none;height: 54px;font-size: 15px;}
.teklif-row div {width: 100%;}
input.wpcf7-form-control.wpcf7-submit.has-spinner:hover {background: white;border:1px solid grey;color: black;}
input.wpcf7-form-control.wpcf7-submit.has-spinner {color: white;background: #0d00e4;padding: 12px 32px;border-radius: 5rem;font-size: 18px;text-transform: capitalize;box-shadow:none !important;border:1px solid #80808000;}
/*SSS*/
.ortala {display: flex;align-items: center;justify-content: center;flex-direction: column;}
.faq .wd-accordion-item {background: #ffffff;margin-bottom: 10px;border-radius: 16px;padding: 0px 30px;border: 1px solid #8080802e;}
/*Hizmetlerimiz*/
.hizmetbox {border: 1px solid #9f9f9f;padding: 28px;transition: 0.4s ease;border-radius:18px !important;}
.hizmetbox:hover {background: #0d00e4;}
.hizmetbox .info-box-title, .info-box-inner  {transition: 0.4s ease;}
.hizmetbox:hover .info-box-title {color:white;}
.hizmetbox:hover .info-box-inner{color:#e0dede;}
/*Hizmetlerimiz*/
/*MENUBTN*/
.mavimenu button {border: 2px solid #ffffff !important;}
.mavimenu {
    & svg {
        & path {
            &.line-1 {
                stroke: #9b96f7 !important;
                stroke-dashoffset: 0;
                animation: spark-1 3s linear infinite;
            }
        }
    }
}

.mavimenu  {
    & svg {
        & path {
            &.line-2 {
                stroke: #ffffff !important;
                stroke-dashoffset: 500;
                animation: spark-2 3s linear infinite;
            }
        }
    }
}
.voltage-button {
  position:relative;
  button {
    color:white;
    background: #0d00e4 !important;
    padding:12px 24px;
    border-radius:5rem;
    border:2px solid #4237e5;
    font-size:18px;
    line-height:1em;
    text-transform:capitalize;
    transition:background 0.3s;
    &:hover {
      cursor:pointer;
      background: #ffffff;
			color: white;
      + svg, +svg + .dots {
        opacity:1;
      }
    }
  }
  svg {
    display:block;
    position:absolute;
    top:-0.75em;
    left:-0.25em;
    width:calc(100% + 0.5em);
    height:calc(100% + 1.5em);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.4s;
    transition-delay:0.1s;
    path {
      stroke-dasharray: 100;
      filter: url('#glow');
      &.line-1 {
        stroke:#0D00E4;
        stroke-dashoffset: 0;
        animation: spark-1 3s linear infinite;
      }
      &.line-2 {
        stroke:#5b27b5;
        stroke-dashoffset: 500;
        animation: spark-2 3s linear infinite;
      }
    }
  }
  .dots {
    opacity:0;
    transition:opacity 0.3s;
    transition-delay:0.4s;
    .dot {
      width:1rem;
      height:1rem;
      background:white;
      border-radius:100%;
      position:absolute;
      opacity:0;
    }
    .dot-1 {
      top:0;
      left:20%;
      animation: fly-up 3s linear infinite;
    }
    .dot-2 {
      top:0;
      left:55%;
      animation: fly-up 3s linear infinite;
      animation-delay: 0.5s;
    }
    .dot-3 {
      top:0;
      left:80%;
      animation: fly-up 3s linear infinite;
      animation-delay: 1s;
    }
    .dot-4 {
      bottom:0;
      left:30%;
      animation: fly-down 3s linear infinite;
      animation-delay: 2.5s;
    }
    .dot-5 {
      bottom:0;
      left:65%;
      animation: fly-down 3s linear infinite;
      animation-delay: 1.5s;
    }
  }
}

@keyframes spark-1 {
  to {
    stroke-dashoffset: -1000;
  }
}
@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}
@keyframes fly-up{
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(-1.5rem) scale(0.4);}
  10%,100%{ opacity:0;  transform:translateY(-3rem) scale(0.2);}
}
@keyframes fly-down {
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(1.5rem) scale(0.4);}
  10%,100%{ opacity:0;  transform:translateY(3rem) scale(0.2);}
}

.surecreklamlar .info-box-inner {min-height: 110px;}

/*MOBIL*/
@media (max-width: 480px) {
h2 {font-size: 36px;line-height: 42px;}
h1{font-size:44px; line-height:50px;}
h3 {font-size: 28px;line-height: 36px;}
.testbnc .testimonial-inner {padding: 20px 10px;}	
.testbnc .testimonial-content div {min-height: 230px;}	
.single-post h3 {font-size: 22px;line-height: 28px;}
.surecreklamlar {height: 270px;}
.anahtarbox {padding: 16px;}
.uclumobil {display: grid;grid-template-columns: 1fr 1fr 1fr;}
.uclumobil .vc_row:after, .vc_row:before {display: none;}
.uclumobil .vc_column-inner {padding: 0px 7px !important;}
.uclumobil h3 {font-size: 14px !important;line-height: 20px !important;}
.uclumobil .whyusbox {padding: 10px;}
span.on-hover-text {font-size: 12px !important;}
.countdownplus {border-right: none;border-bottom: 3px solid #ffffff12;padding: 32px 0px;}
ul#menu-ana-menu-mobil .wd-nav-icon {background-size: 160px;content: "";position: relative;width: 100%;height: 100%;background-image: url(/wp-content/uploads/2025/02/bnc-digital-agency-transparent.svg);background-repeat: no-repeat;background-position: center;cursor: pointer;z-index: 4}
ul#menu-ana-menu-mobil .wd-nav-icon {display: block;height: 80px;position: relative;object-fit: cover;}
li#menu-item-2113 .nav-link-text {display: none;}
ul#menu-ana-menu-mobil a {font-size: 22px;text-transform:capitalize;}
ul#menu-ana-menu-mobil li a{padding: 24px 22px;}
.single-post h1 {font-size: 34px !important; line-height:44px !important;}
.single-post h2 {font-size: 26px;line-height: 36px;}
.post-single-page {margin-top: 8em;}
.wd-footer {margin-top: -2px;}
.whb-main-header {margin: 12px 12px;}
.whb-sticked .whb-main-header {margin:0px;}
.teklifalcon input {width: 100%;}
.teklif-form input, select, textarea {height: 40px;}
.ortalamobil {display: flex;align-items: center;justify-content: center;flex-direction: column;}
.ortalamobil span {text-align: center !important;}
.landinghero h1 {font-size: 38px;font-weight: 900; line-height:48px;}
.mobile33 h1 {font-size: 33px;font-weight: 900; line-height:48px;}
.voltage-button {
  position:relative;
  button {
    color:white;
    background: #0d00e4;
    padding:12px 24px;
    border-radius:5rem;
    border:2px solid #4237e5;
    font-size:18px;
    line-height:1em;
    text-transform:capitalize;
    transition:background 0.3s;
    &:hover {
      cursor:pointer;
      background: #ffffff;	
      + svg, +svg + .dots {
        opacity:1;
      }
    }
  }
  svg {
    display:block;
    position:absolute;
    top:-0.75em;
    left:-0.25em;
    width:calc(100% + 0.5em);
    height:calc(100% + 1.5em);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.4s;
    transition-delay:0.1s;
    path {
      stroke-dasharray: 100;
      filter: url('#glow');
      &.line-1 {
        stroke:#0D00E4;
        stroke-dashoffset: 0;
        animation: spark-1 3s linear infinite;
      }
      &.line-2 {
        stroke:#5b27b5;
        stroke-dashoffset: 500;
        animation: spark-2 3s linear infinite;
      }
    }
  }
  .dots {
    opacity:0;
    transition:opacity 0.3s;
    transition-delay:0.4s;
    .dot {
      width:1rem;
      height:1rem;
      background:white;
      border-radius:100%;
      position:absolute;
      opacity:0;
    }
    .dot-1 {
      top:0;
      left:20%;
      animation: fly-up 3s linear infinite;
    }
    .dot-2 {
      top:0;
      left:55%;
      animation: fly-up 3s linear infinite;
      animation-delay: 0.5s;
    }
    .dot-3 {
      top:0;
      left:80%;
      animation: fly-up 3s linear infinite;
      animation-delay: 1s;
    }
    .dot-4 {
      bottom:0;
      left:30%;
      animation: fly-down 3s linear infinite;
      animation-delay: 2.5s;
    }
    .dot-5 {
      bottom:0;
      left:65%;
      animation: fly-down 3s linear infinite;
      animation-delay: 1.5s;
    }
  }
}

@keyframes spark-1 {
  to {
    stroke-dashoffset: -1000;
  }
}
@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}
@keyframes fly-up{
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(-1.5rem) scale(0.4);}
  10%,100%{ opacity:0;  transform:translateY(-3rem) scale(0.2);}
}
@keyframes fly-down {
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(1.5rem) scale(0.4);}	
}
}@media (min-width: 1025px) {
	.surecgrafik .vc_col-sm-6:first-child {width: 40%;}
.surecgrafik .vc_col-sm-6:nth-child(2) {width: 60%;}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.voltage-button {
  position:relative;
  button {
    color:white;
    background: #0d00e4 !important;
    padding:12px 24px;
    border-radius:5rem;
    border:2px solid #4237e5;
    font-size:18px;
    line-height:1em;
    text-transform:capitalize;
    transition:background 0.3s;
    &:hover {
      cursor:pointer;
      background: #ffffff;
      + svg, +svg + .dots {
        opacity:1;
      }
    }
  }
  svg {
    display:block;
    position:absolute;
    top:-0.75em;
    left:-0.25em;
    width:calc(100% + 0.5em);
    height:calc(100% + 1.5em);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.4s;
    transition-delay:0.1s;
    path {
      stroke-dasharray: 100;
      filter: url('#glow');
      &.line-1 {
        stroke:#0D00E4;
        stroke-dashoffset: 0;
        animation: spark-1 3s linear infinite;
      }
      &.line-2 {
        stroke:#5b27b5;
        stroke-dashoffset: 500;
        animation: spark-2 3s linear infinite;
      }
    }
  }
  .dots {
    opacity:0;
    transition:opacity 0.3s;
    transition-delay:0.4s;
    .dot {
      width:1rem;
      height:1rem;
      background:white;
      border-radius:100%;
      position:absolute;
      opacity:0;
    }
    .dot-1 {
      top:0;
      left:20%;
      animation: fly-up 3s linear infinite;
    }
    .dot-2 {
      top:0;
      left:55%;
      animation: fly-up 3s linear infinite;
      animation-delay: 0.5s;
    }
    .dot-3 {
      top:0;
      left:80%;
      animation: fly-up 3s linear infinite;
      animation-delay: 1s;
    }
    .dot-4 {
      bottom:0;
      left:30%;
      animation: fly-down 3s linear infinite;
      animation-delay: 2.5s;
    }
    .dot-5 {
      bottom:0;
      left:65%;
      animation: fly-down 3s linear infinite;
      animation-delay: 1.5s;
    }
  }
}

@keyframes spark-1 {
  to {
    stroke-dashoffset: -1000;
  }
}
@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}
@keyframes fly-up{
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(-1.5rem) scale(0.4);}
  10%,100%{ opacity:0;  transform:translateY(-3rem) scale(0.2);}
}
@keyframes fly-down {
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(1.5rem) scale(0.4);}
}

@media (min-width: 577px) and (max-width: 767px) {
	.voltage-button {
  position:relative;
  button {
    color:white;
    background: #0d00e4 !important;
    padding:12px 24px;
    border-radius:5rem;
    border:2px solid #4237e5;
    font-size:18px;
    line-height:1em;
    text-transform:capitalize;
    transition:background 0.3s;
    &:hover {
      cursor:pointer;
      background: #ffffff;
      + svg, +svg + .dots {
        opacity:1;
      }
    }
  }
  svg {
    display:block;
    position:absolute;
    top:-0.75em;
    left:-0.25em;
    width:calc(100% + 0.5em);
    height:calc(100% + 1.5em);
    pointer-events:none;
    opacity:0;
    transition:opacity 0.4s;
    transition-delay:0.1s;
    path {
      stroke-dasharray: 100;
      filter: url('#glow');
      &.line-1 {
        stroke:#0D00E4;
        stroke-dashoffset: 0;
        animation: spark-1 3s linear infinite;
      }
      &.line-2 {
        stroke:#5b27b5;
        stroke-dashoffset: 500;
        animation: spark-2 3s linear infinite;
      }
    }
  }
  .dots {
    opacity:0;
    transition:opacity 0.3s;
    transition-delay:0.4s;
    .dot {
      width:1rem;
      height:1rem;
      background:white;
      border-radius:100%;
      position:absolute;
      opacity:0;
    }
    .dot-1 {
      top:0;
      left:20%;
      animation: fly-up 3s linear infinite;
    }
    .dot-2 {
      top:0;
      left:55%;
      animation: fly-up 3s linear infinite;
      animation-delay: 0.5s;
    }
    .dot-3 {
      top:0;
      left:80%;
      animation: fly-up 3s linear infinite;
      animation-delay: 1s;
    }
    .dot-4 {
      bottom:0;
      left:30%;
      animation: fly-down 3s linear infinite;
      animation-delay: 2.5s;
    }
    .dot-5 {
      bottom:0;
      left:65%;
      animation: fly-down 3s linear infinite;
      animation-delay: 1.5s;
    }
  }
}

@keyframes spark-1 {
  to {
    stroke-dashoffset: -1000;
  }
}
@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}
@keyframes fly-up{
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(-1.5rem) scale(0.4);}
  10%,100%{ opacity:0;  transform:translateY(-3rem) scale(0.2);}
}
@keyframes fly-down {
  0% { opacity:0; transform:translateY(0) scale(0.2); }
  5% { opacity:1; transform:translateY(1.5rem) scale(0.4);}
}