/**
 * ----------------------------------------------
 * Font Faces
 * ----------------------------------------------
 *
*/
/**
 * ----------------------------------------------
 * Font Sizes
 * ----------------------------------------------
 *
*/
/**
 * ----------------------------------------------
 * COLOR CODES
 * ----------------------------------------------
 *
*/
/**
* ----------------------------------------------
* Shadows CODES
* ----------------------------------------------
*
*/
/**
 * ----------------------------------------------
 * Loop classes
 * ----------------------------------------------
 *
*/
/**
 * ----------------------------------------------
 * Theme colors
 * ----------------------------------------------
 *
*/
/*
* @description Set transition
* Pass transition single properties E.g @include transition(border 0.3s ease-in-out) => transition: border 0.3s ease-in-out; -webkit-transition: border 0.3s ease-in-out;
*/
/*
* @description Set transform
* Pass transform value E.g @include transform(scale(0.3)) => transform: scale(0.3); -webkit-transform: scale(0.3);
*/
/*
* @description Set delay in transition
* Pass transition delay E.g @include transition-delay(1s) => transition-delay: 1s; -webkit-transition-delay: 1s.
*/
/*
* @description This mixin is used to create position
* Pass position like absolute, fixed etc. and give top, bottom, left, right, index.
* All params are optional, After passing all things it's generate the css.
* E.g @include position(absolute, 10px, 10px, 10px, 10px, 1) => position: absolute;top:10px;bottom:10px;left:10px;right:10px;index:1;
* Another E.g @include position(absolute, 10px, 10px, 10px, 10px) => position: absolute;top:10px;bottom:10px;left:10px;right:10px;
*/
/*
* @description This mixin is used to create border
* Pass direction like top, bottom, left, right and give width of the border, style of border like solid, dashes etc, color of the border and pass null if you want border all the sides. E.g @include border(null, 1px, solid, #000) => border: 1px solid #000;
* Another E.g @include border(left, 1px, solid, #000) => border-left: 1px solid #000;
*/
/*
* @description This mixin is used to create grediant button
* Pass grediant value, clip type, clip type 2, origin E.g @include gradient($gred) => background-image: $grad; ---> used to include grediant background
* Another E.g @include gradient($gred,padding-box, border-box, border-box) => background-image: $grad;background-clip: padding-box, border-box; background-origin: border-box;---> this used to create button gred.
*/
/*
* @description This mixin is used to create text grediant
* Pass grediant value E.g @include text-gradient($gred) => background-image: $grad; -webkit-text-fill-color: transparent; -webkit-background-clip: text;
*/
/*
* @description This mixin is used to create greyscale the image or others
* Pass greyscale percentage E.g @include grayScale(100%) => filter: grayscale(100%);-webkit-filter: grayscale(100%);
*/
/*
* @description This mixin is used to create animation
* Pass animation name percentage E.g @include animation(slideIn) => ;animation-name: slideIn; -webkit-animation-name: slideIn
*/
/*
* @description This mixin is used to create animation duration
* Pass animation name percentage E.g @include animation-duration(1s) => animation-duration: 1s; -webkit-animation-duration: 1s;
*/
/*
* @description This mixin is used to create animation function 
* Pass animation timing function E.g @include animation-function(cubic-bezier(0.81, 0.15, 0.26, 0.99)) => animation-timing-function: cubic-bezier(0.81, 0.15, 0.26, 0.99); -webkit-animation-timing-function: cubic-bezier(0.81, 0.15, 0.26, 0.99);
*/
/*
* @description Get theme color
* Pass object and key of obj, Get value from variables 
*/
/*
* Convert px to rem Unit
*/
/**
* ----------------------------------------------
* Grediant CODES
* ----------------------------------------------
*
*/
/**
* ----------------------------------------------
* Set base color, background's and button's color
* ----------------------------------------------
*
*/
a:hover {
  color: #3264f5; }

.grediant-overlay, .bg-gred {
  background-image: linear-gradient(to right, #7202bb 2%, #3264f5 82%); }

.grediant-overlay-reverse, .bg-reverse-gred {
  background-image: linear-gradient(to right, #3264f5 2%, #7202bb 82%); }

.gred-bg.fixed-nav {
  background-image: linear-gradient(to right, #7202bb 2%, #3264f5 82%); }

.text-grediant {
  background-image: linear-gradient(to right, #7202bb 2%, #3264f5 82%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; }

.scroll-top:hover .scroll-top-icon {
  background-color: #3264f5; }

.icon-img {
  color: #3264f5; }

.text-primary {
  color: #3264f5 !important; }

.text-secondary {
  color: #888888 !important; }

.bg-primary {
  background: #3264f5 !important; }

.close:hover {
  color: #3264f5; }

.more-link:after {
  background: #0095A9; }

.more-link:hover {
  color: #0095A9; }

.btn-primary {
  background-color: #0095A9;
  color: #ffffff; }
  .btn-primary:hover {
    color: #ffffff; }

.btn-outline-primary {
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #7202bb, #3264f5);
  background-clip: padding-box, border-box;
  background-origin: border-box;
  padding: 0.5rem 1.25rem; }
  .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background: #3264f5;
    background-image: linear-gradient(to right, #7202bb 2%, #3264f5 82%);
    background-clip: border-box, padding-box;
    background-origin: border-box; }

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
  background-image: linear-gradient(to right, #0095A9 0%, #0095A9 51%, #0095A9 100%);
  color: #ffffff; }

.btn-outline-white:hover {
  color: #3264f5;
  background: #ffffff; }

.btn-white {
  color: #3264f5; }

.btn-navigate {
  border-color: #222;
  color: #222; }
  .btn-navigate:after {
    color: #3264f5; }
  .btn-navigate:hover {
    color: #3264f5;
    border-color: #3264f5; }

.owl-carousel .owl-dots .owl-dot:hover:after, .owl-carousel .owl-dots .active:after {
  background: #3264f5; }

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
  color: #3264f5; }

.preloader .bar-loader span {
  background: #0095A9; }

.blog-box-3 .blog-title:hover h6 {
  color: #3264f5; }

.header.link-nav.fixed-nav .navbar-nav .nav-link.active, .header.link-nav.fixed-nav .navbar-nav .nav-link:hover {
  color: #3264f5; }

.work-list {
  padding-right: 15px; }
  @media (max-width: 767px) {
    .work-list {
      padding-right: 0; } }
  .work-list .work-nav {
    justify-content: center; }
    @media (min-width: 768px) {
      .work-list .work-nav {
        margin-left: 1rem;
        justify-content: flex-start; } }
  .work-list .control:after {
    background-color: #3264f5; }
  .work-list .control.filtr-active, .work-list .control:hover {
    color: #3264f5; }

.swiper-pagination.pagination-white .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 1; }

.swiper-pagination.pagination-white .swiper-pagination-bullet-active {
  background: #3264f5; }

.video-btn a {
  color: #3264f5; }
  .video-btn a:hover {
    background: #3264f5;
    color: #ffffff; }

/*# sourceMappingURL=../maps/theme-3.css.map */