body{background-color: #19191B; font-family: 'Nunito Sans', sans-serif;}

@font-face {
    font-family:graghik-font ;
    src: url(../fonts/GraphikBlack.otf);
}

.p-color{color:hwb(0 100% 0% / 0.7)  !important;}

.btn-primary{background-color:#5454D4 !important; border-color: #5454D4 !important;}

.btn-primary:hover{border-color:#0a0a6f !important;}

.btn-contact{ border-color:white !important ; }

.btn-contact:hover{background-color: #5454D4 !important; border-color: #5454D4 !important;}

.show-on-mobile{display: none;}
/*scrollbar*/
::-webkit-scrollbar{ width: 12px; }

::-webkit-scrollbar-thumb{
    background: linear-gradient(transparent,  #00c8ff83 );
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    
}
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(transparent, #00c6ff);}
/*end scrollbar*/

/*loader*/
.loader{
    width: 100%;
    height:100vh;
    background-color: black;
    position: fixed;
    z-index: 100;
}

.custom-loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: 
      radial-gradient(farthest-side,#766DF4 94%,#0000) top/8px 8px no-repeat,
      conic-gradient(#0000 30%,#766DF4);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation:s3 1s infinite linear;
  }
  
  @keyframes s3{ 
    100%{transform: rotate(1turn)}
  }
/*end loader*/
/*header*/
.nav-item .active{color: #5454D4 !important;}
/*end header*/
/*hero section*/
.services h2,h2,.hero-section h1{font-size: 90px; font-family: graghik-font;}
.hero-img{position: relative;}
.hero-img::before{
    content:'';
    z-index: -10;
    border-radius:20px;
    width: 390px;
    height: 390px;
    border: 2px solid white;
    position: absolute;
    top:120px;
    left: 150px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    transform: rotate(24deg) ;
    -webkit-transform: rotate(24deg) ;
    -moz-transform: rotate(24deg) ;
    -ms-transform: rotate(24deg) ;
    -o-transform: rotate(24deg) ;
}
.hero-reactin,.hero-line{left: -50px; top:100px}

.hero-reactin{top:70%}

.hero-plus,.hero-circles{right:0; top:50px}

.hero-plus{top: 80%;}
/*end hero section*/
/*why us*/
.why-us h2{font-size: 60px;}
/*end why us*/
/* services */ 
.services h2 {font-size: 60px;}

.service-blue { background-color: hsla(240, 60%, 58%, 0.503);}
.service-red { background-color: #f0403780;}
.service-yellow { background-color: hsla(48, 99%, 67%, 0.5);}
/* end services */ 

/* start portifilo*/
.slider-img-container{padding: 25px; background-color: #1E1E20;}
.owl-dots {text-align: center;}
.owl-carousel .owl-dots button.owl-dot{
     background-color:#121213 !important;
     padding: 5px !important;
     border-radius:50% ;
     margin-right: 10px;
     -webkit-border-radius:50% ;
     -moz-border-radius:50% ;
     -ms-border-radius:50% ;
     -o-border-radius:50% ;
     transition: all 0.3s ;
     -webkit-transition: all 0.3s ;
     -moz-transition: all 0.3s ;
     -ms-transition: all 0.3s ;
     -o-transition: all 0.3s ;
}
.owl-carousel .owl-dots button.owl-dot:hover,.owl-carousel .owl-dots button.owl-dot.active{
    background-color: #5454D4 !important;
    padding: 5px  10px !important;
    border-radius:30px ;
    -webkit-border-radius:30px ;
    -moz-border-radius:30px ;
    -ms-border-radius:30px ;
    -o-border-radius:30px ;
}
/* end portifilo*/
/*start contact-us-section*/
.contact-us-section h2{font-size: 60px;}
/* end contact-us-section*/

/*media query */ 
@media (max-width:394px) {
    .p-m-size{font-size: 13px;}
    h2{font-size: 35px !important;}
    .show-on-desktop{display: none;}
    .show-on-mobile{display: block;}
    .hero-section h1{font-size: 55px !important;}
    .hero-section .hero-img::before{height:263px ; width:300px ;top:90px; left:20px}
    .hero-reactin{left: 0px; top:80%}
    .hero-line{left:0; top:0px}

    .contact-us-section h2 {font-size: 25px !important;}
    
    footer ul a{font-size: 14px;}
}
/*end*/