@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Bold.eot');
    src: url('../fonts/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Bold.woff') format('woff'),
        url('../fonts/SFProDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-LightItalic.eot');
    src: url('../fonts/SFProDisplay-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-LightItalic.woff') format('woff'),
        url('../fonts/SFProDisplay-LightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Medium.eot');
    src: url('../fonts/SFProDisplay-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Medium.woff') format('woff'),
        url('../fonts/SFProDisplay-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-HeavyItalic.eot');
    src: url('../fonts/SFProDisplay-HeavyItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-HeavyItalic.woff') format('woff'),
        url('../fonts/SFProDisplay-HeavyItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-BlackItalic.eot');
    src: url('../fonts/SFProDisplay-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-BlackItalic.woff') format('woff'),
        url('../fonts/SFProDisplay-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-ThinItalic.eot');
    src: url('../fonts/SFProDisplay-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-ThinItalic.woff') format('woff'),
        url('../fonts/SFProDisplay-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-SemiboldItalic.eot');
    src: url('../fonts/SFProDisplay-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-SemiboldItalic.woff') format('woff'),
        url('../fonts/SFProDisplay-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-Regular.eot');
    src: url('../fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-Regular.woff') format('woff'),
        url('../fonts/SFProDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFProDisplay-UltralightItalic.eot');
    src: url('../fonts/SFProDisplay-UltralightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFProDisplay-UltralightItalic.woff') format('woff'),
        url('../fonts/SFProDisplay-UltralightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}


:root {
    --main-primary-color: #009490;
    --main-secondary-color: #A1D55D;
    --white-color: #fff;
    --black-color: #000;
    --main-gray-color: #363636;
}

html { font-size: 62.5%; }
body { margin: 0; padding: 0; font-family: 'SF Pro Display'; font-weight: 400; font-size: 16px;}
ul{padding: 0; margin: 0; list-style: none;}

/* .btn-primaryx { background: var(--main-secondary-color); color: var(--white-color); font-weight: 400; line-height: normal; font-size: 18px; border-radius: 50px; padding: 11px 27px; border: solid 1px var(--main-secondary-color); text-transform: capitalize;} */
/* .btn-primaryx:hover {color: var(--main-secondary-color); background: var(--white-color); border-color: var(--main-secondary-color);} */
.btn-primaryx:focus{outline: none !important; box-shadow: none !important;}

.mt-20{margin-top: 2rem;}
p{font-weight: 400; font-size: 1.8rem; color: var(--main-gray-color); line-height: 1.6;}
a{text-decoration: none;}
.white-color{color: var(--white-color) !important;}

.same-section{padding: 10rem 0;}
.primary-bg-gradient{background: linear-gradient(81.45deg, #009490 0%, #A1D55D 150.09%);}
.same-heading{margin-bottom: 4rem;}
.same-heading h2{font-weight: 500; font-size: 5rem; color: var(--main-primary-color); line-height: normal; margin-bottom: 2rem;}

.btn-primaryx { --tilt: 40px; font-weight: 400; line-height: normal; font-size: 18px; border-radius: 50px; padding: 11px 27px; position: relative; overflow: hidden; color: var(--white-color); background: var(--main-secondary-color); border: 1px solid var(--main-secondary-color); }
.btn-primaryx span { /* mix-blend-mode: difference; */ position: relative; z-index: 2; transition: all .2s ease; }
.btn-primaryx:before, .btn-primaryx:after { content: ""; z-index: 1; width: calc(100% + var(--tilt)); height: 100%; position: absolute; top: 0; left: calc(-100% - var(--tilt)); background: var(--white-color); clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 50%, calc(100% - var(--tilt)) 100%, 0 100%); transition: transform 0.6s; }
.btn-primaryx:before { left: calc(-100% - var(--tilt)); }
.btn-primaryx:after { left: 100%; transform: rotate(180deg); }
.btn-primaryx:hover span{color: var(--main-secondary-color);}
.btn-primaryx:hover:before { transform: translateX(100%); }
.btn-primaryx:hover:after { transform: rotate(180deg) translateX(100%); }


.header{padding: 2.5rem 0; z-index: 999; position: relative;}
.header .container-fluid{padding: 0 9rem;}
.header .header-menu{display: flex; align-items: center; justify-content: space-between;}
.header .nav_menu{display: flex; align-items: center;}
.header .nav_menu li:not(:last-child){padding: 0 15px;}
.header .nav_menu li a:not(.btn-primaryx){font-size: 18px; color: var(--white-color); padding: 10px 10px;  transition: all .2s ease; position: relative;}
.header .nav_menu li a:not(.btn-primaryx):before,
.header .nav_menu li a:not(.btn-primaryx):after{ height: 3px; position: absolute; content: ''; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; background-color: var(--main-secondary-color); width: 0;}
.header .nav_menu li a:not(.btn-primaryx):before{top: 0; left: 0; }
.header .nav_menu li a:not(.btn-primaryx):after{bottom: 0; right: 0;}
.header .nav_menu li a:not(.btn-primaryx):hover:before,.header .nav_menu li a:not(.btn-primaryx):hover:after,
.header .nav_menu li a.active:before,.header .nav_menu li a.active:after{width: 100%;}
.header .nav_menu li .btn-primaryx{margin-left: 25px;}

.headerFix{animation: smoothScroll .2s linear; position: fixed; left: 0; right: 0; top: 0;background: linear-gradient(81.45deg, #009490 0%, #A1D55D 150.09%);  box-shadow:0 3px 10px 5px rgba(0, 0, 0, .06);}
.toggle-btn{display: none;}
.toggle-btn .line{ width: 30px; height: 2px; background-color: #ecf0f1; display: block; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.toggle-btn:hover{ cursor: pointer; }
.toggle-btn.is-active .line:nth-child(2){ opacity: 0; }
.toggle-btn.is-active .line:nth-child(1){ -webkit-transform: translateY(7px) rotate(45deg); -ms-transform: translateY(7px) rotate(45deg); -o-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); }
.toggle-btn.is-active .line:nth-child(3){ -webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); }


/* .js-scroll { position: fixed; z-index: 10; top: 0; left: 0; overflow: hidden; width: 100%; will-change: transform; } */
/* .swift-up-text span {
	display: inline-block;
	overflow: hidden;
	animation: 0.5s swift-up ease-in-out forwards;
}



.swift-up-text i {
	font-style: normal;
	position: relative;
	top: 55px;
	animation: 0.8s swift-up ease-in-out forwards;
}

@keyframes swift-up {
	to {
		top: 0;
	}
}
*/

@keyframes smoothScroll {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0px);
	}
} 

.banner {background: linear-gradient(126.45deg, #006663 0%, #009490 70%, #A1D55D 116.09%);  min-height: calc(100vh - 100px); padding: 200px 0 100px; position: relative; overflow: hidden;}
.banner .banner-text h1{font-size: 5rem; color: var(--white-color); font-weight: 500; margin-bottom: 1.2rem; }
.banner .banner-text .typewriter span {  border-right: solid var(--white-color) 5px; padding:0 5px;  }
.banner .banner-text p{color: var(--white-color); font-size: 2rem; line-height: 1.5;}
.banner .banner-text .btn-primaryx{font-size: 2rem; margin-top: 2rem;}


.banner.home-banner{margin-top: -101px;}
.banner .banneranimate-icon .icon-bx{background: rgba(255, 255, 255, 0.1);width: 7rem; height: 7rem; position: absolute;} 
.banner .banneranimate-icon .icon-bx:first-child{left: 9%; top: 20%;  border-radius: 50%;} 
.banner .banneranimate-icon .icon-bx:nth-child(2){clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  animation: Rotate 10s linear infinite;      left: 15%; top: 53%;} 
.banner .banneranimate-icon .icon-bx:nth-child(3){clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); left: 6%;top: 80%; animation: Rotate 10s linear infinite; -webkit-animation: Rotate 10s linear infinite; }  
.banner .banneranimate-icon .icon-bx:nth-child(4){clip-path: polygon(50% 0%, 0% 100%, 100% 100%);     right: 9%; top: 20%; animation: Rotate 10s linear infinite; } 
.banner .banneranimate-icon .icon-bx:nth-child(5){clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); animation: Rotate 10s linear infinite;    right: 15%; top: 53%;  } 
.banner .banneranimate-icon .icon-bx:nth-child(6){animation: Rotate 10s linear infinite; right: 6%;top: 80%; } 

.banner .banneranimate-icon .circle:first-child:before,  .banner .banneranimate-icon .circle:first-child:after { animation:ripple 2s ease-out infinite; border:solid 8px #27a484; bottom:0; border-radius: 50%; content:""; left:0; position:absolute; right:0; top:0; }
.banner .banneranimate-icon .circle:first-child:after { animation:ripple 2s 1s ease-out infinite; }
.banner.home-banner .banner-img{width: 100%; max-width: 820px; margin:6.5rem auto 0;}
.banner.home-banner .banner-img .middle-img { z-index: 2; }
.banner.home-banner .banner-img .right-img { right: 60px; left: auto !important; top: -40px !important; }
.banner.home-banner .banner-img .left-img { left: 68px !important; bottom: -117px !important; top: unset !important; }



@keyframes Rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
    }

    @keyframes scaleIcon {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(2.0);
    }
    }

    @keyframes ripple {
    0% {
        opacity:.25;
    }
    100% {
        border-radius:2em;
        opacity:0;
        transform:scale(3);
    }
    }
    
.digital-assets-list .col{flex: 0 0 14%;}
.digital-assets-list .assets-bx{text-align: center; margin-bottom: 2rem; transition: all .2s ease;}
.digital-assets-list  .digital-assets-row{margin: 12rem 0 8rem;}
.digital-assets-list .assets-bx .iconbx{min-height: 90px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; transition: all .2s ease; }
.digital-assets-list .assets-bx h3{font-size: 2rem; color: var(--black-color); font-weight: 500; }




.notary-service-section .notary-img-list{margin-top: 7rem; display: flex; align-items: center; justify-content: center;}
.notary-service-section .notary-img-list li{padding: 0 2rem;}
.decentr-key-section .key-list li{font-size: 2rem; color: var(--white-color); font-weight: 500; line-height: normal; padding: 8px 0;}
.decentr-key-section .decent-content-bx .img-bx { min-height: 350px; display: flex; align-items: center; justify-content: center; margin-bottom: 4rem; }
.decentr-key-section .decent-content-bx h3{font-size: 2.4rem; color: var(--white-color); font-weight: 400; line-height: normal;}
/* .container--3 {
    transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));

    background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9");
    background-position: var(--bX) var(--bY);  transition: transform .6s 1s;
} */



.digital-currency-wrap .currency-steplist{display: flex; align-items: center; flex-wrap: wrap;}
.digital-currency-wrap .currency-steplist li{flex: 0 0 20%; max-width: 20%; padding: 2rem 3rem; position: relative;}
.digital-currency-wrap .currency-steplist h4{font-size: 2rem; color: var(--white-color); line-height: normal; font-weight: 400;}

.digital-currency-wrap .cur-step-content{padding:2rem 3rem; text-align: center; min-height: 9.6rem;  background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.7); backdrop-filter: blur(2px); border-radius: 10px; display: flex; align-items: center; justify-content: center;    position: relative; z-index: 1;  transition: all .7s ease-out;}
.digital-currency-wrap .cur-step-content:before{animation: whiteBxShadow 3s linear infinite; position: absolute; left: 0; right: 0; bottom: 0; top: 0; content: '';}
/* .digital-currency-wrap .currency-steplist:nth-child(1) .cur-step-content{    -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -ms-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s;}
.same-section.animated .currency-steplist:nth-child(1) .cur-step-content{  opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} */

.digital-currency-wrap .border-bx{ width: 100%; position: absolute; height: 1px; background: var(--main-secondary-color); right: -21px; top: 50%; transform: translateY(-50%); max-width: 60px;}
.digital-currency-wrap .border-bx:before { position: absolute; left: 0; top: -6px; background: var(--main-secondary-color); content: ''; width: 15px; height: 15px; border-radius: 50%; }
.digital-currency-wrap .border-bx:after {position: absolute; content: ''; width: 7px; height: 7px; background: var(--main-secondary-color); right: 0; top: -3px; transform: rotate(47deg); }
.digital-currency-wrap .currency-steplist :is(li:nth-child(3),li:nth-child(8)) .cur-step-content{background: rgba(0, 102, 99, 0.2);border: 1px solid rgba(255, 255, 255, 0.7); min-height: 176px;}
.digital-currency-wrap .investor-content {position: relative; width: 100%; max-width: 140px;}
.digital-currency-wrap .investor-content .text-bx { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.7); backdrop-filter: blur(2px); border-radius: 48px; font-size: 2.4rem; color: var(--white-color); padding: 1rem; min-height: 9.6rem; width: 100%; max-width: 5rem; display: flex; align-items: center; justify-content: center; margin: 1rem auto; }
.digital-currency-wrap .investor-content:before{position: absolute; inset: 47px 0px; content: ''; border-left: 2px solid var(--main-secondary-color);border-right: 2px solid var(--main-secondary-color);}
.digital-currency-wrap .investor-content :is(.rightborder, .leftborder){width: 90%; height: 2px; background: var(--main-secondary-color); position: absolute;}
.digital-currency-wrap .investor-content :is(.rightborder){right: -45px;}
.digital-currency-wrap .investor-content :is(.leftborder){left: -45px;}
.digital-currency-wrap .investor-content :is(.leftborder,.rightborder):after{position: absolute; content: ''; width: 8px; height: 8px; background: var(--main-secondary-color); transform: rotate(47deg);  top: -3px;}
.digital-currency-wrap .investor-content :is(.rightborder):after{left: 0;}
.digital-currency-wrap .investor-content :is(.leftborder):after{right: 0;}
.digital-currency-wrap .investor-content h4 { writing-mode: vertical-lr; transform: rotate(180deg); position: absolute; left: -13px; top: 50%; transform: translateY(-50%) rotate(180deg); margin: 0; background: #129b8a; padding: 10px 3px; }
.digital-currency-wrap .investor-content .border-bx{     right: -88%; max-width: 88%; }
.digital-currency-wrap .investor-content .border-bx::before{display: none;}
.digital-domain-section .radial-circles{    left: unset; right: -2rem;}


@keyframes whiteBxShadow {
    0% {
        box-shadow: 0px 10px 30px rgba(255,255,255,0.3);
    }
    50% {
        box-shadow: 0px 10px 30px rgba(255,255,255,0);
    }
    100% {
        box-shadow: 0px 10px 30px rgba(255,255,255,0.3);
    }
}
    

 .service-offering-content{margin: 9rem 0;}
 .service-offering-content .service-left-bx{ position: relative;}
 .service-offering-content .service-left-bx .service-upper-text{z-index: 1; background: rgba(0, 148, 144, 0.2); backdrop-filter: blur(100px); border-radius: 10px 0px 0px 10px; padding: 4.5rem 4rem 4rem; min-height: 480px;}
 .service-offering-content .service-right-bx{background: rgba(224, 224, 224, 0.2);border: 1px solid #D2D1D1; backdrop-filter: blur(100px); border-radius: 10px; margin-left: -10px;}
 .service-offering-content h3{font-weight: 500; font-size: 3rem; color: var(--black-color); line-height: normal; margin-bottom: 4rem;}
 .service-offering-content .owl-item:not(:last-child){border-right: 1px solid #DEDEDE;}
 .service-offering-content .item {text-align: center; padding-bottom: 2rem;}
 .service-offering-content .item .top-content{border-bottom: 1px solid #DEDEDE; padding: 2rem 0 2.5rem; margin-bottom: 3rem;}
 .service-offering-content .item h3{font-size: 2.2rem; margin-bottom: 8px;}
 .service-offering-content .price{font-weight: 700; font-size: 3.4rem; color: var(--main-primary-color); line-height: normal;}
 .service-offering-content .services-list li .title-bx{font-size: 1.8rem; color: var(--black-color); line-height: normal; min-height: 55px;}
 .service-offering-content .service-left-bx .radial-circles{ bottom: -4rem; left: -3rem; top: unset;}
 .service-offering-content .service-left-bx .radial-blue{    background: #006663; right: -130px; top: -80px; left:unset; width: 18.6rem; height: 18.6rem;}
 .service-offering-content .service-left-bx .radial-blue > div{background:#00666357;  width: 23.6rem; height: 23.6rem;     left: -2rem; top: -2rem; }

 .footer .footer-top{padding: 3.8rem 0;}
 .footer .footer-menu {display: flex; align-items: center; justify-content: flex-end;}
 .footer .footer-menu li a{font-weight: 400; font-size: 1.8rem;color: var(--main-gray-color);padding: 5px 15px; transition: all .2s ease;}
 .footer .footer-menu li a:hover{color: var(--main-primary-color);}
 .footer .copyright{font-size: 16px; color: var(--black-color); text-align: center; padding: 2.3rem 0; border-top: 1px solid #C5C5C5;}

.animation-img-bx{position: relative; width: 100%; max-width: 500px; }
.animation-img-bx.m-auto{margin: 0 auto !important;}
.animation-img-bx img{position: relative; z-index: 1;}
.radial-circles { position: absolute; width: 13rem; height: 13rem; left: -2rem; top: -3rem; background: #a1d55dc9; border-radius: 50%; }
.radial-circles > div { animation: growAndFade 1.5s infinite ease-out; background-color: rgba(161, 213, 93, 0.7); border-radius: 50%; height: 17rem; opacity: 0; position: absolute; width: 17rem; z-index: -1; left: -2rem; top: -2rem; }
.radial-circles .circle1 {  animation-delay: 0s; }
.radial-circles .circle2 {  animation-delay: 500ms; }
.radial-circles .circle3 {    animation-delay: 1s }
.radial-circles.pos-top-center{    right: 0; left: unset; top: 12rem;}
.digital-assets-list .assets-bx .iconbx.bankicon img { height: 80px; }

  @keyframes growAndFade {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); opacity:1; }
    100% { transform: scale(1.4); opacity:0; }
  }


  .notary-circle {aspect-ratio: 1/1; position: relative;  width: 17rem;  display: flex; align-items: center; justify-content: center;background: rgba(144, 249, 229, 0.2); border: 1px solid #FFFFFF; border-radius: 50%;  }
  .notary-circle .circle {border: 2px dashed #fff; border-radius: 50%; width: 95%; height: 95%; margin: 0 auto; position: absolute; animation: spin-clockwise 7s infinite linear; }
  .notary-circle .circle1 { position: absolute; animation: spin-counterclockwise 9s infinite linear; background: url(../images/border-gradient-circle.png)no-repeat center center; width: 83%; height: 83%; background-size: contain; }
  .notary-circle .circle2 {border: 2px dashed #fff; border-radius: 50%; width: 60%; height: 60%; position: absolute; top: 20%; left: 20%; animation: spin-clockwise 8s infinite linear; }
  
  @keyframes spin-clockwise {
      0% {
          transform: rotate(0deg);
      }
  
      100% {
          transform: rotate(360deg);
      };
  }
  
  @keyframes spin-counterclockwise {
      0% {
          transform: rotate(0deg);
      }
  
      100% {
          transform: rotate(-360deg);
      };
  }



#preloader { position: fixed; display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005); bottom: 0; top: 0; z-index: 99999; left: 0; right: 0; background: linear-gradient(81.45deg, #009490 0%, #A1D55D 150.09%);}
#preloader .loader { position: absolute; width: 150px; height: 150px; border-radius: 50%; animation: spin-clockwise 2s linear infinite; }
#preloader .loader:nth-child(2),
#preloader .loader:nth-child(4) { filter: hue-rotate(290deg); animation-delay: -1s; }
#preloader .loader:nth-child(1)::before, #preloader .loader:nth-child(2)::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(to top, transparent, rgba(0, 255, 249, .4)); background-size: 100px 180px; background-repeat: no-repeat; border-top-left-radius: 100px; border-bottom-left-radius: 100px; }
#preloader i { position: absolute; top: 0; left: 50%; transform: translate(-50%); width: 20px; height: 20px; background: #00fff9; border-radius: 50%; z-index: 10; box-shadow: 0 0 10px #00fff9, 0 0 20px #00fff9, 0 0 30px #00fff9, 0 0 40px #00fff9, 0 0 50px #00fff9, 0 0 60px #00fff9, 0 0 70px #00fff9, 0 0 80px #00fff9, 0 0 90px #00fff9, 0 0 100px #00fff9; }
#preloader .loader span { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; background-color: #38f0e4; border-radius: 50%; z-index: 1; }