body{
  /* font-family: 'Lato', sans-serif !important; */
  background-color: #f5f7fb;
}

.top-header {
    background: #5271ff;
    padding: 0.50rem 0;
}
.contact-wraper {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    align-items: center;
}
a.top-nav-link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

a.top-nav-link:hover {
    color: #f0f8ff;
}
a.top-nav-link span.link-menu {
    margin-left: 0.25rem;
}
/*.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}*/

.header{
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: none;
  background-color: #e6efff;
  border-bottom: 1px solid #5271ff38;
}

.header .navbar-brand img{
  height: 60px;
}

.header .navbar .navbar-nav .nav-link{
  color: #5271ff;
  font-weight: 500;
  padding: 15px 20px;
  cursor: pointer;
  position: relative;
  background: transparent;
  font-size: 16px;
  border-radius: 2rem;

}

.header .navbar .navbar-nav .active > .nav-link{
  color: #fff !important;
  width: 100%;
  font-weight: 500;
  background: #5271ff;
  border-radius: 2rem;
  
}

.header .navbar .navbar-nav .nav-link:hover{
  color: #fff !important;
  width: 100%;
  font-weight: 500;
  background: #5271ff;
}

.header .navbar li {
  position: relative;
  line-height: 1em;
  padding: 0 0.25rem !important;
}

.header .navbar .menu-item-list .dropdown-menu .dropdown-item{
 padding: 1rem 1.5rem;
}

.header .navbar .menu-item-list .dropdown-menu {
  margin-top: 2px;
  padding: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.header .navbar .navbar-toggler {
  font-size: 24px;
  color: #fff;
  border: none;
}

.header .btn-login{
  padding-left: 20px;
  padding-right: 10px;
  color: #fff!important;
}

.header .sign-up{
  padding: 2px 15px;
}

.header .btn-outline-primary.sign-up{
  border-color: #fff!important;
  color: #fff !important;
  z-index: 9999;
}

.header a.btn-outline-primary.sign-up:hover{
  background: #fff!important;
  color: #333357!important;
  z-index: 9999;
}

/*section banner*/
section.banner{
  min-height: 300px;
  position: relative;
  overflow: hidden;
  padding: 100px 0 100px 0;
  background-color:#ff7903;
  /*background: linear-gradient(to bottom right,#ff6807 0%,#ffb600cc 100%);
  background-image: -webkit-linear-gradient(left,#ff7802 0%,#fea921 100%),-webkit-linear-gradient(left,#ff7802 0%,#fea921 100%);
  background-image: -moz-linear-gradient(left,#ff7802 0%,#fea921 100%),-moz-linear-gradient(left,#ff7802 0%,#fea921 100%);
  background-image: -o-linear-gradient(left,#ff7802 0%,#fea921 100%),-o-linear-gradient(left,#ff7802 0%,#fea921 100%);
  background-image: linear-gradient(to right,#ff7802 0%,#fea921 100%),linear-gradient(to right,#ff7802 0%,#fea921 100%);*/
}

section.banner .contents{
  padding-top: 40px;
  color: #fff;
}

section.banner .contents .head-title{
  font-size: 50px;
  line-height: 60px;
  margin-bottom: 10px;
  font-weight: 600;
  font-family: 'Source Sans Pro', sans-serif;
}

section.banner .contents p{
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
  margin: 0px;
  font-size: 14px;
  line-height: 25px;
  color: #fff;
}

section.banner .contents .head-button{
  color: #222222;
}


section.banner .contents .head-button .btn-outline-primary.sign-up{
  color: #b85ade;
  font-weight: 600;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}

section.banner .contents .head-button .btn-outline-primary.sign-up:hover{
  color: #b85ade;
  font-weight: 600;
  background: linear-gradient(45deg,#db17cb 0,#febe06 100%);
  border-color: #fff;
}

section.banner .intro-img img{
  animation: float 5s infinite ease-in-out;
}

section.core-services:before{
  content: "";
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 390px;
  background: #b85ade url(../images/wave_background.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

section.core-services{
  position: relative;
  padding: 289px 0 0px 0;
}


/*section our-services*/
section.our-services{
  color: #212529;
  position: relative;
  padding: 100px 0;
  background: #fff;
}

section.our-services .contents .head-title{
  font-size: 50px;
  font-weight: 600;
  font-family: 'Source Sans Pro', sans-serif;
  color: #212529;
}

section.our-services .contents .border-line {
  height: 5px;
  width: 250px;
  background: #e6efff;
  margin: 20px auto;
  position: relative;
  border-radius: 30px;
}

section.our-services .contents .border-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4.7px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #5271ff;
  -webkit-animation-duration: 3s;
  animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: moveIcon;
  animation-name: moveIcon;
}


section.our-services .contents .desc{
  font-size: 18px;
  font-weight: 500;
}

section.our-services .feature-item{
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  min-height: 420px;
  max-width: 400px;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

section.our-services .feature-item .animation-box{
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

section.our-services .feature-item .animation-box:before{
  content: "";
  width: 205px;
  height: 205px;
  background: url(../images/three_dot_circle.svg) no-repeat center center;
  display: block;
  animation: rotation 8s linear 0s infinite;
}

section.our-services .feature-item .animation-box .icon{
  position: absolute;
  font-size: 40px;
}

section.our-services .feature-item i{
  font-size: 50px;
  display: block;
  margin-bottom: 15px;
  color: #5271ff!important;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}
section.our-services .feature-item p{
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

section.our-services .feature-item:hover {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  border-radius: 8px;
}

section.our-services .feature-item h3{
  font-weight: 200;
  font-size: 30px;
}

section.our-services .feature-item p{
  margin-bottom: 30px;
}

/*about-area*/
section.about-area{
  background: #fff;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  padding: 110px 0 80px;
}

section.about-area .contents{
  padding: 20px;
}

section.about-area .contents .head-title{
  color: #222222;
  font-size: 30px;
  font-weight: 700;
  line-height: 60px;
  margin-bottom: 10px;
  font-family: 'Open Sans', sans-serif;
}

section.about-area .contents p{
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
  margin: 0px;
  font-size: 16px;
  line-height: 25px;
  color: #abacae;
}

section.about-area .contents .head-button{
  margin-top: 30px;
  color: #222222;
}

.about-area .btn-signin{
  color: #fff;
}

/*section how it works*/
section.how-it-works{
  padding: 100px 0;
  position: relative;
  background: #ff7903;
  background: -webkit-linear-gradient(45deg, #2a3876, #2b3a7c) !important;
  background: -moz- oldlinear-gradient(45deg, #2a3876, #2b3a7c) !important;
  background: -o-linear-gradient(45deg, #2a3876, #2b3a7c) !important;
  background: linear-gradient(45deg, #2a3876, #2b3a7c) !important;
  color: #fff;
  z-index: 100;
}

.how-it-works:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/bg_how_it_works.jpg);
  background-position: center center;
  background-attachment: fixed;
  opacity: 0.1;
  z-index: -99;
}

section.how-it-works .header-top{
  padding-bottom: 80px;
}

section.how-it-works .header-top .title{
  font-size: 40px;
  font-weight: 600;
  font-family: 'Source Sans Pro', sans-serif;
}

section.how-it-works .step-lists .step{
  position: relative;
  padding-bottom: 75px;
}

section.how-it-works .step-lists .step .bg-number{
  position: absolute;
  font-size: 12rem;
  top: -130px;
  left: 0px;
  z-index: -1;
  font-weight: bold;
  color: rgb(199 124 228);
  font-family: 'Source Sans Pro', sans-serif;
}


/*section-1*/
section.reviews{
  color: #212529;
  position: relative;
  padding: 100px 0;
  background: #ffffff;
}

section.reviews .contents .head-title{
  font-size: 50px;
  font-weight: 600;
  font-family: 'Source Sans Pro', sans-serif;
}

section.reviews .item {
    padding: 40px 20px;
    min-height: 325px;
    border-color: #e9ccaa;
    box-shadow: 2px 2px 6px 0 #ffedd8;
}

section.reviews .item .person-info .name{
  font-family: 'Arvo', serif;
  font-size: 18px;
  color: black;
  margin-bottom: 2px!important;
}

section.reviews .item .desc{
  color: #7e7e7e;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
.person-info {
    text-align: left;
    padding: 0 1.5rem;
}

section.reviews .item .star-icon{
  color: hsl(46, 100%, 49%);
  text-align: left;
}

.top-space {
    padding-top: 60px;
}

/*section 3*/

section.section-3{
  color: #fa7778;
  position: relative;
  padding: 60px 0 40px;
  background: linear-gradient(45deg,#9a56ff 0,#e36cd9 100%);
  box-shadow: 0 10px 22px 10px rgba(27, 38, 49, 0.1);
  color: #fff;
}


.animatation-box-1 {
  position: relative;
}

.animated{
  position: absolute;
}

.icon1 {
  left: -138px;
  animation: LTRScale 5s infinite ease-in-out;
}
.icon2 {
  top: 450px;
  right: -60px;
  animation: rotation 10s infinite ease-in-out;
}

.icon3{
  top: 500px;
  left: -20px;
  right: 30px;
  z-index: 1;
  height: 80px;
  animation: fadeRTL 4s infinite ease-in-out;
}

.animation-2{
  position: relative;
}

.animation-2 .intro-img{
  animation: float 3s ease infinite;
}

.animation-2 .icon-1{
  left: 300px;
  height: 30px;
  animation: fade-up 1.8s infinite ease-in-out;
}

.animation-2 .icon-2{
  left: 460px;
  top: 76px;
  animation: fade-up 1.1s infinite ease-in-out;
}

.animation-2 .icon-3{
  left: 224px;
  top: -60px;
  animation: fadeLTR 1.5s infinite ease-in-out;
}

.animation-2 .icon-4{
  left: -14px;
  top: -32px;
  height: 35px;
  animation: heartBeat 1.1s infinite ease-in-out;
}

.animation-2 .icon-5{
  left: 525px;
  top: 171px;
  height: 40px;
  animation: tada 1.8s infinite ease-in-out;
}

.animation-2 .icon-6{
  left: 117px;
  top: -75px;
  height: 35px;
  animation: tada 1.8s infinite ease-in-out;
}

.animation-2 .icon-7{
  top: -61px;
  left: 350px;
  height: 35px;
  animation: tada 1.8s infinite ease-in-out;
}

.animation-2 .icon-10{
  left: -62px;
  top: 107px;
  animation: tada 1.8s infinite ease-in-out;
}

.animation-2 .icon-tree{
  bottom: -4px;
  height: 135px;
  animation: float 3s ease infinite;
}
.bg-gray{
  background: #f2f3f5 !important;
}
.mobile-show{
  display: none;
}
.content {
  position: absolute;
  display: none;
  padding-top: 1rem;
  left:-12%;
}
.toltip {
    position: relative;
    background: #fff !important;
    padding: 1rem;
    z-index: 10;
    box-shadow: 0px 7px 2rem rgba(0,0,0,.175);
}

.toltip:before {
    content: "";
    background-color: #ffffff;
    width: 1rem;
    height: 1rem;
    display: block;
    position: absolute;
    left: 50%;
    transform: rotate(-45deg) translateX(-50%);
    transform-origin: left;
    top: -0.5rem;
}
section.services-list .social-item.soundcloud .buy-button,
section.services-list .social-item.soundcloud .buy-button:hover {
    background: #fff ;
    color: #2E2E3A ;
    font-weight: 600;
    text-align: left;
    margin: 0;
}

.social-link-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    background: #ff9800;
    padding: 5px 1rem;
}

img.service-icon {
    max-width: 2.5%;
}

h3.service-title {
    font-size: 1rem;
    margin-bottom: 0;
}
.center-item {
    display: flex;
    justify-content: center;
}
/*reponsive*/

@media (min-width:1000px){
  section.services-list .social-item:hover  .content {
    display: block;
}
}
@media (min-width: 1280px){
  .container {
    max-width: 85%;
  }
}



@media (max-width: 768px){
  .header .navbar .menu-item-list .dropdown-menu {
    margin-top: 10px;
  }
}

.header.shrink{
  background: #fff!important;
  box-shadow: 0 3px 9px 3px rgba(0, 0, 0, 0.06)!important;
}

.header.shrink .navbar .navbar-nav .nav-link{
  color: #22012f ;
  cursor: pointer;
  position: relative;
  background: transparent;
}

.header.shrink .navbar .navbar-nav .active > .nav-link{
  color: #ff7a03 !important;
}

.header.shrink .navbar .navbar-nav .nav-link:hover{
  color: #ff7a03 !important;
}

.header.shrink .navbar ul.navbar-nav li.nav-item.active:before, .header.shrink .navbar ul.navbar-nav li.nav-item:hover:before{
  content: "";
  height: 5px;
  margin: 0 auto;
  width: 90%;
  position: absolute;
  background-color: #fea921;
  background-image: -webkit-linear-gradient(left,#ff7802 0%,#fea921 100%),-webkit-linear-gradient(left,#ff7802 0%,#fea921 100%);
  background-image: -moz-linear-gradient(left,#ff7802 0%,#fea921 100%),-moz-linear-gradient(left,#ff7802 0%,#fea921 100%);
  background-image: -o-linear-gradient(left,#ff7802 0%,#fea921 100%),-o-linear-gradient(left,#ff7802 0%,#fea921 100%);
  background-image: linear-gradient(to right,#ff7802 0%,#fea921 100%),linear-gradient(to right,#ff7802 0%,#fea921 100%);
}

.header.shrink .btn-login{
  color: #22012f!important;
  
}

.header.shrink .btn-login:hover{
  color: #fea921!important;
  font-weight: 600;
}

.header.shrink .sign-up{
  padding: 2px 15px;
}

.header.shrink .btn-outline-primary.sign-up{
  border-color: #b85ade!important;
  color: #22012f !important;
  z-index: 9999;
}

.header.shrink a.btn-outline-primary.sign-up:hover, .header a.btn-outline-primary.btn-statistics{
  font-weight: 600;
  color: #fff!important;
  z-index: 9999;
  border-color: #fea921!important;
  background-color: #fea921!important;
  background-image: -webkit-linear-gradient(left,#ff7802 0%,#fea921 100%),-webkit-linear-gradient(left,#ff7802 0%,#fea921 100%)!important;
  background-image: -moz-linear-gradient(left,#ff7802 0%,#fea921 100%),-moz-linear-gradient(left,#ff7802 0%,#fea921 100%)!important;
  background-image: -o-linear-gradient(left,#ff7802 0%,#fea921 100%),-o-linear-gradient(left,#ff7802 0%,#fea921 100%)!important;
  background-image: linear-gradient(to right,#ff7802 0%,#fea921 100%),linear-gradient(to right,#ff7802 0%,#fea921 100%)!important;
}

@media (max-width: 768px){
  .header .navbar .navbar-nav{
    margin:10px -35px 0px !important;
  }

  .header .navbar .site-logo-white{
    display: none!important;
  }  
  .header .navbar .site-logo{
    display: block!important;
  }

  .header .navbar .navbar-nav li{
    line-height: 1em;
    padding: 8px 38px;
  }

  .header .navbar ul.navbar-nav li.nav-item.active:before, .header .navbar ul.navbar-nav li.nav-item:hover:before{
    display: none;
  }
  .header .navbar .navbar-toggler{
    color: #fff;
  } 
  .header .btn-login-signup{
    padding: 10px;
  }

  .header .btn-login{
    padding-left: 0px!important;
  }

  .header{
    box-shadow: 0 3px 9px 3px rgba(0, 0, 0, 0.06)!important;
    padding-bottom: 0;
    padding-top: 0;
  }
  .mobile-show{
  display: block;
}

  .header .navbar .navbar-nav .nav-link{
    color: #fff ;
    cursor: pointer;
    position: relative;
    background: transparent;
  }

  .header .navbar .navbar-nav .active > .nav-link{
    color: #fff !important;
  }

  .header .navbar .navbar-nav .nav-link:hover{
    color: #ff7a03 !important;
  }

  .header .navbar ul.navbar-nav li.nav-item.active:before, .header.shrink .navbar ul.navbar-nav li.nav-item:hover:before{
    content: "";
    height: 5px;
    margin: 0 auto;
    width: 90%;
    position: absolute;
    background-color: #fea921;
    background-image: -webkit-linear-gradient(left,#ff7802 0%,#fea921 100%),-webkit-linear-gradient(left,#ff7802 0%,#fea921 100%);
    background-image: -moz-linear-gradient(left,#ff7802 0%,#fea921 100%),-moz-linear-gradient(left,#ff7802 0%,#fea921 100%);
    background-image: -o-linear-gradient(left,#ff7802 0%,#fea921 100%),-o-linear-gradient(left,#ff7802 0%,#fea921 100%);
    background-image: linear-gradient(to right,#ff7802 0%,#fea921 100%),linear-gradient(to right,#ff7802 0%,#fea921 100%);
  }

  .header .btn-login{
    color: #22012f!important;
    
  }

  .header .btn-login:hover{
    color: #fea921!important;
    font-weight: 600;
  }

  .header .sign-up{
    padding: 2px 15px;
  }

  .header .btn-outline-primary.sign-up{
    border-color: #b85ade!important;
    color: #22012f !important;
    z-index: 9999;
  }

  .header a.btn-outline-primary.sign-up:hover, .header a.btn-outline-primary.btn-statistics{
    font-weight: 600;
    color: #fff!important;
    z-index: 9999;
    border-color: #fea921!important;
    background-color: #fea921!important;
    background-image: -webkit-linear-gradient(left,#ff7802 0%,#fea921 100%),-webkit-linear-gradient(left,#ff7802 0%,#fea921 100%)!important;
    background-image: -moz-linear-gradient(left,#ff7802 0%,#fea921 100%),-moz-linear-gradient(left,#ff7802 0%,#fea921 100%)!important;
    background-image: -o-linear-gradient(left,#ff7802 0%,#fea921 100%),-o-linear-gradient(left,#ff7802 0%,#fea921 100%)!important;
    background-image: linear-gradient(to right,#ff7802 0%,#fea921 100%),linear-gradient(to right,#ff7802 0%,#fea921 100%)!important;
  }
  
  section.about-area .contents, section.banner .contents {
    text-align: center;
  }  
  
  section.banner .box-image{
    margin-top: 150px!important;
  }
  section.services-list .social-item .img-logo{
    max-width: 100% !important;
  }

  .toltip {
    position: relative;
    padding: 0;
    z-index: 10;
    box-shadow: none;
    padding-top: 1rem;
  
}
.toltip:before {
  display: none;
}
.content {
    position: relative;
    padding-top: 0 ;
    height: auto;
    left:0;
    top:6px;
  }
section.services-list .social-item .buy-button {
    background: #fff7eb;
    width: 100%;
    margin-bottom: 0.5rem !important;
    border: none;
    background: linear-gradient(90deg, rgba(255,255,255,1) 6%, rgba(245,226,244,1) 49%, rgba(245,226,244,1) 100%) !important;
}
section.services-list .social-item{
  max-width: 100% !important;
}
}

@media (min-width: 1280px){
  .container {
    max-width: 1200px;
  }
}


.auth-login-form{
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-image: url(../images/bg_auth.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.auth-login-form .form-login{
  width: 500px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 65px 55px 54px 55px;
}

.auth-login-form .form-login .site-logo{
  padding-bottom: 20px;
}

.auth-login-form .form-login .site-logo img{
  max-height: 60px;
}

.auth-login-form .form-login .btn-submit{
  height: 50px;
  color: #fff;
  text-transform: uppercase;
}

.auth-login-form .form-login .btn-submit, .about-area .btn-signin{
  background-image: linear-gradient(to right, #FEAC5E 0%, #C779D0 51%, #FEAC5E 100%);
}

.section-3 .btn-signin{
  color: #fff;
  background-image: linear-gradient(to right, #ff00cc 0%, #333399 51%, #ff00cc 100%);
}


.btn-gradient {
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  box-shadow: 0 0 20px #eee;
}

.btn-gradient:hover {
  background-position: right center;
}

.header .dropdown-menu {
  margin-top: 0rem;
}

.header .navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

.header .dropdown-menu{
  padding: 0px;
  border: none;
  border-radius: 0px;
  min-width: 200px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -webkit-transition: all 150ms linear;
  transition: all 150ms linear;
}

.header .dropdown-menu li.dropdown-submenu:hover{
  background-color: hsl(0, 8%, 97%);
}

.header .dropdown-menu li.dropdown-submenu:hover>a{
  color: #ff7a03;
}

.header .dropdown-menu li.dropdown-submenu:hover>a:after{
  transform: rotate(-90deg);
}

.header .dropdown-item{
  color: black;
}

.header .dropdown-item:hover, .dropdown-item:focus {
 background-color: hsl(0, 8%, 97%);
 color: #ff7a03; 
}

.header .navbar .dropdown-menu li {
  padding: 10px 10px;
}

.header .dropdown-submenu {
  position:relative;
}

.header .dropdown-submenu>.dropdown-menu {
  top:0;
  left:99.99%;
}

/* rotate caret on hover */
.header .dropdown-menu > li > a:hover:after {
  text-decoration: underline;
  transform: rotate(-90deg);
}

@media (max-width: 768px){
  .top-header{
    display: none !important;
  }
  .header .dropdown-menu {
    margin-top: 0.75rem;
    border: none;
    box-shadow: none;
  }

  .header .dropdown-menu li.dropdown-submenu:hover, .header .dropdown-menu li.dropdown-submenu:hover>a{
    background-color: #fff;
  }
  section.services-list .social-item .img-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 10px !important;
    border-width: 1px !important;
}

section.services-list .social-item .img-logo img {
    max-width: 10% !important;
    margin-bottom: 0 !important;
}

section.services-list .social-item .img-logo h4.title {
    margin: 0;
}

section.services-list .social-item {
    margin-top: 16px !important;
}
body .row.instent-delivery .col-lg-3 {
    max-width: 100% !important;
}
}



/*section services list*/
section.services-list{
  color: #212529;
  position: relative;
  padding: 40px 0;
  background: #fff;
}

section.services-list .social-item{
  margin-top: 50px;
  max-width: 20%;
}

/*section.services-list .social-item .img-logo{
  max-width: 100px;
  margin: 0 auto;
  margin-bottom: 30px;
}*/
section.services-list .social-item .img-logo {
    max-width: 100%;
    margin: 0 auto;
    background: #e6efff;
    width: 100%;
    padding: 2rem 0;
    border-radius: 1.5rem;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;

}

section.services-list .social-item .img-logo img{
  max-width: 35%;
  margin-bottom: 1rem;
}
section.services-list .social-item .img-logo h4.title {
    color: #2E2E3A;
    font-size: 16px;
}
section.services-list .social-item .content .title{
  margin-bottom: 10px;
  
}


section.services-list .social-item .buy-button {
  border-radius: 4px;
/*  background: linear-gradient(to right, #67b26b, #4ca2cb) !important;*/
  border: none;
  color: #FFFFFF;
  transition: all 0.4s;
  cursor: pointer;
  margin: 5px;
}

section.services-list .social-item .buy-button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.4s;
}

section.services-list .social-item .buy-button span:before {
    content: "";
    width: 4px;
    height: 0%;
    position: absolute;
    background: #ff9816;
    background-image: linear-gradient(180deg, #fe9a18 10% , #1976d2);
    left: -12px;
    top: 50%;
    transition: all 0.3s ease-in-out;
}
section.services-list .social-item .buy-button:hover span:before{
    height:100%;
    transform:translateY(-10px)
    
}



section.services-list .social-item .buy-button:hover span {
  padding-right: 25px;
  color: #2E2E3A;
}



section.services-list .social-item.youtube .buy-button{
  /* background: #f44336 !important; */
}

section.services-list .social-item.spotify .buy-button{
  /* background: #8bc34a !important; */
}

section.services-list .social-item.instagram .buy-button{
  /* background: #b84192 !important; */
}



section.services-list .social-item.facebook .buy-button{
  /* background: #1976d2 !important; */
}

section.services-list .social-item.twitter .buy-button{
  /* background: #03a9f4 !important; */
}

section.services-list .social-item.twitch .buy-button{
  background: #9146ff !important;
}

/*general CSS*/
section.services-list .social-item .buy-button{
  min-width: 256px;
}

.row.instent-delivery .col-lg-3 {
    max-width: 20%;
}
  :root{ --spn-green:#22c55e; --spn-teal:#06b6d4; }
  .hero-spn{ background: radial-gradient(1200px 600px at -10% -10%, #eafff4 0, transparent 55%), radial-gradient(900px 480px at 110% 10%, #eef2ff 0, transparent 60%); }
  .hero-title{ line-height:1.05; }
  .gradient{ background: linear-gradient(90deg,var(--spn-green),var(--spn-teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero-logo{ height:36px; }
  .hero-card{ border-radius:1rem; }

  /* Logo pills (only logos, user friendly, responsive) */
  .logo-dock{ -webkit-overflow-scrolling:touch; }
  .logo-pill{ border:none; background:transparent; padding:3px; border-radius:16px; display:inline-flex; }
  .logo-pill .inner{ width:56px; height:56px; border-radius:14px; background:#fff; display:grid; place-items:center; box-shadow:0 10px 28px rgba(2,6,23,.18), inset 0 -2px 0 rgba(0,0,0,.06); }
  .logo-pill img{ width:50px; height:50px; object-fit:contain; }
  .logo-pill i{ font-size:18px; color:#334155; }

  .hero-bg{ position:absolute; inset:-20% -10% auto -10%; height:280px; background: radial-gradient(400px 140px at 20% 50%, rgba(34,197,94,.25), transparent), radial-gradient(360px 120px at 60% 30%, rgba(6,182,212,.22), transparent); filter: blur(30px); }
:root{ --ring: 0 0 0 3px rgba(99,102,241,.25); }
  /* Brand palette for InstaBoost.io */
  #services-modern{ background:#fff; /* site background stays white */
  --spn-green:#22c55e; --spn-green-1:#22c55e; --spn-green-2:#16a34a; --spn-teal:#06b6d4; --spn-ink:#2f3a3f; --spn-muted:#6b7280; width: 100%;
}
  @media (prefers-color-scheme: dark){
    #services-modern{ --spn-muted:#94a3b8; }
  }

  /* Section title (brand gradient + subtle underline) */
  #services-modern .text-center.mb-4 h2{
  margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.1;
  background:linear-gradient(90deg,var(--spn-green-1),var(--spn-green-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
  #services-modern .text-center.mb-4 h2::after{
    content:""; display:block; width:clamp(140px,34%,240px); height:4px; margin:.6rem auto 0;
    background:linear-gradient(90deg,var(--spn-green-1),var(--spn-green-2)); border-radius:999px; opacity:.5;
  }
  #services-modern .text-center.mb-4 p{ color:var(--spn-ink); opacity:.78; }
  @media (prefers-color-scheme: dark){
    #services-modern .text-center.mb-4 p{ color:#e5e7eb; opacity:.72; }
  }
  @media (max-width: 575.98px){
    .hero-title{ font-size:1.9rem; }
    .logo-pill .inner{ width:60px; height:60px; }
  }
  
  /* Allow full service names to show */
.btn-action .label {
  white-space: normal !important;  /* allow text to wrap */
  overflow: visible !important;    /* remove hidden overflow */
  text-overflow: unset !important; /* disable ellipsis */
  word-break: break-word !important; /* break long words if needed */
}


 :root{ --ring: 0 0 0 3px rgba(99,102,241,.25); }
  /* Grid */
  .services-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
  .svc-card{ border:1px solid #eef2f7; border-radius: 1rem; overflow:hidden; background:#fff; box-shadow:0 8px 28px rgba(2,6,23,.05); display:flex; flex-direction:column; }
  .svc-header{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; background: linear-gradient(135deg, var(--brand,#0ea5e9), var(--brand-2,#8b5cf6)); color:#fff; }
  .svc-title{ font-size:1rem; font-weight:700; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .logo-wrap{ width:28px; height:28px; border-radius:8px; overflow:hidden; background:transparent; display:grid; place-items:center; }
  .logo-wrap img{ width:100%; height:100%; object-fit:contain; }

  /* Actions */
  .svc-actions{ padding: .8rem; display:flex; flex-wrap:wrap; gap:.5rem; }
  .btn-action{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .65rem; border-radius:.75rem; text-decoration:none; font-weight:600; color:#0b1220; background:#f8fafc; border:1px solid #e5e7eb; box-shadow:0 1px 2px rgba(2,6,23,.04);     width: 100%;}
  .btn-action i{ color:#334155; }
  .btn-action:hover{ filter: brightness(0.98); box-shadow:0 4px 12px rgba(2,6,23,.06); }
  .btn-action .label{ white-space:nowrap; }
  .btn-action .badges{ display:flex; gap:.25rem; margin-left:.25rem; }

  /* More */
  .svc-more{ width:100%; }
  .svc-more summary{ cursor:pointer; list-style:none; padding:.35rem .5rem; border-radius:.6rem; border:1px dashed #e5e7eb; color:#334155; background:#f8fafc; font-weight:600; }
  .svc-more summary::-webkit-details-marker{ display:none; }
  .svc-more .more-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }

  /* Dock — icon chips with scroll-snap, fades, and nav */
  .dock-wrap{ display:flex; align-items:center; gap:.5rem; }
  .dock{ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .dock .icon-pill{ scroll-snap-align:start; }
  .icon-pill{ --bg:#14171f; --inner:#fff; --ring:#ff9a3c; border:none; background:transparent; padding:0; border-radius:16px; display:inline-flex; }
  .icon-pill .inner{ width:48px; height:48px; border-radius:12px; background:var(--inner); display:grid; place-items:center; box-shadow:0 6px 24px rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.06); transition: transform .16s ease, box-shadow .16s ease, outline-color .2s ease;margin: 5px; }
  .icon-pill img{ width:40px; height:40px; object-fit:contain; }
  .icon-pill .inner i{ font-size:18px; color:#374151; }
  .icon-pill:focus-visible .inner{ outline: var(--ring); outline-offset:3px; }
  .icon-pill:hover .inner{ transform: translateY(-1px); }
  .icon-pill.active .inner{ box-shadow:0 0 0 3px var(--brand, var(--ring)), 0 6px 24px rgba(0,0,0,.25); }

  .dock-nav{ position:relative; z-index:1; border:none; background:#0b1220; color:#fff; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:.85; }
  .dock-nav:hover{ opacity:1; }
  .dock-nav.left{ }
  .dock-nav.right{ }

  .dock-fade{ position:absolute; top:0; bottom:0; width:48px; pointer-events:none; opacity:0; transition: opacity .2s ease; }
  .dock-fade.left{ left:0; background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
  .dock-fade.right{ right:0; background:linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
  .dock-wrap.has-left .dock-fade.left{ opacity:1; }
  .dock-wrap.has-right .dock-fade.right{ opacity:1; }

  @media (max-width:575.98px){
    .icon-pill .inner{ width:52px; height:52px; border-radius:14px;margin: 5px; }
    .dock-nav{ width:32px; height:32px; }
  }
.icon-pill:focus,
.icon-pill:focus-visible,
.icon-pill:active {
  outline: none !important;
  box-shadow: none !important;
}.logo-pill:focus,
.logo-pill:focus-visible,
.logo-pill:active {
  outline: none !important;
  box-shadow: none !important;
}


  /* Network color variables */
  .instagram{ --brand:#E4405F; --brand-2:#FCAF45; }
  .facebook{ --brand:#1877F2; --brand-2:#42b72a; }
  .twitter{ --brand:#1D9BF0; --brand-2:#0F1419; }
  .youtube{ --brand:#FF0000; --brand-2:#ff7a7a; }
  .tiktok{ --brand:#25F4EE; --brand-2:#FE2C55; }
  .threads{ --brand:#000000; --brand-2:#2b2b2b; }
  .reddit{ --brand:#FF4500; --brand-2:#ff9f70; }
  .spotify{ --brand:#1DB954; --brand-2:#88e9b0; }
  .telegram{ --brand:#26A5E4; --brand-2:#7cc8f1; }
  .pinterest{ --brand:#E60023; --brand-2:#ff88a0; }
  .linkedin{ --brand:#0A66C2; --brand-2:#6ab1ff; }
  .soundcloud{ --brand:#FF5500; --brand-2:#ffb280; }
  .quora{ --brand:#B92B27; --brand-2:#ff9b99; }
  .free{ --brand:#7c3aed; --brand-2:#22c55e; }

  /* Badges */
  .b{ font-size:.72rem; font-weight:800; letter-spacing:.2px; padding:.12rem .4rem; border-radius:999px; border:1px solid transparent; }
  .b-free{ background:#ecfdf5; color:#047857; border-color:#bbf7d0; }
  .b-real{ background:#e0f2fe; color:#075985; border-color:#bae6fd; }
  .b-hq{ background:#f5f3ff; color:#4c1d95; border-color:#ddd6fe; }
  .b-cheap{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
  .b-instant{ background:#fff1f2; color:#be123c; border-color:#fecdd3; }

  /* Mobile tweaks */
  @media (max-width:575.98px){ .btn-action{ width:100%; justify-content:; } }
  
    :root{
    --spn-green-1:#22c55e; /* update to your exact brand */
    --spn-green-2:#16a34a;
    --spn-ink:#0b1220;      /* primary text */
    --spn-muted:#64748b;    /* secondary text */
    --spn-bg:#ffffff;       /* site bg */
    --spn-card:#ffffff;     /* card bg */
    --spn-bd:#e5e7eb;       /* borders */
  }
  .spn-section{ background:var(--spn-bg); color:var(--spn-ink); padding: clamp(2.25rem, 4vw, 4rem) 0;     width: 100%; }
  .spn-container{ max-width:1200px; margin:0 auto; padding:; }
  .spn-eyebrow{ display:inline-block; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--spn-muted); }
  .spn-h2{ font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 900; letter-spacing:-.02em; line-height:1.15; margin:.35rem 0 0.75rem; }
  .spn-gradient{ background:linear-gradient(90deg,var(--spn-green-1),var(--spn-green-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .spn-lead{ color:var(--spn-muted); font-size: clamp(1rem, 1.2vw, 1.125rem); max-width: 62ch; }
  .spn-grid{ display:grid; gap:1rem; }
  .spn-card{ background:var(--spn-card); border:1px solid var(--spn-bd); border-radius:1rem; box-shadow:0 8px 28px rgba(2,6,23,.05); }
  .spn-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; border-radius:.8rem; padding:.65rem .9rem; text-decoration:none; border:1px solid var(--spn-bd); color:var(--spn-ink); background:#fff; }
  .spn-btn.primary{ color:#fff !important; border-color:transparent; background:linear-gradient(90deg,var(--spn-green-1),var(--spn-green-2)); box-shadow:0 10px 30px rgba(34,197,94,.25); }
  .spn-btn:hover{ filter:brightness(.98); }
  .check{ color:var(--spn-green-1); }

  @media (min-width: 768px){ .spn-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .spn-grid.cols-4{ grid-template-columns:repeat(4,1fr); } }
  @media (min-width: 992px){ .spn-grid.cols-2-lg{ grid-template-columns:repeat(2,1fr); } }
  
  /* Feature Checklist Row */
.list-unstyled.d-flex.flex-wrap.gap-3.small.text-secondary {
  margin: 1rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 1rem !important;
}

.list-unstyled.d-flex.flex-wrap.gap-3.small.text-secondary li {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #0b1220 !important; /* ink color */
  background: #f8fafc !important; /* soft background pill */
  border: 1px solid #e5e7eb !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: 999px !important; /* fully rounded pill */
  box-shadow: 0 2px 4px rgba(2, 6, 23, 0.05) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.list-unstyled.d-flex.flex-wrap.gap-3.small.text-secondary li i {
  font-size: 1rem !important;
  color: #22c55e !important; /* brand green */
}

/* Hover state for pills */
.list-unstyled.d-flex.flex-wrap.gap-3.small.text-secondary li:hover {
  background: linear-gradient(90deg, #22c55e, #16a34a) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
}

.list-unstyled.d-flex.flex-wrap.gap-3.small.text-secondary li:hover i {
  color: #fff !important;
}

/* Testimonials */
.ts-slider {
  overflow: hidden !important;
}

.ts-track {
  display: flex !important;
  transition: transform 0.5s ease !important;
}

.ts-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  min-width: 100% !important;
}

/* Card */
.ts-item {
  background: #f9fafb !important;
  border-radius: 0.75rem !important;
  padding: 1rem !important;
  box-shadow: 0 4px 12px rgba(2,6,23,0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.ts-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08) !important;
}

/* User Info */
.ts-user {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin-bottom: 0.6rem !important;
}
.ts-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #22c55e !important;
}
.ts-stars {
  margin-top: 0.2rem !important;
  color: #fbbf24 !important;
  font-size: 0.9rem !important;
}

/* Controls */
.ts-ctr {
  display: flex !important;
  gap: 0.6rem !important;
  justify-content: flex-end !important;
  margin-top: 1rem !important;
}
.ts-ctr button {
  border: none !important;
  background: linear-gradient(90deg, #22c55e, #16a34a) !important;
  color: #fff !important;
  font-size: 1rem !important;
  border-radius: 0.65rem !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 6px 18px rgba(34,197,94,0.25) !important;
  transition: all 0.2s ease !important;
}
.ts-ctr button:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) !important;
}
a, a:link, a:visited, a:hover, a:focus, a:active {
  text-decoration: none !important;
}
 /* ====== Brand tokens ====== */
  :root{
    --spn-green-1:#22c55e; /* adjust to your brand */
    --spn-green-2:#16a34a;
    --spn-ink:#2f3a3f;
    --spn-border:#eef2f7;
    --spn-bg:#ffffff;
  }
/* Load Roboto (weights 300–900) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* Base family ( 'Roboto' s everywhere unless a component overrides it) */
html {
  font-family: 'Roboto' ;
  font-size: 16px; /* keep your existing size if different */
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure form controls  'Roboto'  */
body, button, input, select, textarea {
  font-family:  'Roboto' ;
}

/* Headings use Roboto with tighter tracking */
h1,h2,h3,h4,h5,h6 {
  font-family:  'Roboto' ;
  letter-spacing: -0.015em;
}

/* Optional: sensible weights */
strong, b { font-weight: 700; }
.emphasis { font-weight: 500; }

/* Do NOT force icons to Roboto—let icon fonts render correctly */
.fa, .fas, .far, .fal, .fab, [class*="fa-"] { font-family:  'Roboto' ; }

/* Optional: utility to switch any block back to system font if needed */
.font-system { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif !important; }

  .logo-wrap {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    background: ;
    display: grid
;
    place-items: center;
}

/* Reset text decoration inside cards */
.svc-card a, .btn-action{ text-decoration:none !important; }

.spn-nav a  { text-decoration:none !important; }

/* Action pill */
.btn-action{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .65rem; border-radius:.75rem;
  color:var(--spn-ink); background:#fff; border:1px solid var(--spn-border); box-shadow:0 1px 2px rgba(2,6,23,.04);
  transition: border-color .18s ease, box-shadow .18s ease, transform .06s ease, color .18s ease; }
.btn-action:hover{ border-color: color-mix(in srgb, var(--brand,#22c55e) 22%, var(--spn-border)); box-shadow:0 6px 16px rgba(2,6,23,.08); }
.btn-action:active{ transform: translateY(1px); }
.btn-action i{ color:#334155; transition: color .18s ease; }
.btn-action:hover i{ color: var(--brand, #16a34a); }
.btn-action .label{ max-width: 28ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-action .badges{ display:flex; gap:.25rem; margin-left:.25rem; }
.btn-action:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand,#22c55e) 30%, transparent), 0 1px 2px rgba(2,6,23,.04); border-color: var(--brand,#22c55e); }


  /* ====== Layout ====== */
  .spn-header{ position:sticky; top:0; z-index:1050; background:var(--spn-bg); border-bottom:1px solid var(--spn-border); }
  .spn-container{ max-width:1200px; margin:0 auto; padding: .5rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
  .spn-brand-logo{ height:38px; display:block; }

  /* Nav desktop */
  .spn-nav{ display:flex; align-items:center; gap:.75rem; }
  .spn-nav-list{ display:flex; gap:.25rem; margin:0; padding:0; list-style:none; }
  .spn-nav-link{ display:inline-block; padding:.55rem .8rem; border-radius:10px; text-decoration:none; font-weight:700; color:var(--spn-ink); }
  .spn-nav-link:hover{ background:#f3f4f6; }
  .spn-nav-link.active{ color:#fff; background:linear-gradient(90deg,var(--spn-green-1),var(--spn-green-2)); box-shadow:0 6px 20px rgba(34,197,94,.25); }

  /* Cart */
  .spn-cart{ position:relative; display:inline-flex; align-items:center; gap:.5rem; padding:.46rem .6rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#0b1220; text-decoration:none; }
  .spn-cart:hover{ background:#f9fafb; }
  .spn-cart-badge{ position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 .35rem; border-radius:999px; background:var(--spn-green-1); color:#fff; font-size:.7rem; line-height:16px; font-weight:800; }

  /* Toggle (mobile) */
  .spn-nav-toggle{ display:none; border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:.45rem .6rem; color:#334155; }

  /* ====== Mobile ====== */
  @media (max-width: 991.98px){
    .spn-nav-toggle{ display:inline-grid; place-items:center; }
    .spn-nav{ position:absolute; left:0; right:0; top:100%; background:var(--spn-bg); border-bottom:1px solid var(--spn-border); border-top:1px solid var(--spn-border); box-shadow:0 8px 24px rgba(2,6,23,.06); transform: translateY(-8px); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; padding:.6rem 1rem; display:grid; grid-template-columns:1fr auto; align-items:center; }
    .spn-nav.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
    .spn-nav-list{ gap:.35rem; }
    .spn-nav-link{ padding:.6rem .75rem; }
  }