// Function
@use "sass:math";
@use "sass:map";

@function rem($pixel) {
    @if math.is-unitless($pixel) {
        @return math.div($pixel, 16)+rem;
    }

    @else {
        @error 'Don\'t use units';
    }
}


@mixin font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  
  // Social buttons hover
  
  @mixin social-btn-hover($color) {
    &:hover {
      border-color: rgba($color, .3);
      color: $color;
    }
  }
  
  @mixin screen-1920() {
    @media (max-width: 1920px) {
      @content;
    }
  }
  
  @mixin screen-1800() {
    @media (max-width: 1800px) {
      @content;
    }
  }
  
  @mixin screen-1600() {
    @media (max-width: 1600px) {
      @content;
    }
  }
  
  @mixin screen-1440() {
    @media (max-width: 1440px) {
      @content;
    }
  }
  
  @mixin screen-1400() {
    @media (max-width: 1399.98px) {
      @content;
    }
  }
  
  @mixin screen-1200 {
    @media (max-width: 1199.98px) {
      @content;
    }
  }
  
  @mixin screen-992() {
    @media (max-width: 991.98px) {
      @content;
    }
  }
  
  @mixin screen-768() {
    @media (max-width: 767.98px) {
      @content;
    }
  }
  
  @mixin screen-576() {
    @media (max-width: 575.98px) {
      @content;
    }
  }
  
  @mixin screen-460() {
    @media (max-width: 460px) {
      @content;
    }
  }

  //
// Variables
// --------------------------------------------------


//== Colors
//
// Gray and brand colors to use across the Theme.

// Grayscale
$white:                 #ffffff !default;
$gray-50:               #fafafa !default;
$gray-100:              #f5f5f5 !default;
$gray-200:              #e5e5e5 !default;
$gray-300:              #d4d4d4 !default;
$gray-400:              #a3a3a3 !default;
$gray-500:              #737373 !default;
$gray-600:              #525252 !default;
$gray-700:            	#404040 !default;
$gray-800:              #262626 !default;
$gray-900:              #171717 !default;
$black:                 #0c0800 !default;

// Brand colors
$primary:               #175cff !default;
$accent:                #168323 !default;
$secondary:             $gray-200 !default;
$info:		        #0FCFFF !default;
$success:               #74B51B !default;
$warning:               #FFC300 !default;
$danger:                #FF6B35 !default;
$dark:                  #111827 !default;

// Adding new color to default Bootstrap's $theme-colors map
$theme-colors: (
        'primary':    $primary,
        'accent':     $accent,
        "secondary":  $secondary,
        "success":    $success,
        "info":       $info,
        "warning":    $warning,
        "danger":     $danger,
) !default;

// Faded colors map
$theme-faded-colors: (
        'primary':    rgba($primary, .09),
        'accent':     rgba($accent, .09),
        "success":    rgba($success, .09),
        "info":       rgba($info, .09),
        "warning":    rgba($warning, .09),
        "danger":     rgba($danger, .09),
) !default;

// Social brand colors
$facebook:      #3b5999;
$twitter:       #1da1f2;
$google:        #dd4b39;
$instagram:     #e4405f;
$pinterest:     #bd081c;
$youtube:       #cd201f;
$slack:         #3aaf85;
$dribbble:      #ea4c89;
$github:        #222222;
$dropbox:       #1E90FF;
$twitch:        #4B367C;
$paypal:        #ecb32c;
$behance:       #0057ff;
$reddit:        #E84422;
$figma:         #FF7262;
$zapier:        #FD4A01;
$drive:          #FFCF63;
$webflow:        #4353FF;

$brand-colors: ();
$brand-colors: map-merge((
        "facebook":     $facebook,
        "twitter":      $twitter,
        "google":       $google,
        "instagram":    $instagram,
        "pinterest":    $pinterest,
        "youtube":      $youtube,
        "slack":        $slack,
        "dribbble":     $dribbble,
        "dropbox":      $dropbox,
        "twitch":       $twitch,
        "paypal":       $paypal,
        "behance":      $behance,
        "reddit" :      $reddit,
        "github":       $github
), $brand-colors);

// Options
//
// Modifying Bootstrap global options

$enable-shadows:          false !default;
$enable-negative-margins: true !default;
$enable-smooth-scroll:    false !default;


// Spacing

$spacer: 1rem !default;
$grid-gutter-width: 1.5rem !default;

// Modifying default Bootstrap's $spacers map
$spacers: (
        0: 0,
        1: $spacer * .25,
        2: $spacer * .5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
        10: ($spacer * 10),
        'grid-gutter': $grid-gutter-width
) !default;


// Body

$body-color:            $gray-500 !default;


// Lists

$list-style-color:      $accent !default;


// Links

$link-color:              $primary !default;
$link-decoration:         none !default;
$link-hover-color:        darken($link-color, 10%) !default;
$link-hover-decoration:   none !default;
$link-transition:         color .25s ease-in-out !default;
$link-shade-percentage:   0% !default;

//transition
$transition-base:          all .3s ease-in-out !default;


// Components
//
// Define common padding and border radius sizes and more.

$border-width:                1px !default;
$border-color:                rgba($dark, .12) !default;
$border-light-color:          rgba($white, .12) !default;

// Border colors map
$border-colors: (
        'primary':    rgba($primary, .35),
        'accent':     rgba($accent, .35),
        "success":    rgba($success, .35),
        "info":       rgba($info, .35),
        "warning":    rgba($warning, .35),
        "danger":     rgba($danger, .35),
) !default;

$border-radius:               .3125rem !default;
$border-radius-lg:            .4375rem !default;
$border-radius-sm:            .25rem !default;

$box-shadow:                  0 .25rem 0.5625rem -.0625rem rgba($black, .03), 0 .275rem 1.25rem -.0625rem rgba($black, .05) !default;
$box-shadow-lg:               0 .3rem 1.525rem -.375rem rgba($black, .1) !default;
$box-shadow-sm:               0 .125rem 0.3rem -.0625rem rgba($black, .03), 0 .275rem .75rem -.0625rem rgba($black, .06) !default;
$box-shadow-inset:            inset 0 1px 2px transparent !default;


$caret-width:                 .275rem !default;

$component-active-bg:         $primary !default;


// Fonts
//
// Font, line-height, and color for body text, headings, and more.

$path-to-fonts:               'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap' !default;

$font-family-sans-serif:      'Open Sans', sans-serif !default;
$font-family-monospace:       'Poppins', sans-serif !default;


$headings-color:              $gray-800 !default;

$font-size-base:              1rem !default;
$font-size-xl:                ($font-size-base * 1.625) !default;
$font-size-lg:                ($font-size-base * 1.125) !default;
$font-size-md:                ($font-size-base * .9375) !default;
$font-size-sm:                ($font-size-base * .875) !default;
$font-size-ms:                ($font-size-base * .8125) !default;
$font-size-xs:                ($font-size-base * .75) !default;

$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base * 1.0625 !default;

// Modifying default Bootstrap's $font-sizes map
$font-sizes: (
        1: $h1-font-size,
        2: $h2-font-size,
        3: $h3-font-size,
        4: $h4-font-size,
        5: $h5-font-size,
        6: $h6-font-size,
        'xl':   $font-size-xl,
        'lg':   $font-size-lg,
        'base': $font-size-base,
        'md':   $font-size-md,
        'sm':   $font-size-sm,
        'ms':   $font-size-ms,
        'xs':   $font-size-xs
) !default;

//lead
$lead-font-weight:            400 !default;


$font-weight-medium-light:    500 !default;
$font-weight-medium:          600 !default;
$font-weight-semibold:        700 !default;
$font-weight-bold:            800 !default;

$headings-font-family:        $font-family-monospace !default;
$headings-margin-bottom:      ($spacer * .625) !default;
$headings-font-weight:        $font-weight-medium !default;

$line-height-base:            1.75 !default;
$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;

$display-font-sizes: (
        1: 5rem,
        2: 4.5rem,
        3: 4rem,
        4: 3.5rem,
        5: 3rem,
        6: 2.5rem,
        404: 10rem
) !default;

$display-font-weight:         $headings-font-weight !default;

$small-font-size:             .8em !default;


$hr-margin-y:                 0 !default;
$hr-color:                    $border-color !default;
$hr-opacity:                  1 !default;

$text-shadow:                 0 .0625rem rgba($black, .5) !default;
$text-muted:                  $gray-500 !default;


$blockquote-font-size:        $font-size-base !default;
$blockquote-footer-font-size: $font-size-sm !default;


// Buttons + Forms

$input-btn-padding-y:               .625rem !default;
$input-btn-padding-x:               1rem !default;
$input-btn-padding-y-sm:            .425rem !default;
$input-btn-padding-x-sm:            .75rem !default;
$input-btn-padding-y-lg:            .75rem !default;
$input-btn-padding-x-lg:            1.25rem !default;
$input-btn-focus-width:             0 !default;

$input-btn-font-size:               ($font-size-base * .9375) !default;
$input-btn-font-size-sm:            ($font-size-base * .8125) !default;
$input-btn-font-size-lg:            ($font-size-base * 1.0625) !default;


$input-border-color:                $border-color !default;
$input-focus-border-color:          $primary !default;
$input-border-radius:               0.375rem !default;
$input-padding-y:                   0.65rem !default;
$form-select-padding-y:             $input-padding-y !default;

// Buttons
$btn-font-family:                   $font-family-monospace !default;
$btn-padding-x:                     1.75rem !default;
$btn-padding-y:                     .65rem !default;
$btn-padding-x-sm:                  1rem !default;
$btn-padding-x-lg:                  1.5rem !default;
$btn-white-space:                   nowrap !default;
$btn-border-radius:                 .375rem !default;

$btn-dark-color:                    $white !default;
$btn-light-color:                   $gray-700 !default;
$btn-font-weight:                   $font-weight-medium-light !default;
$btn-box-shadow:                    unset !default;

$btn-icon-size:                     2.75rem !default;
$btn-icon-sm-size:                  2.25rem !default;
$btn-icon-lg-size:                  3.25rem !default;
$btn-icon-xl-size:                  4.55rem !default;

$btn-transition:                    color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, box-shadow .2s ease-in-out !default;

$btn-focus-box-shadow:              unset !default;
$btn-active-box-shadow:             unset !default;

$btn-pill-border-radius:            ($font-size-base * $line-height-base + $input-btn-padding-y * 2 + .125) !default;
$btn-pill-border-radius-sm:         ($font-size-sm * $line-height-sm + $input-btn-padding-y-sm * 2 + .125) !default;
$btn-pill-border-radius-lg:         ($font-size-lg * $line-height-lg + $input-btn-padding-y-lg * 2 + .125) !default;

// Social buttons
$btn-social-border-width:             $border-width !default;
$btn-social-transition:               border-color .25s ease-in-out, background-color .25s ease-in-out, color .25s ease-in-out, box-shadow .25s ease-in-out !default;

$btn-social-size:                     2.25rem !default;
$btn-social-size-sm:                  1.75rem !default;
$btn-social-size-lg:                  2.75rem !default;

$btn-social-font-size:                $font-size-sm !default;
$btn-social-font-size-sm:             $font-size-xs !default;
$btn-social-font-size-lg:             $font-size-base !default;

$btn-social-border-radius:            $border-radius !default;
$btn-social-border-radius-sm:         $border-radius-sm !default;
$btn-social-border-radius-lg:         $border-radius !default;

$btn-social-dark-color:               $gray-700 !default;
$btn-social-dark-hover-color:         $white !default;
$btn-social-dark-border-color:        $border-color !default;
$btn-social-dark-bg:                  $gray-200 !default;

$btn-social-light-color:              $white !default;
$btn-social-light-border-color:       $border-light-color !default;
$btn-social-light-bg:                 rgba($white, .08) !default;
$btn-social-light-hover-bg:           $white !default;


/************ Insurance Home ***********/ 
$ins-primary: #00E1BE;
$ins-secondary: #003478;
$ins-warning: #F5CD4B;
$ins-text: #5C6A7C;
$ins-shadow: 20px 20px 80px rgba(53, 58, 97, 0.1);
$ins-border-color: #DEF8F6;
$telegram-bg: #0091C8;
$discord-bg: #5865F2;
$ins-placeholder: #E4E4E4;
$ins-light-color: #FAFAFA;
$ins-color-primary-light: #E7FDF9;
$ins-warning-shape: #FAF1CF;
$ins-color-secondary-light: #DAF4F8;


/*********** marketing home *************/ 
$mk-primary: #2B0996; 
$mk-secondary: #FF724B;
$mk-black: #222222;
$mk-primary-gradient: linear-gradient(43.97deg, #2B0996 12.53%, rgba(98, 98, 239, 0.3) 70.44%);
$mk-secondary-gradient: linear-gradient(60.66deg, rgba(255, 88, 0, 0.2) -8.14%, rgba(255, 88, 0, 0) 80.43%);
$mk-border: #E7E7E7;
$mk-blue: #05D7E6;
$mk-blue-deep: #188BFE;
$mk-shadow: 13.836px 23.06px 64.5679px rgba(23, 0, 117, 0.1);
$mk-primary-light-color: #FFE3DB;
$mk-placeholder-color: #ADADAD;
$mk-star: #FF9D4D;

/********** crm demo **************/ 
$crm-secondary: #093A3E;
$crm-primary: #EF3D3D;
$crm-bg-light: #E3F4FF;
$crm-bg-yellow-light: #FFFCF5;
$crm-bg-light-green: #DBFBE2;
$crm-blue: #4CD9ED;
$crm-yellow: #FF9D4D;
$crm-placeholder: #D7D7D7;
$crm-shadow: 10px 10px 50px rgba(2, 0, 91, 0.1);

/************** help desk demo ************/ 
$hd-light-gradient: linear-gradient(28deg, #FBF1F7 14.12%, rgba(255, 255, 255, 0) 61.6%, #FBF1F7 103.81%);
$hd-light-gradient-2: linear-gradient(100deg, rgba(255,255,255,0.1), rgba(255, 144, 151, 1));
$hd-primary: #FF3D55;
$hd-secondary: #6672FB;
$hd-border-color: #CFCFCF;
$hd-bg: #FBF1F7;
$hd-success: #0EE74B;
$hd-light-bg: #FAFBFF;
$hd-shadow: 10px 10px 50px rgba(2, 0, 91, 0.05);
$hd-cta-bg: #FBE8EE;
$hd-dark: #222222;

/**************** digital marketing demo *****************/ 
$dg-warning-color: #FFBE3D;
$dg-primary-color: #EF3D3D;
$dg-primary-gradient: linear-gradient(29.91deg, #FF1111 5.01%, #FF4747 89.4%);
$dg-heading-color: #313146;
$dg-text-color: #666666;
$dg-border-color: #D7D7D7;
$dg-box-shadow: 14.3045px 23.8408px 66.7541px rgba(2, 0, 91, 0.1);
$dg-color-1: #3BBEFF;
$dg-shadow-1: 20px 20px 60px #D9F2FF;
$dg-color-2: linear-gradient(96.49deg, #0082F8 0%, #3C10F2 101.82%);
$dg-shadow-2: 20px 20px 60px #D2E2FF;
$dg-color-3: linear-gradient(98.93deg, #2ACE93 7.76%, #9CE842 100%);
$dg-shadow-3: 20px 20px 60px #D2FFEA;
$dg-color-4: linear-gradient(275.81deg, #FFAC12 -1.99%, #FF30C5 99.35%);
$dg-shadow-4: 20px 20px 60px #FFDDE8;
$dg-meta-color: #EAEAEA;
$dg-color-5: linear-gradient(224.13deg, #00FFF0 -8.75%, #008FF7 111.08%);
$dg-section-bg: #F1F2FA;
$dg-placeholder-color: #D9D9D9;
$dg-layout-bg: #FAFBFF;

/************* software company demo ************/ 
$sc-primary-gradient: linear-gradient(101.61deg, #002D97 3.52%, #0639AF 97.73%);
$sc-box-shadow: 4px 4px 25px rgba(160, 160, 160, 0.1);
$sc-hover-shadow: 0 4px 20px rgba(2, 0, 91, 0.1);
$sc-border-color: #DBD4FF;
$sc-icon-bg: #ECEBFF;

/********************** shape gradients ****************/ 
$sc-shape-gradient: linear-gradient(189.84deg, rgba(98, 98, 239, 0.2) -115.69%, rgba(98, 98, 239, 0) 66.95%);

/********************** Creative Agency 1 ****************/

/******** New Color *********/
$dark-new-1: #010101;
$dark-new-2: #000139;
$dark-new-3: #141414;
$dark-new-4: #000715;
$dark-new-5: #080e1c;
$ca-two-clr: #FEC5FB;
$ca-two-clr-two: #F6F6F6;
$ca-two-clr-three: #343434;
$ca-two-clr-four: #1a1a1a;
$des-a-clr: #151515;
$des-a-clr-2: #F3F5F8;
$des-a-clr-3: #EF3D3D;
$des-a-clr-4: #FDF7F7;
$des-a-clr-5: #F8EEFB;
$des-a-clr-main: #FF1111;
$ah-color: #f4f6fc;
$ah-color-2: #F5F7FC;
$ah-color-3: #F8F9FA;
$ah-color-4: #FFDBDF;
$ah-color-5: #FFF3D4;
$ah-color-6: #E4DEF7;
$ah-color-7: #14142B;
$ah-color-8: #ff3951;
$ah-color-9: #002D97;
$ah-color-10: #FFB116;
$risk-color-1: #0C7DF8;
$risk-color-2: #485666;
$risk-color-3: #00193C;
$risk-color-4: #F3F6FA;
$risk-color-5: #9D9D9D;
$it-company-1: #F55F4E;
$it-company-2: #FFF9EC;
$it-company-3: #5851DB;
$it-company-4: #FEF2D8;
$it-company-5: #875a00;
$ai-color-1: #6f6c90;
$ai-color-2: #170f49;
$dark-un: #233d62;
$ail-gd-color: linear-gradient(96deg, #FF3E81 -4.72%, #4706FF 96.59%);
$ail-dark-hover: linear-gradient(96deg, #000000 -4.72%, #000000 96.59%);
$ail-brand-color: #f3f9ff;
$ail-op-color: #E3DAFF;
$white-50: rgba(255, 255, 255, 0.50);
$white-20: rgba(255, 255, 255, 0.20);
$ail-br-clr: #ef3d3d4f;
$ail-gd-bg: linear-gradient(180deg, rgba(227, 234, 255, 0) 0%, #AFC1FF 100%);
$ail-gd-bg-2: linear-gradient(180deg, #FFBB84 0%, rgba(227, 234, 255, 0) 100%);
$sky-blue: #D9EAFF;
$ai-wt-gd-color: linear-gradient(272deg, #3B82F6 1%, #24AA4A 43.09%);
$ai-wt-gd-bg: linear-gradient(277.41deg, #3B82F6 -1.75%, #24AA4A 98.72%);
$gray-new: #f9f9f9;
$gray-new-2: #f6f6fc;
$ai-wt-bb-style: linear-gradient(90deg, rgba(77, 137, 249, 0) 0.57%, #4D89F9 45.51%, rgba(77, 137, 249, 0) 100%);
$aiart-gd-text: linear-gradient(91deg, #F22FB0 52.27%, #FF7426 96.15%);
$aiart-gd-bg: linear-gradient(201.26deg, #F22FB0 9.67%, rgba(255, 116, 38, 0.62) 89.93%);
$aiart-gd-bg-2: linear-gradient(0deg, rgba(237, 109, 75, 0.2), rgba(237, 109, 75, 0.2));
$aiart-gd-bg-3: linear-gradient(84deg, rgba(242, 47, 176, 0.10) 15.75%, rgba(255, 116, 38, 0.06) 83.11%);
$aiart-counter-bg-1: linear-gradient(180deg, rgba(103, 240, 55, 0.71) -23.56%, rgba(255, 239, 95, 0) 96.15%);
$aiart-counter-bg-2: linear-gradient(180deg, rgba(159, 55, 240, 0.34) 0%, rgba(255, 99, 230, 0) 100%);
$aiart-counter-bg-3: linear-gradient(180deg, rgba(240, 155, 55, 0.34) 0%, rgba(255, 230, 139, 0) 100%);
$aiart-clr: #ff7426;
$aiart-btn-gd: linear-gradient(80.72deg, #F22FB0 17.87%, #FF7426 84.39%);


/******** New Color *********/

// -----------------------------------------------------------------------------
// This file contains very basic styles.
// -----------------------------------------------------------------------------

/**
 * Set up a decent box model on the root element
 */
html {
  box-sizing: border-box;
}

/**
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*::before,
*::after {
  box-sizing: inherit;
}

//
// Reboot
// --------------------------------------------------

// Import Google Fonts (Rubik)
@import url($path-to-fonts);

html * {
  @include font-smoothing;
}

// Sticky footer
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.page-wrapper {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

// Links
a:focus { outline: none; }
a { transition: $link-transition; }

// Responsive iframes
iframe {
  width: 100%;
}

// Full height iframe
.iframe-full-height-wrap {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
}
.iframe-full-height {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// Text Selection Color
::selection {
  background: rgba($accent, .15);
}
::-moz-selection {
  background: rgba($accent, .15);
}


small { font-weight: inherit; }

// Disable button :focus outline
button:focus {
  outline: none;
}

.rounded-custom {
  border-radius: 1rem !important;
}


.ptb-120 {
    padding: 120px 0;
  }
  .ptb-100 {
    padding: 100px 0;
  }
  .pl-100 {
    padding-left: 100px;
  }
  .pr-100 {
    padding-right: 100px;
  }
  .p-100 {
    padding: 100px;
  }
  .p-50 {
    padding: 50px;
  }
  .pt-100 {
    padding-top: 100px;
  }
  .pt-120 {
    padding-top: 120px;
  }
  .pt-200 {
    padding-top: 200px;
  }
  .pt-80 {
    padding-top: 80px;
  }
  .pb-80 {
    padding-bottom: 80px;
  }
  
  .pb-120 {
    padding-bottom: 120px;
  }
  
  .ptb-60 {
    padding: 60px 0;
  }
  
  .ptb-80 {
    padding: 80px 0;
  }
  
  .pt-60 {
    padding-top: 60px !important;
  }
  .pb-40 {
    padding-bottom: 40px !important;
  }
  .pb-60 {
    padding-bottom: 60px !important;
  }
  .mt-70 {
    margin-top: 70px;
  }
  .mt--100 {
    margin-top: -100px;
  }
  .mt-100 {
    margin-top: 100px;
  }
  .mt--200 {
    margin-top: -200px;
  }
  .mb--150 {
    margin-bottom: -150px;
  }
  .mb--200 {
    margin-bottom: -200px;
  }
  .mt-60 {
    margin-top: 60px;
  }
  .mt-40 {
    margin-top: 40px;
  }
  .mb-40 {
    margin-bottom: 40px;
  }
  .z-1 {
    z-index: 1;
  }
  .z-2 {
    z-index: 2;
  }
  .z-5 {
    z-index: 5;
  }
  .z-10 {
    z-index: 10;
  }
  .z--1 {
    z-index: -1;
  }
  .top--40 {
    top: -40px !important;
  }
  .top--100 {
    top: -100px !important;
  }
  .bottom--40 {
    bottom: -40px !important;
  }
  .bottom--100 {
    bottom: -100px !important;
  }
  .right--40 {
    right: -40px !important;
  }
  .right-0 {
    right: 0;
  }
  .left-0 {
    left: 0;
  }
  .left--40 {
    left: -40px !important;
  }
  .left--100 {
    left: -100px !important;
  }
  .right--100 {
    right: -100px !important;
  }
  .left-30 {
    left: 30%;
  }
  .left-5 {
    left: 5%;
  }
  .right-5 {
    right: 5%;
  }
  .mw-60 {
    max-width: 60% !important;
  }
  @media (min-width: 320px) and (max-width: 991px) {
    .ptb-120 {
      padding: 60px 0;
    }
    .pb-120 {
      padding-bottom: 60px;
    }
    .pt-120 {
      padding-top: 60px;
    }
    .mt-100 {
      margin-top: 60px;
    }
    .search-form.w-50 {
      width: 100% !important;
    }
    .pt-60 {
      padding-top: 30px;
    }
  }
  @media (min-width: 320px) and (max-width: 575px) {
    .p-100 {
      padding: 60px 2rem;
    }
    .mw-60 {
      max-width: 100% !important;
    }
  }
  
  .icon-sm {
    font-size: 25px;
  }
  .opacity-15 {
    opacity: 0.15;
  }

  

  /**
 * Basic typography style for copy text
 */
body {
    font-family: $font-family-sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  @media (min-width: 1200px) {
    .h2,
    h2 {
      font-size: 2.5rem;
    }
  }
  
  .h5,
  .h6,
  h5,
  h6 {
    margin-bottom: 0.375rem;
  }
  .h5,
  .h6,
  h5,
  h6 {
    font-weight: $font-weight-medium;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  h1,
  h2,
  h3,
  h4 {
    font-weight: $font-weight-semibold;
  }
  @media (min-width: 320px) and (max-width: 767px) {
    .lead {
      font-size: 1.125rem;
    }
    .blockquote {
      font-size: 1.0625rem !important;
    }
  }


  .office-address {
    height: 360px;
    position: relative;
    width: 100%;
    transition: all 0.3s ease-in;
  }
  .office-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    background-image: -webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    from(transparent),
                    to(rgba(0, 0, 0, 0.45))
    );
    background-image: -webkit-linear-gradient(
                    top,
                    transparent,
                    rgba(0, 0, 0, 0.45)
    );
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45));
    transition: all 0.3s ease-in;
  }
  .office-overlay {
    opacity: 0;
    background-color: rgba(11, 22, 63, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    z-index: -1;
  }
  
  .office-info {
    flex: 0 1 38%;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-items: center;
    transform: translateY(70%);
    transition: all 0.3s linear;
  }
  .office-info h5 {
    color: $white;
  }
  .office-info address {
    color: $white;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.5s, opacity 0.8s linear;
    padding-bottom: 33px;
  }
  .office-address:hover .office-overlay {
    opacity: 1;
  }
  .office-address:hover .office-info {
    transform: translateY(0);
  }
  .office-address:hover .office-info address {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.2s;
  }
  
  .about-content-left {
    max-width: 602px;
    margin-right: 30px;
  }
  
  .about-content-left .about-img-first {
    width: 100%;
    max-width: 76%;
  }
  .about-content-right {
    display: flex;
    max-width: 47%;
    flex-direction: column;
  }
  
  .about-content-right .about-img-last {
    max-width: 126%;
    margin-top: auto;
    align-self: flex-end;
  }
  @media (min-width: 992px) and (max-width: 1199px) {
    .about-content-left {
      max-width: 450px;
    }
  }
  @media (min-width: 320px) and (max-width: 991px) {
    .section-heading-wrap {
      flex-direction: column;
    }
    .about-content-left {
      margin-bottom: 40px;
      flex-direction: column;
      align-items: stretch;
      margin-right: 0;
    }
    .about-content-right {
      max-width: 100%;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
    }
    .about-content-left .about-img-first {
      max-width: 100%;
      margin-top: 0 !important;
    }
    .about-content-right img:first-of-type {
      width: 45%;
      margin: 0 !important;
    }
    .about-content-right img:last-of-type {
      width: 50%;
      margin: 0 !important;
    }
  }
  
  /*story grid*/
  .story-grid {
    width: 100%;
    height: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .story-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    width: 100%;
  }
  
  
  /*sticky sidebar*/
  .sticky-sidebar {
    position: sticky;
    top: 100px;
    transition: $transition-base;
  }
  .style-guide .bg-primary-soft .style-guide-heading h2 {
    margin-bottom: 0;
    font-size: 1.75rem;
  }


  
/*animated screen img*/
.animated-hero-1 .type-0 {
    right: -110px;
    top: -160px;
  }
  @media (min-width: 991px) and (max-width: 1560px) {
    .animated-hero-1 .type-0 {
      top: -100px;
    }
  }
  @media (min-width: 320px) and (max-width: 991px) {
    .animated-hero-1 {
      display: none;
    }
  }
  .shape-bottom-img img.bottom-shape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
  }
  /*animated shape*/
  .animate-element {
    list-style: none;
    width: 100%;
    height: 100%;
    right: 0;
  }
  .animate-element li {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  
  .circle-shape-images {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .circle-shape-item {
    position: absolute;
    opacity: 0.55;
  }
  .circle-shape-item.type-0.hero-1 {
    left: 12px;
    bottom: -40px;
    width: 340px;
    opacity: 0.8;
  }
  
  .circle-shape-item.type-1.hero-1 {
    right: 55px;
    top: 40px;
    width: 186px;
  }
  
  .circle-shape-item.type-2.hero-1 {
    right: 40px;
    bottom: -20px;
    width: 100px;
  }
  
  .circle-shape-item.type-3.hero-1 {
    left: 115px;
    top: 25px;
    width: 36px;
  }
  
  .circle-shape-item.type-4.hero-1 {
    left: 135px;
    top: 55px;
    width: 70px;
  }
  .circle-shape-item.type-5.hero-1 {
    right: 0;
    bottom: -60px;
    width: 50px;
  }
  @media (min-width: 320px) and (max-width: 575px) {
    .circle-shape-item.type-0.hero-1 {
      width: 250px;
    }
  }
  /*shape services of features*/
  .shape-service .color-shape-1 {
    top: -100px;
    right: 0;
    flex: 0 0 auto;
  }
  .shape-service .color-shape-2 {
    left: -120px;
    bottom: 100px;
    flex: 0 0 auto;
  }
  .shape-service .color-shape-3 {
    right: 0;
    bottom: -50px;
    flex: 0 0 auto;
  }
  /*coming soon page css*/
  
  .fixed-bg {
    height: 100vh;
    width: 100vh;
    border-radius: 0 10rem 30rem 0;
    top: 0;
    left: 0;
    z-index: 1;
    position: fixed;
  }
  .white-popup-block {
    max-width: 768px;
    margin: 30px auto;
    position: relative;
  }
  
  .animated-circle li {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
  }
  .animated-circle li:nth-child(1n) {
    height: 24vw;
    width: 24vw;
    top: 5.3vh;
    right: 20.3vw;
    bottom: inherit;
    animation: zoom-1 50s infinite;
    animation-delay: 2s;
  }
  .animated-circle li:nth-child(2n) {
    height: 15vw;
    width: 15vw;
    top: -8.8vh;
    right: -3.4vw;
    bottom: inherit;
    animation: zoom-2 50s infinite;
    animation-delay: 2s;
  }
  .animated-circle li:nth-child(3n) {
    height: 10vw;
    width: 10vw;
    top: 40vh;
    right: 6.5vw;
    bottom: inherit;
    animation: zoom-1 50s infinite;
    animation-delay: 2s;
  }
  .animated-circle li:nth-child(4n) {
    height: 8vw;
    width: 8vw;
    bottom: 0;
    top: inherit;
    right: 10vw;
    animation: zoom-2 50s infinite;
    animation-delay: 2s;
  }
  
  @-webkit-keyframes zoom-1 {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(0.8);
    }
    75% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes zoom-1 {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(0.8);
    }
    75% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  @-webkit-keyframes zoom-2 {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(1.2);
    }
    75% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes zoom-2 {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(1.2);
    }
    75% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes circle-moving {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(100px);
    }
    50% {
      transform: translateX(0);
    }
    75% {
      transform: translateX(-100px);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  @keyframes rotate-animation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes upsdown-sm {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(25px);
    }
    50% {
      transform: translateY(0);
    }
    75% {
      transform: translateY(-25px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes shake-animation {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
  
  
  
  
  
  /*404 css*/
  .error-404 {
    margin-bottom: 30px;
    font-size: 180px;
    line-height: 0.889em;
  }

  

  
//.bg-light{
    //  background-color: $gray-50 !important;
    //}
    
    .bg-primary-soft {
      background-color: rgba($primary, .2)
    }
    .bg-primary-light {
      background-color: rgba($primary, .75)
    }
    .bg-primary {
      background-color: $primary !important;
    }
    .bg-primary-dark {
      background-color: darken($primary, 10%);
    }
    
    .bg-info-soft {
      background-color: rgba($info, .2)
    }
    .bg-info-light {
      background-color: rgba($info, .75)
    }
    .bg-info {
      background-color: $info !important;
    }
    .bg-info-dark {
      background-color: darken($info, 10%);
    }
    
    .bg-success-soft {
      background-color: rgba($success, .2)
    }
    .bg-success-light {
      background-color: rgba($success, .75)
    }
    .bg-success {
      background-color: $success !important;
    }
    .bg-success-dark {
      background-color: darken($success, 10%);
    }
    
    .bg-warning-soft {
      background-color: rgba($warning, .2)
    }
    .bg-warning-light {
      background-color: rgba($warning, .75)
    }
    .bg-warning {
      background-color: $warning !important;
    }
    .bg-warning-dark {
      background-color: darken($warning, 10%);
    }
    
    .bg-danger-soft {
      background-color: rgba($danger, .2)
    }
    .bg-danger-light {
      background-color: rgba($danger, .75)
    }
    .bg-danger {
      background-color: $danger !important;
    }
    .bg-danger-dark {
      background-color: darken($danger, 10%);
    }
    
    .bg-dark-soft {
      background-color: rgba($secondary, .5)
    }
    .bg-dark-light {
      background-color: $gray-700;
    }
    .bg-dark {
      background-color: $dark !important;
    }
    .bg-dark-dark {
      background-color: darken($dark, 10%);
    }
    
    .bg-purple {
      background-color: var(--bs-purple) !important;
    }
    
    .bg-secondary-light {
      background-color: rgba($secondary, .2);
    }
    .bg-secondary {
      background-color: $secondary !important;
    }
    .bg-secondary-dark {
      background-color:darken($secondary, 10%);
    }
    .bg-custom-light {
      background-color: rgba(255, 255, 255, 0.1);
    }
    .bg-black, .bg-dark-black {
      background-color: $black;
    }
    
    .bg-soft-black{
      background-color: $github;
    }
    /*gradient bg*/
    .primary-bg-gradient {
      background: linear-gradient( 90deg, $dark, $primary ) !important;
    }
    
    .info-bg-gradient {
      background: linear-gradient( 90deg, $primary, $info ) !important;
    }
    
    .success-bg-gradient {
      background: linear-gradient( 90deg, $success, darken($success, 15%) ) !important;
    }
    .warning-bg-gradient {
      background: linear-gradient( 90deg, $warning, darken($warning, 15%) ) !important;
    }
    
    .danger-bg-gradient {
      background: linear-gradient( 90deg, $danger, darken($danger, 15%) ) !important;
    }
    
    .dark-bg-gradient {
      background: linear-gradient( 90deg, $primary,  $dark ) !important;
    }
    .secondary-bg-gradient {
      background: linear-gradient( 90deg, $secondary, darken($secondary, 15%) ) !important;
    }
    .bg-gradient {
      background: linear-gradient(90deg, darken($primary, 50%), darken($primary, 25%)) !important;
    }

    
    // Blog module styles

.blog-grid {
  display: flex;
  flex-flow: row nowrap;
  transition: $transition-base;
  opacity: 1;
}
.blog-grid .featured-post-wrapper,
.blog-grid .posts-wrapper {
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1;
}
.blog-grid .featured-post-wrapper .blog-item,
.blog-grid .posts-wrapper .blog-item {
  flex: 1 1;
  display: flex;
  padding: 15px;
  width: 100%;
}
.blog-grid .blog-item .blog-content {
  border-radius: 1rem;
}
.blog-grid .featured-post-wrapper .blog-item .read-more-link,
.blog-grid .posts-wrapper .blog-item .read-more-link {
  display: inline-block;
}
.blog-grid .featured-post-wrapper .blog-item .read-more-link a,
.blog-grid .posts-wrapper .blog-item .read-more-link a {
  transition: all 0.3s ease;
  transform: translateX(-15px);
  background-color: transparent;
  color: $primary;
}
.blog-grid .featured-post-wrapper .blog-item .read-more-link a i,
.blog-grid .posts-wrapper .blog-item .read-more-link a i {
  margin-left: 10px;
  margin-right: 0;
  font-size: 14px;
  line-height: 14px;
  position: relative;
  text-align: left;
  margin-top: 3px;
}
.blog-grid .featured-post-wrapper .blog-item:hover .read-more-link a,
.blog-grid .posts-wrapper .blog-item:hover .read-more-link a {
  transition: all 0.3s ease;
  transform: translateX(0);
  background-color: $primary;
  color: $white;
}
.blog-grid .featured-post-wrapper .blog-item .blog-content:hover,
.blog-grid .posts-wrapper .blog-item .blog-content:hover {
  box-shadow: none;
}

.blog-grid
.featured-post-wrapper
.blog-item
.blog-content:hover
.blog-media
img,
.blog-grid .posts-wrapper .blog-item .blog-content:hover .blog-media img {
  transition: all 0.3s ease;
  transform: scale(1.1);
}
.blog-grid .featured-post-wrapper .blog-item .blog-content:hover .blog-text h3,
.blog-grid .posts-wrapper .blog-item .blog-content:hover .blog-text h3 {
  color: $primary;
}
.blog-grid .featured-post-wrapper .blog-item .blog-content .blog-text h3 {
  color: $primary;
}
.blog-grid .featured-post-wrapper .blog-item .read-more-link a {
  transition: all 0.3s ease;
  transform: translateX(0);
  background-color: $primary;
  color: $white;
}
.blog-text a {
  text-decoration: none;
}
.blog-grid .featured-post-wrapper .blog-item .blog-content {
  display: flex;
  flex: 1 1 100%;
  flex-flow: column nowrap;
  position: relative;
  width: 100%;
}
.blog-grid .featured-post-wrapper .blog-item .blog-content .blog-media {
  flex: 1 1 46%;
  width: 100%;
  border-radius: 1rem 1rem 0 0;
}
.blog-grid .featured-post-wrapper .blog-item .blog-content .blog-text {
  height: 290px;
  width: 100%;
}
.blog-grid
.featured-post-wrapper
.blog-item
.blog-content
.blog-text
.featured-badge {
  position: absolute;
  right: 5%;
  top: -1px;
}
.blog-grid
.featured-post-wrapper
.blog-item
.blog-content
.blog-text
.featured-badge
i {
  font-size: 35px;
}

.blog-grid .blog-content {
  background-size: cover;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  transition: all 0.3s ease;
}
.blog-grid .blog-content .blog-media {
  height: auto;
  display: flex;
  justify-content: center;
  position: relative;
  width: 35%;
  overflow: hidden;
  border-radius: 1rem 0 0 1rem;
}
.blog-grid .blog-content .blog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: $white;
  transition: all 0.3s ease;
}
.blog-grid .blog-content .blog-text {
  padding: 33px;
  width: 65%;
}
@media (min-width: 320px) and (max-width: 991px) {
  .blog-grid {
    display: block;
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  .blog-grid .featured-post-wrapper .blog-item .blog-content .blog-text {
    height: auto;
  }
  .blog-grid .blog-content .blog-media,
  .blog-grid .blog-content .blog-text {
    width: 100%;
  }
  .blog-grid .blog-content .blog-media {
    border-radius: 1rem 1rem 0 0;
  }
}
/*blog page css*/
.single-article {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: $white;
  background-clip: border-box;
  border: 1px solid rgb(241, 241, 241);
  transition: $transition-base;
}
.single-article a {
  text-decoration: none;
  display: block;
}
.article-img {
  position: relative;
  overflow: hidden;
}
.article-img:before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease-in;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.article-img img {
  flex-shrink: 0;
  width: 100%;
  height: 14rem;
  object-fit: cover;
  transition: $transition-base;
  transform: rotate(0) scale(1);
}
.single-article.feature-article {
  flex-direction: row;
}
.single-article.feature-article .article-img img {
  height: 20rem;
}
.single-article.feature-article .article-content {
  width: fit-content;
}

@media (min-width: 320px) and (max-width: 575px) {
  .single-article.feature-article {
    flex-direction: column;
  }
  .single-article.feature-article .article-img img {
    height: 14rem;
  }
}

.article-category a {
  font-weight: $font-weight-medium;
  font-family: $headings-font-family;
}
.avatar-name {
  font-size: 15px;
}
.avatar-info span {
  font-size: 14px;
}
.article-title:hover,
.avatar-name:hover {
  color: $primary;
}
.limit-2-line-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-article:hover .article-img img {
  transform: rotate(3deg) scale(1.1);
}

.single-article:hover .article-img:before {
  background: transparent;
}
.single-article:hover {
  transition: all 0.3s;
  box-shadow: 0 11px 18px -8px rgba(0, 0, 0, 0.16);
}
.page-link {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  font-family: var(--bs-font-monospace);
  font-weight: 600;
}
.page-item.active .page-link {
  background: $primary;
  border-color: $primary;
}
.page-link:focus {
  box-shadow: none;
  color: $primary;
}

//blog css

.article-info{
  a{
    font-size: $font-size-sm;
    i{
      color: $secondary;
    }
  }
}

//
// Button group
// --------------------------------------------------


// Fix secondary outline button inside button group

.btn-group .btn-outline-secondary {
  &:hover, &:active, &.active {
    border-color: $border-color !important;
  }
}


//
// Buttons
// --------------------------------------------------

// Override solid buttons

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    &:hover,
    &:active,
    &:focus,
    &.active,
    &.show {
      border-color: darken($value, 10%);
      background-color: darken($value, 10%);
    }
  }
}
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark {
  color: $btn-dark-color !important;
}
.btn-secondary,
.btn-outline-secondary,
.btn-light {
  &,
  &:hover {
    color: $btn-light-color !important;
    border-color: transparent;
  }
}

.btn-secondary {
  border-color: $border-color;
}
/* .btn-light:hover,
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled).show {
  border-color: $light;
  background-color: $light;
} */

// Outline buttons

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    border-color: rgba($value, 0.35);
  }
}
[class^="btn-outline-"],
[class*=" btn-outline-"] {
  &:hover,
  &:active,
  &.active,
  &.show {
    color: $btn-dark-color !important;
  }
}
.btn-outline-light {
  &:hover,
  &:active,
  &.active,
  &.show {
    color: $btn-light-color !important;
  }
}
.btn-outline-secondary {
  border-color: $gray-400;
  &:hover,
  &:active,
  &.active,
  &.show {
    border-color: $gray-400 !important;
    color: $btn-light-color !important;
  }
}
.btn-link {
  font-weight: 500;
}

// Adding box-shadow to all solid buttons

@each $color, $value in $theme-colors {
  @if $color != "secondary" or $color != "light" {
    .btn-#{$color}.btn-shadow {
      box-shadow: 0 0.5rem 1.125rem -0.5rem rgba($value, 0.9);
    }
  }
}
.btn-secondary,
.btn-light {
  &.btn-shadow {
    box-shadow: 0 0.5rem 1.125rem -0.5rem rgba($black, 0.15);
  }
}
.btn-shadow:hover {
  box-shadow: none;
}

// Icon inside button

.btn > i {
  vertical-align: middle;
}

// Icon button

.btn-icon {
  flex-shrink: 0;
  width: $btn-icon-size;
  height: $btn-icon-size;
  padding: 0;

  //> i {
  //  font-size: 1.25rem;
  //}

  &.btn-sm {
    width: $btn-icon-sm-size;
    height: $btn-icon-sm-size;
    //> i {
    //  font-size: 1.125rem;
    //}
  }

  &.btn-lg {
    width: $btn-icon-lg-size;
    height: $btn-icon-lg-size;
    //> i {
    //  font-size: 1.4375rem;
    //}
  }

  &.btn-xl {
    width: $btn-icon-xl-size;
    height: $btn-icon-xl-size;
    //> i {
    //  font-size: 1.75rem;
    //}
  }
}

.link-with-icon {
  display: inline-block;
  font-size: 15px;
  font-family: var(--bs-font-monospace);
  font-weight: 500;
  color: var(--body-color);
}
.link-with-icon i {
  vertical-align: middle;
  transition: all 0.2s ease;
  padding-left: 4px;
}
.link-with-icon:hover i {
  transform: translateX(3px);
  margin-left: 3px;
}
.bg-dark .link-with-icon,
.bg-gradient .link-with-icon {
  color: var(--bs-secondary-dark);
}
.btn {
  position: relative;
  transition: $transition-base;
  box-shadow: none;
  border: 2px solid transparent;
}

.btn:focus,
.btn:active,
.btn-primary.active:focus,
.btn-primary:active:focus,
.btn-outline-primary:active:focus {
  outline: none;
  box-shadow: none;
}
.btn-group-lg > .btn,
.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.btn-group-lg > .btn,
.btn-lg {
  padding: 1rem 1.875rem;
  font-size: 1rem;
  line-height: 1.5;
}
.btn-xl {
  padding: 1.5rem 2rem;
  font-size: 1.5rem;
  line-height: 1.5;
}
.button-style > .btn {
  margin: 0.5rem 0.5rem 0.5rem 0;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  padding: 0;
}
.btn-soft-primary {
  color: $white;
  background-color: rgba($primary, 0.15);
  border-color: rgba($primary, 0.15);
}

.btn-outline-primary {
  color: $primary;
  border-color: $primary;
}
.btn-soft-primary:hover,
.btn-outline-primary:hover {
  color: $white;
  background-color: $primary;
  border-color: $primary;
}
.btn-soft-info {
  color: $info;
  background-color: rgba($info, 0.15);
  border-color: rgba($info, 0.15);
}
.btn-outline-info {
  color: var(--bs-info);
  border-color: var(--bs-info);
}
.btn-soft-info:hover,
.btn-outline-info:hover {
  color: $white;
  background-color: $info;
  border-color: $info;
}
.btn-soft-success {
  color: $success;
  background-color: rgba($success, 0.15);
  border-color: rgba($success, 0.15);
}
.btn-outline-success {
  color: $success;
  border-color: $success;
}
.btn-soft-success:hover,
.btn-outline-success:hover {
  color: $white;
  background-color: $success;
  border-color: $success;
}
.btn-soft-warning {
  color: $warning;
  background-color: rgba($warning, 0.15);
  border-color: rgba($warning, 0.15);
}
.btn-outline-warning {
  color: $warning;
  border-color: $warning;
}
.btn-soft-warning:hover,
.btn-outline-warning:hover {
  color: $white;
  background-color: $warning;
  border-color: $warning;
}
.btn-soft-danger {
  color: $danger;
  background-color: rgba($danger, 0.15);
  border-color: rgba($danger, 0.15);
}
.btn-outline-danger {
  color: $danger;
  border-color: $danger;
}
.btn-soft-danger:hover,
.btn-outline-danger:hover {
  color: $white;
  background-color: $danger;
  border-color: $danger;
}
.btn-soft-dark {
  color: $dark;
  background-color: rgba($dark, 0.15);
  border-color: rgba($dark, 0.15);
}
.btn-outline-dark {
  color: $dark;
  border-color: $dark;
}
.btn-soft-dark:hover,
.btn-outline-dark:hover {
  color: $white;
  background-color: $dark;
  border-color: $dark;
}
.btn-outline-light {
  color: $secondary;
  border-color: $secondary;
}
.google-btn,
.facebook-btn {
  transition: $transition-base;
}
.google-btn:hover,
.facebook-btn:hover {
  background: rgba($primary, 0.15) !important;
}

.divider-bar {
  width: 100%;
  min-height: 1px;
  background-color: $secondary;
}
.divider-text {
  width: 60px;
  min-width: 60px;
  line-height: 1.056em;
}

.download-btn {
  border: 1px solid $body-color;
  margin-right: 20px;
  align-items: center;
  padding: 5px 20px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.download-btn span {
  font-size: 28px;
  line-height: 28px;
  margin-right: 15px;
  color: $primary;
}
.download-btn p {
  line-height: 20px;
  margin-bottom: 5px;
  font-weight: 600;
  text-align: left;
}
.download-btn p small {
  opacity: 0.5;
  font-size: 11px;
}
.ins-btn {
  padding: 14px 24px;
  display: inline-block; 
  font-family: $headings-font-family; 
  font-weight: 500;
  font-size: 15px;
  outline: 0;
  border: 0;
  border-radius: 4px;
  transition: $transition-base;
}
.ins-primary-btn {
  background: $ins-primary;
  color: $white;
  &:hover {
    background: $ins-secondary;
    color: $white;
  }
}
.ins-primary-btn-shadow {
  position: relative;
  z-index: 1;
  &::before {
    content: ''; 
    position: absolute;
    left: 50%; 
    bottom: 0;
    transform: translateX(-50%);
    width: 98%; 
    height: 20px;
    background-color: $ins-primary; 
    filter: blur(30px);
    z-index: -1;
    transition: $transition-base;
  }
  &:hover {
    &::before {
      background-color: $ins-secondary;
    }
  }
}
.ins-secondary-btn {
  background: $ins-secondary;
  color: $white;
  &:hover {
    background: $ins-primary;
    color: $white;
  }
}

.mk-white-btn {
  background-color: $white; 
  color: $mk-black;
  &:hover {
    background: $mk-secondary; 
    color: $white;
  }
}

.crm-secondary-btn {
  background-color: $crm-secondary;
  color: $white; 
  span {
    color: $white !important;
  }
  &:hover {
    background-color: $crm-primary;
    color: $white;
    span {
      color: $white;
    }
  }
}

.crm-primary-btn {
  background-color: $crm-primary; 
  color: $white; 
  &:hover {
    background-color: $crm-secondary; 
    color: $white;
  }
}

.hd-secondary-btn {
  background-color: $hd-secondary; 
  color: $white; 
  &:hover {
    background-color: $hd-primary; 
    color: $white;
  }
}

.dg-outline-btn {
  border: 1px solid $dg-border-color; 
  color: $dg-text-color; 
  &:hover {
    background-color: $dg-primary-color;
    color: $white;
    border-color: $dg-primary-color;
  }
}

.dg-primary-btn {
  background: $dg-primary-color;
  color: $white;
  &:hover {
    background: $dg-heading-color;
    color: $white;
  }
}
.sc-outline-btn {
  color: $dg-text-color; 
  border: 1px solid $dg-border-color;
  &:hover {
    background-color: $primary; 
    border-color: $primary; 
    color: $white;
  }
}

//call to action style

@media (min-width: 767px) {
  .cta-left-info {
    width: 65% !important;
  }
}
@media (min-width: 767px) {
  .cta-img {
    width: 35% !important;
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  .cta-left-info {
    width: 100%;
  }
  .cta-img {
    display: none;
  }
}
.software-uikit {
  flex: 1;
  background-position: 50px 100px;
  background-size: cover;
  background-repeat: no-repeat;
}

.img-with-shape-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.shape-image {
  overflow: hidden;
  border-radius: 1rem;
}
.shape-image .screen-img {
  position: relative;
  left: 80px;
  top: 90px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}

.shape-bottom {
  position: absolute;
  left: 0;
  top: auto;
  right: auto;
  bottom: -10%;
  width: 100%;
}

/*circle shape*/

.circle-shape-2 {
  width: 335px;
  min-height: 335px;
  min-width: 335px;
}
.circle-shape-1 {
  top: -240px;
  width: 356px;
  min-height: 356px;
  min-width: 356px;
}
.circle-shape-3 {
  bottom: -210px;
  width: 300px;
  min-height: 300px;
  min-width: 300px;
}
@media (min-width: 320px) and (max-width: 991px) {
  .circle-shape-2,
  .circle-shape-1,
  .circle-shape-3 {
    display: none;
  }
}
/*app two cta*/
.app-two-mockup::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background-color: rgb(245, 161, 42);
  z-index: 5;
}

// CTA DOWNLOAD

.action-btns ul li a {
  background-color: transparent;
  border: 2px solid #9b2cfa;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-light);
  padding: 10px 23px;
  line-height: 40px;
}
.action-btns ul li a i {
  font-size: 30px;
}
.action-btns ul li a span {
  line-height: 14px;
  font-weight: 400;
  text-align: left;
}
.action-btns ul li a span span {
  font-size: 16px;
  font-weight: 700;
  display: block;
  line-height: 20px;
}
.action-btns ul li a:hover {
  background-color: $white;
  border: 2px solid transparent;
  color: $headings-color;
}


//color

@each $color,
$value in $theme-colors {
  .bg-#{$color}-alt {
    background-color: rgba($value, .12);
  }
}

.bg-white-alt{
  background-color: rgba($white, .12);
}

//Social brand
@each $color,
$value in $brand-colors {
  .brand-#{$color} {
    color: $value;
  }
}

@each $color,
$value in $brand-colors {
  .bg-#{$color}-alt {
    background-color: rgba($value, .12);
  }
}


/*color utility*/
.color {
  position: relative;
  display: block;
  min-height: 50px;
  padding: 1rem 1rem;
}
.color span {
  color: $white;
}
.text-off-white {
  color: rgba(255, 255, 255, 0.8);
}
.border-light {
  border-color: rgba(101, 101, 101, 0.1) !important;
}


.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-gradient h1,
.bg-gradient h2,
.bg-gradient h3,
.bg-gradient h4,
.bg-gradient h5,
.bg-gradient h6,
.bg-purple h1,
.bg-purple h2,
.bg-purple h3,
.bg-purple h4,
.bg-purple h5,
.bg-purple h6 {
  color: $white;
}
.bg-primary p,
.bg-primary li,
.bg-primary span,
.bg-dark p,
.bg-dark li,
.bg-dark span,
.bg-gradient p,
.bg-gradient li,
.bg-gradient span,
.bg-purple p,
.bg-purple li,
.bg-purple span {
  color: darken($white, 15%)
}
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6,
.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light h5,
.bg-light h6 {
  color: initial;
}
.bg-light > .bg-dark h1,
.bg-light .bg-dark h2,
.bg-light .bg-dark h3,
.bg-light .bg-dark h4,
.bg-light .bg-dark h5,
.bg-light .bg-dark h6,
.bg-light > .bg-gradient h1,
.bg-light .bg-gradient h2,
.bg-light .bg-gradient h3,
.bg-light .bg-gradient h4,
.bg-light .bg-gradient h5,
.bg-light .bg-gradient h6 {
  color: $white;
}
.bg-white p,
.bg-white li,
.bg-white span {
  color: $body-color;
}
.text-white-60 {
  color: rgba(255, 255, 255, 0.6) !important;
}
.text-white-70 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.text-white-80 {
  color: rgba(255, 255, 255, 0.8) !important;
}
.text-white-90 {
  color: rgba(255, 255, 255, 0.9) !important;
}

.bg-light{
  .author-info{
    span{
      color: $body-color;
    }
  }
}

.crm-bg-light {
  background-color: rgba($info, 18%);
}

.crm-bg-yellow {
  background-color: rgba($warning, 18%);
}

.crm-bg-light-green {
  background-color: rgba($success, 18%);
}

.crm-bg-primary-light {
  background-color: rgba($crm-primary, 0.1);
}
.crm-bg-blue-light {
  background-color: rgba($crm-blue, 0.1);
}
.crm-bg-yellow-light {
  background-color: rgba($crm-yellow, 0.1);
}
.text-dg-primary {
  color: $dg-primary-color !important;
}

.customer-logos-grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-row-gap: 16px;
    margin-right: auto;
    margin-left: auto;
    grid-column-gap: 40px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
  }
  .customer-logos-grid img,
  .customer-logo {
    transition: all 0.3s ease-in-out;
  }
  .customer-logo-gray {
    filter: opacity(0.6);
  }
  .customer-logo {
    filter: brightness(1) invert(1);
  }
  .customer-logo:hover {
    filter: brightness(0) invert(1);
  }
  .customer-logo-gray:hover {
    filter: none;
  }
  .client-logo-img {
    justify-content: space-between;
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  
  .client-logo-img li {
    width: 100%;
  }
  @media (min-width: 320px) and (max-width: 575px) {
    .customer-logos-grid {
      grid-template-columns: 1fr 1fr 1fr;
      grid-column-gap: 30px;
    }
  }

  
  .faq-icon {
    font-size: 25px;
    line-height: normal;
  }
  .faq-accordion .accordion-item {
    margin-bottom: 15px;
    border-radius: 1rem;
  }
  .faq-accordion .accordion-item:last-of-type {
    margin-bottom: 0;
  }
  .faq-accordion .accordion-item button {
    border-radius: 1rem 1rem 0 0;
    border: none;
    padding: 1.5rem;
    font-weight: $font-weight-medium;
  }
  .faq-accordion .accordion-item button.accordion-button {
    border-radius: 1rem;
  }
  .faq-accordion .accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 1rem;
  }
  .faq-accordion .accordion-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
  .faq-accordion .accordion-item button:focus {
    border-color: transparent;
    box-shadow: none;
  }
  .faq-accordion .accordion-item .accordion-button:not(.collapsed) {
    background: transparent;
    box-shadow: none;
    color: $primary;
  }
  .accordion-list li {
    padding: 5px 0;
  }
  .accordion-list li a {
    color: $body-color;
    display: inline-block;
    width: 100%;
  }
  .accordion-list li a:hover {
    color: $primary;
  }


  .dot-mask {
    -webkit-mask-image: url(../img/dots.svg);
    mask-image: url(../img/dots.svg);
  }
  .dm-wh-200 {
    width: 200px;
    height: 200px;
  }
  .dm-wh-250 {
    width: 250px;
    height: 250px;
  }
  .dm-wh-300 {
    width: 300px;
    height: 300px;
  }
  .dm-wh-350 {
    width: 350px;
    height: 350px;
  }
  .dm-size-10 {
    -webkit-mask-size: 10px;
    mask-size: 10px;
  }
  .dm-size-12 {
    -webkit-mask-size: 12px;
    mask-size: 12px;
  }
  .dm-size-14 {
    -webkit-mask-size: 14px;
    mask-size: 14px;
  }
  .dm-size-16 {
    -webkit-mask-size: 16px;
    mask-size: 16px;
  }
  .dm-size-18 {
    -webkit-mask-size: 18px;
    mask-size: 18px;
  }
  .dm-size-20 {
    -webkit-mask-size: 20px;
    mask-size: 20px;
  }
  .dot-mask.bottom-right {
    right: -35px;
    bottom: -35px;
  }
  .dot-mask.top-right {
    right: -35px;
    bottom: -35px;
  }
  .dot-mask.top-left {
    left: -35px;
    top: -35px;
  }
  .dot-mask.bottom-left {
    left: -35px;
    bottom: -35px;
  }
  @media (min-width: 320px) and (max-width: 992px) {
    .dot-mask.top-left,
    .left--40 {
      left: 0 !important;
      top: -20px;
    }
    .dot-mask.top-right,
    .dot-mask.bottom-right,
    .right--40 {
      right: 0 !important;
    }
    .dm-wh-350 {
      display: none;
    }
    .author-img-wrap.pt-5,
    .author-img-wrap.ps-5 {
      padding-top: 0 !important;
      padding-left: 0 !important;
    }
  }
  .two-bg-color {
    background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(40%, $primary),
      color-stop(0, $gray-300)
    );
    background-image: linear-gradient(90deg, $primary 40%, var(--bs-light) 0);
  }
  .two-bg-dark-light {
    background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(40%, $dark),
      color-stop(0, $gray-100)
    );
    background-image: linear-gradient(90deg, $dark 40%, $gray-100 0);
  }
  @media (min-width: 320px) and (max-width: 767px) {
    .two-bg-dark-light {
      background: $gray-100;
    }
    .feature-content-wrap{
      margin-top: 30px;
    }
  }
  .feature-icon {
    width: 65px;
    height: 65px;
    line-height: 65px;
    text-align: center;
    i{
      line-height: inherit;
    }
  }
  .icon-center {
    margin: 0 auto 32px;
  }
  .feature-icon img {
    padding: 15px;
  }
  
  .img-bg-shape {
    bottom: 0;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(1.1);
    width: 80%;
  }
  .skewed-img-right {
    backface-visibility: hidden;
    transform: rotateY(-35deg) rotateX(15deg);
  }
  .skewed-img-left {
    backface-visibility: hidden;
    transform: rotateY(-25deg) rotateX(-10deg);
  }
  
  .img-overlay-list {
    left: 40px;
    bottom: 30px;
    z-index: 1;
    grid-row-gap: 17px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }
  
  .img-overlay-list li {
    margin: 12px 0;
  }
  .img-overlay-list li i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-right: 12px;
  }
  .choose-soft-img {
    position: relative;
    left: 25%;
  }
  
  /*feature tow col list*/
  .list-two-col,
  .list-three-col {
    max-width: 100%;
  }
  .list-two-col li {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 12px;
  }
  .list-three-col li {
    flex: 0 0 33%;
    max-width: 33%;
    padding-right: 12px;
  }
  
  @media (min-width: 320px) and (max-width: 575px) {
    .list-two-col li {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  @media (min-width: 320px) and (max-width: 767px) {
    .list-three-col li {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  
  .feature-img .feature-top-img {
    position: absolute;
    left: 0.5rem;
    top: 5rem;
  }
  .feature-img-shape:before {
    display: block;
    content: "";
    position: absolute;
    top: -10px;
    right: -60px;
    z-index: -1;
    width: 150px;
    height: 150px;
    transform: scale(-1, 1);
    background-repeat: no-repeat;
  }
  @media (min-width: 320px) and (max-width: 575px) {
    .feature-img-shape:before {
      display: none;
    }
  }
  .feature-img-shape-top-right:before {
    background-image: url(../img/shape/dot-big-square.svg);
  }
  @media (min-width: 320px) and (max-width: 991px) {
    .hide-medium {
      display: none;
    }
  }
  
  .screenshots-content-wrap {
    position: relative;
    z-index: 2;
  }
  
  .roted-img-wrap {
    display: flex;
    flex-direction: column;
    margin-top: -100px;
    perspective: 2200px;
  }
  .roted-img {
    position: relative;
    z-index: -1;
    width: 100%;
    margin-bottom: -90px;
    -webkit-transform: rotateX(50deg) rotateY(0) rotateZ(0);
    transform: rotateX(50deg) rotateY(0) rotateZ(0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  /*app screen feature*/
  .half-screen {
    top: 4%;
    left: 2.1%;
    width: 94%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    border-top-left-radius: 0.9375rem;
    border-top-right-radius: 0.9375rem;
  }
  
  /*feature grid style*/
  .feature-grid {
    display: -ms-grid;
    display: grid;
    width: 100%;
    grid-auto-columns: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    transition: all 0.3s ease-in-out;
  }
  .highlight-card {
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-column: 1;
    grid-column-start: 1;
    -ms-grid-row-span: 2;
    grid-row-end: 3;
    -ms-grid-row: 1;
    grid-row-start: 1;
    display: block;
  }
  .feature-card.border:hover {
    border-color: $primary !important;
    transition: $transition-base;
    background: transparent;
  }
  @media (min-width: 767px) and (max-width: 992px) {
    .feature-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (min-width: 320px) and (max-width: 768px) {
    .feature-grid {
      grid-template-columns: 1fr;
    }
  }
  .border-line-style {
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: $gray-700;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0 none transparent;
    border-right: 0 none transparent;
    border-bottom: 0 none transparent;
  }
  .border-line {
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    width: 2px;
    height: 65px;
    margin-top: 0;
    margin-left: -1px;
    background-color: $primary;
  }
  
  /*feature with image bg*/
  .feature-bg-mockup {
    position: absolute;
    opacity: 0.35;
    -o-object-fit: cover;
    object-fit: cover;
  }
  
  /*feature tab list*/
  .feature-tab-list li a {
    text-align: center;
    display: inline-block;
    font-size: 15px;
    font-weight: $font-weight-medium;
    font-family: $headings-font-family;
    border-radius: 6px 6px 0 0;
  }
  .feature-tab-list li a.active {
    background: $dark;
    color: $white;
  }
  .feature-tab-list-2 li a {
    border: 2px solid rgba(216, 216, 216, 0.2);
    background: rgba(216, 216, 216, 0.25);
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem;
    font-size: 14px;
    font-weight: 500;
    font-family: $headings-font-family;
    color: $body-color;
    margin-right: 15px;
    transition: $transition-base;
  }
  .feature-tab-list-2 li a:hover {
    background: $primary;
    border-color: $primary;
    color: $white;
  }
  .feature-tab-list-2 li a.active {
    background: $primary;
    color: $white;
    border-color: $primary;
  }
  .feature-tab-list-2 li:last-child a {
    margin-right: 0;
  }
  @media (min-width: 320px) and (max-width: 767px) {
    .feature-tab-list-2 {
      justify-content: start !important;
    }
    .feature-tab-list-2 li {
      margin: 5px 0;
    }
  }
  /*career*/
  .job-time {
    font-size: 14px;
  }
  .company-logo {
    height: 130px;
    flex: 0 0 130px;
  }
  .company-logo .logo {
    display: flex;
    height: 100%;
  }
  .company-logo .logo img {
    align-self: center;
    transform: translate3d(0, 0, 0);
  }
  .company-info-wrap {
    display: flex;
  }
  .company-overview ul li {
    font-size: 15px;
  }
  .annual-salary-wrap {
    padding: 30px;
    text-align: center;
  }
  @media (min-width: 320px) and (max-width: 767px) {
    .company-logo {
      height: 100px;
      width: auto;
      margin-bottom: 25px;
      display: inline-block;
    }
    .company-info-wrap {
      display: inline-block;
    }
  }
  @media (min-width: 320px) and (max-width: 992px) {
    .annual-salary-wrap {
      background: transparent;
      padding: 0;
      margin-top: 35px;
      text-align: left;
    }
    .annual-salary-wrap h6,
    .annual-salary-wrap span {
      color: $white !important;
    }
  }
  .content-list li {
    position: relative;
    font-size: 15px;
    padding-left: 15px;
    margin-bottom: 15px;
  }
  .content-list li:before {
    position: absolute;
    left: 0;
    top: 11px;
    height: 6px;
    width: 6px;
    background: $dark;
    content: "";
    border-radius: 50%;
  }
  
  .job-info-list li {
    font-size: 14px;
    margin-right: 15px !important;
  }
  
  .job-overview-list li {
    position: relative;
    display: flex;
    font-size: 16px;
    margin-bottom: 20px;
  }
  .job-overview-list li i {
    margin-right: 15px;
  }
  .overview-item span {
    font-size: 14px;
  }
  .icon-box {
    margin-bottom: 30px;
  }
  .icon-box i {
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    font-size: 22px;
  }
  
  /*app two feature*/
  .app-two-feature-two .section-heading h4 {
    color: #ff3e66;
  }
  .app-two-feature-two-content ul li i {
    color: #0e9541;
  }
  .app-two-feature-two-content .action-btns .app-two-btn {
    background-color: #ff3e66;
    color: #fff;
  }
  /*app two feature three*/
  .feature-three-content-wrap {
    border-radius: 6px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 30px 70px 0 rgba(0, 15, 56, 0.1);
    padding: 20px 30px;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
  }
  
  .app-two-feature-three-img .feature-three-blob {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }
  
  @media (min-width: 320px) and (max-width: 767px) {
    .app-two-feature-three-img > img {
      width: 80%;
    }
  }
  
  .img-peice .img-one {
    top: 250px;
    left: -5%;
    z-index: 8;
  }
  
  .img-peice .img-two {
    top: 205px;
    z-index: 8;
    right: -4%;
  }
  
  .img-peice .img-three {
    z-index: 8;
    bottom: 78px;
    left: -5%;
  }

  
  //
// Forms
// --------------------------------------------------

select.form-select {
  background-image: url(../img/dropdown-arrow.svg);
}


.form-control,
.custom-select, .form-select {
  border: 2px solid $border-color;
}

label{
  font-weight: $font-weight-medium;
  font-size: $font-size-sm;
}
.form-control:focus,
.custom-select:focus {
  background-color: $white;
  outline: 0;
  box-shadow: none;
}
.subscribe-feature-list li span {
  margin: 0 15px;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.subscribe-feature-list li span i {
  font-size: 16px;
}
.bg-dark .subscribe-feature-list li span i {
  color:  darken($secondary, 10%) !important;
}
.register-form label:not(.form-check-label) {
  font-size: 15px;
  font-weight: 500;
  font-family: $headings-font-family;
}
.form-check-label {
  font-size: 13px;
}
.sign-up-in-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  width: 100%;
}



// Label for use with horizontal and inline forms
//.form-label {
//  @include font-size($form-label-font-size);
//  font-family: $font-family-monospace;
//}

input[type]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder,
select.form-select {
  font-size: $font-size-sm;
}

input[type]:-moz-placeholder,
textarea:-moz-placeholder,
select:-moz-placeholder,
select.form-select {
  /* Firefox 18- */
  font-size: $font-size-sm;
}

input[type]::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder,
select.form-select {
  /* Firefox 19+ */
  font-size: $font-size-sm;
}

input[type]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder,
select.form-select {
  font-size: $font-size-sm;
}

//select.form-select {
//  background-image: url(../img/dropdown-arrow.svg);
//}
//// Remove default -webkit search input clear button
//
//input[type="search"]::-webkit-search-decoration,
//input[type="search"]::-webkit-search-cancel-button,
//input[type="search"]::-webkit-search-results-button,
//input[type="search"]::-webkit-search-results-decoration {
//  display: none;
//}
//
//
//// Password visibility toggle
//
//.password-toggle {
//  position: relative;
//  .form-control {
//    padding-right: $font-size-base + ($spacer * 2);
//  }
//}
//
//.password-toggle-btn {
//  position: absolute;
//  top: 50%;
//  right: .625rem;
//  margin-bottom: 0;
//  padding: $spacer * .5;
//  transform: translateY(-50%);
//  font-size: $btn-font-size-lg;
//  line-height: 1;
//  cursor: pointer;
//
//  .password-toggle-indicator {
//    transition: color .2s ease-in-out;
//    color: $input-placeholder-color;
//    font: {
//      family: 'cartzilla-icons';
//      style: normal;
//    }
//    &::before { content: '\e937'; }
//    &:hover { color: $input-color; }
//  }
//
//  .password-toggle-check {
//    position: absolute;
//    left: 0;
//    z-index: -1;
//    width: 1rem;
//    height: 1.25rem;
//    opacity: 0;
//
//    &:checked ~ .password-toggle-indicator::before {
//      content: '\e9d6';
//    }
//  }
//}
//.was-validated .password-toggle .form-control:invalid,
//.was-validated .password-toggle .form-control.is-invalid,
//.was-validated .password-toggle .form-control:valid,
//.was-validated .password-toggle .form-control.is-valid {
//  padding-right: 4rem;
//  & + .password-toggle-btn { right: 2.1rem; }
//}
//
//
//// Checkboxes and radios
//
//.form-check-label {
//  font-size: $form-check-label-font-size;
//}
//.form-check-justified {
//  flex-basis: 0;
//  flex-grow: 1;
//  &:not(:last-child) {
//    margin-right: $spacer * .5;
//  }
//  .form-option-label {
//    width: 100%;
//  }
//}
//
//
//// Switches
//
//.form-switch {
//  .form-check-input {
//    height: $form-switch-height;
//    border: 0;
//    background-color: $form-switch-bg;
//    &:checked {
//      background-color: $form-switch-checked-bg;
//      box-shadow: $form-switch-checked-box-shadow;
//    }
//    &:disabled {
//      box-shadow: none;
//    }
//  }
//  .form-check-label {
//    margin-top: .1875rem;
//  }
//}
//
//
//// Form validation
//
//.valid-tooltip,
//.invalid-tooltip {
//  position: static;
//  margin-top: .25rem;
//}
//.valid-tooltip {
//  color: $success;
//}
//.invalid-tooltip {
//  color: $danger;
//}
//.was-validated {
//  .form-control:invalid,
//  .form-control.is-invalid,
//  .form-check-input:invalid,
//  .form-check-input.is-invalid {
//    &~.invalid-tooltip { display: table; }
//  }
//  .form-control:valid,
//  .form-control.is-valid,
//  .form-check-input:valid,
//  .form-check-input.is-valid {
//    &~.valid-tooltip { display: table; }
//  }
//  .form-control:valid,
//  .form-control.is-valid,
//  .form-select:valid,
//  .form-select.is-valid {
//    border-color: $input-border-color !important;
//  }
//}
//.was-validated .form-check-input:valid ~ .form-check-label,
//.was-validated .form-check-input.is-valid ~ .form-check-label {
//  color: inherit;
//}
//.was-validated .form-check-input:valid:checked,
//.was-validated .form-check-input.is-valid:checked {
//  border-color: $form-check-input-checked-border-color;
//  background-color: $form-check-input-checked-bg-color;
//}
//
//
//// Disabled inputs
//
//.form-control:disabled {
//  cursor: not-allowed;
//}
//
//
//// Subscription form status
//
//.subscription-status {
//  @include border-radius($border-radius-sm);
//  font-size: $font-size-ms;
//  text-align: center;
//  &.status-success,
//  &.status-error {
//    margin-top: .5rem;
//    padding: .25rem .375rem;
//  }
//  &.status-success {
//    background-color: rgba($success, .1);
//    color: darken($success, 10%);
//  }
//  &.status-error {
//    background-color: rgba($danger, .1);
//    color: $danger;
//  }
//}
//
//
//// Custom size / color radios
//
//.form-option {
//  padding-left: 0;
//  &.form-check-inline {
//    margin-right: ($spacer * .25);
//  }
//  .form-check-input {
//    border: 0;
//    background: none;
//  }
//}
//.form-option-label {
//  position: relative;
//  min-width: $form-option-size;
//  height: $form-option-size;
//  margin-bottom: 0;
//  padding: {
//    top: .0625rem;
//    right:$form-option-padding-x;
//    left: $form-option-padding-x;
//  }
//  transition: $form-option-transition;
//  border: $form-option-border-width solid $form-option-border-color;
//  @include border-radius($form-option-border-radius);
//  color: $form-option-color;
//  font: {
//    size: $form-option-font-size;
//    weight: $form-option-font-weight;
//  }
//  text-align: center;
//  line-height: ($form-option-size - .25rem);
//  cursor: pointer;
//  &:hover {
//    border-color: $form-option-hover-border-color;
//    color: $form-option-hover-color;
//  }
//}
//.form-option-color {
//  display: block;
//  position: absolute;
//  top: 50%;
//  left: 50%;
//  width: ($form-option-size - .5rem);
//  height: ($form-option-size - .5rem);
//  margin: {
//    top: -(($form-option-size - .5rem) * .5);
//    left: -(($form-option-size - .5rem) * .5);
//  }
//  background: {
//    position: top left;
//    size: ($form-option-size - .5rem) ($form-option-size - .5rem);
//    repeat: no-repeat;
//  }
//}
//.form-check-input:checked ~ .form-option-label {
//  border-color: $form-option-active-border-color;
//  color: $form-option-active-color;
//}
//
//
//// Custom file input drop area
//
//.file-drop-area {
//  position: relative;
//  padding: ($spacer * 2) $spacer;
//  transition: $input-transition;
//  border: ($input-border-width * 2) dashed $input-border-color;
//  background-color: $input-bg;
//  text-align: center;
//  cursor: pointer;
//
//  .file-drop-input {
//    display: block;
//    position: absolute;
//    top: 0;
//    left: 0;
//    width: 100%;
//    height: 100%;
//    background-color: transparent;
//    opacity: 0;
//    outline: none;
//    cursor: pointer;
//    z-index: 2;
//  }
//
//  .file-drop-icon {
//    display: block;
//    margin-bottom: .75rem;
//    color: $gray-500;
//    font-size: $font-size-xl;
//  }
//
//  .file-drop-preview {
//    max-width: $file-drop-area-preview-width;
//    margin: {
//      right: auto;
//      bottom: .75rem;
//      left: auto;
//    }
//  }
//
//  .file-drop-message {
//    display: block;
//    font-size: $font-size-sm;
//    margin-bottom: 1.25rem;
//  }
//
//  .btn {
//    position: relative;
//    z-index: 3;
//  }
//
//  &:hover {
//    border-color: darken($input-border-color, 7%);
//  }
//}

.hero-subscribe-form-wrap {
    max-width: 460px;
  }
  .skewed-wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
  }
  .skewed-1 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-bottom: 282px solid $white;
    border-left: 100vw solid transparent;
  }
  .hero-bg-img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  @media (min-width: 320px) and (max-width: 414px) {
    .hero-subscribe-form input.btn {
      position: relative;
      right: 0;
      top: 10px;
      margin-bottom: 15px;
      transition: all 0.3s ease-in;
    }
    .hero-subscribe-form input.form-control {
      padding: 0.75rem 1rem;
    }
  }
  .app-screen-bg {
    background-position: 50% 100%;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .app-screen-wrap {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 5;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(29.4046deg)
      rotateY(0deg) rotateZ(-19.4046deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
  }
  .screen-grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: auto auto;
    grid-row-gap: 16px;
    grid-column-gap: 16px;
  }
  .grid-app-screens {
    width: 130%;
    max-width: 1100px;
    padding-left: 5%;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr 2.2fr;
    perspective: 1000px;
    transform: perspective(1000px);
  }
  .screen-1 {
    grid-row-start: span 2;
    grid-row-end: span 2;
    width: 100%;
  }
  .screen-3 {
    justify-self: start;
  }
  
  .circle-shape-wrap {
    grid-column-end: 4;
    -ms-grid-column: 3;
    grid-column-start: 3;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
    -ms-grid-row: 1;
    grid-row-start: 1;
  }
  .circle-img-1 {
    position: absolute;
    width: 16%;
    margin-top: 2%;
    margin-left: 44%;
  }
  .circle-img-2 {
    position: absolute;
    width: 10%;
    margin-top: -7%;
    margin-left: 57%;
  }
  .circle-img-3 {
    position: absolute;
    width: 8%;
    margin-top: -19%;
    margin-left: 36%;
  }
  
  /*hero-3*/
  .hero-screen-wrap {
    display: flex;
    align-items: flex-end;
    margin-right: -120px;
  }
  .hero-screen-wrap .phone-screen {
    flex: 0 0 220px;
    width: 220px;
    margin-bottom: -30px;
    margin-right: -220px;
    z-index: 2;
  }
  .hero-screen-wrap .mac-screen {
    flex: 0 0 885px;
    width: 885px;
    margin-right: -180px;
    z-index: 1;
  }
  @media (min-width: 1480px) and (max-width: 1836px) {
    .hero-screen-wrap {
      margin-right: 0;
    }
    .hero-screen-wrap .phone-screen {
      flex: 0 0 165px;
    }
    .hero-screen-wrap .mac-screen {
      flex: 0 0 765px;
      margin-right: 0;
    }
  }
  @media (min-width: 320px) and (max-width: 1479px) {
    .hero-screen-wrap {
      margin-right: 0;
    }
    .hero-screen-wrap .phone-screen {
      flex: 0 0 100px;
      margin-right: 0;
    }
    .hero-screen-wrap .mac-screen {
      flex: 0 0 465px;
      margin-right: 0;
    }
  }
  @media (min-width: 320px) and (max-width: 767px) {
    .hero-screen-wrap {
      align-items: center;
      justify-content: center;
    }
    .hero-screen-wrap .phone-screen {
      display: none;
    }
    .hero-screen-wrap .mac-screen {
      flex: auto;
    }
  }
  /*hero-5*/
  .widget-img-1 {
    top: 22%;
    left: -90px;
  }
  
  .widget-img-2 {
    bottom: -12%;
    left: -75px;
  }
  .widget-img-3 {
    top: 40%;
    right: -100px;
  }
  .widget-img-4 {
    bottom: -10%;
    right: 35px;
  }
  
  .widget-img-5 {
    top: -35%;
    left: -35%;
  }
  .widget-img-6 {
    top: -30%;
    right: -35%;
  }
  /*hero-8*/
  .hero-app-img::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    border-radius: 50%;
    background-color: #f6c37b;
    width: 500px;
    height: 500px;
  }
  
  .hero-app-img img {
    position: relative;
    z-index: 5;
  }
  
  @media (min-width: 320px) and (max-width: 991px) {
    .widget-img-wrap {
      display: none;
    }
    .hero-app-img::before,
    .app-two-mockup::before {
      display: none;
    }
  }

  
  .integration-list-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  }
  .integration-list-wrap a {
    position: relative;
    display: flex;
    margin-right: 16px;
    margin-left: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    box-shadow: 7px 7px 10px 0 rgba(55, 65, 81, 0.12);
  }
  .integration-list-wrap a {
    width: 65px;
  }
  .integration-list-wrap a img {
    padding: 10px;
  }
  
  .integration-list-wrap a.integration-1 {
    left: -120px;
    top: 0;
  }
  .integration-list-wrap a.integration-2 {
    top: -21px;
    right: -22px;
  }
  .integration-list-wrap a.integration-3 {
    left: -191px;
    margin-right: 16px;
    margin-left: 16px;
  }
  
  .integration-list-wrap a.integration-5 {
    left: -150px;
    bottom: -30px;
  }
  .integration-list-wrap a.integration-6 {
    left: 50px;
    bottom: 0;
  }
  .integration-list-wrap a.integration-7 {
    left: 120px;
    top: 0;
  }
  .integration-list-wrap a.integration-8 {
    top: -21px;
    right: 22px;
  }
  .integration-list-wrap a.integration-9 {
    left: 191px;
  }
  .integration-list-wrap a.integration-11 {
    left: 150px;
    bottom: -30px;
  }
  .integration-list-wrap a.integration-12 {
    left: -50px;
    bottom: 0;
  }
  .integration-badge {
    top: 8%;
    right: 8%;
    font-size: 12px;
    letter-spacing: 0.2px;
    font-weight: $font-weight-medium-light;
    font-family: $headings-font-family;
  }
  .connected-app-single {
    transition: all 0.3s ease;
  }
  .connected-app-single:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 20px 0 rgba(2, 19, 79, 0.09);
    background: $white !important;
  }
  @media (min-width: 320px) and (max-width: 991px) {
    .integration-list-wrap {
      flex-direction: row;
    }
    .integration-list-wrap a {
      position: inherit;
      width: 45px;
    }
    .integration-list-wrap a img {
      padding: 10px;
    }
  }
  @media (min-width: 320px) and (max-width: 767px) {
    .integration-list-wrap a img {
      padding: 0;
    }
    .integration-list-wrap a {
      box-shadow: none;
      margin-right: 8px;
      margin-left: 8px;
    }
  }
  
  .integration-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    justify-content: space-between;
    grid-gap: 25px;
    justify-items: center;
  }
  .integration-list li {
    width: 100%;
  }
  .integration-list li .single-integration {
    box-shadow: rgba(13, 21, 55, 0.06) 0 5px 50px;
    display: block;
    margin: auto;
    text-align: center;
    padding: 20px;
    border-radius: 6px;
    transition: all 0.3s ease;
  }
  .integration-list li .single-integration img {
    width: 100%;
    height: auto;
    max-width: 35px;
    max-height: 35px;
    margin: auto;
  }
  .integration-list li .single-integration:hover {
    box-shadow: 0 20px 20px 0 rgba(2, 19, 79, 0.1);
    transform: translateY(-2px);
  }
  .integration-logo {
    margin-bottom: 30px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  }
  @media (min-width: 768px) {
    .integration-logo-wrap {
      grid-gap: 12px;
    }
  }
  
  .integration-icon {
    width: 22px;
    height: 22px;
  }
  .included-feature-list li {
    display: flex;
    align-items: center;
  }


  a,
.btn-link {
  color: rgba($primary, .85);
  transition: $transition-base;
}
a:hover,
.btn-link:hover {
  color: $primary;
  text-decoration: none;
}
.link-text,
.watch-now-btn {
  font-family: $headings-font-family;
  font-weight: $font-weight-medium-light;
}
.watch-now-btn {
  font-size: $font-size-sm;
  color: darken($secondary, 5%);
  text-align: center;
  i{
    width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: 12px;
    transition: $transition-base;
    border: 2px solid $white;
    margin-right: 10px;
    border-radius: 50%;
    color: $secondary;
  }
  &:hover{
    color: $white;
    i{
      background: $white;
      color: $primary;
    }
  }
}
@media (min-width: 367px) and (max-width: 575px) {
  .watch-now-btn {
    margin-left: 10px;
  }
}

.read-more-link {
  font-weight: 600;
  font-family: $headings-font-family;
  font-size: $font-size-md;
  i{
    vertical-align: middle;
    transition: $transition-base;
  }
  &:hover{
    i{
      transform: translateX(3px);
      margin-left: 10px;
    }
  }
}



.mb--100 {
    margin-bottom: -100px;
  }
  .mb-10 {
    margin-bottom: 10px;
  }
  .mb-32 {
    margin-bottom: 32px;
  }
  .mb-30 {
    margin-bottom: 30px;
  }
  .white-space-100 {
    height: 100px;
  }
  .pricing-tab-list {
    display: inline-flex;
  }
   .pricing-tab-list li button {
    border: 0;
    outline: none;
    box-shadow: none;
    padding: 6px 15px;
    font-family: $headings-font-family;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium-light;
    background: $gray-300;
     min-width:120px;
    position: relative;
  }
  #courseplanannual-tab.active::after, #pills-profile-tab.active::after {
    content: "Save extra 20%";
    color: white;
    background: linear-gradient(91deg, #F22FB0 52.27%, #FF7426 96.15%);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 5px;
    position: absolute;
    top: -27px;
    line-height: 20px;
    left: 50%;
    transform: translate(-50%, 10px);
    white-space: nowrap;
}
#courseplanannual-tab.active:hover::after, #pills-profile-tab.active:hover::after {
  animation: vibrate 0.8s infinite ease-in-out;
}
@keyframes vibrate {
  0% { transform: translate(-50%, 10px) rotate(0deg); }
  20% { transform: translate(-50%, 10px) rotate(-1deg); }
  40% { transform: translate(-50%, 10px) rotate(1deg); }
  60% { transform: translate(-50%, 10px) rotate(-1deg); }
  80% { transform: translate(-50%, 10px) rotate(1deg); }
  100% { transform: translate(-50%, 10px) rotate(0deg); }
}
#coursecplanmonthly-tab.active:hover::after, #pills-home-tab.active:hover::after  {
  animation: vibrate 0.8s infinite ease-in-out;
}
/* #coursecplanmonthly-tab.active::after, #pills-home-tab.active::after {
   content: "Save 10%";
    color: white;
    background: linear-gradient(91deg, #F22FB0 52.27%, #FF7426 96.15%);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 5px;
    position: absolute;
    top: -27px;
    line-height: 20px;
    left: 50%;
    transform: translate(-50%, 10px);
    white-space: nowrap;
} */
  .pricing-tab-list li:first-child button {
    border-radius: 5px 0 0 5px;
  }
  .pricing-tab-list li:last-child button {
    border-radius: 0 5px 5px 0;
  }
  .pricing-tab-list li button.active {
    background: $dark;
    color: $white;
  }
  .pricing-price span {
    font-size: 14px;
    color: $body-color;
  }
  .pricing-content-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    z-index:1;
  }
  .price-feature-col {
    flex: 0 0 auto;
    width: 50%;
  }
  .left-radius {
    border-radius: 1rem 0 0 1rem;
  }
  .right-radius {
    border-radius: 0 1rem 1rem 0;
  }
  @media (min-width: 320px) and (max-width: 767px) {
    .price-feature-col {
      width: 100%;
    }
    .price-feature-col.left-radius {
      border-radius: 1rem 1rem 0 0;
    }
    .right-radius {
      border-radius: 1rem 1rem 0 0;
    }
  }
  @media (min-width: 767px) and (max-width: 991px) {
    .price-feature-col {
      width: 100%;
    }
    .right-radius {
      border-radius: 1rem 1rem 0 0;
    }
  }
  
  
  .pricing-header .package-name {
    font-size: 18px;
    font-weight: $font-weight-medium;
    margin-bottom: 14px;
  }
  .pricing-header h4 span {
    font-size: $font-size-sm;
    font-weight: $font-weight-medium-light;
    margin-left: 5px;
  }
  .pricing-feature-list li {
    font-size: 15px;
    padding: 5px 0;
  }
  .single-pricing-wrap {
    transition: transform 300ms ease;
  }
  .transform-hover:hover {
    transform: translate(0px, -10px);
  }
  .transition-base {
    transition: $transition-base;
  }

  .block-item-patterns {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .block-item-pattern {
    height: 27px;
    width: 27px;
  }
  .pattern-block-1:nth-child(1) .block-item-pattern:nth-child(1) {
    top: 0;
    right: 40px;
  }
  .pattern-block-1:nth-child(1) .block-item-pattern:nth-child(2) {
    bottom: 27px;
    left: 0;
  }
  .pattern-block-1:nth-child(1) .block-item-pattern:nth-child(3) {
    bottom: 0;
    left: 27px;
  }
  .pattern-block-2:nth-child(1) .block-item-pattern:nth-child(1) {
    top: 60px;
    right: 0;
  }
  .pattern-block-2:nth-child(1) .block-item-pattern:nth-child(2) {
    bottom: 60px;
    left: 0;
  }
  .pattern-block-2:nth-child(1) .block-item-pattern:nth-child(3) {
    bottom: 60px;
    right: 0;
  }
  .pattern-block-3:nth-child(1) .block-item-pattern:nth-child(1) {
    top: 0;
    left: 40px;
  }
  
  .pattern-block-3:nth-child(1) .block-item-pattern:nth-child(2) {
    bottom: 27px;
    right: 0;
  }
  
  .pattern-block-3:nth-child(1) .block-item-pattern:nth-child(3) {
    bottom: 0;
    right: 27px;
  }
  
  .promo-icon i {
    line-height: normal;
  }
  .card-bar {
    width: 100px;
    height: 10px;
    border-radius: 20px 0 0 20px;
  }
  
  .promo-border-hover {
    transition: all 0.3s ease;
  }
  .promo-border-hover:hover {
    background: transparent !important;
    border-color: $primary !important;
  }
  
  .contact-us-promo span {
    line-height: normal;
    margin-bottom: 30px;
  }
  
  /*app two promo feature*/
  .app-two-single-feature {
    border-radius: 6px;
    box-shadow: 0 30px 70px 0 rgba(0, 15, 56, 0.1);
    padding: 40px;
  }
  .app-two-single-feature-icon i {
    border-radius: 10px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 25px;
    display: inline-block;
  }
  .app-two-single-feature-icon.box-one i {
    background-color: rgba(217, 34, 255, 0.1);
    color: #d922ff;
  }
  .app-two-single-feature-icon.box-two i {
    background-color: rgba(255, 62, 102, 0.1);
    color: #ff3e66;
  }
  .app-two-single-feature-icon.box-three i {
    background-color: rgba(14, 149, 64, 0.1);
    color: #0e9541;
  }
  .app-two-single-feature-icon.box-four i {
    background-color: rgba(57, 135, 255, 0.1);
    color: #3987ff;
  }
  // promo with video
  .video-bg-with-icon {
    display: grid;
    padding: 200px 0;
    place-items: center;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 40px 40px 0 rgba(14, 17, 51, 0.2);
  }
  .video-bg-with-icon::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: rgba(72, 43, 118, 0.7);
  }
  .video-bg-with-icon a {
    color: $danger;
    position: relative;
    z-index: 1;
    background-color: $white;
    height: 80px;
    display: block;
    width: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 50%;
    font-size: 20px;
    transition: $transition-base;
  }
  .video-bg-with-icon a:hover {
    background-color: $primary;
    color: $white;
  }
  .video-promo-icon-wrapper {
    margin-top: -220px;
    padding-top: 300px;
  }
  
  @media (min-width: 320px) and (max-width: 767px) {
    .video-promo-icon-wrapper {
      padding-top: 250px;
    }
  }
  
  .single-icon-box i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
    color: $white;
    margin-bottom: 20px;
  }
  .single-icon-box i.icon-one {
    background-color: #ee283c;
  }
  .single-icon-box i.icon-two {
    background-color: #0e9541;
  }
  .single-icon-box i.icon-three {
    background-color: #ff7d1a;
  }
  .single-icon-box i.icon-four {
    background-color: #3987ff;
  }


  .support-article-tab {
    display: inline-block;
  }
  .support-article-tab.nav-pills .nav-link.active,
  .support-article-tab.nav-pills .show > .nav-link {
    color: $primary;
    background: transparent;
  }
  .support-article-tab button.nav-link {
    padding: 0.5rem 0;
    display: inline-flex;
    width: 100%;
    color: $body-color;
  }
  .support-article-tab button.nav-link:hover,
  .support-article-tab a:hover {
    color: $primary !important;
  }
  .quick-support a {
    transition: all 0.3s ease;
  }
  .quick-support a:hover {
    color: $primary !important;
  }
  .quick-support-icon i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .support-article-title {
    font-family: $font-family-sans-serif;
    transition: $transition-base;
  }
  .support-article-list li a:hover .support-article-title {
    color: $primary;
  }
  .support-article-list li a:hover .read-more-link i {
    transform: translateX(3px);
    margin-left: 10px;
  }
  .support-article-list li a:hover .read-more-link {
    opacity: 0.9;
  }
  .support-article-list li a:hover p {
    color: $body-color;
  }

  .team-single-wrap {
    position: relative;
    display: block;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .team-img {
    position: relative;
    overflow: hidden;
  }
  .team-img img {
    transition: all 0.3s ease;
  }
  .team-single-wrap:hover .team-img img {
    transform: scale(1.1);
    box-shadow: 0 0 1.25rem rgba(31, 45, 61, 0.05);
  }
  .team-social-list {
    position: absolute;
    top: 8%;
    right: 8%;
  }
  .team-social-list.team-social-style-2 {
    bottom: 8%;
    top: auto;
  }
  .team-social-list li {
    margin: 3px 0 !important;
  }
  .team-social-list li a,
  .author-social-list li a {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 15px;
    border-radius: 3px;
    /* background: $light; */
    color: $body-color;
    transform: translateX(250px);
    transition: all 0.4s ease-in-out;
  }
  .author-social-list.social-bg-ts li a {
    background: transparent;
    /* color: $light; */
  }
  .team-social-list li a:hover,
  .author-social-list li a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
  }
  .team-single-wrap:hover .team-social-list li a {
    transform: translateX(0);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  }
  .author-social-list li a {
    transform: none;
  }


  //testimonial style

.testimonial-tab-slider-wrap,
.testimonial-tab-indicator {
  transition: all 0.3s ease;
}
.testimonial-tab-indicator li button {
  padding: 0;
  margin-right: 15px;
}
.author-info {
  h6 {
    font-size: $font-size-base;
  }
  span {
    font-size: $font-size-sm;
  }
}

.testimonial-tab-indicator li button img {
  transform: scale(0.8);
  transition: all 0.3s ease;
}
.nav-pills.testimonial-tab-indicator .nav-link.active,
.nav-pills.testimonial-tab-indicator .show > .nav-link {
  background: transparent !important;
}
.nav-pills.testimonial-tab-indicator .nav-link.active img {
  transform: scale(1);
}
.swiper-nav-control {
  .swiper-button-next,
  .swiper-button-prev {
    width: 40px;
    height: 40px;
    border: 1px solid $white;
    background-color: $white;
    border-radius: 6px;
    box-shadow: 0 11px 24px 0 rgba(0, 0, 0, 0.09);
    z-index: 2;
    &:hover {
      background-color: $primary;
      color: $white !important;
      border-color: $primary;
    }
    &::after {
      font-size: 13px;
    }
  }
}

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
   background-color: $primary;
   color: $white !important;
   border-color: $primary;
 }
 .swiper-button-prev:after,
 .swiper-button-next:after {
   font-size: 13px;
   font-weight: 600;
 }

.swiper-button-next {
  right: -25px;
}
.swiper-button-prev {
  left: -25px;
}
@media (min-width: 320px) and (max-width: 645px) {
  .swiper-button-next {
    right: 0;
  }
  .swiper-button-prev {
    left: 0;
  }
}
.review-rate li {
  margin-right: 2px !important;
}
.review-rate li i {
  font-size: 12px;
  line-height: normal;
}
.blockquote {
  font-size: 1.125rem;
}
.testimonial-tab-list li a {
  margin-right: 10px;
}
.testimonial-tab-list li a img {
  border: 2px solid $secondary;
  transform: scale(1);
  padding: 4px;
  transition: all 0.3s ease;
}
.testimonial-tab-list li a.active img {
  border-color: $primary;
  transform: scale(1.1);
}
/*testimonial tab*/
.testimonial-tab-menu {
  display: grid;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  grid-auto-columns: 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-template-rows: auto;
}
.testimonial-tab-menu li {
  width: 100%;
  cursor: pointer;
}
.testimonial-tab-link {
  transition: all 0.3s ease-in-out;
  background: rgba(255, 255, 255, 0.05) !important;
  .author-info{
    span{
      color: $body-color;
    }
  }
}
.testimonial-video-wrapper:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.6;
  transition: all 0.3s ease;
  border-radius: 1rem;
  height: 100%;
  width: 100%;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(transparent),
    to(rgba(23, 19, 71, 1))
  );
  background-image: -webkit-linear-gradient(
    top,
    transparent,
    rgba(23, 19, 71, 1)
  );
  background-image: linear-gradient(180deg, transparent, rgba(23, 19, 71, 1));
}

.testimonial-video-wrapper .video-icon i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: $primary;
  color: $white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18);
}
.testimonial-video-wrapper .customer-info {
  position: absolute;
  left: 8%;
  bottom: 8%;
}
.testimonial-tab-menu.nav-pills .nav-link {
  padding: 1rem 1rem;
}
.testimonial-tab-menu.nav-pills .nav-link.active,
.testimonial-tab-menu.nav-pills .show > .nav-link {
  border-color: var(--bs-white) !important;
  box-shadow: 0 20px 20px 0 rgba(2, 19, 79, 0.1);
  background: $white !important;
  transform: translateY(-3px);
}
.bg-dark .testimonial-tab-menu.nav-pills .nav-link.active,
.bg-dark .testimonial-tab-menu.nav-pills .show > .nav-link,
.bg-gradient .testimonial-tab-menu.nav-pills .nav-link.active,
.bg-gradient .testimonial-tab-menu.nav-pills .show > .nav-link {
  border-color: rgba(101, 101, 101, 0.06) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.testimonial-tab-menu.nav-pills .nav-link.active {
  color: $body-color;
}
@-webkit-keyframes ripple-white {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2),
      0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2),
      0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
  }

  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2),
      0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px transparent;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2),
      0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px transparent;
  }
}

@keyframes ripple-white {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2),
      0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2),
      0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
  }

  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2),
      0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px transparent;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2),
      0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px transparent;
  }
}

/*app two customer review slider*/
.appTwoReviewSwiper-Controller {
  display: flex;
  max-width: 90px;
  justify-content: space-between;
}
.appTwoReviewSwiper-Controller .swiper-button-prev,
.appTwoReviewSwiper-Controller .swiper-button-next {
  border: 1px solid $border-color;
  color: $gray-500;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  box-shadow: none;
}
.appTwoReviewSwiper-Controller .swiper-button-next {
  right: 10px;
}

.appTwoReviewSwiper-Controller .swiper-button-prev:hover,
.appTwoReviewSwiper-Controller .swiper-button-next:hover {
  border: 1px solid transparent;
  background-color: $danger;
  color: $white;
}
@media (min-width: 320px) and (max-width: 767px) {
  .appTwoReviewSwiper-Controller {
    margin: 0 auto 40px;
  }
  .appTwoReviewSwiper-Controller .swiper-button-next {
    right: -10px;
  }
}


//
// Typography
// --------------------------------------------------


// 404 display heading

.display-404 {
  color: $white;
  text-shadow: -.0625rem 0 $primary, 0 .0625rem $primary, .0625rem 0 $primary, 0 -.0625rem $primary;
}


// Lists

.list-style {
  list-style: none;
  li {
    margin-bottom: $spacer * .4;
    &::before {
      display: inline-block;
      width: 1em;
      margin-left: -1em;
      color: $list-style-color;
      font-weight: bold;
      content: '\2022';
    }
  }
}
ol.list-style {
  counter-reset: li;
  li {
    counter-increment: li;
    &::before {
      margin: {
        right: .5em;
        left: -1.5em;
      }
      font-weight: inherit;
      text-align: right;
      direction: rtl;
      white-space: nowrap;
      content: '.' counter(li);
    }
  }
}

// Description list

dt {
  color: $headings-color;
  margin-bottom: $spacer * .25;
  font-weight: $headings-font-weight;
  font-family: $headings-font-family;
}
dd {
  font-size: $font-size-md;
  margin-bottom: $spacer;
}


/*work process promo*/
.process-card {
    position: relative;
    display: block;
    transition: $transition-base;
  }
  .process-card-two {
    transition: $transition-base;
  }
  
  .custom-shadow {
    box-shadow: 0 5px 20px 0 rgba(210, 210, 245, 0.5);
  }
  .shadow-hover:hover {
    box-shadow: 0 5px 20px 0 rgba(210, 210, 245, 0.5);
    z-index: 3;
  }
  .process-icon {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: $transition-base;
    margin: 0 auto 35px;
  }
  .process-card-two:hover .process-icon {
    background-color: $white;
    color: $primary;
  }
  .process-card:hover {
    background: $white;
  }
  .process-card:hover .process-icon {
    background: $primary !important;
  }
  .process-card:hover .process-icon span,
  .process-card:hover .process-icon span i {
    color: $white !important;
  }
  .dots-line {
    position: relative;
    top: auto;
    right: auto;
    z-index: 2;
    width: 100px;
    height: 1px;
    padding-top: 0;
    flex: 1;
    border-bottom: 2px dashed $primary;
  }
  
  .dots-line.first {
    position: relative;
    margin-right: -43px;
    margin-left: -43px;
  }
  @media screen and (max-width: 991px) {
    .dots-line {
      display: none;
    }
  }
  /*process icon two*/
  
  .process-icon-2 i {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 22px;
  }
  .process-icon-2 {
    position: relative;
  }
  .process-icon-2:after {
    content: "";
    position: absolute;
    top: -20px;
    width: 0;
    right: 47%;
    transform: translate(-50%, 50%);
    height: 150px;
    z-index: -1;
    border-style: dashed;
    border-width: 1px;
    border-color: $border-color;
    background-color: transparent;
  }
  .work-process-list li:last-child .process-icon-2:after {
    display: none;
  }
  .work-process-list li,
  .process-icon-2 i {
    transition: all 0.3s ease-in-out;
  }
  .process-icon-2 i {
    opacity: 0.6;
  }
  .work-process-list li:hover .process-icon-2 i {
    color: var(--bs-primary);
    opacity: 1;
  }
  .promo-card-info h3 i {
    font-size: 38px;
  }
  /*setup process*/
  .setup-process-list {
    justify-content: space-between;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    justify-items: center;
  }
  .setup-process-item {
    width: 100%;
  }
  li.setup-process-item:not(:last-child) {
    position: relative;
  }
  li.setup-process-item:not(:last-child):before {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    bottom: 0;
    width: 2px;
    background: rgba(116, 143, 181, 0.15);
  }
  @media only screen and (max-width: 767px) {
    .setup-process-list {
      display: block;
      max-width: 250px;
      margin: 0 auto;
    }
    li.setup-process-item:not(:last-child):before {
      top: auto;
      right: 0;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 2px;
    }
  }


  //footer style
.footer-single-col h3 {
  font-size: 18px;
  font-weight: $font-weight-medium;
  margin-bottom: 36px;
}
.footer-nav-list li a {
  font-size: 15px;
  margin: 10px 0;
  display: block;
  opacity: 0.5;
  font-weight: $font-weight-medium-light;
  font-family: $headings-font-family;
  transition: $transition-base;
}
.footer-nav-list li a,
.footer-single-col p {
  color: var(--bs-secondary-dark);
  opacity: 0.7;
}
.footer-nav-list li a:hover {
  opacity: 1;
}

.footer-top.bg-dark .footer-nav-list li a,
.footer-top.bg-dark .footer-single-col p,
.footer-top.bg-gradient .footer-single-col p {
  opacity: 1;
}
.footer-top.bg-dark .footer-nav-list li a:hover,
.footer-top.bg-gradient .footer-nav-list li a:hover {
  color: $white;
}
.footer-light .footer-nav-list li a,
.footer-light .footer-single-col p {
  color: $body-color;
  opacity: 0.8;
}
.footer-light .footer-nav-list li a:hover {
  color: $primary;
  opacity: 1;
}
.footer-light .footer-single-col h6 {
  color: $body-color;
}
.footer-light .logo-white,
.bg-dark .logo-color,
.bg-gradient .logo-color {
  display: none;
}
.footer-light .logo-color,
.bg-dark .logo-white,
.bg-gradient .logo-white {
  display: block;
}
.newsletter-form button {
  right: 0;
  top: 0;
  bottom: 0;
  height: auto;
  border: none;
  border-radius: 0 4px 4px 0;
  display: inline-block;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 15px;
}
.newsletter-form button i {
  font-size: 12px;
}
.newsletter-form button:focus {
  outline: none;
}
.rating-list li {
  margin-right: 2px !important;
}
.rating-list li i {
  font-size: 11px;
}
.bg-dark input.form-control,
.bg-gradient input.form-control {
  border-color: $gray-300;
}
.register-form input.form-control {
  border-color: rgba(0, 0, 0, 0.08);
}
.register-form input.form-control:focus {
  border-color: $primary;
}
.footer-bottom {
  position: relative;
  display: block;
  border-top: 1px solid rgba(248, 249, 250, 0.05);
}
.footer-bottom.footer-light {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.copyright-text p {
  font-size: 14px;
  color: #65676d;
  font-weight: $font-weight-medium-light;
  font-family: $headings-font-family;
}
.copyright-text p a {
  color: $body-color;
}

.footer-light .copyright-text p {
  color: #65676d;
}
.bg-dark .copyright-text p,
.bg-gradient .copyright-text p {
  color: $gray-300;
}
.bg-dark .copyright-text p a,
.bg-gradient .copyright-text p a {
  color: $secondary;
}
.copyright-text p a:hover {
  color: $primary;
}
.footer-social-list li a {
  display: block;
  width: 36px;
  height: 36px;
  line-height: 32px;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.12);
  color: #65676d;
  border-radius: 4px;
  transition: $transition-base;
}
.bg-dark .footer-social-list li a,
.bg-gradient .footer-social-list li a {
  color: $gray-300;
}
.footer-light .footer-social-list li a {
  border: 2px solid rgba(0, 0, 0, 0.12);
}
.footer-social-list li a:hover {
  background: $primary;
  color: $white;
  border-color: $primary;
}


//header navbar style

.sticky-header {
  padding: 20px 0;
  transition: $transition-base;
}
.affix {
  top: 0;
  left: 0;
  margin: auto;
  position: fixed;
  width: 100%;
  z-index: 9;
  animation: 300ms ease-in-out fadeInDown;
  background: $dark;
  padding: 10px 0;
  transition: $transition-base;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/*dropdown menu css*/
.dropdown-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  background: $white;
}
.dropdown-grid.width-half {
  grid-template-columns: 1fr;
  width: 320px;
}

.dropdown-grid.width-full {
  grid-template-columns: 1fr 1fr;
  width: 580px;
  &.homepage-dropdown {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
  }
}
.width-full-3 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 800px;
}
.width-full-3 .dropdown-grid-item {
  width: 240px;
}
.dropdown-grid-item {
  width: auto;
  padding: 20px;
  @media(max-width: 1399px) {
    padding-left: 5px;
    padding-right: 5px;
  }
}
.width-full-3 .dropdown-grid-item.last-item {
  display: flex;
  flex-direction: column;
  width: auto;
  grid-column-start: span 2;
}
.radius-right-side {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.radius-left-side{
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.main-menu{
  li.nav-item{
    position: inherit;
    .dropdown-menu{
      &:before{
        content: "";
        position: absolute;
        top: -9px;
        left: 50%;
        width: 20px;
        height: 20px;
        transform: translate(-50%, 0) rotate(-315deg);
        border-radius: 3px;
        background-color: $white;
        opacity: 0;
        transition: all 0.3s ease;
      }
    }
    &:hover{
      .dropdown-menu{
        &:before{
          opacity: 1;
        }
      }
    }
  }
  li{
    a.nav-link{
      padding: 0.85rem 1rem;
      font-size: $font-size-md;
      font-weight: $font-weight-medium-light;
      position: relative;
      font-family: $headings-font-family;
    }
  }
}
.dropdown-menu {
  right: auto;
  left: 50% !important;
  transform: translate(-50%, 0);
}

.homepage-list-wrapper {
  left: 0 !important;
  transform: inherit;
  @include screen-1600 {
    &::before {
      left: 37% !important;
    }
  }
  @include screen-1440 {
    &::before {
      left: 24% !important;
    }
  }
}

.navbar-dark .main-menu li a.nav-link,
.navbar-dark .action-btns a.btn-link {
  color: $gray-300;
}
/*navbar-light*/
.navbar-light .main-menu li a.nav-link,
.navbar-light .action-btns a.btn-link,
.navbar-dark.sticky-header.affix .main-menu li a.nav-link,
.navbar-dark.sticky-header.affix .action-btns a.btn-link {
  color: $body-color;
}
.navbar-light.sticky-header.affix,
.navbar-dark.sticky-header.affix {
  background: $white;
}
.navbar-light.sticky-header.affix .btn,
.navbar-dark.sticky-header.affix .btn,
.bg-dark .btn,
.coming-soon-section .btn,
.bg-gradient .btn,
.coming-soon-section .btn,
.navbar-dark .btn-primary {
  box-shadow: none;
}
.navbar-light .navbar-brand img.logo-white,
.navbar-dark .navbar-brand img.logo-color,
.navbar-dark.sticky-header.affix .navbar-brand img.logo-white {
  display: none;
}
.navbar-dark.sticky-header.affix .navbar-toggler span {
  color: $body-color;
}
.navbar-dark.sticky-header.affix .navbar-brand img.logo-color {
  display: block;
}

.main-menu li a.nav-link:hover,
.action-btns a.btn-link:hover,
.navbar-dark.sticky-header.affix .main-menu li a.nav-link:hover,
.navbar-dark.sticky-header.affix .action-btns a.btn-link:hover {
  color: $primary;
}
.dropdown-grid-item{
  a{
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.55rem 1rem !important;
    transition: $transition-base;
    border-radius: 4px;
    span{
      opacity: 0.9;
      font-size: $font-size-md;
      transition: $transition-base;
    }
    &:hover{
      background: $gray-200;
    }
  }
  .drop-heading {
    padding-left: 1rem;
    font-size: $font-size-base;
  }
  .drop-title {
    font-size: $font-size-sm;
    color: $body-color;
    font-weight: $font-weight-medium-light;
    font-family: $headings-font-family;
  }
}

.dropdown-grid-item a:hover .drop-title,
.dropdown-grid-item a:hover span {
  color: $primary;
  opacity: 1;
}
.demo-list {
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-right: 12px;
  text-align: center;
}
.dropdown-info {
  display: flex;
  flex-direction: column;
  p{
    font-size: 13px;
    margin-bottom: 0;
  }
}
.offcanvas.show{
  visibility: visible;
  z-index: 9999;
}

.offcanvas-backdrop{
  &:before{
    display: none;
  }

}
.offcanvas-header button.close-btn {
  background: rgba($danger, .12);
  width: 30px;
  height: 30px;
  text-align: center;
  outline: none;
  box-shadow: none;
  border: none;
  border-radius: 20px;
  i{
    line-height: 32px;
  }
}
.offcanvas-body .dropdown-toggle::after {
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  position: absolute;
  right: 0;
  border: none;
}
.offcanvas-body .main-menu li a.nav-link {
  color: $body-color;
  padding: 0.5rem 1rem;
}
.offcanvas-body .main-menu li a.nav-link:hover {
  color: $primary;
}
.offcanvas-body .radius-right-side {
  border-top-right-radius: 0;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.offcanvas-body .dropdown-menu {
  position: relative !important;
  left: 0 !important;
  margin: 15px 0 !important;
  transform: translate3d(0, 0, 0) !important;
}
.offcanvas-body .dropdown-grid {
  display: block;
  width: auto;
}
.offcanvas-body .dropdown-grid-item {
  width: 100%;
}
.offcanvas-body .dropdown-grid-item.last-item {
  display: none;
}
@media (max-width: 1199px) {
  .nav.main-menu {
    display: block !important;
  }
}

@media (max-width: 991px) {
  .nav.main-menu {
    display: block;
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  .sticky-header.affix {
    padding: 15px 0 !important;
  }
}

.dropdown-toggle::after {
  vertical-align: middle;
}


/*********ins header ***********/ 
.ins-header {
  position: relative;
  z-index: 3;
}



#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 999999;
  }
  .preloader-icon {
    width: 60px;
    height: 60px;
  }
  .loading-bar {
    width: 120px;
    height: 3px;
    margin-top: 30px;
    position: relative;
    overflow: hidden;
    background: $white;
  }
  
  .loading-bar::before {
    content: "";
    width: 35px;
    height: 3px;
    background: $primary;
    position: absolute;
    left: -34px;
    animation: bluebar 1.5s infinite ease;
  }
  
  @keyframes bluebar {
    50% {
      left: 96px;
    }
  }
  .section-heading {
    margin-bottom: 50px;
  }
  @media (min-width: 991px) and (max-width: 1199px) {
    .action-btns.me-lg-0 {
      margin-right: 3rem !important;
    }
  }
  @media (max-width: 991px) {
    .section-heading {
      margin-bottom: 30px;
    }
  }


  // Hero //
.ah-bg {
    background-color: $des-a-clr-2;
}

.ah-bg-2 {
    background-color: $ah-color;
}

.ah-bg-3 {
    background-color: $ah-color-2;
}

.ah-bg-4 {
    background-color: $ah-color-3;
}

.agency-home-hero {
    .hero_shape {
        @media (max-width: 767px) {
            display: none;
         }
    }
} 

.agency-home-hero.pt-160 {
    @media (max-width: 1199px) {
       padding-top: 80px;
    }
}

.agency-home-hero__content__title {
    @media (max-width: 1199px) {
        text-align: center;
        font-size: 56px;
        margin-bottom: 30px;
    }
    @media (max-width: 991px) {
        font-size: 48px;
    }
    @media (max-width: 767px) {
        font-size: 38px;
    }
    @media (max-width: 575px) {
        font-size: 32px;
    }
}

.agency-home-hero__des {
    color: $github;
}

.agency-home-hero__img-box {
    @media (max-width: 1199px) {
        text-align: center;
    }
}

.agency-home-hero__bottom-content {
    @media (max-width: 1199px) {
        padding-left: 0;
        text-align: center;
    }
}

.design-agency-two-hero__btn-box {
    @media (max-width: 1199px) {
        justify-content: center;
    }
}

.ah-conunter-title {
    font-size: clamp(1.98rem, 2.526vw + 1rem, 3rem);
    @media (max-width: 1199px) {
        text-align: center;
    }
}

.ah-counter-des {
    color: $dg-text-color;
    @media (max-width: 1199px) {
        text-align: center;
    }
    @media (max-width: 767px) {
        font-size: 14px;
    }
}

.agency-home-hero__img-box {
    .agency-home-hero__img-box__img {
        margin-left: -60px;
    }
}
// Hero //

// how its works //
.bg-style-1 {
    background-color: $ah-color-4;
}
.bg-style-2 {
    background-color: $ah-color-5;
}
.bg-style-3 {
    background-color:$ah-color-6;
}

.ah-style {
    height: 80px;
    width: 80px;
    border-radius: 10px;
    &.fix {
        svg {
            margin-right: -10px;
            margin-bottom: -10px;
        }
    }
}

.ah-text-outline {
    color: rgb(102 114 251 / 99%);
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke: 3px rgb(102 114 251 / 99%);
}
// how its works //

// Service //
.ah-service {
    position: relative;
    z-index: 2;
    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/agency-home/service_bg2.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        top: 0;
        left: 0;
        z-index: -1;
    }
}
// Service //

// Integration //
.digi-integration.ah-bg-2 {
    padding-top: 265px;
    margin-top: -215px;
}

.ah-outline-btn {
    color: $ah-color-7;
    border: 1px solid $ah-color-7;
}
// Integration //

// News //
.btn-bg-white {
    color: $ah-color-7;
    background-color: $white;
    box-shadow: 14px 14px 56px 0px #21266A1A;
    font-weight: 600;

}

.text-pink-2 {
    color: $hd-primary !important;
}

.red-hover {
    &:hover {
        background-color: $ah-color-8;
        color: $white !important;
    }
}
// News //

// Faq //
.accordion-active-bg {
    .accordion-item {
        &.active {
            background-color: $hd-light-bg;
            .accordion-header {
                a {
                    color: $github;
                }
            }
        }
        .accordion-header {
            a {
                &:hover {
                    color: inherit;
                }
            }
        }
    }
}
// Faq //

// Blog //
.border-radius-remove {
    border-radius: 0;
}

.ah-blog-cet-bg {
    background-color: $ah-color-9;
}

.ah-blog-cet-bg-2 {
    background-color: $ah-color-10;
}
.ah-blog-cet-bg-3 {
    background-color: $hd-secondary;
}
// Blog //

// Newsletter //
.ah-input-bg {
    background-color:$dg-meta-color;
}
// Newsletter //


// Global
.fs-142 {
    font-size: 142px;
    @media(max-width: 991px) {
        font-size: 98px;
    }
    @media(max-width: 767px) {
        font-size: 54px;
    }
}

.fs-130 {
    font-size: 130px;
    @media(max-width: 991px) {
        font-size: 90px;
    }
    @media(max-width: 767px) {
        font-size: 50px;
    }
}

.aiart-clr {
    color: $aiart-clr;
}

.aiart-title {
    @media(max-width: 767px) {
        font-size: 32px;
    }
}

.aiart-outline-text {
    background: $aiart-gd-text;
    background-clip: text;
    -webkit-text-stroke: 4px transparent;
    color: $white;
}

.aiart-gd-text {
    background: $aiart-gd-text;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.aiart-gd-bg {
    background: $aiart-gd-bg;
}

.aiart-un-btn {
    width: 142px;
    height: 142px;
    right: 0;
    top: -90px;
    @media(max-width: 1199px) {
        display: none !important;
    }
}

.aiart-gd-btn {
    position: relative;
    isolation: isolate;
    &:hover {
        &::before {
            opacity: 1;
        }
    }
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: $aiart-gd-bg-3;
        background-size: 100%;
        background-position: center;
        transition: all 0.5s ease;
    }
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid transparent;
        border-radius: inherit;
        background: $aiart-gd-bg border-box;
        -webkit-mask: linear-gradient($black 0 0) padding-box, linear-gradient($black 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }
}

.aiart-un-btn-sm {
    width: 58px;
    height: 58px;
    background: $aiart-gd-bg-2;
    &:hover {
        background: $aiart-gd-bg;
        svg {
            filter: brightness(4.5);
        }
    }
}

.aiart-btn-gd {
    background: $aiart-btn-gd;
}

.aiart-shadow {
    box-shadow: 0px 4px 24px 0px rgba(58, 76, 102, 0.04) inset, 0px -1.5px 4.5px 0px rgba(191, 197, 202, 0.65) inset;
}

.swiper-custom {
    .swiper-wrapper {
        transition-timing-function: linear;
    }
}
// Global

// Hero
.aiart-hreo-area {
    @media(max-width: 1199px) {
        padding-top: 120px;
        padding-bottom: 0 !important;
    }
    .shape-1 {
        left: 0;
        top: 0;
    }
    .shape-2 {
        right: 0;
        top: 0;
    }
    .shape-3 {
        right: 30px;
        bottom: 30px;
        @media(max-width: 1199px) {
            display: none;
        }
    }
    .aiart-un-btn {
        @media(max-width: 991px) {
            top: -15px;
        }
        @media(max-width: 767px) {
            display: none !important;
        }
    }
    h1 {
        span {
            @media(max-width: 767px) {
                background-color: transparent !important;
            }
            &.title-img {
                @media(max-width: 767px) {
                    display: none !important;
                } 
            }
        }
    }
}
.aiart-hero-img {
    top: -85px;
    right: 25px;
    @media(max-width: 1199px) {
        position: inherit !important;
        right: inherit;
        top: inherit;
    }
}
.aiart-hero-right {
    @media(max-width: 1199px) {
        position: relative;
        margin-top: 10px;
    }
}
.aiart-hero-list {
    li {
        a {
            &:hover {
                color: $white;
                border: 0;
                background-color: $primary;
            }
        }
    }
}
// Hero

// Info Card
.aiart-info-card-area {
    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/aiart_home/info-bg.png);
        background-repeat: no-repeat;
        background-position: center left;
        inset: 0;
        z-index: -1;
    }
    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/aiart_home/info-bg-2.png);
        background-repeat: no-repeat;
        background-position: center right;
        inset: 0;
        z-index: -1;
    }
    .shape-1 {
        top: 30px;
        right: 0;
    }
    .shape-2 {
        left: -50px;
        bottom: -50px;
    }
    .shape-3 {
        right: -115px;
        bottom: -135px;
    }
}
// Info Card

// Art
.aiart-wbart-area {
    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/aiart_home/art-bg.png);
        background-repeat: no-repeat;
        background-position: center left;
        inset: 0;
        z-index: -1;
        opacity: .5;
    }
    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/aiart_home/art-bg-2.png);
        background-repeat: no-repeat;
        background-position: center right;
        inset: 0;
        z-index: -1;
        opacity: .5;
    }
}
.aiart-counter {
    width: 104px;
    height: 104px;
    background: $aiart-counter-bg-1;
}

.aiart-art-item {
    &:nth-child(2) {
        margin-inline-start: 60px;
        position: relative; 
        @media(max-width: 1399px) {
            margin-inline-start: 0;
        }
        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-image: url(../../assets/img/aiart_home/line_arrow.png);
            background-repeat: no-repeat;
            background-position: bottom left;
            bottom: 75px;
            left: -35px;
            z-index: -1;
            @media(max-width: 1399px) {
                display: none;
            }
        }
        .aiart-counter {
            background: $aiart-counter-bg-2;
        }
    }
    &:nth-child(3) {
        margin-inline-start: 120px;
        position: relative; 
        @media(max-width: 1399px) {
            margin-inline-start: 0;
        }
        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-image: url(../../assets/img/aiart_home/line_arrow.png);
            background-repeat: no-repeat;
            background-position: bottom left;
            bottom: 75px;
            left: -35px;
            z-index: -1;
            @media(max-width: 1399px) {
                display: none;
            }
        }
        .aiart-counter {
            background: $aiart-counter-bg-3;
        }
    }
}
// Art

// Post Slider
.aiart-post-area {
    .shape-1 {
        @media(max-width: 1399px) {
            display: none;
        }
    }
    .shape-2 {
        bottom: -410px;
        right: 0;
    }
    .aiart-un-btn-sm {
        @media(max-width: 1399px) {
            width: 52px;
            height: 52px;
        }
    }
}

.aiart-slider-nav {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: $black;
    color: $white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    &:hover {
        background: $aiart-gd-bg;
    }
}
// Post Slider

// Companion
.aiart-companion-area {
    .shape-1 {
        left: 0;
        bottom: -355px;
        @media(max-width: 991px) {
            display: none;
        }
    }
    img {
        @media(max-width: 991px) {
            margin-top: 20px;
        }
    }
    .bgc-white {
        @media(max-width: 767px) {
            padding: 15px !important;
        }
    }
}
// Companion

// Price
.aiart-price-wrapper {
    @media(max-width: 1599px) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    &::after {
        position: absolute;
        content: "";
        width: 1496px;
        height: 100%;
        background-color: $crm-bg-yellow-light;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 16px;
        z-index: -1;    
        @media(max-width: 1599px) {
            display: none;
        }
        
    }
}

.aiart-price-btn {
    width: 46px;
    height: 28px;
    border-radius: 100px;
    padding: 7px;
    cursor: pointer;
    box-shadow: 0px 9.333333015441895px 18.66666603088379px 0px #919EAB29;
    &.clicked {
        .aiart-price-btn-sm {
            transform: translateX(15px);
        }
    }
}
.aiart-price-btn-sm {
    height: 16px;
    width: 16px;
    border-radius: 100px;
}

.aiart-month {
    &.hide {
        display: none;
    }
}

.aiart-year {
    display: none;
    &.show {
        display: block;
    }
}
// Price

// Community
.aiart-community-area {
    background-image: url(../../assets/img/aiart_home/com-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    .shape-1 {
        right: 0;
        top: -270px;
    }
}

.aiart-text-before {
    width: 46px;
    height: 3px;
}

.aiart-community-item {
    &.last-item {
        margin-top: -15px;
        @media(max-width: 991px) {
            margin-top: 20px;
        }
    }
}

.aiart-com-img {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
// Community

// Cta
.aiart-cta-wrapper {
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/aiart_home/cta-bg.png);
        background-repeat: no-repeat;
        background-position: bottom left;
        inset: 0;
        z-index: -1;
        opacity: .1;

    }
}
// Cta

// Footer
.aiart-footer {
    .ca-two-newsletter-form .btn {
        background: $aiart-btn-gd;
        border: 0;
        height: 47px;
        top: 1px;
        right: 1px;
        &::after {
            filter: invert(1);
        }
    }
    .footer-nav-list li a, .footer-single-col p {
        color: $black;
    }

    .footer-social-list li a:hover {
        color: $white !important;
        background: $aiart-btn-gd;
        border: 0;
    }
    .footer-single-col.pl-40 {
        @media(max-width: 1199px) {
            padding-left: 0;
        }
        @media(max-width: 991px) {
            margin-top: 20px;
        }
    }
}
// Footer

// Image Slider
.scroller-x {
    overflow: hidden;
    &[data-direction="right"] {
        --_animation-direction: reverse;
    }
    &[data-direction="left"] {
        --_animation-direction: forwards;
    }
    &[data-speed="fast"] {
        --_animation-duration: 30s;
    }
    &[data-speed="slow"] {
        --_animation-duration: 120s;
    }
    &__list {
        width: max-content;
        flex-wrap: nowrap;
        animation: scroll var(--_animation-duration, 60s) var(--_animation-direction, forwards) linear infinite;
        &:hover {
            animation-play-state: paused;
        }
    }
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}
// Image Slider


// Global
.aih-color {
    color: $ins-primary;
}

.aih-color-two {
    color: $dark-new-2;
}

.aih-color-three {
    color: $crm-secondary;
}

.aih-color-four {
    color: $dg-warning-color;
}

.aih-color-five {
    color: $crm-secondary;
}

.aih-bg-color {
    background-color: $ins-primary;
}

.aih-bg-color-two {
    background-color: $dark-new-2;
}

.aih-arrow-btn {
    width: 112px;
    height: 112px;
}

.aih-btn {
    &:hover {
        background-color: $white;
        color: $dark-new-2;
    }
}

.aih-shadow-hover {
    &:hover {
        box-shadow: 20px 20px 80px 0px rgba(160, 160, 160, 0.15);
    }
}

.aih-border-style-two {
    border-left: 2px solid $ins-primary;
}

.ptb-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.rotate-ani {
    animation: animateText 18s linear infinite;
}

.aih-title {
    @media(max-width: 991px) {
        font-size: 38px;
    }

    @media(max-width: 767px) {
        font-size: 28px;
    }
}

// Global

// Hero

.ai-home-hero-area {
    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/ai_home/hero_ovarlay.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        left: 0;
        top: 0;
        z-index: -1;

    }

    .aih-counter-box {
        bottom: 0;
        left: 0;

        @media(max-width: 1399px) {
            gap: 10px !important;
            bottom: -10px;
        }

        @media(max-width: 1199px) {
            position: inherit !important;
            justify-content: center;
            margin-top: 30px;
        }
    }

    .aih-btn {
        top: 5px;
        right: 160px;

        @media(max-width: 1399px) {
            right: 0;
        }

        @media(max-width: 991px) {
            right: inherit;
            left: 0;
            top: 245px;
        }

        @media(max-width: 767px) {
            position: inherit !important;
            right: inherit;
            left: 50%;
            transform: translateX(-50%);
            top: 25px;
        }
    }

    .position-relative.mt-40 {
        @media(max-width: 1199px) {
            margin-top: 0;
        }
    }
}

// Hero

// Info Card

.aih-info-card-area {
    @media(max-width: 1199px) {
        padding-bottom: 20px;
    }

    .s-one {
        right: -25px;
        bottom: -155px;

        @media(max-width: 767px) {
            display: none;
        }
    }

    .s-two {
        top: -90px;
        right: -20px;

        @media(max-width: 1399px) {
            display: none;
        }
    }

    .s-three {
        top: -75px;
        left: -80px;

        @media(max-width: 767px) {
            display: none;
        }
    }

    .aih-title {
        @media(max-width: 1199px) {
            margin-top: 30px;
        }

        br {
            @media(max-width: 767px) {
                display: none;
            }
        }
    }
}

.aih-info-card-item {
    transition: .8s;
}

// Info Card

// Logo Slider
.aih-logo-slider {
    @media(max-width: 991px) {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.qty-brand-slider {
    .swiper-wrapper {
        transition-timing-function: linear;
    }

    .swiper-slide {
        text-align: center;
    }
}

.qty-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 2rem;
    background-color: $white;

    &__img {
        width: 40px;
        height: 40px;
        flex-shrink: 0;

        img {
            object-fit: contain;
        }
    }

    &__text {
        flex-grow: 1;
        font-size: 20px;
        font-weight: 600;
        color: $dark-new-2;
        text-align: start;
    }
}

// Logo Slider

// Portfolio
.aih-portfolio-area {
    .text-end {
        @media(max-width: 1199px) {
            margin-top: 20px;
            text-align: left !important;
        }
    }
}

.qty-portfolio-section {
    &__text {
        display: none;
    }

    @media (min-width: 1200px) {
        position: relative;
        isolation: isolate;

        &__text {
            display: flex;
            gap: 1rem;
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 72px;
            font-weight: 700;
            color: $des-a-clr-2;
            transform-origin: 0 0;
            transform: rotate(90deg) translate(-50%, -50%);
        }

        &__start {
            -webkit-text-stroke: 1px $ins-secondary;
        }

        &__end {
            -webkit-text-stroke: 1px $ins-primary;
        }
    }
}

.qty-portfolio {
    &:hover {
        .qty-portfolio__arrow-link {
            background-color: $ins-primary;
        }
    }

    &__img {
        display: grid;
        position: relative;
        isolation: isolate;

        &-link {
            display: inline-block;
            text-decoration: none;
            border-radius: 1rem;
            overflow: hidden;
        }
    }

    &__arrow {
        display: inline-block;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: $des-a-clr-2;
        border: 1.25rem solid $des-a-clr-2;
        border-radius: 1rem 0 0 0;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            right: -1.25rem;
            transform: translateY(calc(-100% - 1.25rem));
            width: 1rem;
            aspect-ratio: 1;
            background-image: radial-gradient(circle at 0 0, transparent 1rem, $des-a-clr-2 0.5rem);
        }

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            right: calc(100% + 1.25rem);
            transform: translateY(calc(100% + 0.25rem));
            width: 1rem;
            aspect-ratio: 1;
            background-image: radial-gradient(circle at 0 0, transparent 1rem, $des-a-clr-2 0.5rem);
        }

        &-link {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 90px;
            height: 80px;
            background-color: $dg-placeholder-color;
            border-radius: 1rem;
            color: $dark-new-2;
            text-decoration: none;
            transition: all 0.3s ease;

            &:hover {
                background-color: $ins-primary;
            }
        }
    }

    &__body {
        padding-top: 1.5rem;
    }

    &__title {
        font-size: 1.5rem;
        font-weight: 600;
        color: $dark-new-1 !important;
        text-decoration: none;
    }
}

// Portfolio

// Line Slider
.ticker {
    overflow: hidden;
    box-sizing: content-box;

    &--one {
        background-color: $ins-primary;
        transform: rotate(3deg) translateY(35px);
    }

    &--two {
        background-color: $white;
        transform: rotate(-3deg) translateY(-35px);
    }

    &-container {
        width: calc(100% + 400px);
        left: -400px;
        display: flex;
        gap: 1rem;
    }

    &-item {
        display: inline-block;
        flex-shrink: 0;
        font-size: 48px;
        font-weight: 700;
        color: $dark-new-2;
        white-space: nowrap;
        animation: ticker 60s linear infinite;
        animation-delay: -60s;

        &:nth-child(2) {
            animation: tickerTwo 60s linear infinite;
            animation-delay: -30s;
        }
    }
}

// Line Slider

// Process
.aih-process-area {
    @media(max-width: 991px) {
        padding-top: 30px;
    }
}

.aih-process-item {
    .aih-step {
        padding: 1px 10px !important;
    }
}

.aih-border-style {
    z-index: 1;

    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/ai_home/border-style-top.png);
        background-repeat: no-repeat;
        background-position: top right;
        right: -20px;
        top: -40px;
        z-index: -1;

        @media(max-width: 1199px) {
            display: none;
        }
    }

    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/ai_home/border-style-bottom.png);
        background-repeat: no-repeat;
        background-position: bottom right;
        right: -20px;
        bottom: -40px;
        z-index: -1;

        @media(max-width: 1199px) {
            display: none;
        }
    }
}

// Process

// Price
.aih-price-area {
    position: relative;
    isolation: isolate;
    background-color: $white;

    @media (min-width: 1920px) {
        background-color: $des-a-clr-2;

        &::after {
            content: "";
            pointer-events: none;
            position: absolute;
            inset: 0;
            z-index: -1;
            /* background-image: url(../img/pricing-section-shape.svg); */
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
    }
}

.select-pricing-btn {
    padding: 10px 24px;
    border: 1px solid $crm-placeholder;
    background-color: $white;
    color: $dark-new-2 !important;
    font-weight: 600;

    &:focus {
        border-color: transparent;
    }

    &:active {
        border-color: transparent !important;
        background-color: $white !important;
    }

    &:hover {
        background-color: $white !important;
    }

    &.active {
        border-color: transparent;
        background-color: $ins-primary;
    }
}

.qty-price-card {
    padding: 35px 40px;
    border-radius: 1rem;
    background-color: $des-a-clr-2;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
        .qty-price-card__head-icon {
            background-color: $ins-primary;
        }

        .qty-price-card__feature-icon {
            color: $ins-primary;
        }

        .qty-price-card__btn-content {
            background-color: $ins-primary;
        }
    }

    &.popular {
        .qty-price-card__head-icon {
            background-color: $ins-primary;
        }

        .qty-price-card__feature-icon {
            color: $ins-primary;
        }

        .qty-price-card__btn-content {
            background-color: $ins-primary;
        }
    }

    &__head {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 24px;

        &-icon {
            width: 72px;
            height: 72px;
            display: grid;
            place-content: center;
            border-radius: 1rem;
            background-color: $crm-placeholder;
            transition: all 0.3s ease;
        }
    }

    &__title {
        &-sub {
            display: block;
            font-size: 18px;
            font-weight: 500;
            color: $ai-color-1;
            line-height: 1.2;
        }

        &-name {
            display: block;
            font-size: 24px;
            font-weight: 600;
            color: $ai-color-2;
            line-height: 1.2;
        }
    }

    &__details {
        margin-bottom: 24px;
        font-size: 18px;
        color: $ai-color-1;
    }

    &__price {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 1rem;

        &-is {
            display: block;
            flex-shrink: 0;
            font-size: 48px;
            font-weight: 700;
            color: $crm-secondary;
            line-height: 1.2;
        }

        &-text {
            display: block;
            font-size: 20px;
            line-height: 1.2;
            color: $dg-text-color;
        }

        &-yearly {
            display: none;
        }
    }

    &__feature-title {
        display: block;
        font-size: 18px;
        font-weight: 700;
        color: $crm-secondary;
        line-height: 1.2;
        margin-bottom: 24px;
    }

    &__feature-icon {
        color: $dark-new-2;
        transition: all 0.3s ease;
    }

    &__feature-text {
        color: $ai-color-2;
        font-weight: 500;
    }

    &__btn {
        display: inline-block;
        background-color: $white;
        border: 12px solid $white;
        border-radius: 1rem 0 0 1rem;
        position: absolute;
        right: 0;
        bottom: 0;

        &::before {
            content: "";
            display: inline-block;
            line-height: 1;
            position: absolute;
            bottom: 100%;
            right: -12px;
            transform: translateY(calc(-100% + 4px));
            width: 1rem;
            aspect-ratio: 1;
            background-image: radial-gradient(circle at 0 0, transparent 1rem, $white 0.5rem);
        }

        &-content {
            width: 90px;
            height: 80px;
            display: grid;
            place-content: center;
            border-radius: 1rem;
            background-color: $crm-placeholder;
            transition: all 0.3s ease;
        }
    }
}

// Price

// Testimonial
.aih-testimonial-img {
    right: 0;
    bottom: 0;
    border: 14px solid $des-a-clr-2;
    border-radius: 15px;

    &::before {
        content: "";
        display: inline-block;
        line-height: 1;
        position: absolute;
        bottom: 100%;
        right: -30px;
        top: -5px;
        transform: translateY(calc(-100% + 4px));
        width: 2rem;
        aspect-ratio: 1;
        background-image: radial-gradient(circle at 0 0, transparent 1rem, $des-a-clr-2 0.5rem);
    }
}

// Testimonial

// Faq
.custom-accordion {
    --bs-border-radius: 1rem;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxNyAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMjI5NDkgMS4wMDAyNEw4LjIyOTQ5IDE5IiBzdHJva2U9IiMwMDAxMzkiIHN0cm9rZS13aWR0aD0iMS43OTk5OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xLjAwMDI1IDguMjU5NzdMOC4yMjkwMiAwLjk5OTg2NEwxNS40NTkgOC4yNTk3NyIgc3Ryb2tlPSIjMDAwMTM5IiBzdHJva2Utd2lkdGg9IjEuNzk5OTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
    --bs-accordion-btn-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxNyAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMjI5NDkgMS4wMDAyNEw4LjIyOTQ5IDE5IiBzdHJva2U9IiMwMDAxMzkiIHN0cm9rZS13aWR0aD0iMS43OTk5OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xLjAwMDI1IDguMjU5NzdMOC4yMjkwMiAwLjk5OTg2NEwxNS40NTkgOC4yNTk3NyIgc3Ryb2tlPSIjMDAwMTM5IiBzdHJva2Utd2lkdGg9IjEuNzk5OTgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");

    .accordion-item {
        margin-bottom: 24px;
        border-radius: 1rem;
        border: 0;
        position: relative;
        isolation: isolate;
    }

    .accordion-button {
        padding: 30px 24px;
        position: unset;
        border-radius: 1rem;
        font-size: 20px;
        font-weight: 600;
        color: $github;

        &:focus {
            box-shadow: none;
        }

        &::before {
            content: "";
            width: calc(90px + 12px);
            height: calc(56px + 12px);
            background-color: $des-a-clr-2;
            position: absolute;
            right: 0;
            bottom: 0;
            border-radius: 8px 0 0 0;
        }

        &::after {
            width: 90px;
            height: 56px;
            display: grid;
            place-content: center;
            background-color: $crm-placeholder;
            background-position: center;
            border-radius: 8px;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        &:not(.collapsed) {
            background-color: $white;
            box-shadow: none;

            &::after {
                background-color: $ins-primary;
            }
        }
    }

    .accordion-body {
        padding-right: 118px;
        padding-top: 0;
        padding-bottom: 24px;
    }
}

.aih-faq-img {
    position: relative;
    bottom: -40px;
    right: -80px;

    @media(max-width: 1599px) {
        right: inherit;
    }

    @media(max-width: 1199px) {
        bottom: inherit;
    }
}

.aih-faq-area {
    @media(max-width: 1199px) {
        padding-bottom: 0;
    }

    @media(max-width: 991px) {
        padding-top: 0;
    }
}

// Faq

// Comminute

.aih-cummiunte-area {
    @media(max-width: 1199px) {
        padding-top: 0;
    }

    .position-relative {
        @media(max-width: 991px) {
            padding-left: 0;
            margin-top: 30px;
            border: none;
        }

        .aih-star-icon {
            @media(max-width: 991px) {
                display: none;
            }
        }
    }
}

.aih-star-icon {
    left: -8px;
    bottom: -5px;
}

.aih-comminute-img {
    @media(max-width: 1399px) {
        margin-top: 30px;
        width: 100%;
    }
}

// Comminute

// Logo Slider
.digtal-marketing-logo {
    .aih-shape {
        top: -1px;
        left: -1px;

        @media(max-width: 991px) {
            display: none;
        }
    }

    .aih-shape-two {
        top: -1px;
        right: -1px;
        transform: rotateY(175deg);

        @media(max-width: 991px) {
            display: none;
        }
    }
}

// Logo Slider

// Footer
.aih-footer {
    margin-top: -75px;

    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/ai_home/hero_ovarlay.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        left: 0;
        top: 0;
        z-index: -1;

    }

    .footer-single-col p {
        color: $white;
        opacity: 1;
    }

    .footer-nav-list li a {
        color: $white;
        opacity: 1;

        &:hover {
            color: $ins-primary;
        }
    }

    .footer-social-list li a {
        &:hover {
            background-color: $ins-primary !important;
            border-color: $ins-primary !important;
        }
    }

    .ca-two-newsletter-form .form-control {
        background-color: $white;
        border-color: $white;
        padding-bottom: 9px;
    }

    .ca-two-newsletter-form .btn {
        background-color: $ins-primary;
    }

    .footer-single-col h3 {
        @media(max-width: 1199px) {
            margin-bottom: 0;
        }
    }

    .footer-single-col.pl-40 {
        @media(max-width: 1199px) {
            padding-left: 0;
        }
    }

    .footer-single-col {
        @media(max-width: 1199px) {
            margin-bottom: 20px;
        }
    }

    .rm-footer-bottom {
        @media(max-width: 991px) {
            padding-top: 30px;
        }
    }

    .s-one {
        left: 0;
        bottom: 0;

        @media(max-width: 991px) {
            display: none;
        }
    }

    .s-two {
        right: 0;
        bottom: 0;

        @media(max-width: 991px) {
            display: none;
        }
    }
}

// Footer



@keyframes animateText {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ticker {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes tickerTwo {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-200%);
    }
}

// Global

.fw-400 {
    font-weight: 400;
}

.ai-wt-brand-text {
    background: $ai-wt-gd-color;
    font-family: Lily Script One;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.aiwt-title {
    @media(max-width: 767px) {
        font-size: 30px;
    }
}

.ai-wt-body-bg {
    background-color: $gray-new;
}

.ai-wt-body-bg-2 {
    background-color: $gray-new-2;
}

.ai-wt-bg {
    background-color: $dark-new-4;
}

.ai-wt-bg-2 {
    background-color: $dark-new-5;
}

.ai-wt-gd-bg {
    background: $ai-wt-gd-color;
}

.ai-wt-gd-bg-2 {
    background: $ai-wt-gd-bg;
}

.pl-20 {
    padding-left: 20px !important;
}

.pb-20 {
    padding-bottom: 20px;
}

.pt-80 {
    padding-top: 80px !important;
}

.ai-wt-bb-style {
    border: 1px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: $ai-wt-bb-style;
    border-top: 0;


}
// Global

// Hero
.ai-wt-hero-area {
    @media(max-width: 991px) {
        padding: 0;
    }
    .text-center {
        @media(max-width: 991px) {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
}
.ai-wt-hero {
    &::before {
        position: absolute;
        content: "";
        background-image: url(../../assets/img/ai-wt-home/hero-bg-overlay.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        inset: 0;
        z-index: -1;
    }
    &::after {
        position: absolute;
        content: "";
        background-image: url(../../assets/img/ai-wt-home/hero-bg-overlay-2.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        right: 0;
        bottom: 0;
        z-index: -1;
    }
}
.ai-wt-logo-slider {
    .single-logo {
        img {
            filter: brightness(2.5);
        }
    }
}
// Hero

// Tab
.ai-wt-journey-area {
    @media(max-width: 991px) {
        padding: 0;
    }
    .ai-wt-body-bg-2 {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        .shape-1 {
            @media(max-width: 991px) {
                display: none;
            }
        }
    }
}
.ai-wt-journey-tab {
    .nav {
        @media(max-width: 1199px) {
            margin-top: 30px;
        }
        .nav-item {
                a {
                    color: $gray-500;
                    padding-left: 24px;
                    border-left: 2px solid $ah-color-6;
                    @media(max-width: 767px) {
                        padding-left: 10px;
                    }
                    &.active , &:hover {
                        border: 2px solid;
                        border-image-slice: 1;
                        border-width: 2px;
                        border-image-source: linear-gradient(to top, #3B82F6, #24AA4A);
                        border-top: 0;
                        border-bottom: 0;
                        border-right: 0;
                        .ai-wt-tab-nav {
                            background-color: $white;
                            box-shadow: 0px 20px 40px -4px #919EAB29;
                        }
                }
            }
        }
    }
}

.ai-wt-journey-tab {
    .shape-2 {
        top: -295px;
        left: -285px;
    }
}
// Tab

// Testimonial
.ai-wt-testimonial-area {
    @media(max-width: 991px) {
        padding: 0;
    }
    .ai-wt-body-bg-2 {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        .ai-wt-testi-item {
            @media(max-width: 767px) {
                padding: 20px !important;
                padding-top: 30px !important;
            }
        }
        .fs-24 {
            @media(max-width: 767px) {
                font-size: 18px;
            }
        }
    }
}
// Testimonial

// Enhanced Content
.ai-wt-enhanced-content {
    .fs-28 {
        @media(max-width: 767px) {
            font-size: 24px;
        }
    }
}
.ai-wt-enc-card {
    @media(max-width: 991px) {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
    }
    .shape-1 {
        bottom: 35px;
        left: -140px;
        @media(max-width: 991px) {
            display: none;
        }
    }
    img {
        @media(max-width: 991px) {
            margin-top: 30px;
        }
    }
    .fs-36 {
        @media(max-width: 991px) {
            font-size: 24px;
        }
    }
}

.ai-wt-enc-slider-1 , .ai-wt-enc-slider-2  {
    .swiper-wrapper {
        transition-timing-function: linear;
    }
}

.ai-wt-enc-slider-item {
    padding-block: 40px !important;
}
// Enhanced Content

// Feedback
.ai-wt-feedback-area {
    @media(max-width: 991px) {
        padding: 0;
    }
}
.ai-wi-feedback-bg {
    background-image: url(../../assets/img/ai-wt-home/feedback-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.ai-wt-feedback-item {
    border: 1px solid $white-20;
}
// Feedback

// Price
.ai-wt-price-item  {
    &.popular {
        .wt-popular-tag {
            top: 0;
            right: -15px;
            p {
                margin-bottom: 0;
                position: absolute;
                right: 18px;
                top: 25px;
                z-index: 5;
                transform: rotate(35deg);
            }
        }
    }
}
// Price

// Cta
.wt-cta-wrapper {
    background-image: url(../../assets/img/ai-wt-home/cta-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    h2 {
        br {
            @media(max-width: 767px) {
                display: none;
            }
        }
    }
}

.wt-cta-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
// Cta

// Faq
.aiwt-faq {
    @media(max-width: 1199px) {
        margin-top: 30px;
    }
    .ca-accordion .accordion-button {
        font-size: 18px;
        font-weight: 500;
    }
    .accordion-item {
        border: 0;
        .accordion-header {
            button[aria-expanded="true"] {
                background-color: $black;
                color: $white;
            }
        }
        .accordion-body {
            padding-top: 20px;
        }
    }
}
// Faq

// Footer
.ai-wt-footer-area {
    @media(max-width: 991px) {
        padding-left: 0;
        padding-right: 0;
    }
}
.aih-footer {
    &.ai-wt-footer {
        background-image: url(../../assets/img/ai-wt-home/footer-bg.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin-top: 0;
        .ca-two-newsletter-form .btn {
         background-color: inherit;   
         background: $ai-wt-gd-bg;
         border: 0;
         &::after {
            filter: invert(1);
         }
        }
        .footer-social-list li a {
            &:hover {
                background-color: inherit;
                background: $ai-wt-gd-bg;
                border: 0;
                color: $white !important;
            }
        }
        .footer-nav-list li a {
            &:hover {
                background: $ai-wt-gd-color;
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }
}
// Footer


// Global
.fs-30 {
    font-size: 30px;
}

.ail-title {
    @media(max-width: 767px) {
        font-size: 30px;
    }
}

.ail-body-color {
    color: $crm-secondary;
}

.ail-highlighted-text {
    background: $ail-gd-color;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ail-gd-bg {
    background: $ail-gd-color;
}

.ail-gd-bg-2 {
    background: $ail-gd-bg;
}

.ail-gd-bg-3 {
    background: $ail-gd-bg-2;
}

.ail-main-bg {
    background-color: $ail-brand-color;
}

.ail-op-bg {
    background-color: $ail-op-color;
}

.bg-sky-blue {
    background-color: $sky-blue;
}

.white-50-bg {
    background-color: $white-50;
}

.dark-bg-hover{
    &:hover {
        background: $ail-dark-hover;
    }
}

.ail-sub-title {
    padding: 5px 20px;
    span {
        width: 8px;
        height: 8px;
        border-radius: 100%;
    }
}

.mt-5-ov {
    margin-top: 5px;
}
// Global

// Hero
.ail-hero-area {
    background-image: url("../../assets/img/ail_home/hero-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    @media(max-width: 399px) {
        padding-top: 20px;
    }
    .text-center {
        p {
            @media(max-width: 767px) {
                font-size: 16px;
            }
        }
    }
}

.ail-hero-img {
    margin-bottom: -145px;
}
// Hero

// Tab
.ail-feature-tab {
    li {
        width: 24%;
        @media(max-width: 1399px) {
            width: auto;
        }
        a {
            position: relative;
            display: flex;
            align-items: center;
            gap: 15px;
            border-bottom: 2px solid $crm-placeholder;
            padding: 0;
            padding-bottom: 10px;
            p {
                color: $black;
                font-size: 20px;
                font-family: $font-family-monospace;
                font-weight: 600;
                margin-bottom: 0;
                transition: .8s;
            }
            .active {
                display: none;
            }
            &::after {
                position: absolute;
                content: "";
                width: 35%;
                height: 100%;
                border-bottom: 2px solid $dark-un;
                left: 0;
                bottom: -2px;
                display: none;
            }
            &:hover , &.active {
                p {
                    background: $ail-gd-color;
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                .active {
                    display: block;
                }
                img {
                    display: none;
                }
                &::after {
                    display: block;
                }
            }
        }
    }
}

.ail-tab-con_list {
    li {
        margin-top: 10px;
        span {
            display: flex;
            align-items: center;
            justify-content: center;
            color: $dark-new-2;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            border: 1.5px solid $dark-new-2;
            font-size: 10px;
            flex-shrink: 0;
        }
    }
}

.ail-ft-content {
    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/ail_home/tab_overlay.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: cover;
        inset: 0;
        z-index: -1;
    }
}

.ail-feature-area {
    .text-end {
        @media(max-width: 991px) {
            text-align: left !important;
        }
    }
}

.ail-tab-con {
    @media(max-width: 991px) {
        padding-left: 0;
        margin-top: 20px;
    }
    h3 {
        @media(max-width: 767px) {
           font-size: 24px;
        }
    }
}

.ail-ft-content {
    @media(max-width: 767px) {
        padding: 20px !important;
    }
}
// Tab

// Info Card
.ail-info-card-area {
    background-image: url("../../assets/img/ail_home/card_overlay.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.ail-card-item {
    // background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box,linear-gradient(324.79deg, #ff076657 -4.77%, #ff7e5d80 107.43%) border-box;
    // border: 1px solid rgba(0,0,0,0) !important;
    border: 1px solid $ail-br-clr;
    transition: .8s;
    span {
        width: 80px;
        height: 80px;
        border-radius: 100%;
        flex-shrink: 0;
    }
    a {
        &:hover {
            background: $ail-gd-color;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
    &:hover {
        background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box,linear-gradient(324.79deg, #FF3E81 -4.77%, #4706FF 107.43%) border-box;
        border: 1px solid rgba(0,0,0,0) !important;
    }
}
// Info Card

// Work
.ail-step-sub-title {
    span {
        width: 40px;
        height: 1px;
    }
}

.ail-work-area {
    .fs-36 {
        @media(max-width: 1199px) {
            font-size: 28px;
        }
    }
    .mt-50 {
        .row {
            @media(max-width: 991px) {
                flex-direction: column-reverse;
            }
            .pl-40 {
                @media(max-width: 991px) {
                    padding-left: 0;
                    margin-bottom: 40px;
                }
            }
        }
    }
    .mt-40 {
        .ail-main-bg {
            @media(max-width: 767px) {
                padding: 20px !important;
            }
        }
    }
}

.ail-work__content {
    .fch-40 {
        @media(max-width: 991px) {
            max-width: inherit;
        }
    }
}
// Work

// Feedback
.ail-feedback-area {
    background-image: url("../../assets/img/ail_home/card_overlay.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
// Feedback

// Price
.ail-price-item {
    border: 1px solid $ail-br-clr;
    transition: .8s;
    &:hover {
        background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box,linear-gradient(324.79deg, #FF3E81 -4.77%, #4706FF 107.43%) border-box;
        border: 1px solid rgba(0,0,0,0) !important;
    }
    .btn {
        &:hover {
            background-color: inherit;
            background: $ail-gd-color;
            color: $white;
        }
    }
    .ail-popular {
        background: $sc-primary-gradient;
        padding: 4px 12px;
        border-radius: 5px;
    }
    &.popular {
        background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box,linear-gradient(324.79deg, #FF3E81 -4.77%, #4706FF 107.43%) border-box;
        border: 1px solid rgba(0,0,0,0) !important;
        .btn {
            background-color: inherit;
            background: $ail-gd-color;
            color: $white;
        }
    }
    @media(max-width: 399px) {
        padding: 30px !important;
    }
}
// Price

// Cta
.ail-cta-wrapper {
    background: linear-gradient($ail-brand-color, $ail-brand-color) padding-box,linear-gradient(324.79deg, #FF3E81 -4.77%, #4706FF 107.43%) border-box;
    border: 1px solid rgba(0,0,0,0) !important;
    @media(max-width: 399px) {
        padding: 30px !important;
    }
    img {
        @media(max-width: 991px) {
            margin-top: 30px;
        }
    }
}
// Cta

// Footer
.aih-footer.ail-footer {
    &::after {
        display: none;
    }
    .footer-social-list {
        li {
            a {
                &:hover {
                    background-color: inherit !important;
                    background: $ail-gd-color !important;
                    color: $white !important;
                    border: 0;
                }
            }
        }
    }
    .footer-nav-list {
        li {
            a {
                &:hover {
                  color:  $hd-secondary;
                }
            }
        }
    }
    .ca-two-newsletter-form {
        .btn {
            background-color: inherit;
            background: $ail-gd-color;
            border: 0;
            &::after {
                filter: invert(1);
            }
        }
    }
    .rm-footer-bottom {
        p {
            a {
                color: $hd-secondary;
            }
        }
    }
}
// Footer



//Cta
.text-pink {
  color: #fd035a !important;
}
.bg-pink {
  color: $white;
  background-color: #fd035a;
  border: 1px solid transparent;
  &:hover {
    background-color: transparent;
    border: 1px solid #fd035a;
    color: #fd035a !important;
  }
}

.border-pink {
  border: 1px solid #fd035a;
}
.text-dark-blue {
  color: #2b0996;
}
.bg-dark-blue {
  background-color: #2b0996;
  &:hover {
    background-color: transparent;
    border: 2px solid #2b0996;
    color: #2b0996 !important;
  }
}

//Hero
.event-hero {
  padding: 150px 0;
  .event-hero-img {
    position: relative;
    z-index: 5;
    a {
      position: absolute;
      width: 100px;
      height: 100px;
      left: 20%;
      bottom: -5%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background-color: #fd035a;
      color: $white;
      border: 10px solid $white;
      box-shadow: 0 50px 50px -25px rgba(43, 9, 150, 0.25);
    }
  }
  .scroll-down {
    span {
      transform: rotate(90deg);
      display: inline-block;
      position: absolute;
      left: 0;
      top: 50%;
      font-weight: 600;
      color: #fd035a;
    }
  }
  .ev-hero-shape {
    li {
      position: absolute;
      &:nth-child(1) {
        bottom: 8%;
        left: 45%;
      }
      &:nth-child(2) {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        left: 35%;
        top: 25%;
        background-image: linear-gradient(
          231.28deg,
          #ff0766 -30.62%,
          rgba(255, 255, 255, 0) 93.05%
        );
      }
      &:nth-child(3) {
        width: 158px;
        height: 47px;
        right: 10%;
        top: 20%;
        background: linear-gradient(
          286.4deg,
          rgba(255, 7, 102, 0.61) -14.68%,
          rgba(43, 9, 150, 0) 99.55%
        );
        border-radius: 50px;
        transform: rotate(-38.54deg);
      }
      &:nth-child(4) {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        right: 20%;
        bottom: 2%;
        z-index: 2;
        background: linear-gradient(
          286.4deg,
          #ff0766 -14.68%,
          rgba(43, 9, 150, 0) 99.55%
        );
      }
      &:nth-child(5) {
        left: 5%;
        bottom: 45%;
      }
    }
  }
}

//Event About
.event-about {
  padding: 150px 0;
  object-fit: cover;
  position: relative;
  .elements {
    li {
      position: absolute;
      &:nth-child(1) {
        top: 10%;
        left: 43%;
      }
      &:nth-child(2) {
        right: 0;
        bottom: 0;
      }
      &:nth-child(3) {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        right: 10%;
        top: 23%;
        background-image: linear-gradient(
          231.28deg,
          #ff0766 -30.62%,
          rgba(255, 255, 255, 0) 93.05%
        );
      }
    }
  }
}
@media (min-width: 320px) and (max-width: 991px){
  .event-about{
    padding: 60px 0;
  }
}
.ev-ab-img {
  @media (min-width: 992px) and (max-width: 1200px) {
    .ev-about-img-one {
      width: 50%;
    }
  }
  @media (min-width: 320px) and (max-width: 768px) {
    .ev-about-img-one {
      display: none;
    }
  }
  .ev-about-img-one {
    position: absolute;
    top: 52%;
    left: -25%;
  }
  ul li {
    position: absolute;
    &:first-child {
      border: 20px solid #2b0996;
      background-color: $white;
      width: 240px;
      height: 240px;
      display: flex;
      flex-direction: column;
      text-align: center;
      left: -10%;
      top: -15%;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      z-index: 5;
    }
    &:last-child {
      width: 230px;
      height: 230px;
      background-color: #ffc226;
      border-radius: 50%;
      bottom: -20%;
      left: 21%;
      z-index: 4;
    }
    @media (min-width: 768px) and (max-width: 1200px) {
      &:first-child {
        left: -30%;
      }
    }
    @media (min-width: 320px) and (max-width: 575px) {
      &:first-child {
        display: none;
      }
    }
    @media (min-width: 576px) and (max-width: 768px) {
      &:first-child {
        left: -10%;
        top: -5%;
      }
    }
    @media (min-width: 320px) and (max-width: 768px) {
      &:last-child {
        display: none;
      }
    }
  }
}

//Upcoming Event
.up-coming-event {
  background: #f8f9ff;
}
.single-up-eve {
  .ev-days {
    position: absolute;
    left: 30px;
    bottom: -35px;
    background-color: $white;
    border-radius: 8px;
    padding: 10px 15px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 12px 64px rgba(103, 151, 255, 0.1),
      0 4px 24px rgba(103, 151, 255, 0.1);
  }
}

// Speaker List
.single-speaker {
  border-radius: 4px;
  text-align: center;
  padding: 40px 20px;
  transition: all 0.3s;
  cursor: pointer;
  .sp-social {
    display: flex;
    height: 40px;
    justify-content: center;
    a {
      width: 32px;
      height: 32px;
      background-color: $white;
      color: #dadada;
      border-radius: 50%;
      box-shadow: 0px 0px 40px rgba(33, 38, 106, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      i {
        color: #575757;
      }
    }
  }
  &:hover {
    background: #2b0996;
    box-shadow: 0px 50px 50px -25px rgba(43, 9, 150, 0.25);
    border-radius: 4px;
    color: $white;
    h5 {
      color: $white;
    }
  }
}

//Counter
.ev-counter {
  padding-bottom: 140px;
}
.ev-count-down {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  @media (min-width: 320px) and (max-width: 575px) {
    grid-template-columns: repeat(2, 1fr);
  }
  .ev-cd-box {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: $white;
    padding: 15px 0;
    border: 1px solid #dadada;
    h4 {
      color: $white;
    }
  }
}

//Event Scedule
.ev-schedule {
  margin-top: -50px;
  position: relative;
  .ev-schedule-btn {
    .nav {
      .nav-item {
        padding-right: 16px;
        .nav-link {
          font-size: 16px;
          font-weight: 600;
          padding: 10px 30px;
          border: 1px solid #e7e7e7;
          border-radius: 4px;
          background: none;
        }
        .nav-link.active {
          background-color: #fd035a;
          border: 1px solid transparent;
          color: $white;
        }
      }
    }
  }
  .single-eve-session {
    position: relative;
    z-index: 5;
    &:hover {
      box-shadow: 5px 25px 80px -10px rgba(0, 108, 236, 0.12);
    }
    .single-ev {
      .date,
      .location {
        color: #575757;
        font-size: 14px;
      }
      .link-with-icon {
        color: #2b0996;
        font-weight: 600;
        &:hover {
          color: #fd035a;
        }
      }
    }
    .speaker-info {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        height: 100%;
        background-color: #e3e3e3;
        width: 1px;
        right: 0;
        top: 0;
      }
      @media (min-width: 320px) and (max-width: 768px) {
        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 1px;
          background-color: #e3e3e3;
          top: 100%;
        }
      }
    }
  }
  .circel-shape {
    li {
      position: absolute;
      background-image: linear-gradient(
        231.28deg,
        #ff0766 -30.62%,
        rgba(255, 255, 255, 0) 93.05%
      );
      border-radius: 50%;
      &:nth-child(1) {
        width: 100px;
        height: 100px;
        bottom: 13%;
        left: 5%;
        z-index: 4;
      }
      &:nth-child(2) {
        width: 24px;
        height: 24px;
        bottom: 12%;
        left: 3%;
      }
      &:nth-child(3) {
        width: 24px;
        height: 24px;
        top: 18%;
        right: 6%;
        background-color: #ffd600;
      }
    }
  }
}

//Testimonial
.ev-testimonial {
  position: relative;
  .author {
    li {
      position: absolute;
      &:first-child {
        left: 5%;
        top: 0;
        width: 450px;
      }
      &:last-child {
        right: 5%;
        top: 10%;
        width: 500px;
      }
    }
  }
}

.ev-testimonial-slider {
  padding-bottom: 50px;
  .eve-pagination.swiper-pagination.swiper-pagination-bullets {
    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(253, 3, 90, 0.5);
      position: relative;
      margin-right: 10px;
      &::before {
        content: '';
        position: absolute;
        height: 20px;
        width: 20px;
        top: -7px;
        bottom: 0;
        right: 0;
        left: -7px;
        border: 1px solid #fd035a;
        border-radius: 50%;
        opacity: 0;
        transition: all 0.3s ease-in-out;
        transform: scale(0.5);
      }
    }
  }
  .eve-pagination.swiper-pagination.swiper-pagination-bullets
    .swiper-pagination-bullet-active {
    background-color: #fd035a;
    &::before {
      opacity: 1;
    }
  }
}

//Blog
.eve-blog {
  .ev-blog-meta {
    border-radius: 0 0 4px 4px;
    .date,
    .location {
      font-size: 14px;
    }
    &:hover {
      box-shadow: 5px 25px 80px -10px rgba(0, 108, 236, 0.08);
    }

    .link-with-icon {
      color: #2b0996;
      font-weight: 600;
      &:hover {
        color: #fd035a;
      }
    }
  }
}

//Sponsor Logo
.sponsor-logo-bg {
  .logo {
    border: 1px solid  $border-color;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      box-shadow: 0 20px 80px -10px rgba(0, 108, 236, 0.15);
      border: 1px solid transparent;
    }
  }
}


// Global
.ff-poppins {
    font-family: "Poppins", sans-serif;
}

.ff-dmsans {
    font-family: 'DM Sans', sans-serif;
}

.fs-72 {
    font-size: clamp(2rem, 3.75vw + 1rem, 4.5rem);
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.flh-18 {
    line-height: 18px;
}

.flh-24 {
    line-height: 24px;
}

.flh-48 {
    line-height: 48px;
}

.fch-55 {
    max-width: 55ch;
}

.ca-two-body-clr {
    color: $dg-text-color;
}

.ca-two-body-clr-two {
    color: $dark-new-3;
}

.ca-two-body-clr-three {
    color: $dg-border-color;
}

.ca-two-bg {
    background-color: $dg-border-color;
}

.ca-two-bg-two {
    background-color: $ca-two-clr;
}

.ca-two-bg-three {
    background: linear-gradient(180deg, $dg-border-color -209.91%, rgba(215, 215, 215, 0.00) 100%);
}

.ca-two-bg-four {
    background: $dg-text-color;
}

.ca-two-bg-five {
    background: $ca-two-clr-two;
}

.ca-two-bg-six {
    background: $ca-two-clr-three;
}

.ca-two-bg-seven {
    background: $dark-new-1;
}

.ca-two-bg-hover {
    &:hover {
        background-color: $white !important;
        border-color: $white;
    }
}

.ca-two-bg-hover-two {
    &:hover {
        background-color: $ca-two-clr-four !important;
        border-color: $ca-two-clr-four;
    }
}

.ca-two-bg-hover-three {
    &:hover {
        background-color: $ca-two-clr-three !important;
        border-color: $ca-two-clr-three;
    }
}

.ca-two-border {
    border: 1px solid !important;
}

.ca-two-border-two {
    border: 2px solid;
}

.ca-two-border-color {
    border-color: $dg-border-color !important;
}

.ca-two-border-color-two {
    border-color: $dg-text-color;
}

.ca-two-border-top {
    border-top: 1px solid $dg-border-color;
}

.ca-two-dotted-top-border {
    border-top: 1px dotted;
}

.ca-two-dotted-left-border {
    border-left: 1px dotted;
}

.rounded-16 {
    border-radius: 16px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-50 {
    padding-left: 50px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-40 {
    padding-right: 40px;
}

.ptb-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.pr-20 {
    padding-right: 20px !important;
}

.ca-two-pt-10 {
    padding-top: 10px;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.pl-40 {
    padding-left: 40px;
}

.ch-pb-10 {
    padding-bottom: 10px;
}

.pb-30 {
    padding-bottom: 30px !important;
}

.pb-250 {
    padding-bottom: 250px;
}

.pb-330 {
    padding-bottom: 330px;
}

.ch-mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-85 {
    margin-top: 85px;
}

.mb-85 {
    margin-bottom: 85px;
}

.ca-two-subtitle {
    font-size: 16px;
    font-weight: 600;

    &.two {
        font-size: 14px;
        font-weight: 500;
    }

    span {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50px;
        margin-right: 6px;
    }
}

.ca-two-arrow-btn {
    height: 24px;
    width: 24px;
    border-radius: 50px;
}

.ca-two-call-btn {
    .call-btn {
        width: 54px;
        height: 54px;
        border-radius: 50px;
        border: 15px solid $dark-new-3;

        svg {
            background-color: $white;
        }
    }
}

.ca-two-hover-bg {
    &:hover {
        background-color: $ca-two-clr-two;
    }
}

.ca-two-border-hover {
    &:hover {
        border-right: 1px solid $dg-text-color;
    }
}

.ca-border-hover-color {
    &:hover {
        div {
            border-color: $ca-two-clr !important;
        }
    }
}

.ca-two-title {
    @media(max-width: 767px) {
        font-size: 26px;
        line-height: 36px;
    }
}

// Global

// Header
.ins-header {
    &.ca-two-header {
        position: fixed;
        top: 65px;
    }
}

.ca-two-top-feature {
    padding: 20px 10px;

    .ca-two-top-slider  {
        a {
            padding: 2px 10px;
            border-radius: 4px;
            &:hover {
                background-color: $dark-new-1;
                color: $white;
            }
        }
    }
}

// Header

// Hero
.ca-two-hero {
    @media(max-width: 1850px) {
        background-color: $ca-two-clr-two;
        padding-bottom: 115px;
    }

    @media(max-width: 991px) {
        padding-bottom: 60px;
        padding-top: 100px;
    }

    svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        @media(max-width: 1850px) {
            display: none;
        }
    }

    .one {
        top: 60px;
        right: 250px;

        @media(max-width: 1199px) {
            display: none;
        }
    }
}

.ca-two-hero-img {
    margin-top: -115px;

    @media(max-width: 1199px) {
        margin-top: -60px;
    }

    @media(max-width: 767px) {
        margin-top: 0;
    }
}

.ca-two-hero-content {
    @media(max-width: 991px) {
        display: inline-block !important;
    }

    p {
        @media(max-width: 991px) {
            margin-bottom: 20px !important;
        }
    }
}

// Hero

// Info Card
.ca-two-info-card-area {
    margin-top: -175px;

    @media(max-width: 1850px) {
        margin-top: 0;
        padding-top: 115px;
    }

    @media(max-width: 991px) {
        padding-top: 60px;
    }

    .ca-two-subtitle {
        margin-left: 18px;

        @media(max-width: 1850px) {
            margin-left: 0;
        }
    }

    .ca-two-year {
        margin-right: -70px;
        margin-top: -20px;

        @media(max-width: 1850px) {
            margin-top: 0;
            margin-right: 0;
        }

        @media(max-width: 1199px) {
            text-align: left !important;
        }
    }

    .ca-two-title {
        @media(max-width: 1850px) {
            margin-top: 25px;
            padding-right: 0;
        }
    }
}

.ca-two-info-cards {
    @media(max-width:991px) {
        margin-top: 0 !important;
    }
}

.ca-two-info-card {
    transition: .8s;

    @media(max-width: 399px) {
        padding: 10px !important;
        padding-top: 20px !important;
    }

    .gap-8 {
        @media(max-width: 399px) {
            gap: 15px !important;
        }
    }

    .ca-two-arrow-btn {
        @media(max-width: 399px) {
            margin-top: 20px;
        }
    }

    &:hover {
        .ca-two-arrow-btn {
            background-color: $dark-new-3;

            span {
                color: $white !important;
            }
        }
    }
}

// Info Card

// Mission
.ca-two-mission-area {
    .ca-two-title {
        @media(max-width: 767px) {
            padding-right: 0;
        }
    }
}

.ca-two-mission-img {
    @media(max-width: 1199px) {
        margin-bottom: 30px;
    }
}

// Mission

// Portfolio Post
.ca-two-portfolio-post-area {
    @media(max-width: 1850px) {
        background-color: $ca-two-clr-two;
        padding-bottom: 120px;
        padding-top: 115px;
    }

    @media(max-width: 991px) {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .text-end {
        @media(max-width: 1199px) {
            text-align: left !important;
        }
    }

    .ca-two-title {
        @media(max-width: 767px) {
            padding-right: 0;
        }
    }
}

.ca-two-portfolio-post-area {
    svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        @media(max-width: 1850px) {
            display: none;
        }
    }

    .pfp-shape {
        left: 20px;
        top: 285px;

        @media(max-width: 1850px) {
            display: none;
        }
    }

    .shape-two {
        left: -155px;
        top: 328px;

        @media(max-width: 1650px) {
            display: none;
        }
    }

    .ca-two-subtitle {
        margin-left: 15px;

        @media(max-width: 1850px) {
            margin-left: 0;
            margin-bottom: 25px;
        }
    }
}

.ca-two-pf-cet {
    top: 0;
    right: 50px;
    padding: 5px 10px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;

    &:hover {
        color: $dark-new-3;

        span {
            background-color: $dark-new-3;
        }
    }
}

// Portfolio Post

// Info Card Lg
.ca-two-info-card-lg-area {
    @media(max-width: 1850px) {
        padding-top: 115px;
    }

    @media(max-width: 991px) {
        padding-top: 60px;
        padding-bottom: 30px;
    }

    .ca-two-title {
        @media(max-width: 991px) {
            padding: 0;
            margin: 0;
        }
    }
}

// Info Card Lg

// Portfolio Two
.ca-two-portfolio-area {
    @media(max-width: 991px) {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .pl-40 {
        @media(max-width: 991px) {
            padding-left: 0;
            margin-top: 40px;
        }
    }

    .ca-two-btn-area {
        @media(max-width: 434px) {
            flex-wrap: wrap;
            gap: 20px !important;
            margin-top: 30px;
        }
    }
}

// Portfolio Two

// Product
.ca-two-product-item {
    @media(max-width: 767px) {
        margin-top: 0 !important;
    }

    &:hover {
        background-color: $dark-new-3 !important;

        h5 {
            color: $white;
        }

        .ca-two-product-img {
            filter: brightness(3);
        }
    }
}

.ca-two-product-slider {
    padding-left: 20px;
    margin-right: -100px;

    @media(max-width: 1599px) {
        margin-right: 0;
    }

    @media(max-width: 767px) {
        padding-left: 0;
    }
}

// Product

// Testimonial
.ca-two-min-testimonial {
    height: 550px !important;

    @media(max-width: 1199px) {
        height: 600px !important;
    }

    @media(max-width: 991px) {
        margin-top: 30px;
    }

    @media(max-width: 418px) {
        height: 740px !important;
    }

}

.ca-two-tesimonial-area {
    @media(max-width: 1850px) {
        background-color: $ca-two-clr-two;
    }

    svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        @media(max-width: 1850px) {
            display: none;
        }
    }

    .ca-two-subtitle {
        margin-top: -123px;
        margin-left: 20px;

        @media(max-width: 1850px) {
            padding: 0;
            margin: 0;
            margin-bottom: 25px;
        }
    }
}

.ca-two-counter-area {
    .gap-20 {
        @media(max-width: 414px) {
            gap: 30px !important;
        }

        @media(max-width: 337px) {
            gap: 12px !important;
        }

        .pl-50 {
            @media(max-width: 414px) {
                padding-left: 25px;
            }
        }
    }
}

// Testimonial

// Price

.ca-two-price-area {
    .ca-two-title {
        padding-right: 0;
    }
}

.ca-two-price-item {
    transition: .8s;

    .ca-two-pf-cet {
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
    }

    &:hover {
        background-color: $dark-new-1;

        .ca-two-pf-cet {
            color: $dark-new-1;

            span {
                background-color: $dark-new-1;
            }
        }

        .ca-two-price {
            color: $white !important;
        }

        .btn {
            background-color: $white;
            color: $dark-new-1;
        }

        li {
            color: $white;
        }
    }
}

.ca-two-price-list {
    li {
        span {
            display: inline-flex;
            width: 20px;
            height: 20px;
            align-items: center;
            justify-content: center;
        }
    }
}

// Price

// Service
.ca-two-ss-area {
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;

    @media(max-width: 1399px) {
        padding-top: 40px;
        padding-bottom: 30px;
    }
}

// Service

// Footer
.ca-two-footer-area {
    padding-top: 175px;
    border-bottom: 1px solid $ca-two-clr-four;

    @media(max-width: 1699px) {
        padding-top: 110px;
    }

    @media(max-width: 991px) {
        padding-top: 40px;
    }

    .ca-two-call-btn {
        .call-btn {
            border-color: $ca-two-clr-three;
        }

        &:hover {
            .call-btn {
                border-color: $ca-two-clr-three !important;
            }
        }
    }

    .footer-nav-list {
        li {
            a {
                color: $white;
                opacity: .9;
            }
        }
    }

    .footer-single-col {
        @media(max-width: 1199px) {
            padding-left: 0;
            margin-top: 20px;
        }

        p {
            opacity: .9;
        }

        h3 {
            @media(max-width: 991px) {
                margin-bottom: 10px;
            }
        }
    }
}

.ca-two-footer {
    @media(max-width: 1699px) {
        background-color: $dark-new-1;
    }

    .footer-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        @media(max-width: 1699px) {
            display: none;
        }
    }
}

.ca-two-newsletter-form {
    @media(max-width: 991px) {
        margin-top: 15px;
    }

    .form-control {
        background-color: transparent;
        border: 1px solid $dg-text-color;

        &::placeholder {
            font-weight: 600;
        }
    }

    .btn {
        position: relative;
        width: 52px;
        height: 48px;
        background-color: $white;
        border-radius: 0;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        position: absolute;
        top: 0;
        right: 0;

        &::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-image: url("../../assets/img/creative-agency-2/newsletter.png");
            background-repeat: no-repeat;
            background-size: 45%;
            background-position: center;
            left: 0;
            top: 2px;
        }
    }
}

.ca-two-footer-bottom {
    margin-top: -20px;

    .mt-50 {
        @media(max-width: 991px) {
            margin-top: 25px;
        }
    }

    .text-center {
        .ca-two-body-clr-two {
            @media(max-width: 1699px) {
                color: $white;
                opacity: .9;
            }
        }
    }

    ul {
        li {
            a {
                &:hover {
                    background-color: $white;
                    border-color: $white;
                    color: $dark-new-3;
                }
            }
        }
    }
}

// Footer



// Variables
$screen-sizes: (
    xs: 320px,
    xsm: 375px,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px,
    exl: 1600px,
    exxl: 1920px,
);
$flex-directions: (
    row,
    column
);
$space: 1rem;
$spaces: (
    0: 0,
    1: $space * 0.25,
    2: $space * 0.5,
    3: $space * 0.75,
    4: $space,
    5: $space * 1.25,
    6: $space * 1.5,
    7: $space * 1.75,
    8: $space * 2,
    9: $space * 2.25,
    10: $space * 2.5,
    11: $space * 2.75,
    12: $space * 3,
    13: $space * 3.25,
    14: $space * 3.5,
    15: $space * 3.75,
    16: $space * 4,
    17: $space * 4.25,
    18: $space * 4.5,
    19: $space * 4.75,
    20: $space * 5,
    21: $space * 5.25,
    22: $space * 5.5,
    23: $space * 5.75,
    24: $space * 6,
    25: $space * 6.25,
    26: $space * 6.5,
    27: $space * 6.75,
    28: $space * 7,
    29: $space * 7.25,
    30: $space * 7.5,
);

// Media Query
@mixin screen($key) {
    $size: map.get($screen-sizes, $key);

    @media (min-width: $size) {
        @content;
    }
}

//Mobile Landscape
@mixin landscape {
    @media all and (orientation: landscape) {
        @content;
    }
}

//Mobile Potrait
@mixin potrait {
    @media all and (orientation: potrait) {
        @content;
    }
}

:root {
    // Font Size (19px = 1vw @screen 1920px)
    --h1: clamp(2.97rem, 3.789vw + 1rem, 4.5rem); //72px
    --h2: clamp(2.64rem, 3.368vw + 1rem, 4rem); //64px
    --h3: clamp(1.98rem, 2.526vw + 1rem, 3rem); //48px
    --h4: clamp(1.65rem, 2.105vw + 1rem, 2.5rem); //40px
    --h5: clamp(1.485rem, 1.894vw + 1rem, 2.25rem); //36px
    --h6: clamp(0.825rem, 1.052vw + 1rem, 1.25rem); //20px 
}

// Typography
.paragraph {
    margin: 0 0 0.5rem;
}

.heading-font {
    font-family: 'Poppins', sans-serif;
}

.heading-1 {
    font-size: var(--h1);
}

.heading-2 {
    font-size: var(--h2);
}

.heading-3 {
    font-size: var(--h3);
}

.heading-4 {
    font-size: var(--h4);
}

.heading-5 {
    font-size: var(--h5);
}

.heading-6 {
    font-size: var(--h6);
}

.fs-10 {
    font-size: 0.625rem;
}

.fs-12 {
    font-size: 0.75rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-16 {
    font-size: 1rem;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 1.25rem;
}

.fs-24 {
    font-size: 1.5rem;
}

.fs-28 {
    font-size: 1.75rem;
}

.fs-32 {
    font-size: 2rem;
}

.fs-36 {
    font-size: 2.25rem;
}

.fs-40 {
    font-size: 2.5rem;
}

.fs-44 {
    font-size: 2.75rem;
}

.fs-48 {
    font-size: 3rem;
}

.fs-52 {
    font-size: 3.25rem;
}

.fs-56 {
    font-size: 3.5rem;
}

.fs-60 {
    font-size: 3.75rem;
}

.font-weight-light {
    font-weight: 300;
}

.font-weight-normal {
    font-weight: 400;
}

.font-weight-medium {
    font-weight: 500;
}

.font-weight-semibold {
    font-weight: 600;
}

.font-weight-bold {
    font-weight: 700;
}


// Color 
.clr-white {
    color: #fff;
}

.clr-dark {
    color: #000;
}

.clr-text {
    color: #222222;
}

.clr-text-1 {
    color: #EAEAEA;
}

.clr-paragraph {
    color: #666666;
}

.clr-paragraph-light {
    color: #D7D7D7;
}

.clr-primary {
    color: #F55F4E;
}

.clr-secondary {
    color: #5516A6;
}

.clr-tertiary {
    color: #FFDA64;
}

.clr-warning {
    color: #FF9D4D;
}

.clr-success {
    color: #539C53;
}

.clr-danger {
    color: #F55F4E;
}

.clr-base {
    color: #65A3FB;
}

.clr-dark-blue {
    color: #0B1958;
}

.clr-stroke {
    color: #182561;
}

.clr-dark-1 {
    color: #171717;
}

.clr-red {
    color: #FF3951;
}

// Hover Color 

.\:clr-white {
    &:hover {
        color: #fff;
    }
}

.\:clr-dark {
    &:hover {
        color: #000;
    }
}

.\:clr-text {
    &:hover {
        color: #222222;
    }
}

.\:clr-paragraph {
    &:hover {
        color: #666666;
    }
}

.\:clr-paragraph-light {
    &:hover {
        color: #D7D7D7;
    }
}

.\:clr-primary {
    &:hover {
        color: #F55F4E;
    }
}

.\:clr-secondary {
    &:hover {
        color: #5516A6;
    }
}

.\:clr-tertiary {
    &:hover {
        color: #FFDA64;
    }
}

.\:clr-warning {
    &:hover {
        color: #FF9D4D;
    }
}

.\:clr-success {
    &:hover {
        color: #539C53;
    }
}

.\:clr-danger {
    &:hover {
        color: #F55F4E;
    }
}

.\:clr-base {
    &:hover {
        color: #65A3FB;
    }
}

.\:clr-dark-blue {
    &:hover {
        color: #0B1958;
    }
}

.\:clr-stroke {
    &:hover {
        color: #182561;
    }
}

.\:clr-dark-1 {
    &:hover {
        color: #171717;
    }
}

.\:clr-red {
    &:hover {
        color: #FF3951;
    }
}

.\:clr-text-1 {
    &:hover {
        color: #EAEAEA;
    }
}

// Background
.bgc-white {
    background-color: #fff;
}

.bgc-white-50p {
    background-color: hsla(0, 0%, 100%, .5);
}

.bgc-dark {
    background-color: #000;
}

.bgc-primary {
    background-color: #F55F4E;
}

.bgc-secondary {
    background-color: #5516A6;
}

.bgc-tertiary {
    background-color: #FFDA64;
}

.bgc-warning {
    background-color: #FF9D4D;
}

.bgc-success {
    background-color: #539C53;
}

.bgc-danger {
    background-color: #F55F4E;
}

.bgc-base {
    background-color: #65A3FB;
}

.bgc-background {
    background-color: #F4F6FF;
}

.bgc-dark-blue {
    background-color: #0B1958;
}

.bgc-stroke {
    background-color: #182561;
}

.bgc-dark-1 {
    background-color: #171717;
}

.bgc-dark-2 {
    background-color: #393B3F;
}

.bgc-red {
    background-color: #FF3951;
}

.bgc-primary-gradient {
    background: linear-gradient(287.85deg, #FF0766 0%, #FF7E5D 95.32%);
}

.bgc-text-1 {
    background-color: #EAEAEA;
}

// Hover Background
.\:bgc-white {
    &:hover {
        background-color: #fff;
    }
}

.\:bgc-dark {
    &:hover {
        background-color: #000;
    }
}

.\:bgc-primary {
    &:hover {
        background-color: #F55F4E;
    }
}

.\:bgc-secondary {
    &:hover {
        background-color: #5516A6;
    }
}

.\:bgc-tertiary {
    &:hover {
        background-color: #FFDA64;
    }
}

.\:bgc-warning {
    &:hover {
        background-color: #FF9D4D;
    }
}

.\:bgc-success {
    &:hover {
        background-color: #539C53;
    }
}

.\:bgc-danger {
    &:hover {
        background-color: #F55F4E;
    }
}

.\:bgc-base {
    &:hover {
        background-color: #65A3FB;
    }
}

.\:bgc-background {
    &:hover {
        background-color: #F4F6FF;
    }
}

.\:bgc-dark-blue {
    &:hover {
        background-color: #0B1958;
    }
}

.\:bgc-stroke {
    &:hover {
        background-color: #182561;
    }
}

.\:bgc-dark-1 {
    &:hover {
        background-color: #171717;
    }
}

.\:bgc-dark-2 {
    &:hover {
        background-color: #393B3F;
    }
}

.\:bgc-red {
    &:hover {
        background-color: #FF3951;
    }
}

.\:bgc-text-1 {
    &:hover {
        background-color: #EAEAEA;
    }
}

// Sizes
@each $size,
$value in $spaces {

    // Width
    .width-#{$size} {
        width: $value;
    }

    // Height
    .height-#{$size} {
        height: $value;
    }

}

// Spaces
@each $size,
$value in $spaces {
    .gap-#{$size} {
        gap: #{$value} !important;
    }

    .padding-#{$size} {
        padding: #{$value} !important;
    }

    .padding-top-#{$size} {
        padding-block-start: #{$value} !important;
    }

    .padding-bottom-#{$size} {
        padding-block-end: #{$value} !important;
    }

    .padding-y-#{$size} {
        padding-block: #{$value} !important;
    }

    .padding-start-#{$size} {
        padding-inline-start: #{$value} !important;
    }

    .padding-end-#{$size} {
        padding-inline-end: #{$value} !important;
    }

    .padding-x-#{$size} {
        padding-inline: #{$value} !important;
    }

    .margin-#{$size} {
        margin: #{$value} !important;
    }

    .margin-top-#{$size} {
        margin-block-start: #{$value} !important;
    }

    .margin-bottom-#{$size} {
        margin-block-end: #{$value} !important;
    }

    .margin-y-#{$size} {
        margin-block: #{$value} !important;
    }

    .margin-start-#{$size} {
        margin-inline-start: #{$value} !important;
    }

    .margin-end-#{$size} {
        margin-inline-end: #{$value} !important;
    }

    .margin-x-#{$size} {
        margin-inline: #{$value} !important;
    }
}

@each $screen,
$screenSize in $screen-sizes {

    @each $size,
    $value in $spaces {
        @include screen(#{$screen}) {
            .gap-#{$screen}-#{$size} {
                gap: #{$value} !important;
            }

            .padding-#{$screen}-#{$size} {
                padding: #{$value} !important;
            }

            .padding-top-#{$screen}-#{$size} {
                padding-block-start: #{$value} !important;
            }

            .padding-bottom-#{$screen}-#{$size} {
                padding-block-end: #{$value} !important;
            }

            .padding-y-#{$screen}-#{$size} {
                padding-block: #{$value} !important;
            }

            .padding-start-#{$screen}-#{$size} {
                padding-inline-start: #{$value} !important;
            }

            .padding-end-#{$screen}-#{$size} {
                padding-inline-end: #{$value} !important;
            }

            .padding-x-#{$screen}-#{$size} {
                padding-inline: #{$value} !important;
            }

            .margin-#{$screen}-#{$size} {
                margin: #{$value} !important;
            }

            .margin-top-#{$screen}-#{$size} {
                margin-block-start: #{$value} !important;
            }

            .margin-bottom-#{$screen}-#{$size} {
                margin-block-end: #{$value} !important;
            }

            .margin-y-#{$screen}-#{$size} {
                margin-block: #{$value} !important;
            }

            .margin-start-#{$screen}-#{$size} {
                margin-inline-start: #{$value} !important;
            }

            .margin-end-#{$screen}-#{$size} {
                margin-inline-end: #{$value} !important;
            }

            .margin-x-#{$screen}-#{$size} {
                margin-inline: #{$value} !important;
            }
        }
    }
}

// miscellaneous
.link {
    text-decoration: none;
    transition: all .3s ease;
}

.transition {
    transition: all 0.3s ease;
}

.place-content-center {
    place-content: center;
}

.place-items-center {
    place-items: center;
}

.position-center {
    inset-inline-start: 50%;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
}

.translate-12 {
    transform: translate(12px, 12px);
}

.inset-0 {
    inset: 0;
}

.pointer-none {
    pointer-events: none;
}

.lh-15 {
    line-height: 1.5;
}

.start-25p {
    inset-inline-start: 25%;
    transform: translateX(-50%);
}

.end-25p {
    inset-inline-end: 25%;
    transform: translateX(50%);
}

.drop-shadow {
    box-shadow: 20px 20px 60px hsla(0, 0%, 63%, 0.1);
}

.max-24ch {
    max-width: 24ch;
}

.max-60ch {
    max-width: 60ch;
}

.border-secondary-clr {
    --bs-border-color: #5516a6;
}

.border-stroke-clr {
    --bs-border-color: #182561;
}

.border-stroke-clr-2 {
    --bs-border-color: #2E2E2E;
}

.border-red-clr {
    --bs-border-color: #FF3951;
}

.rounded-start-end-4 {
    border-start-end-radius: 1rem;
}

.package-btn {
    &.active {
        background-color: #EF3D3D;
        color: #fff;
    }
}

.ca-subheading {
    position: relative;
    isolation: isolate;

    &::after {
        content: '';
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: calc(100% + .5rem);
        transform: translateY(-50%);
        width: 1.5rem;
        height: 1px;
        background-color: #5516A6;
    }
}

.ca-subheading-gradient {
    position: relative;
    isolation: isolate;

    &::after {
        content: '';
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: calc(100% + 1rem);
        transform: translateY(-50%);
        width: 6rem;
        height: .25rem;
        background: linear-gradient(287.85deg, #FF0766 0%, #FF7E5D 95.32%);
    }
}

// Section Style 
.section-space {
    padding-top: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);
    padding-bottom: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);

    &--sm {
        padding-top: clamp(2rem, 3.25vw + 1rem, 3.75rem);
        padding-bottom: clamp(2rem, 3.25vw + 1rem, 3.75rem);

        &-top {
            padding-top: clamp(2rem, 3.25vw + 1rem, 3.75rem);
        }

        &-bottom {
            padding-bottom: clamp(2rem, 3.25vw + 1rem, 3.75rem);
        }
    }

    &-top {
        padding-top: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);
    }

    &-bottom {
        padding-bottom: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);
    }
}

.ca-header {
    .main-menu li a.nav-link {
        color: #fff;
    }

    .navbar-dark .main-menu li a.nav-link,
    .navbar-dark .action-btns a.btn-link {
        color: #fff;
    }

    .navbar-dark.sticky-header.affix {
        background-color: #182561;
    }

    .navbar-dark.sticky-header.affix .main-menu li a.nav-link {
        color: #fff;
    }

    .navbar-dark.sticky-header.affix .action-btns a.btn-link {
        color: #fff;
    }

    .navbar-dark.sticky-header.affix .navbar-brand img.logo-color {
        display: none;
    }

    .navbar-dark.sticky-header.affix .navbar-brand img.logo-white {
        display: block;
    }

    .offcanvas-body .main-menu li a.nav-link {
        color: #737373;
    }

    .navbar-toggler {
        color: #fff;

        &:hover {
            color: #F55F4E;
        }
    }
}

.ca-hero {
    padding-top: clamp(7.5rem + 88px, 12.631vw + 1rem, 15rem + 88px);
    padding-bottom: clamp(7.5rem, 12.631vw + 1rem, 15rem);
    position: relative;
    isolation: isolate;

    @include screen(md) {
        min-height: 100vh;
        display: grid;
        place-content: center;
        padding-top: clamp(3.5rem + 88px, 12.631vw + 1rem, 7rem + 88px);
        padding-bottom: clamp(3.5rem, 12.631vw + 1rem, 7rem);

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            /* background-image: url(../img/creative-agency/hero-bg.png); */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    }
}

.ca-agency-hero {
    padding-top: clamp(7.5rem + 88px, 12.631vw + 1rem, 15rem + 88px);
    padding-bottom: clamp(7.5rem, 12.631vw + 1rem, 15rem);
    position: relative;
    isolation: isolate;

    @include screen(md) {
        min-height: 100vh;
        display: grid;
        place-content: center;
        padding-top: clamp(3.5rem + 88px, 12.631vw + 1rem, 7rem + 88px);
        padding-bottom: clamp(3.5rem, 12.631vw + 1rem, 7rem);
    }

    @include screen(lg) {
        padding-bottom: clamp(2rem, 3.25vw + 1rem, 3.75rem);
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #171717;
        z-index: -2;

        @include screen(lg) {
            inset-block-end: 20%;
        }
    }

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        /* background-image: url(../img/creative-agency/ca-hero-bg.png); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: .3;

        @include screen(lg) {
            inset-block-end: 20%;
        }
    }

    &__heading {
        position: relative;
        isolation: isolate;

        @include screen(xl) {
            &::after {
                /* content: url(../img/creative-agency/heading-shape.png); */
                position: absolute;
                inset-block-start: 50%;
                inset-inline-start: 100%;
                transform: translateY(-50%);
            }
        }
    }
}

.ca-service-section {
    position: relative;
    isolation: isolate;

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        /* background-image: url(../img/creative-agency/service-section-bg.png); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.ca-digital-service {
    /* background-image: url(../img/creative-agency/ca-service-section-bg.png); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    &__hr {
        color: hsla(0, 0%, 69%, .5);
    }
}

.ca-testimonial-section {
    position: relative;
    isolation: isolate;

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        /* background-image: url(../img/creative-agency/testimonial-section-bg.png); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.ca-goal-section {
    padding-top: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);
    padding-bottom: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);
    position: relative;
    isolation: isolate;

    @include screen(md) {
        padding-bottom: clamp(3.75rem + 80px, 6.5vw + 1rem, 7.5rem + 80px);
    }

    @include screen(lg) {
        padding-bottom: clamp(3.75rem + 165px, 6.5vw + 1rem, 7.5rem + 165px);
    }

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        /* background-image: url(../img/creative-agency/goal-section-bg.png); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.ca-support {
    @include screen((md)) {
        position: relative;
        isolation: isolate;
    }

    &__content {
        padding: 1.5rem;

        @include screen(md) {
            border-radius: 10rem;
            position: absolute;
            margin-top: -80px;
        }

        @include screen(lg) {
            margin-top: -80px;
        }
    }
}

.ca-award-section {
    padding-top: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);
    padding-bottom: clamp(3.75rem, 6.5vw + 1rem, 7.5rem);

    @include screen(md) {
        padding-top: clamp(3.75rem + 80px, 6.5vw + 1rem, 7.5rem + 80px);
    }

    @include screen(lg) {
        padding-top: clamp(3.75rem + 120px, 6.5vw + 1rem, 7.5rem + 120px);
    }

    @include screen(xl) {
        padding-top: clamp(3.75rem + 140px, 6.5vw + 1rem, 7.5rem + 140px);
    }
}

.social-media-section {
    position: relative;
    isolation: isolate;

    &::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        height: 25%;
        background-color: #171717;
        z-index: -1;
    }
}

.ca-design-section {
    position: relative;
    isolation: isolate;

    &::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        inset-block-start: 0;
        height: 100%;
        background-color: #171717;
        z-index: -1;

        @include screen(xl) {
            height: 59%;
        }

        @include screen(xxl) {
            height: 50%;
        }
    }

    &__heading {
        position: relative;
        isolation: isolate;

        @include screen(xl) {
            &::after {
                /* content: url(../img/creative-agency/heading-shape-2.png); */
                position: absolute;
                inset-block-start: 0;
                inset-inline-start: 100%;
            }
        }
    }

    &__title {
        color: #fff;

        @include screen(xl) {
            color: #171717;
        }

        &-top {
            color: #fff;

            @include screen(xl) {
                color: #171717;
            }
        }
    }
}

// Components 
.list {
    --direction: column;
    display: flex;
    flex-direction: var(--direction);
    margin: 0;
    padding: 0;
    list-style: none;

    @each $direction in $flex-directions {
        &-#{$direction} {
            --direction: #{$direction};
        }

        @each $screen,
        $value in $screen-sizes {
            &-#{$screen}-#{$direction} {
                @include screen(#{$screen}) {
                    --direction: #{$direction};
                }
            }
        }
    }
}

.tech-img {
    position: relative;
    isolation: isolate;

    &__item {
        width: calc(50% - 1rem);
        border-start-start-radius: 8rem;
        border-start-end-radius: 8rem;
        border-end-start-radius: 8rem;
        border-end-end-radius: 8rem;
        overflow: hidden;
    }
}

.ca-accordion {
    --bs-accordion-border-radius: .5rem;
    --bs-accordion-border-color: #e7e7e7bd;
    --bs-accordion-btn-padding-x: 1.5rem;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-bg: #fff;

    .accordion-item {
        margin-bottom: 1.5rem;
        border-radius: var(--bs-accordion-border-radius);

        &:last-child {
            margin-bottom: 0;
        }
    }

    .accordion-header {
        border-radius: inherit;
    }

    .accordion-button {
        border-radius: inherit !important;
        font-size: 20px;
        font-weight: 700;
        color: #222222;

        &::after {
            background-image: unset;
            content: '\f067';
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }
    }

    .accordion-item:not(:first-of-type) {
        border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    }

    .accordion-item:last-of-type .accordion-collapse {
        border-radius: var(--bs-accordion-border-radius);
    }

    .accordion-button:not(.collapsed) {
        box-shadow: unset;

        &::after {
            background-image: unset;
            content: '\f2d1';
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
        }
    }

    .accordion-body {
        padding-top: 0;
    }
}

.ca-goal-card {
    position: relative;
    isolation: isolate;

    &__extension {
        width: 12px;
        position: absolute;
        inset-block-start: 33%;
        inset-block-end: 33%;
        background-color: #fff;

        &-start {
            inset-inline-start: 0;
            transform: translateX(-100%);

            &::before {
                content: '';
                position: absolute;
                inset-block-end: 100%;
                inset-inline-end: 0;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 0 12px 12px;
                border-color: transparent transparent #fff transparent;
            }

            &::after {
                content: '';
                position: absolute;
                inset-block-start: 100%;
                inset-inline-end: 0;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 12px 12px 0;
                border-color: transparent #fff transparent transparent;
            }
        }

        &-end {
            inset-inline-end: 0;
            transform: translateX(100%);

            &::before {
                content: '';
                position: absolute;
                inset-block-end: 100%;
                inset-inline-start: 0;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 12px 0 0 12px;
                border-color: transparent transparent transparent #fff;
            }

            &::after {
                content: '';
                position: absolute;
                inset-block-start: 100%;
                inset-inline-start: 0;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 12px 12px 0 0;
                border-color: #fff transparent transparent transparent;
            }
        }
    }
}

.ca-goal-slider {
    &__pagination {
        bottom: auto !important;

        .swiper-pagination-bullet-active {
            width: 10px;
            height: 10px;
            background-color: #5516a6 !important;
        }

        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background-color: #fff;
            opacity: 1;
        }
    }
}

.ca-testimonial-slider {
    &__pagination {
        position: static;
        bottom: auto !important;

        @include screen(md) {
            display: flex;
            justify-content: flex-end;
        }

        .swiper-pagination-bullet-active {
            width: 10px;
            height: 10px;
            background-color: #F55F4E !important;
        }

        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background-color: #fff;
            opacity: 1;
        }
    }
}

.ca-client-slider {
    .swiper-wrapper {
        transition-timing-function: linear;
    }
}

.showcase-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    &:hover {
        .showcase-card__content {
            inset-block-end: 1.5rem;
            transform: translateY(0);
        }
    }

    &__content {
        position: absolute;
        inset-inline: 1.5rem;
        inset-block-start: auto;
        inset-block-end: 0;
        transition: all .3s ease;
        transform: translateY(100%);
    }
}

.package-card {
    position: relative;
    isolation: isolate;
    transition: all .3s ease;

    &:hover {
        box-shadow: 14px 24px 60px hsla(241, 100%, 18%, .1);
    }

    &__label {
        --label-clr: #5516A6;
        padding: .5rem .25rem;
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 2rem;
        background-color: var(--label-clr);

        &::after {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 12px 24px 0 24px;
            border-color: var(--label-clr) transparent transparent transparent;
            position: absolute;
            inset-block-start: 100%;
            inset-inline-start: 0;
        }

        &-primary {
            --label-clr: #F55F4E;
        }
    }
}

.footer-list {
    @include screen(md) {
        li {
            width: calc(50% - .25rem);
        }
    }
}

.follow-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;

    @include screen(xxl) {
        gap: 48px;
        position: absolute;
        inset-inline-start: -140px;
        inset-block-start: 50%;
        transform: rotate(-90deg);
    }

    @include screen(exl) {
        inset-inline-start: -80px;
    }

    &__dash {
        width: 48px;
        height: 1px;
        background: #fff;
    }
}

.social-media-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-radius: 1rem;

    &.active {
        background-color: #fff;

        .bgc-text-1 {
            background: linear-gradient(287.85deg, #FF0766 0%, #FF7E5D 95.32%);
        }

        .clr-paragraph {
            color: #fff;
        }

        .clr-paragraph+.clr-paragraph {
            color: #666;
        }
    }
}

.social-media-content {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    &::after {
        @include screen(lg) {
            content: '';
            position: absolute;
            inset-block: 0;
            inset-inline-start: 0;
            inset-inline-end: 58%;
            /* background-image: url(../img/creative-agency/social-content-bg.png); */
            background-size: contain;
            background-position: left bottom;
            background-repeat: no-repeat;
        }

        @include screen(xl) {
            inset-inline-end: 50%;
        }

        @include screen(xxl) {
            inset-inline-end: 45%;
        }
    }
}

.ca-digital-service-card {
    border: 1px solid hsla(0, 85%, 59%, .15);

    &:hover {
        .ca-digital-service-card__icon {
            fill: #EF3D3D;
        }

        a {
            color: #EF3D3D !important;
        }
    }

    &__icon {
        fill: #093A3E;
        transition: all .3s ease;
    }
}

.text-stroke {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #EF3D3D;
}

.ca-client-feedback {
    &__pagination {
        position: unset;
        margin-top: 40px;
        margin-bottom: 0 !important;

        .swiper-pagination-bullet {
            opacity: 1;
            width: 8px;
            height: 8px;
            background-color: #D9D9D9;
        }

        .swiper-pagination-bullet-active {
            background: linear-gradient(287.85deg, #FF0766 0%, #FF7E5D 95.32%);
        }
    }
}

.faq-list {
    &.active {
        background-color: #fff;
        color: #222222;
    }
}

.faq-list-group {
    overflow-y: auto;
    max-height: 580px;
    scrollbar-color: #D7D7D7 #171717;
    scrollbar-width: thin;

    &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
    }

    &::-webkit-scrollbar-track {
        background: #171717;
    }
    
    &::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        border-inline: 1px solid #2E2E2E;
        background: hsla(0, 0%, 84%, .5);
    }
}



/********** hero section start **********/ 
.crm-hero {
    background-repeat: no-repeat; 
    background-size: 100%;
    background-position: left bottom;
    .slack-thumb {
        right: 0;
        bottom: 0;
    }
    .crm-hero-content {
        .arrow-lg-red {
            right: -75px;
            top: 70px;
        }
    }
    h1 {
        color: $white;
        span {
            color: $crm-primary;
        }
    }
    @include screen-1800 {
        background-position: left top;
    }
    @include screen-1600 {
        background-color: $crm-secondary;
        & > .container {
            & > .row {
                align-items: center;
            }
        }
    }
}
.crm-subtitle {
    color: $crm-primary !important;
}
.crm-hero-form {
    border-radius: 4px; 
    overflow: hidden;
    input {
        width: 100%;
        padding: 18px 24px;
        background-color: $white; 
        border-radius: 4px 0 0 4px;
        border: 0;
        outline: 0;
    }
    .crm-submit-btn {
        padding: 18px 40px;
        background-color: $crm-primary;
        color: $white;
        border: 0;
        font-weight: 600;
    }
}

.crm-header-social {
    left: -120px;
    bottom: 300px;
    transform: rotate(-90deg);
    & > span {
        color: $white;
        position: relative;
        padding-left: 20px;
        font-family: $headings-font-family; 
        font-weight: 600;
    }
    .social-list {
        li {
            display: inline-block;
            transform: rotate(90deg);
            margin-right: 12px;
            a {
                color: $white;
                transition: 0.3s ease-in;
                margin: 5px;
                &:hover {
                    color: $crm-primary;
                }
            }
        }
    }
    @include screen-1600 {
        bottom: 160px;
    }
}

/**************** brands area started ************/ 
.crm-brand {
    @include screen-1600 {
        padding-top: 120px;
    }
}
.crm-brands-row {
    display: flex; 
    align-items: center; 
    gap: 24px;
    justify-content: center;
    @include screen-1200 {
        flex-wrap: wrap;
    }
}
.crm-brand-item {
    padding: 24px;
    transition: $transition-base;
    width: 20%;
    min-height: 68px;
    position: relative;
    img {
        transition: $transition-base; 
        position: absolute;
        left: 50%; 
        top: 50%; 
        transform: translate(-50%, -50%);
        max-width: 170px;
        &.black {
            opacity: 0;
        }
    }
    &:hover {
        background-color: $white;
        box-shadow: $crm-shadow;
        img {
            &.black {
                opacity: 1; 
            }
            &.gray {
                opacity: 0;
            }
        }
    }
    @include screen-1200 {
        width: 25%;
    }
    @include screen-992 {
        width: 30%;
    }
    @include screen-768 {
        width: 47%;
    }
    @include screen-460 {
        width: auto;
        min-width: 250px;
    }
}

/************ crm about section *********/ 
.crm-title {
    .crm-subtitle {
        font-weight: 600;
        font-size: 20px;
    }
}

.crm-about-content-box {
    padding: 42px 32px 24px;
    .crm-content-wrapper {
        width: 60%;
        padding: 18px 0 42px;
    }
    .circle-shape {
        width: 120px; 
        height: 120px;
        background: linear-gradient(228.08deg, #87B8FF -9.11%, rgba(114, 166, 240, 0) 68.69%);
        left: 64%;
        top: -35px;
    }
    .crm-vector-img {
        position: absolute;
        right: 0; 
        bottom: 0;
        z-index: -1;
    }
    @include screen-768 {
        .crm-content-wrapper {
            width: 100%;
        }
        .crm-vector-img {
            position: initial;
            max-width: 100%;
        }
    }
}
/************** support area ***********/ 
.crm-support-box {
    background-color: $crm-secondary;
    padding: 40px 50px 0;
    border-radius: 10px;
    .crm-title {
        h2 {
            font-weight: 600;
        }
    }
    @include screen-1200 {
        padding: 40px;
    }
    @include screen-460 {
        padding: 32px 24px;
    }
}

.crm-counter-box {
    padding: 40px 24px;
    box-shadow: $crm-shadow;
    max-width: 270px;
    .icon-wrapper {
        width: 48px; 
        height: 48px;
    }
    h3 {
        color: $crm-secondary;
    }
    p {
        font-weight: 500; 
        font-size: 18px;
    }
    &.mt--90 {
        margin-top: -90px;
    }
    &.mb--40 {
        margin-bottom: -40px;
    }
    @include screen-1200 {
        max-width: 100%;
        &.mt--90 {
            margin-top: 0;
        }
        &.mb--40 {
            margin-bottom: 0;
        }
    }
}

/*************** service section *************/ 
.crm-service-box {
    border: 1px solid $border-color;
    padding: 40px 24px;
    transition: $transition-base;
    .icon-wrapper {
        width: 56px; 
        height: 56px;
        background-color: rgba($crm-primary, 0.2);
        transition: $transition-base;
        svg {
            path {
                transition: $transition-base;
            }
        }
    }
    &:hover {
        box-shadow: $crm-shadow;
        border-color: transparent;
        .icon-wrapper {
            background-color: $crm-primary;
            svg {
                path {
                    fill: $white;
                }
            }
        }
    }
}
.crm-explore-text {
    font-weight: 500;
    a {
        color: $crm-secondary;
        transition: $transition-base; 
        &:hover {
            color: $crm-primary;
        }
    }
}

/************** crm how it works ****************/ 
.crm-how-it-works {
    background-color: $white;
    &::before {
        content: ''; 
        position: absolute;
        left: 0; 
        top: 0; 
        width: 50%; 
        height: 100%;
        border-radius: 0 140px 0 0; 
        background-color: $crm-secondary;
        z-index: -1;
    }
    @include screen-1200 {
        background-color: $crm-secondary;
        padding: 80px 0;
    }
}
.crm-htw-slider {
    padding: 25px 0 60px 0;
    .pagination-wrapper {
        position: absolute;
        bottom: 0; 
        left: 50%; 
        transform: translateX(-50%);
        width: 190px;
        padding-bottom: 15px;
        .slide_counter {
            position: absolute;
            font-size: 32px;
            font-weight: 700;
            color: $headings-color;
            top: -30px;
            @include screen-1200 {
                color: $white;
            }
        }
        .crm_init_value {
            left: -46px; 
        }
        .crm_total_value {
            right: -46px;
        }
    }
    .swiper-pagination {
        position: initial;
    }
    .swiper-pagination-progressbar {
        background-color: $crm-placeholder;
        .swiper-pagination-progressbar-fill {
            background-color: $crm-primary;
        }
    }
}
.crm-htw-single {
    padding: 32px 24px;
    border: 1px solid $border-color;
    transition: $transition-base; 
    box-sizing: border-box;
    p {
        font-size: 15px;
    }
    &:hover {
        box-shadow: $crm-shadow;
        border-color: transparent;
    }
}

/**************** pricing section start ****************/ 
.crm-pricing-section {
    padding-bottom: 190px;
}
.crm-special-features {
    gap: 16px;
    li {
        display: inline-flex; 
        align-items: center;
        font-weight: 600;
        flex-shrink: 0;
        span {
            width: 16px;
            height: 16px;
            background-color: rgba($crm-primary, 0.15);
            border-radius: 50%;
            display: inline-block;
            position: relative; 
            &::before {
                content: ''; 
                width: 8px; 
                height: 8px;
                position: absolute; 
                left: 50%; 
                top: 50%; 
                transform: translate(-50%, -50%); 
                border-radius: 50%; 
                background-color: $crm-primary;
            }
        }
    }
}

.crm-pricing-table {
    padding: 32px 32px 0;
    border-radius: 10px 10px 0 0;
    table {
        margin-bottom: 0;
        th {
            border-right: 1px solid $border-color;
            border-bottom: 0;
            vertical-align: middle;
            padding-bottom: 16px;
            &.crm-pricing-switch-wrapper {
                min-width: 290px;
            }
            &.crm-package-wrapper {
                min-width: 190px;
            }
            &:last-child {
                border-right: 0;
            }
        }
        .title-sm {
            font-family: $headings-font-family;
            font-weight: 600;
        }
        .crm-package-price {
            display: block;
            font-size: 24px;
            font-weight: 700;
            font-family: $headings-font-family;
            &.crm_monthly_price {
                display: none;
            }
        }
        .crm-package-subtitle {
            font-size: 12px;
            font-weight: 400;
        }
        .crm-package-btn {
            border: 1px solid $crm-secondary;
            color: $crm-secondary;
            &:hover {
                background-color: $crm-primary;
                color: $white;
                border-color: $crm-primary;
            }
        }
    }
}

.crm-pricing-switch-wrapper {
    .arrow-shape {
        position: absolute;
        width: 40px;
        left: 160px;
        top: 75px;
        transform: rotate(40deg);
    }
    .crm-offer-badge {
        color: $mk-secondary;
        font-size: 12px;
        font-weight: 600;
        margin-left: 80px;
    }
    .title {
        font-size: 24px;
        font-weight: 700;
    }
}

.crm-pricing-switch {
    display: flex; 
    align-items: center;
    button {
        border: 0; 
        background-color: transparent;
        font-size: 14px; 
        font-weight: 600;
    }
    .crm-switch {
        width: 33px;
        height: 16px;
        display: inline-block;
        border: 1px solid $crm-secondary;
        border-radius: 30px;
        position: relative;
        cursor: pointer;
        .crm-switch-dot {
            position: absolute;
            width: 11px; 
            height: 11px;
            background-color: $crm-secondary; 
            border-radius: 50%; 
            top: 50%; 
            left: 2px;
            transform: translateY(-50%);
            transition: $transition-base;
        }
        .crm-checkbox-switch {
            position: absolute;
            left: 0; 
            top: 0; 
            width: 100%;
            height: 100%;
            cursor: pointer;
            z-index: 1;
            opacity: 0;
            &:checked {
                ~ .crm-switch-dot {
                    left: 18px; 
                }
            }
        }
    }
}
.crm_pricing_feature_accordion {
    padding: 0 32px 32px;
    border-radius: 0 0 10px 10px;
    .accordion-item {
        + .accordion-item {
            margin-top: 8px;
        }
        .accordion-header {
            a {
                display: block;
                font-weight: 600;
                font-family: $headings-font-family;
                padding: 10px 17px;
                color: $body-color;
            }
        }
    }
}

.crm_pricing_feature_table {
    table {
        margin-bottom: 0;
    }
    td {
        border: 1px solid $border-color;
        border-top: 0;
        &:first-child {
            border-left: 0;
        }
        &:last-child {
            border-right: 0;
        }
    }
    .crm_pricing_features_name {
        min-width: 290px;
        font-size: $font-size-sm;
    }
    .crm_pricing_feature_check {
        min-width: 190px;
        font-size: $font-size-sm;
    }
}

/**************** feedback section start ***************/
.crm-feedback-section {
    margin-top: -70px;
}
.crm-feedback-box {
    background-color: $crm-secondary;
    padding: 60px 24px 75px;
}
.crm-feedback-slider {
    max-width: 870px;
    margin: 0 auto;
    .crm-stars {
        li {
            color: $mk-star;
            font-size: 14px;
        }
    }
}
.crm-fd-slide-control {
    width: 56px; 
    height: 56px; 
    background-color: $crm-primary;
    border-radius: 50%;
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    color: $white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: $transition-base;
    &:hover {
        background-color: $white;
        color: $crm-secondary;
    }
    &.crm-next-control-outer {
        right: -25px; 
    }
    &.crm-prev-control-outer {
        left: -25px; 
    }
    @include screen-768 {
        display: none;
    }
}
.crm-feedback-control-slider {
    max-width: 325px; 
    position: absolute;
    left: 50%;
    bottom: -30px; 
    transform: translateX(-50%);
    .crm-feedback-control-thumb {
        border: 2px solid $white;
        border-radius: 50%;
        overflow: hidden;
        opacity: 0;
        transition: $transition-base;
        box-sizing: border-box;
        cursor: pointer;
        img {
            transform: scale(1.1);
        }
        &.swiper-slide-visible {
            opacity: 1;
        }
        &.swiper-slide-active {
            border-color: $crm-primary;
            img {
                border-color: $crm-primary;
            }
        }
    }
}

/************* call to action **********/
.crm-cta-section {
    .circle-half {
        left: 70px;
        top: -20px;
    }
    .doted {
        right: 200px; 
        bottom: 80px;
    }
}


// Demo 11 Crypto
.hero-eleven {
  min-height: 100vh;
}
.hero-eleven p {
  color: $gray-300;
}
.crypto-hero-img {
  position: relative;
}

.crypto-hero-img .currency-icon li {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background-color: $github;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.crypto-hero-img .currency-icon li:nth-child(1) {
  height: 114px;
  width: 114px;
  top: 34%;
}
.crypto-hero-img .currency-icon li:nth-child(2) {
  height: 84px;
  width: 84px;
  left: 17%;
  top: 44px;
}
.crypto-hero-img .currency-icon li:nth-child(3) {
  height: 110px;
  width: 110px;
  right: 17%;
}
.crypto-hero-img .currency-icon li:nth-child(4) {
  height: 78px;
  width: 78px;
  right: 0;
  top: 29%;
}
@media (min-width: 320px) and (max-width: 767px) {
  .crypto-hero-img .currency-icon li {
    display: none;
  }
}
/* Purchase */
.input-bg {
  background-color: #404040;
}
/* Crypto Promo */
.bg-dark-black .section-title h2 {
  color: $white;
  margin-bottom: 15px;
}
.bg-dark-black .section-title p {
  color: $secondary;
}
.crypto-promo-box {
  padding: 40px 25px;
  border-radius: 5px;
}
.crypto-promo-box .crypt-promo-icon i {
  width: 65px;
  height: 65px;
  color: $white;
  background-color: #3b3b3b;
  display: inline-block;
  border-radius: 50px;
  line-height: 65px;
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  cursor: pointer;
  cursor: pointer;
}
.crypto-promo-box .crypt-promo-icon i:hover {
  background-color: $gray-900;
}
.crypto-promo-box h4 {
  color: $white;
  margin-bottom: 20px;
  font-size: $font-size-lg;
}
.crypto-promo-box p {
  color: $gray-300;
}
.crypto-promo-box a {
  text-decoration: none;
  color: $white;
}
.crypto-promo-box a:hover {
  color: $primary;
}
/* Crypto Counter */
.single-counter-box {
  border-radius: 5px;
  padding: 15px;
}
.single-counter-box h5 {
  color: $white;
}
.single-counter-box span {
  font-size: $font-size-sm;
  color: $gray-300;
  font-weight: $font-weight-medium-light;
}
.timer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 25px;
  gap: 25px;
}
.grid-item {
  text-align: center;
  border-radius: 5px;
  padding: 8px 18px;
}
.grid-item h5 {
  font-size: 30px;
  margin-bottom: 0;
  color:$white;
}
.grid-item span {
  font-size: 16px;
  color: $white;
}
@media (min-width: 320px) and (max-width: 575px) {
  .timer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}
.crypto-progress {
  margin-top: 30px;
}
.crypto-progress h5 {
  color: $gray-300;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
}
.progress {
  height: 12px;
  border-radius: 50px;
  background-color: $github;
}
.progress .progress-bar {
  border-radius: 50px;
  height: 12px;
  background-color: $primary;
}
/* Crypto Table */
.crypto-table {
  background: #1f1f1f;
  border: 0;
}
.crypto-table thead {
  background: #333333;
  border-bottom: 1px dashed $border-color;
}
.crypto-table tr {
  border-style: dashed !important;
  border-color: #585858;
}
.crypto-table thead th {
  padding: 16px 30px;
  color: $gray-300;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  border: 0;
}
.crypto-table tbody {
  color: $gray-300;
}
.crypto-table tbody td {
  padding: 12px 30px;
  color: $secondary;
}
.crypto-table tbody > tr {
  border-bottom: 1px dashed $gray-500;
  border-style: dashed !important;
  border-color: #585858;
}
.crypto-table.table > :not(:first-child){
  border-top: 0;
}

.crypto-table > :not(caption) > * > * {
  box-shadow: none;
  border: 0;
}
.coin-info h5{
  font-size: 15px;
}
.coin-price, .coin-price-change{
  font-size: $font-size-sm;
}
.crypto-table .coin-price-change {
  position: relative;
  padding-left: 8px;
}
.crypto-table .coin-price-change::before {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 8px;
}
.crypto-table .coin-price-change.price-down::before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid $danger;
}
.crypto-table .coin-price-change.price-up::before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid $success;
}

/* Crypto CTA */

.crypto-cta {
  background-color: $github;
}
/* Crypto Team */
.crypto-team .section-title p {
  color: $gray-300;
}
.single-crypto-team {
  padding: 20px;
  border-radius: $border-radius-lg;
}
.crypto-team-info h5{
  font-size: $font-size-lg;
}
.crypto-team-info p {
  color: $gray-300;
  font-weight: $font-weight-medium;
}
.single-crypto-team img {
  width: 100%;
}
.crypto-team-social li {
  padding-right: 8px;
  line-height: normal;
}
.crypto-team-social li:last-child {
  border: 0;
}
.crypto-team-social li a {
  font-size: $font-size-sm;
  color: $secondary;
  &:hover{
    color: $primary;
  }
}
/* Crypto Testimonial */
.crypto-single-testimonial {
  border-radius: 5px;
  padding: 32px 24px;
  .author-meta{
    span{
      font-size: $font-size-sm;
      color: $secondary;
    }
  }
}
.author-meta{
  span{
    font-size: $font-size-sm;
    color: $secondary;
  }
}
.crypto-single-testimonial p {
  color: $gray-300;
  padding: 24px 0;
}
/* Crypto Timeline */
.crypto-timeline {
  padding: 30px;
  border-radius: $border-radius-lg;
}
.crypto-timeline-icon {
  background-color: $black;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.crypto-timeline p {
  color: rgba(255, 255, 255, 0.5);
}
/* Crypto Blog */
.crypto-blog .section-title p {
  color: $gray-300;
}
.crypto-blog-card {
  padding: 24px;
  border-radius: 5px;
  h3{
    padding-top: 20px;
    margin-bottom: 15px;
    font-size: $font-size-lg;
  }
  p{
    color: $gray-300;
  }
}
.crypto-blog-card .blog-thumb img {
  width: 100%;
}

/* Crypto App CTA */
.crypto-app-btn {
  border-radius: 50px;
  border-style: solid;
  border-color: #0082f8;
  padding: 10px 30px;
  border: 2px solid #175cff;
  display: inline-block;
  background-color: #175cff;
  color: #fff;
  text-align: left;
}
.crypto-app-btn:hover {
  background-color: transparent;
  color: #fff;
}
.crypto-btn-content-wrapper {
  display: flex;
  align-items: center;
  text-align: start;
}
.crypto-app-btn .crypto-btn-icon {
  margin-right: 10px;
  font-size: 20px;
}
.crypto-app-btn .text-wrapper > span {
  display: block;
}
.crypto-app-btn .crypto-btn-text {
  line-height: normal;
  font-weight: 600;
  font-size: 16px;
}
.crypto-app-btn .btn-tagline {
  font-size: 12px;
  line-height: 1;
}
/* Crypto Footer */
.crypto-footer-widget p {
  color: $gray-300;
}
.crypto-footer-social li a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  background-color: $github;
  color: $white;
  border-radius: 50px;
}
.crypto-footer-social li a:hover {
  background-color: $primary;
}
.crypto-footer-nav ul li a {
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
}
.crypto-footer-nav ul li:hover a {
  border-bottom: 2px solid $primary;
}
.crypto-footer-border {
  border-top: 1px solid #151515;
}
.crypto-footer-left p,
.crypto-footer-right a {
  color: $gray-300;
  line-height: normal;
  font-size: 16px;
}


// Index 10
// Cyber Hero
.hero-ten {
  padding: 200px 0;
}
@media (min-width: 767px) and (max-width: 992px) {
  .hero-ten {
    padding: 110px 0;
  }
}
@media (min-width: 320px) and (max-width: 768px) {
  .hero-ten {
    padding: 110px 0;
  }
}
.cyber-down-btn a {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 60px;
  background-color: #fff;
  font-size: 24px;
  display: inline-block;
  position: absolute;
  top: 170px;
  box-shadow: 0px 4px 4px 0px rgba(182, 182, 182, 0.2);
}
// About
.cyber-about-img img {
  border-radius: 10px;
}
.sheild-img img {
  border: 20px solid #fff;
  border-radius: 10px;
  margin-top: -140px;
  margin-left: -30px;
}
.cyber-about-count-box {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
  border-right: 10px solid var(--bs-primary);
  border-radius: 10px;
}
.cyber-about-box {
  padding: 30px 20px;
  box-shadow: 10px 10px 66px 0px rgba(136, 136, 136, 0.15);
  background-color: #fff;
  border-radius: 10px;
}
.cyber-about-icon {
  margin-bottom: 25px;
}
.cyber-about-icon i {
  font-size: 30px;
  text-align: center;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 5px;
  display: inline-block;
  background-color: var(--bs-primary-soft);
  color: var(--bs-primary);
}
// Services
.cyber-features {
  padding-bottom: 160px;
}
.cyber-single-service {
  padding: 30px;
}
.cyber-single-service .feature-icon i {
  font-size: 28px;
}
//CTA
.cyber-cta {
  margin-top: -100px;
}

//Count Box
.cyber-video-img {
  height: 100%;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 200px 0;
}
.cyber-video-img img {
  border-radius: 10px;
}
.cyber-video-img a {
  display: inline-block;
  height: 75px;
  width: 75px;
  line-height: 77px;
  text-align: center;
  background-color: #175cff;
  color: #fff;
  border-radius: 50%;
  position: relative;
  font-size: 20px;
}
.cyber-video-img .popup-video-btn {
  display: inline-block;
  height: 75px;
  width: 75px;
  line-height: 77px;
  text-align: center;
  background-color: #175cff;
  color: #fff;
  border-radius: 50%;
  position: relative;
  font-size: 20px;
  position: relative;
}

.cyber-video-img .popup-video-btn:before {
  content: "";
  position: absolute;
  left: -12.5px;
  top: -12.5px;
  height: 100px;
  width: 100px;
  opacity: 0;
  border-radius: 50%;
  border: 1px solid #175cff;
  animation: btnWave 1500ms linear infinite;
}
.cyber-video-img .popup-video-btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  border-radius: 50%;
  border: 10px solid #175cff;
  animation: btnWave 1000ms linear infinite;
}
.popup-video-btn:hover {
  color: #fff;
}

@keyframes btnWave {
  0% {
    opacity: 1;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
}
.cyber-count-box {
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0px 15px 55px 0px rgba(102, 102, 102, 0.1);
  padding: 30px 30px 30px 30px;
}

//Store
.product-row {
  margin-top: -200px;
}
.store-bg-header {
  padding-top: 100px;
  padding-bottom: 200px;
}
.single-product img {
  width: 100%;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}
.product-img {
  position: relative;
}
.product-img::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  background-color: rgba(12, 22, 54, 0.2);
  content: "";
  opacity: 0;
  transition: all 0.3s;
}
.single-product:hover .product-img::after {
  opacity: 1;
}
.product-info {
  border-radius: 0 0 5px 5px;
}
.sale-badge {
  position: absolute;
  top: 15px;
  left: 15px;
}
.cart i {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  color: var(--bs-primary);
}
.heart i {
  position: absolute;
  top: 65px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  color: var(--bs-primary);
}
.product-cart-wishlist-icon {
  opacity: 0;
  transition: all 0.3s;
}
.single-product:hover .product-cart-wishlist-icon {
  opacity: 1;
}
// Testimonial
.cyber-single-testimonial {
  border-radius: 10px;
  padding: 30px;
}

// Cyber FAQ
.cyber-faq-wrapper .faq-accordion .accordion-item button {
  padding: 20px 30px;
}
.cyber-faq-img img {
  border-radius: 10px;
}
@media (min-width: 767px) and (max-width: 992px) {
  .cyber-faq-img img {
    width: 100%;
  }
}

.crypto-btn-content-wrapper{
  text-align:right;
}
.crypto-app-btn .crypto-btn-icon{
  margin-right: auto;
  margin-left: 10px;
}
// Cyber Blog
.cyber-article-img img {
  width: 100%;
}
.cyber-single-article {
  border-radius: 10px;
}
.cyber-single-article img {
  border-radius: 10px 10px 0 0;
}

// Cyber Footer
.cyber-footer {
  position: relative;
}

.cyber-footer-social-list li a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background-color: #05003b;
  display: inline-block;
  color: #fff;
}
.cyber-footer-social-list li a:hover {
  background-color: #175cff;
}
.cyber-footer-bottom p {
  border-top: 1px solid rgba(248, 249, 250, 0.05);
}
///Single Product Page
.cyber-product-image img {
  border-radius: 10px;
  width: 100%;
}
.cp-quantity button {
  font-size: 20px;
}
.cyber-product-tabs .nav-pills .nav-link {
  padding: 0 0 10px 0;
}
.cyber-product-tabs .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  border-bottom: 2px solid var(--bs-primary);
  color: var(--bs-primary);
  background-color: transparent;
  border-radius: 0;
}
// Realted Product
.related-product-cart-wishlist-icon .cart i,
.related-product-cart-wishlist-icon .heart i {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  color: var(--bs-primary);
  right: 15px;
  transition: all 0.3s;
}
.related-product-cart-wishlist-icon .cart i {
  top: 15px;
}
.related-product-cart-wishlist-icon .heart i {
  top: 65px;
}
.related-product-cart-wishlist-icon {
  opacity: 0;
}
.cyber-related-product-img:hover .related-product-cart-wishlist-icon {
  opacity: 1;
}


.bg-design-agency {
    background-color: $des-a-clr;
}

.bg-design-agency-about {
    background-color: $des-a-clr-2;
}

.design-agency-hero__title {
    font-size: clamp(2.97rem, 5.417vw + 1rem, 4.5rem);
    @media (max-width: 767px) {
        font-size: 50px;
    }
    @media (max-width: 414px) {
        font-size: 38px;
    }
    @media (max-width: 375px) {
        font-size: 58px;
        padding: 0 20px;
    }
    @media (max-width: 320px) {
        font-size: 28px;
        padding: 0;
    }
    &.title-2 {
        font-size: clamp(2.97rem, 3.91vw + 1rem, 3.5rem);
        @media (max-width: 767px) {
            font-size: 40px;
            margin-bottom: 40px !important;
        }
        @media (max-width: 414px) {
            font-size: 32px;
        }
        @media (max-width: 320px) {
            font-size: 22px;
        }
    }
    span {
        img {
            margin-top: -10px;
        }
    }
}

.padding-top-large {
    padding-block-start: 285px; 
    @media (max-width: 414px) {
        padding-block-start: 190px; 
    }
}

.padding-top-large-2 {
    padding-block-start: 245px; 
    @media (max-width: 991px) {
        padding-block-start: 195px;
    }
}

.showcase-custom {
    height: 100%;
    object-fit: cover;
}

.bgds {
    background-color: $crm-secondary;
}

.da-price {
    color: $hd-dark;
    &:hover {
        color: $hd-dark;
    }
}

.dg-text-color {
    color: $dg-text-color;
    &:hover {
        color: $des-a-clr-3;
    }
}

.dg-bg-color {
    background-color: $dg-meta-color;
}

.dg-blog-btn-text {
    color:$crm-placeholder;
    &:hover {
        color: $des-a-clr-3;
    }
}

// Hero
.design-agency-hero {
    padding-top: clamp(3.5rem + 88px,13.631vw + 1rem,8rem + 88px);
    .design-agency-hero__img-box {
        .design-agency-hero__img {
            z-index: 2;
            @media (max-width: 1199px) {
                width: 100%;
            }
        }
        .shape {
            right: -15px;
            top: -50px;
            @media (max-width: 767px) {
                display: none;
            }
        }
        .shape_two {
            left: -15px;
            top: 25px;
            @media (max-width: 1399px) {
                display: none;
            }
        }
    }
    .shape_one {
        right: 0;
        bottom: 310px;
    }
    .shape_three {
        left: 105px;
        top: 350px;
        @media (max-width: 1530px) {
            display: none;
        }
    }
    .shape_four {
        left: 60px;
        top: 150px;
        @media (max-width: 991px) {
            display: none;
        }
    }
    .shape_five {
        top: 400px;
        right: 80px;
        z-index: 2;
        @media (max-width: 1440px) {
            display: none;
        }
    }
    .shape_six {
        top: 225px;
        right: 285px;
        @media (max-width: 1399px) {
            display: none;
        }
    }
    .shape_seven {
        top: 110px;
        right: 47px;
        @media (max-width: 700px) {
            display: none;
        }
    }
}
// Hero

// About
.dg-about-section-2 {
    margin-top: -190px;
    @media (max-width: 414px) {
        margin-top: -135px;
    }
}
// About

// Service
.sc-service-section.pt-200 {
    @media (max-width: 991px) {
        padding-top: 70px;
    }
}
// Service

// Design Showcase
.section-space.bg-design-agency-about {
    padding-bottom: 60px;
    .shape_one {
        top: 70px;
        right: 35px;
        @media (max-width: 991px) {
            display: none;
        }
    }
    .shape_two {
        bottom: 160px;
        right: 50px;
    }
    .shape_three {
        left: 60px;
        top: 340px;
        @media (max-width: 1600px) {
            display: none;
        }
    }
    .shape_four {
        bottom: -110px;
        left: 60px;
        @media (max-width: 1650px) {
            display: none;
        }
    }
}
// Design Showcase

// Price
.dg-pricing-section.bg-design-agency-about .triangle-circle {
    top: 0;
}
// Price

// Feedback
.sc-feedback-section.dg-feedback-bg  {
    margin-top: -195px;}
.dg-feedback-bg {
    background-color: $des-a-clr-4;
}
// Feedback

// Blog
.dg-blog-section {
    .badge {
        font-size: 14px;
        font-weight: 700;
        padding: 10px 15px;
    }
}
// Blog

///
// Design Agency Two Home //
///

.mb-80 {
    margin-bottom: 80px;
}

.pt-160 {
    padding-top: 160px;
    @media (max-width: 991px) {
        padding-top: 100px;
    }
}

.dat-bg {
    background-color: $des-a-clr-5;
}

.btn-dat-one {
    background-color: $des-a-clr-main;
    &:hover {
        background-color: $dark-new-2;
        color: $white;
    }
}

.btn-dat-two {
    background-color: $des-a-clr-main;
    &:hover {
        background-color: rgba(255,17,17,.1254901961);
        color: $des-a-clr-main !important;
    }
}

.price-dat-btn {
    background-color: #ff111120;
    color: $des-a-clr-main;
    &:hover {
        background-color: $des-a-clr-main;
        color: $white;
    }
}

.fw-6 {
    font-weight: 600 !important;
}

.mk-pricing-control.style-two li a.active {
    background-color: $des-a-clr-main;
    color: $white;
}

.watch-now-btn-dat {
    font-family: "Poppins",sans-serif;
    color: $dark-new-2;
    font-size: 16px;
    font-weight: 600;
    i {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: $dark-new-2;
        color: $white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }
    &:hover {
        color: $des-a-clr-main;
        i {
            background-color: $des-a-clr-main;
            
        }
    }
}

// Hero //
.design-agency-two-hero {
    z-index: 2;
    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/design-agency/two/hero_long_shape.png");
        top: 110px;
        left: 0;
        background-repeat: no-repeat;
        z-index: -1;
        @media (max-width: 1399px) {
            display: none;
        }
    }
    .section-shape {
        .one {
            top: 185px;
            left: 75px;
            z-index: 2;
            @media (max-width: 991px) {
                display: none;
            }
        }
        .two {
            top: -35px;
            left: -56px;
            @media (max-width: 1199px) {
                display: none;
            }
        }
    }
}
.design-agency-two-hero__title {
    font-size: clamp(2.00rem,3.91vw + 1rem,3.5rem);
    line-height: 1.5;
}

.design-agency-two-hero__bottom-content {
    @media (max-width: 991px) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

.design-agency-two-hero__bottom-content__icon {
    width: 60px;
    height: 60px;
    background-color: $white;
    border-radius: 50%;
}

.design-agency-two-hero__bottom-content__title {
    color: $dark-new-2;
    font-size: clamp(1.0rem, 1.684vw + 1rem, 2rem);
    font-weight: 700;
    line-height: 40px;
    @media (max-width: 991px) {
       text-align: center;
    }
}

.dat-user-text {
    color: $des-a-clr-main;
    font-family: "Poppins",sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.design-agency-two-hero__bottom-img {
    .main-img {
        margin-left: -270px;
        @media (max-width: 991px) {
           margin-left: 0;
           width: 100%;
         }
    }
    .hero-two {
        right: -90px;
        top: -73px;
        z-index: 2;
        @media (max-width: 991px) {
            display: none;
         }
    }
    .hero-three {
        bottom: 55px;
        right: -140px;
        @media (max-width: 991px) {
            display: none;
         }
    }
    .hero-four {
        top: -83px;
        right: -15px;
        @media (max-width: 991px) {
            display: none;
         }
    }
}
// Hero //

// About //
.dat-about-btn {
    color: $crm-secondary;
    &:hover {
        color: $des-a-clr-3;
    }
}

.dat-section-after {
    z-index: 2;
    &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/design-agency/two/sec_bg_overlay.png");
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
}
// About //

// Design Agency Two Home //

.dg-hero-section {
    background-color: #071233;
    padding: 220px 0 100px 0;
    .hero-curve {
        bottom: -2px;
        &.left {
            left: 0; 
        }
        &.right {
            right: 0;
        }
    }
    .dg-circle-blur {
        width: 446px;
        height: 446px;
        background: $dg-color-2;
        top: 0;
        left: 100px;
        z-index: -1;
        filter: blur(200px);
        opacity: 0.7;
    }
    .hero-line-shape-1 {
        right: 51px;
        bottom: 0;
    }
    .hero-line-shape-2 {
        top: 80px;
        right: 100px;
    }
    .triangle-circle {
        left: 40%;
        top: 39%;
    }
    .dg-hero-circle-1 {
        top: 136px;
        right: 450px;
        animation: 15s circle-moving infinite linear;
    }
    .dg-hero-circle-2 {
        right: 240px;
        bottom: 345px;
        animation: 20s circle-moving infinite linear;
    }
    .dg-hero-circle-3 {
        bottom: 75px;
        left: 55%;
        animation: 25s circle-moving infinite linear;
    }
    .dg-hero-right {
        .doted-shape {
            left: 150px;
            top: 0;
        }
    }
    @include screen-1800 {
        .hero-curve {
            width: 150px;
            height: calc(100% + 2px);
        }
    }
    @include screen-1440 {
        .hero-curve {
            display: none;
        }
    }
}
.dg-circle-style-1 {
    width: 15px;
    height: 15px;
    background: $dg-color-4;
    border: 1px solid $white;
    &::before {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); 
        background: $dg-color-4;
        filter: blur(15px);
    }
}
.dg-circle-style-2 {
    width: 15px;
    height: 15px;
    background: $dg-color-5;
    border: 1px solid $white;
    &::before {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); 
        background: $dg-color-5;
        filter: blur(15px);
    }
}
/*********** about section start ************/ 
.dg-about-section {
    .dg-about-right {
        margin-bottom: -60px;
    }
    .dg-circle-1 {
        bottom: 296px;
        left: 75px;
    }
    .dg-circle-2 {
        bottom: 78px; 
        right: 18%;
        animation: 22s circle-moving infinite linear;
    }
    .dg-circle-3 {
        bottom: 65px;
        left: 380px;
        animation: 15s circle-moving infinite linear;
    }
    .dg-circle-4 {
        right: 70px;
        bottom: 356px;
    }
    @include screen-992 {
        padding-bottom: 60px;
        overflow: hidden;
        .dg-about-right {
            margin-bottom: 0;
        }
    }
}
.dg-about-bottom {
    max-width: 516px;
    .shape-box {
        position: absolute;
        right: -30px;
        top: -40px;
        z-index: -1;
        @media(max-width: 599px) {
            display: none;
        }
    }
}

/***************** service section start ****************/ 
.dg-service-section {
    padding-top: 180px;
    .sr-line {
        top: 80px;
    }
    .sr-circle-1 {
        right: 80px; 
        top: 74px;
    }
    .sr-circle-2 {
        right: 24%;
        top: 304px;
        animation: 15s circle-moving infinite linear;
    }
    .sr-doted-shape {
        bottom: -42px;
    }
    @include screen-992 {
        padding-top: 60px;
    }
}
.dg-service-item {
    padding: 40px 24px;
    transition: $transition-base;
    .icon-wrapper {
        width: 80px; 
        height: 80px;
        background-color: $white;
        padding: 10px;
        span {
            &.bg-color-1 {
                background: $dg-color-1;
            }
            &.bg-color-2 {
                background: $dg-color-2;
            }
            &.bg-color-3 {
                background: $dg-color-3;
            }
            &.bg-color-4 {
                background: $dg-color-4;
            }
        }
        &.shadow-1 {
            box-shadow: $dg-shadow-1;
        }
        &.shadow-2 {
            box-shadow: $dg-shadow-2;
        }
        &.shadow-3 {
            box-shadow: $dg-shadow-3;
        }
        &.shadow-4 {
            box-shadow: $dg-shadow-4;
        }
    }
    .number-count {
        padding-left: 56px;
        background: $dg-color-1;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        &::before {
            content: ''; 
            position: absolute;
            left: 0; 
            bottom: 10px;
            width: 40px;
            height: 1px;
        }
        &.color-1 {
            &::before {
                background: $dg-color-1;
            }
        }
        &.color-2 {
            background: $dg-color-2;
            &::before {
                background: $dg-color-2;
            }
        }
        &.color-3 {
            background: $dg-color-3;
            &::before {
                background: $dg-color-3;
            }
        }
        &.color-4 {
            background: $dg-color-4;
            &::before {
                background: $dg-color-4;
            }
        }
    }
    &:hover {
        box-shadow: $dg-box-shadow;
    }
}

/**************************portfolio section start*******************/
.dg-portfolio-section {
    background-color: $dg-section-bg;
    padding-bottom: 95px;
    .pf-curve {
        height: 100%;
        &.left {
            left: 0;
        }
        &.right {
            right: 0;
        }
    }
    .pf-line {
        top: 0;
        right: 350px;
    }
    .pf-circle {
        top: 56px;
        right: 30%;
        animation: 15s circle-moving infinite linear;
    }
    @include screen-992 {
        padding-bottom: 40px;
    }
}
.dg-portfolio-single {
    .dg-portfolio-item-content {
        padding: 0 24px 40px;
    }
}
.dg-category-btn {
    background-color: $dg-meta-color; 
    display: inline-block; 
    padding: 4px 8px;
}
.dg-explore-btn {
    color: $crm-placeholder; 
    transition: $transition-base; 
    span {
        color: $crm-placeholder;
        transition: $transition-base;
    }
    &:hover {
        color: $dg-primary-color;
        span {
            color: $dg-primary-color;
        }
    }
}

.dg-slider-control {
    min-height: 25px;
    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        opacity: 1;
        background: $dg-placeholder-color;
        transition: $transition-base;
        border: 1px solid transparent;
        margin: 3px;
        &.swiper-pagination-bullet-active {
            background: $dg-color-4;
            border-color: $white;
            width: 12px;
            height: 12px;
            box-shadow: $dg-shadow-4;
        }
    }
}


/****************** pricing section start *************/
.dg-pricing-section {
    .triangle-circle {
        top: 142px;
        left: 64%;
    }
    .pr-line-shape-1, 
    .pr-line-shape-2 {
        top: 100px;
    }
    .dg-circle-1 {
        top: 94px;
        left: 175px;
        animation: 15s circle-moving linear infinite;
    }
    .dg-circle-2 {
        top: 325px;
        left: 30%;
        animation: 10s circle-moving linear infinite;
    }
    .dg-circle-3 {
        right: 200px;
        top: 163px;
        animation: 25s circle-moving linear infinite;
    }
    .pr-doted {
        left: 58%;
        bottom: -70px;
    }
}
.dg-pricing-tab {
    ul {
        li {
            a {
                padding: 10px 24px;
                display: inline-block;
                font-weight: 600;
                transition: $transition-base;
                &.active {
                    background-color: $dg-primary-color;
                    color: $white;
                }
            }
        }
    }
}
.dg-pricing-column {
    padding: 40px 24px;
    transition: $transition-base;
    .offer-badge {
        right: 18px;
    }
    .icon-wrapper {
        width: 80px;
        height: 80px;
        padding: 10px;
        box-shadow: $dg-shadow-1;
        span {
            background: $dg-color-1;
        }
        &.bg-color-2 {
            box-shadow: $dg-shadow-4;
            span {
                background: $dg-color-4; 
            }
        }
        &.bg-color-3 {
            box-shadow: $dg-shadow-3;
            span {
                background: $dg-color-3; 
            }
        }
    }
    .dg-feature-list {
        max-width: 210px; 
        li {
            span {
                color: $dg-color-1;
            }
            + li {
                margin-top: 10px;
            }
        }
    }
    .dg-pricing-amount {
        width: 292px;
        background-color: $hd-light-bg;
        padding: 16px 0 24px 0;
        margin-top: 32px;
        span {
            font-size: 15px;
        }
        &.bg-dg-primary {
            background-color: $dg-primary-color;
            h2, span {
                color: $white;
            }
            .dg-outline-btn {
                background-color: $white;
                color: $dg-heading-color; 
                border-color: $white;
                &:hover {
                    background-color: $dg-heading-color;
                    color: $white;
                    border-color: $dg-heading-color;
                }
            }
        }
        @media (max-width: 414px) {
            width: 245px;
        }
    }
    &:hover {
        box-shadow: $dg-box-shadow;
    }
} 

/****************** team section start *********************/ 
.dg-team-section {
    .tm-curve {
        &.left {
            left: 0; 
        }
        &.right {
            right: 0;
        }
    }
    .team-line {
        right: 60px;
    }
    .dg-circle-1 {
        right: 150px;
        bottom: 300px;
    }
    .dg-circle-2 {
        left: 50%;
        bottom: 65px;
        animation: 15s circle-moving linear infinite;
    }
}
.dg-team-single {
    & > img {
        transition: $transition-base;
    }
    .designation-box {
        position: absolute;
        padding: 24px;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        opacity: 0; 
        visibility: hidden;
        transition: $transition-base;
        h6 {
            font-size: 16px;
        }
    }
    &:hover {
        & > img {
            transform: scale(1.1);
        }
        .designation-box {
            opacity: 1; 
            bottom: 24px;
            visibility: visible;
        }
    }
}

/********************** feedback section start ****************/
.dg-feedback-section {
    background-color: $dg-layout-bg;
}
.dg-feedback-single {
    padding: 40px 24px;
    box-sizing: border-box;
    transition: $transition-base;
    .clients-thumbnail {
        box-shadow: $dg-shadow-1;
    }
    .serial-number {
        color: $dg-color-1;
        padding-left: 48px;
        &::before {
            content: ''; 
            position: absolute;
            left: 0; 
            bottom: 10px;
            width: 40px;
            height: 1px;
            background-color: $dg-color-1;
        }
        &.color-2 {
            color: $webflow;
            &::before {
                background-color: $webflow;
            }
        }
        &.color-3 {
            color: $google;
            &::before {
                background-color: $google;
            }
        }
    }
    &:hover {
        box-shadow: $box-shadow;
    } 
}


/********************* call to action ******************/ 
.dg-cta-section {
    .ct-curve {
        &.left {
            left: 0;
        }
        &.right {
            right: 0;
        }
    }
    .dg-circle {
        bottom: 50px;
        animation: 25s circle-moving linear infinite;
    }
}
.dg-cta-imgs {
    gap: 24px;
    @include screen-576 {
        gap: 16px;
    }
}
.dg-cta-btns {
    grid-column-gap: 24px;
    grid-row-gap: 16px;
}

/************************ blog section start **************/ 
.dg-blog-section {
    background-color: $dg-layout-bg;
}
.dg-blog-card {
    padding: 24px 24px 40px;
    transition: $transition-base;
    .thumbnail {
        img {
            transition: $transition-base;
        }
    }
    h5 {
        color: $dg-heading-color;
        transition: $transition-base;
        &:hover {
            color: $dg-primary-color;
        }
    }
    &:hover {
        box-shadow: $dg-box-shadow;
        .thumbnail {
            img {
                transform: scale(1.01);
            }
        }
    }
}
.text-orange {
    color: #ff3951;
  }
  .bg-orange {
    background-color: #ff3951;
    /* color: $light; */
    border: 1px solid transparent;
    &:hover {
      background-color: transparent;
      color: #ff3951;
      border: 1px solid #ff3951;
    }
  }
  
  .span-arrow {
    font-size: 20px;
    margin-bottom: 10px;
    color: #ff3951;
    font-weight: 600;
  }
  
  //Hero
  .digi-hero-text {
    .action-btns {
      .watch-now-btn {
        color: #14142b;
        i {
          background-color: #ffc226;
          width: 56px;
          height: 56px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: $white;
        }
      }
    }
  }
  .digi-hero-img {
    ul {
      li {
        position: absolute;
        &:nth-child(1) {
          top: -14%;
          left: -4%;
        }
        &:nth-child(2) {
          bottom: -30%;
          left: -16%;
        }
        &:nth-child(3) {
          right: 13%;
          bottom: -1%;
        }
        &:nth-child(4) {
          top: 18%;
          right: -10%;
        }
      }
    }
  }
  //Service
  .digi-service-single {
    transition: $transition-base;
    img {
      margin-bottom: 24px;
    }
    border-radius: 8px;
    border: 1px solid $border-color;
    padding: 48px 24px 30px 24px;
    a {
      font-size: 14px;
      color: #575757;
      font-weight: 600;
    }
  
    &:hover {
      border: 1px solid transparent;
      box-shadow: 14px 14px 56px rgba(33, 38, 106, 0.1);
    }
  }
  //News Letter
  .digi-newsletter {
    .digi-news-form {
      position: relative;
      .form-control {
        border-radius: 50px;
        height: 52px;
        border: 0;
      }
      .digi-news-button {
        position: absolute;
        right: 0;
        top: 0;
        background: #ff3951;
        border-radius: 0px 50px 50px 0px;
        padding: 14px 20px;
        font-size: 14px;
        font-weight: 600;
        border: 0;
        display: inline-block;
        color: #fff;
      }
    }
  }
  //Contact
  .digi-contact-left {
    .contact-box {
      background: #ffffff;
      box-shadow: 0px 10px 65px rgba(11, 9, 27, 0.04);
      border-radius: 4px;
      padding: 24px 32px;
      img {
        margin-bottom: 24px;
      }
    }
  }
  .digi-contact-form-bg {
    padding: 48px 40px;
    box-shadow: 14px 14px 56px rgba(33, 38, 106, 0.1);
    border-radius: 10px;
    ul {
      li {
        &:first-child {
          width: 90px;
          height: 90px;
          border: 15px solid #ff3951;
          border-radius: 50%;
          left: -6%;
          position: absolute;
          top: -8%;
          z-index: -4;
        }
        &:last-child {
          width: 140px;
          height: 140px;
          background-color: #ffc226;
          border-radius: 50%;
          right: -60px;
          position: absolute;
          bottom: -60px;
          z-index: -5;
        }
      }
    }
  }
  //Blog
  .digi-blog-single {
    .digi-blog-thumb {
      position: relative;
      .d-tag {
        /* color: $light; */
        padding: 8px 30px;
        border-radius: 50px;
        position: absolute;
        bottom: -20px;
        right: 30px;
      }
      .d-tag.marketing {
        background-color: #ffc226;
      }
      .d-tag.design {
        background-color: #ff3951;
      }
    }
    .digi-blog-info {
      span {
        font-weight: 600;
        margin-bottom: 16px;
        display: block;
      }
      h4 {
        font-size: 20px;
      }
      a {
        color: $body-color;
        &:hover {
          color: #ff3951;
        }
      }
    }
  }
  
  .digi-blog-list {
    .list-header {
      padding: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #14142b;
      border-radius: 8px 8px 0px 0px;
      h5 {
        color: #fff;
        font-weight: 600;
        font-weight: 20px;
        margin-bottom: 0;
      }
    }
    .digi-blog-posts {
      border-radius: 0 0 8px 8px;
      padding: 35px 24px;
    }
  }
  //Why Choose
  .digi-why-left {
    position: relative;
    ul li {
      position: absolute;
      &:nth-child(1) {
        top: 40px;
        left: 60px;
      }
      &:nth-child(2) {
        right: 0;
        bottom: -10px;
      }
    }
  }
  
  .digi-why-right {
    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      @media (min-width: 320px) and (max-width: 575px) {
        grid-template-columns: repeat(1, 1fr);
      }
      li {
        box-shadow: 14px 14px 56px rgba(33, 38, 106, 0.1);
        border-radius: 4px;
      }
    }
  }
  
  // How It Works
  .digi-how-works {
    padding-top: 120px;
    padding-bottom: 420px;
  }
  .digi-how-works-right {
    border-radius: 10px;
    position: relative;
    padding: 40px 25px;
    overflow: hidden;
    .dig-how-steps {
      ul li {
        box-shadow: 0 110.121px 88.0972px rgba(0, 0, 0, 0.03);
        backdrop-filter: blur(64px);
        border-radius: 10px;
        padding: 20px;
        position: relative;
        z-index: 6;
      }
      .shape {
        ul li {
          position: absolute;
          &:nth-child(1) {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background-color: #ffd08a;
            top: -88px;
            left: -103px;
            z-index: 3;
          }
          &:nth-child(2) {
            width: 195px;
            height: 195px;
            border-radius: 50%;
            background: #52f5d8;
            z-index: 3;
            left: -100px;
            bottom: -90px;
          }
          &:nth-child(3) {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background-color: #888efe;
            z-index: 3;
            right: -122px;
            top: 39%;
          }
        }
      }
    }
  }
  
  // Testimonial
  .digi-testimonial-single {
    border-radius: 10px;
    padding: 30px;
  }
  .digi-nav-control {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 20px;
    .swiper-button-next,
    .swiper-button-prev {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $white;
      color: $dark;
      &:hover {
        background-color: #ff3951;
        color: $white;
      }
      &::after {
        content: '';
      }
    }
    .swiper-button-prev {
      right: 60px;
      left: auto;
    }
    .swiper-button-next {
      right: 0;
    }
  }
  
  //Integration
  .digi-integration {
    padding-top: 200px;
    padding-bottom: 200px;
    .digi-testimonial {
      margin-top: -500px;
      padding-bottom: 120px;
    }
  }
  @media (min-width: 320px) and (max-width: 991px){
    .digi-integration{
      padding-top: 60px;
      padding-bottom: 60px;
      .digi-testimonial {
        margin-top: -400px;
        padding-bottom: 70px;
      }
    }
  }
  .int-icon-one {
    ul {
      li {
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        &:nth-child(1) {
          width: 56px;
          left: 114px;
          height: 56px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(2) {
          top: 95px;
          width: 80px;
          height: 80px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(3) {
          width: 75px;
          height: 75px;
          right: 0;
          top: 43px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(4) {
          width: 56px;
          left: 114px;
          height: 56px;
          top: 166px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(5) {
          width: 75px;
          height: 75px;
          right: 0;
          top: 210px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(6) {
          width: 56px;
          left: 60px;
          height: 56px;
          top: 226px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
      }
    }
  }
  .int-icon-two {
    ul {
      li {
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        &:nth-child(1) {
          width: 56px;
          left: 60px;
          height: 56px;
          top: 0;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(2) {
          top: 95px;
          width: 80px;
          height: 80px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(3) {
          width: 75px;
          height: 75px;
          right: 0;
          top: 43px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(4) {
          width: 56px;
          left: 114px;
          height: 56px;
          top: 166px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(5) {
          width: 56px;
          height: 56px;
          right: 0;
          top: 210px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
        &:nth-child(6) {
          width: 56px;
          left: 60px;
          height: 56px;
          top: 226px;
          background: #ffffff;
          box-shadow: 20px 20px 82px rgba(33, 38, 106, 0.1);
        }
      }
    }
  }

  
  /* Index 12 */
.bg-black {
    background-color: $black;
  }
  /* Hero Twelve */
  .gr-text {
    background: linear-gradient(287.85deg, #ff0766 0%, #ff7e5d 95.32%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .game-bg-dark {
    background-color: $black;
  }
  .game-btn-mdm {
    display: inline-block;
    padding: 16px 35px;
    background: linear-gradient(287.85deg, #ff0766 0%, #ff7e5d 95.32%);
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
  }
  .slider {
    padding: 230px 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .btn-gradient {
    background: linear-gradient(287.85deg, #ff0766 0%, #ff7e5d 95.32%);
    border-radius: 50px;
    padding: 16px 35px;
    display: inline-block;
    color: var(--bs-white);
    text-decoration: none;
  }
  .btn-gradient:hover {
    color: #fff;
  }
  
  /* Server */
  .server-circle {
    position: absolute;
    top: -97px;
    left: -24%;
    z-index: 2;
  }
  @media (min-width: 320px) and (max-width: 768px) {
    .server-circle {
      display: none;
    }
  }
  .server-list {
    background-color: #1b1b1b;
    position: relative;
    padding: 25px 20px;
    border-radius: 6px;
    overflow: hidden;
  }
  .server-list::before {
    background: linear-gradient(95.45deg, #0082f8 0.64%, #1c40f2 98.23%);
    filter: blur(100px);
    content: "";
    height: 124px;
    width: 124px;
    border-radius: 50px;
    position: absolute;
    left: -127px;
    bottom: -20px;
  }
  .server-list::after {
    background: linear-gradient(95.45deg, #0082f8 0.64%, #1c40f2 98.23%);
    content: "";
    filter: blur(100px);
    height: 124px;
    width: 124px;
    border-radius: 50px;
    position: absolute;
    top: -127px;
    right: -20px;
  }
  .server-list h5 {
    font-size: 18px;
  }
  .game-card {
    background-color: #1b1b1b;
    border-radius: 6px;
  }
  .card-top {
    padding: 25px;
  }
  .card-top h4 {
    color: var(--bs-white);
    font-size: 20px;
    font-weight: 500;
  }
  .card-bottom a {
    background: linear-gradient(287.85deg, #ff0766 0%, #ff7e5d 95.32%);
    text-align: center;
    border-radius: 0 0 6px 6px;
    padding: 16px 20px;
    color: var(--bs-white);
    text-decoration: none;
  }
  .game-img li:nth-child(2) {
    margin-left: -20px;
  }
  .game-img li:nth-child(3) {
    margin-left: -20px;
  }
  .game-img li:nth-child(4) {
    margin-left: -20px;
  }
  /* Game Services */
  .game-service-bg {
    background-image: url("../img/service-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .game-service-wrapper {
    background-color: #1b1b1b;
    border-radius: 6px;
    padding: 40px 25px;
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 320px) and (max-width: 768px) {
    .game-services.ptb-100 {
      padding: 0;
    }
    .mt--200 {
      margin-top: 0;
    }
    .mb--200 {
      margin-bottom: 0;
    }
  }
  .game-service-wrapper::before {
    background: linear-gradient(95.45deg, #0082f8 0.64%, #1c40f2 98.23%);
    filter: blur(100px);
    content: "";
    height: 124px;
    width: 124px;
    border-radius: 50px;
    position: absolute;
    left: -127px;
    bottom: -20px;
  }
  .game-service-wrapper::after {
    background: linear-gradient(95.45deg, #0082f8 0.64%, #1c40f2 98.23%);
    content: "";
    filter: blur(100px);
    height: 124px;
    width: 124px;
    border-radius: 50px;
    position: absolute;
    top: -127px;
    right: -20px;
  }
  .game-service-icon {
    width: 60px;
    height: 60px;
    background: #262626;
    text-align: center;
    border-radius: 50px;
    line-height: 60px;
  }
  
  /* Game Features */
  .big-circle {
    position: absolute;
    right: -300px;
    top: 40px;
  }
  .game-feature {
    background-color: #1b1b1b;
    border-radius: 10px;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
  }
  .game-feature::before {
    background: linear-gradient(95.45deg, #0082f8 0.64%, #1c40f2 98.23%);
    filter: blur(100px);
    content: "";
    height: 124px;
    width: 124px;
    border-radius: 50px;
    position: absolute;
    left: -127px;
    bottom: -20px;
  }
  .game-feature::after {
    background: linear-gradient(95.45deg, #0082f8 0.64%, #1c40f2 98.23%);
    content: "";
    filter: blur(100px);
    height: 124px;
    width: 124px;
    border-radius: 50px;
    position: absolute;
    top: -127px;
    right: -20px;
  }
  .game-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background-color: #26282e;
    text-align: center;
    line-height: 60px;
  }
  
  .feature-ellipse {
    position: absolute;
    left: 10px;
    top: -50px;
  }
  
  @media (min-width: 320px) and (max-width: 768px) {
    .feature-ellipse {
      display: none;
    }
    .big-circle {
      display: none;
    }
  }
  /* Counter */
  .game-counter-bg {
    /* background-image: url("/counter-bg.png"); */
    background-repeat: no-repeat;
    background-size: cover;
  }
  .game-price {
    background-color: #0f0f0f;
  }
  .single-game-price {
    background-color: #1b1b1b;
    border-radius: 15px;
    padding: 50px 24px;
    position: relative;
    overflow: hidden;
    ul {
      li {
        color: $gray-300;
        font-size: $font-size-sm;
      }
    }
  }
  .single-game-price.active::before {
    background: linear-gradient(95.45deg, #0082f8 0.64%, #1c40f2 98.23%);
    filter: blur(100px);
    content: "";
    height: 124px;
    width: 124px;
    border-radius: 50px;
    position: absolute;
    left: 50px;
    bottom: -20px;
  }
  .single-game-price.active::after {
    background: linear-gradient(95.45deg, #0082f8 0.64%, #1c40f2 98.23%);
    content: "";
    filter: blur(100px);
    height: 124px;
    width: 124px;
    border-radius: 50px;
    position: absolute;
    top: 50px;
    right: -20px;
  }
  .single-game-price p {
    color: rgba(255, 255, 255, 0.8);
  }
  .price-icon {
    background-color: rgba(255, 255, 255, 0.05);
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
  }
  .game-price-btn a {
    padding: 16px 0;
    color: $white;
    border: 1px solid $white;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium-light;
    justify-content: center;
  }
  .game-price-btn a:hover {
    background: linear-gradient(287.85deg, #ff0766 0%, #ff7e5d 95.32%);
    border: 1px solid transparent;
    color: $white;
  }
  
  /* Game Faq */
  .game-faq {
    background-image: url("../img/faq-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .game-accordion .accordion-item {
    border-radius: 5px !important;
    margin-bottom: 20px;
    background-color: #151515;
    border: none;
  }
  .game-accordion .accordion-button {
    background-color: #1b1b1b;
    border-bottom: none;
    border-radius: 5px !important;
    color: var(--bs-white);
  }
  
  .game-accordion .accordion-button::after {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    content: "+";
    font-size: 20px;
    background-color: #383838;
    background-image: none;
    font-weight: 100;
    color: var(--bs-white);
  }
  
  .game-accordion .accordion-button:not(.collapsed)::after {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    background: linear-gradient(95.45deg, #0082f8 0.64%, #1c40f2 98.23%);
    content: "-";
    font-size: 20px;
    transform: translate(0);
    transform: rotate(0deg);
  }
  
  /* Game Review */
  .sh-feedback-shape {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  @media (min-width: 320px) and (max-width: 768px) {
    .sh-feedback-shape {
      display: none;
    }
  }
  .clients-thumb {
    margin-top: -35px;
  }
  .sh-feedback-wrapper {
    padding: 0 30px 40px;
    box-shadow: 0 15px 60px rgba(151, 151, 151, 0.05);
    background-color: $github;
    border-radius: 10px;
  }
  .spacer {
    border: 0;
    border-bottom: 1px solid $gray-800;
    margin: 20px 0;
  }
  /* Game CTA */
  .game-cta {
    background-color: $github;
  }
  
  /*Game Footer */
  .game-footer {
    padding-top: 220px;
    margin-top: -220px;
  }
  .game-footer-bg {
    background-color: #1b1b1b;
  }
  .game-footer-nav h5,
  .game-award h5,
  .game-payment h5 {
    font-size: 18px;
  }
  .game-footer-nav h5::after {
    background: linear-gradient(
      90deg,
      rgba(0, 130, 248, 1) 0%,
      rgba(28, 64, 242, 1) 100%
    );
    content: "";
    position: absolute;
    height: 3px;
    width: 40px;
    left: 0;
    bottom: -8px;
  }
  .game-footer-nav ul li a {
    color: $secondary;
    font-size: $font-size-sm;
    &:hover {
      color: $gray-200;
    }
  }
  .game-footer-newsletter p {
    color: $secondary;
  }
  .g-news-letter {
    width: 90%;
  }
  @media (max-width: 992px) {
    .g-news-letter {
      width: 100%;
    }
  }
  .g-news-letter .form-control {
    height: 60px;
    border-radius: 50px;
    background: rgba(27, 27, 27, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  .g-news-letter button {
    position: absolute;
    border: none;
    top: 0;
    right: 0;
    border-radius: 0 50px 50px 0;
    background: linear-gradient(287.85deg, #ff0766 0%, #ff7e5d 95.32%);
    padding: 16px 40px;
    color: $white;
    font-weight: $font-weight-medium-light;
  }
  .c-left p,
  .c-right {
    font-size: 15px;
  }

  

  /************* help desk hero section *************/ 
.hd-hero-section {
    background-image: $hd-light-gradient; 
    padding: 140px 0 310px 0;
    .hd-hero-man {
        left: 150px; 
        bottom: 80px;
    }
    .hd-hero-girl {
        right: 80px; 
        bottom: 80px;
    }
    .desk-girl {
        left: 20%;
        top: 90px;
        z-index: -1;
    }
    .line-plan {
        left: calc(50% + 30px);
        bottom: -60px;
        transform: translateX(-50%);
    }
    .arrow-line-shape {
        left: 100px;
        top: 74px;
    }
    @include screen-1800 {
        .hd-hero-man, .hd-hero-girl {
            width: 400px;
        }
        .desk-girl {
            left: 190px;
        }
    }
    @include screen-1440 {
        .hd-hero-man {
            width: 300px;
            left: 70px;
        }
    }
    @include screen-1200 {
        .desk-girl {
            display: none;
        }
        .hd-hero-man {
            left: 40px;
        }
        .hd-hero-girl {
            right: 0;
        }
    }
    @include screen-992 {
        padding: 120px 0; 
        .hd-hero-man, .hd-hero-girl {
            display: none;
        }
    }
}
.hd-hero-title {
    mark {
        color: $hd-primary;
        position: relative;
        .hd-line-shape {
            bottom: -8px;
            left: 10px;
        }
    }
}
.hd-hero-form {
    border: 1px solid $border-color;
    max-width: 560px;
    margin: 0 auto;
    padding: 8px 7px 8px 16px;
    border-radius: 6px;
    input {
        border: 0; 
        width: 100%;
        outline: 0; 
        padding-right: 15px;
    }
}

/************* how it works section *************/ 
.hd-htw-section {
    mark {
        color: $hd-primary;
        .arrow-rounded {
            left: -12px; 
            top: -3px;
            width: 140px;
        }
    }
    .arrow-multiple {
        left: 280px;
        bottom: 0;
    }
}

.hd-description {
    &.hd-border-right {
        &::after {
            content: ''; 
            position: absolute;
            right: -24px; 
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 120px;
            background-color: rgba($hd-border-color, 0.5);
        }
    }
    @include screen-992 {
        &.hd-border-right {
            &::after {
                display: none;
            }
        }
    }
}

.htw-single-box {
    .number-serial {
        font-size: 90px;
        font-family: $headings-font-family; 
        font-weight: 800;
        z-index: -1;
        right: 24px;
        top: 0;
        color: $hd-secondary;
        line-height: 1.3em; 
        opacity: 0.1;
    }
    &.mts-50 {
        margin-top: 50px;
    }
    &.mts-100 {
        margin-top: 100px;
    }
    @include screen-1200 {
        &.mts-50, &.mts-100 {
            margin-top: 0;
        }
    }
}

.hd-title {
    h2, h3 {
        mark {
            color: $hd-primary;
            .line-shape {
                left: 0; 
                bottom: -12px;
                width: 100%;
            }
        }
    }
}

/************** support section ***********/
.hd-accordion {
    max-width: 536px;
    .accordion-item {
        border: 1px solid $border-color;
        border-radius: 6px;
        + .accordion-item {
            margin-top: 24px;
        }
        &.active {
            box-shadow: $mk-shadow;
            .accordion-header {
                a {
                    &::after {
                        font-family: 'Font Awesome 6 Free';
                        content: '\f068';
                        font-size: 20px;
                    }
                }
            }
        }
    }
    .accordion-header {
        a {
            font-family: $headings-font-family; 
            font-weight: 700;
            display: block;
            padding: 16px 24px;
            position: relative;
            &::after {
                content: '\2b';
                font-family: 'Font Awesome 6 Free';
                font-weight: 900;
                font-size: 20px;
                position: absolute;
                right: 24px;
            }
        }
    }
    @include screen-992 {
        max-width: 100%;
    }
}

.hd-support-right {
    .arrow-blue {
        right: 80px;
        bottom: 0;
    }
}

.hd_exbox {
    background-image: $hd-light-gradient-2;
    padding: 1px;
    border-radius: 15px;
    bottom: 16px;
    left: 16px;
    .hd_exbox_content {
        text-align: center;
        padding: 24px 12px 32px;
        border-radius: 15px;
        h2 {
            color: $hd-primary;
            font-weight: 600;
        }
        p {
            font-weight: 600;
            color: $gray-800;
        }
    }
}
.hd-support-box-wrapper {
    gap: 16px;
}
.hd-support-box {
    padding: 16px 24px;
    span {
        font-size: 20px;
    }
    p {
        font-weight: 600;
    }
}

/************* brands section start **********/
.hd-brands-section {
    .hd-brands-box {
        padding: 90px 40px;
        background-color: $hd-dark;
        border-radius: 12px;
    }
}

.dark-explore-btn {
    color: $white;
    font-weight: 600;
    transition: $transition-base; 
    &:hover {
        color: $hd-primary;
    }
}

.hd-brands-wrapper {
    gap: 0; 
    .hd-single-brand {
        width: 25%;
        min-height: 64px;
        display: inline-flex; 
        align-items: center;
        justify-content: center;
        padding: 15px 18px;
        &.border-line-right {
            border-right: 1px solid rgba($hd-border-color, 0.15);
        }
        &.border-line-bottom {
            border-bottom: 1px solid rgba($hd-border-color, 0.15);
        }
        @include screen-576 {
            width: 33%;
            &.border-line-right, &.border-line-bottom {
                border-right: 0; 
                border-bottom: 0;
            }
        }
        @include screen-460 {
            width: 50%;
        }
    }
}

/************* pricing section ************/ 
.hd-pricing-section {
    background-color: $hd-bg;
    padding-bottom: 180px;
    .arrow-shape {
        left: 70px;
        top: 50px;
    }
    @include screen-576 {
        padding-bottom: 80px;
    }
}

.hd-pricing-single {
    padding: 40px 32px;
    border-radius: 12px;
    &::after {
        content: ''; 
        position: absolute;
        left: 43%;
        top: 0; 
        width: 1px; 
        height: 100%;
        background-color: $mk-border;
    }
    .hd-pricing-info {
        text-align: center;
        p {
            font-size: 14px;
        }
        .hd-pricing-amount {
            sup {
                font-size: 24px;
            }
            span {
                font-size: 16px;
            }
        }
    }
    ul.hd-pricing-features {
        padding-left: 32px;
        margin: 0;
        li {
            font-size: $font-size-sm;
            + li {
                margin-top: 12px;
            }
            span {
                color: $hd-success;
            }
        }
    }
    @include screen-768 {
        &::after {
            display: none;
        }
        ul.hd-pricing-features {
            padding-left: 0;
            margin-top: 32px;
            text-align: center;
        }
    }
}


/************** faq section start ************/
.hd-faq-section {
    @include screen-576 {
        padding-top: 80px;
        overflow: hidden;
    }
}
.hd-chat-box {
    background-color: $hd-secondary;
    border-radius: 12px;
    padding: 40px 32px 0;
    margin-top: -60px;
    .hd-explore-btn {
        font-size: 18px;
        font-weight: 500; 
        color: $white;
        text-decoration: underline;
        transition: $transition-base; 
        &:hover {
            color: $hd-primary;
        }
    }
    @include screen-576 {
        margin-top: 0;
    }
}

.hd-accordion2 {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: $hd-shadow;
    max-width: 100%;
    .accordion-item {
        border-radius: 0;
        border: 0;
        + .accordion-item {
            margin-top: 0;
            border-top: 1px solid rgba($hd-border-color, 0.3);
        }
        &.active {
            box-shadow: none;
        }
    }
    .accordion-header {
        a {
            font-weight: 600;
        }
    }
}


/*************** call to action ***********/ 
.hd-cta-box {
    padding: 70px 32px;
    border-radius: 12px;
    .box-shape {
        left: 70px;
        bottom: 30px;
    }
    .box-shape-2 {
        right: 40px;
        bottom: 30px;
    }
    .hd-cta-box-content {
        max-width: 570px;
        margin: 0 auto;
    }
    .cta-btns {
        gap: 32px;
    }
}
.hd-video-btn {
    color: $headings-color;
    font-weight: 600;
    transition: $transition-base;
    span {
        width: 56px;
        height: 56px;
        border: 1px solid $hd-primary;
        color: $hd-primary;
    }
    &:hover {
        color: $hd-primary;
    }
}


/************ insurance hero section ***************/ 
.ins-hero-section {
    margin-top: -100px;
    padding: 160px 0 120px 0;
    z-index: 1;
    .rectangle-shape {
        z-index: -1;
    }
    .ins-hero-curve {
        z-index: 2;
    }
    .arrow-shape {
        right: 26%; 
        bottom: 500px;
        z-index: -1;
    }
    .heart-sign {
        width: 70px; 
        height: 70px;
        font-size: 30px;
        left: 26%;
        bottom: 290px;
    }
    .hero-play {
        width: 90px; 
        height: 90px;
        font-size: 30px;
        color: $ins-primary;
        right: 30%; 
        bottom: 400px;
        transition: $transition-base; 
        z-index: 1;
        i {
            line-height: 0;
        }
        &:hover {
            transform: translateY(-6px);
        }
    }
    .hero-content {
        img {
            position: relative;
            z-index: 10;
        }
    }
    @include screen-1920 {
        padding-bottom: 60px;
    }

    @include screen-992 {
        padding-bottom: 0;
    }

    @include screen-576 {
        .hero-play {
            width: 60px; 
            height: 60px;
            font-size: 24px;
            bottom: 200px;
        }
    }
}

/************ insurance service section ************/ 
.ins-service-top {
    margin-top: -140px;
    position: relative; 
    z-index: 2;
}
.ins-service-contact {
    padding: 40px 30px;
    box-shadow: $ins-shadow;
    .icon-wrapper {
        background: $ins-warning;
        width: 50px; 
        height: 50px;
    }
}

.ins-brand-slider {
    .ins-brand-single {
        height: 58px;
        display: inline-flex; 
        align-items: center; 
        justify-content: center;  
        border-radius: 4px;
        transition: $transition-base;
        &:hover {
            background-color: $white;
        }
    }
}

.ins-title {
    .subtitle {
        color: $ins-primary;
    }
    mark {
        padding: 0; 
        background: transparent;
        color: $ins-primary;
    }
}

 .ins-service-card {
    transition: $transition-base;
    h5 {
        transition: $transition-base; 
        &:hover {
            color: $ins-primary;
        }
    }
    .ins-service-explore {
        color: $ins-secondary;
        transition: $transition-base; 
        svg {
            transition: $transition-base;
            path {
                transition: $transition-base;
            }
        }
        &:hover {
            color: $ins-primary;
            svg {
                stroke: $ins-primary;
                path {
                    stroke: $ins-primary;
                    fill: $ins-primary;
                }
            }
        }
    }
    &:hover {
        box-shadow: $ins-shadow;
    }
}

/************ insurance gallery ************/ 
.ins-gallery-info-btns {
    gap: 24px;
    .video-icon {
        i {
            background: $ins-warning;
            width: 50px; 
            height: 50px;
            border-radius: 50%;
            color: $white;
            display: inline-flex; 
            align-items: center; 
            justify-content: center;
        }
    }
}

.ins-gallery-slider {
    width: calc(100% + 500px); 
    margin-left: -250px;

    .swiper-control {
        position: absolute;
        bottom: 10px;
        width: 40px; 
        height: 40px; 
        border-radius: 50%;
        color: $white;
        z-index: 3;
        text-align: center; 
        line-height: 40px;
        &.swiper-btn-prev {
            background: $ins-secondary; 
            transition: $transition-base; 
            left: 62%;
            &:hover {
                background: $ins-primary;
            }
        }
        &.swiper-btn-next {
            background: $ins-primary;
            transition: $transition-base; 
            left: calc(62% + 55px);
            &:hover {
                background: $ins-secondary;
            }
        }
    }
    @include screen-768 {
        width: 100%;
        margin-left: 0;
    }
    @include screen-576 {
        .swiper-control {
            &.swiper-btn-prev {
                left: 64%;
            }
        }
    }
}

.ins-gallery-slide-single {
    padding-bottom: 25px;
    opacity: 0.3;
    transition: $transition-base;
    .ins-primary-btn {
        left: 40px; 
        bottom: -25px;
        opacity: 0;
        visibility: hidden;
        transition: 0.6s;
    }
    &.swiper-slide-active {
        opacity: 1;
        .ins-primary-btn {
            opacity: 1; 
            visibility: visible; 
            bottom: 0;
        }
    }
}

/*********** achievement section **********/
.ins-achivements-box {
    padding: 24px 0 14px;
    z-index: 1;
    &::before {
        content: ''; 
        position: absolute;
        left: -120px;
        bottom: -120px; 
        width: 200px;
        height: 200px;
        background: $ins-warning;
        opacity: 0.1;
        border-radius: 50%;
        z-index: -1;
    }
    &::after {
        content: ''; 
        position: absolute;
        right: -90px;
        top: -90px; 
        width: 200px;
        height: 200px;
        background: $ins-primary;
        opacity: 0.1;
        border-radius: 50%;
        z-index: -1;
    }
    .border-hr {
        width: 100%; 
        height: 1px;
        background: $ins-border-color;
        top: 50%;
        left: 0; 
        z-index: -1;
        transform: translateY(-50%);
    }
    .border-vr {
        width: 1px; 
        height: 100%; 
        background: $ins-border-color; 
        left: 50%; 
        top: 0; 
        z-index: -1;
        transform: translateX(-50%);
    }
}
.ins-achievement-box-item {
    padding: 34px;
    h3 {
        span {
            color: $ins-secondary;
        }
    }
    @include screen-576 {
        padding: 16px;
    }
}

.ins-info-list {
    max-width: 460px;
    li {
        + li {
            margin-top: 20px;
        }
        .icon-wrapper {
            width: 60px; 
            height: 60px; 
            font-size: 30px;
            &.bg-telegram {
                background: $telegram-bg;
            }
            &.bg-discord {
                background: $discord-bg;
            }
        }
    }
}

/*********** get in touch section **********/
.ins-contact-section {
    z-index: 1;
    &::before {
        content: ''; 
        position: absolute;
        left: 0; 
        top: 0; 
        width: 100%; 
        height: 100%; 
        background: linear-gradient(95.5deg, #FFFFFF 42.48%, rgba(255, 255, 255, 0) 63.05%);
        z-index: -1;
    }
    @include screen-1920 {
        &::before {
            width: 1930px;
        }
    }
}

.ins-contact-form {
    .ins-input-field {
        position: relative;
        label {
            position: absolute;
            left: 10px;
            top: -12px;
            font-size: 14px; 
            font-weight: 600;
            background: $white;
            padding: 0 8px;
        }
        input, select {
            padding: 13px 15px 10px;
            outline: 0;
            color: $ins-text;
            &::placeholder {
                color: $ins-placeholder; 
            }
        }
    }
}

/************ team section start ***********/ 
.ins-team-card {
    padding: 48px 24px 30px;
    transition: $transition-base;
    .ins-team-social {
        gap: 12px;
        a {
            width: 32px; 
            height: 32px; 
            background: $ins-light-color;
            border-radius: 4px;
            color: $ins-secondary;
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            transition: $transition-base;
        }
    }
    &:hover {
        box-shadow: $ins-shadow;
        .ins-team-social {
            a { 
                background: $ins-secondary; 
                color: $white;
                &:hover {
                    background: $ins-primary;
                }
            }
        }
    }
}

.ins-center-explore {
    a {
        color: $ins-primary;
        &:hover {
            color: $ins-secondary;
        }
    }
}

/*********** feedback section start *********/ 
.ins-feedback-section {
    background-repeat: no-repeat;
    background-position: center;
}
.ins-feedback-slider-wrapper {
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
    padding: 0 80px;

    .swiper-control-btn {
        width: 48px; 
        height: 48px;
        border-radius: 50%;
        text-align: center;
        line-height: 48px;
        color: $white;
        transition: $transition-base; 
        position: absolute;
        top: 50%; 
        transform: translateY(-50%);
        z-index: 1;

        &.swiper-btn-prev {
            background-color: $ins-secondary;
            left: -80px;
            &:hover {
                background-color: $ins-primary;
            }
        }
        &.swiper-btn-next {
            background-color: $ins-primary;
            right: -80px;
            &:hover {
                background-color: $ins-secondary;
            }
        }
    }
    @include screen-1200 {
        max-width: 100%; 
        padding: 0;
    }
}
.ins-feedback-content {
    .ins-feedback-author {
        img {
            width: 55px;
        }
    }
}

/************ subscription area start ************/ 
.ins-subscription {
    background: rgba($success, 7%);
    padding: 70px 24px;
    z-index: 1;
    .circle-shape-right {
        position: absolute;
        right: -180px; 
        top: -260px;
        width: 410px;
        height: 410px;
        background: $ins-warning-shape;
        border-radius: 50%;
        z-index: -1;
    }
    .circle-shape-left {
        position: absolute; 
        left: -180px; 
        bottom: -200px; 
        width: 410px; 
        height: 410px; 
        background: $ins-color-secondary-light;
        border-radius: 50%; 
        z-index: -1;
    }
    .circle-shape-top {
        position: absolute;
        left: 210px;
        top: -130px;
        width: 254px; 
        height: 254px; 
        border-radius: 50%;
        background: rgba($ins-color-secondary-light, 0.7);
        z-index: -1;
    }
    
}
.ins-sb-form {
    gap: 24px;
    input {
        padding: 12px 15px;
        min-width: 330px;
        outline: 0;
    }
    @include screen-576 {
        gap: 16px;
        input {
            min-width: 100%;
        }
    }
}


/************* blog section start **************/ 
.ins-blog-card {
    transition: $transition-base;
    .ins-feature-img {
        img {
            transition: $transition-base;
        }
    }
    .ins-blog-content {
        padding: 30px 24px 40px;
        .ins-blog-meta {
            span {
                font-size: 14px;
                font-weight: 500;
                i {
                    margin-right: 6px;
                }
            }
        }
        .ins-heading {
            transition: $transition-base; 
            &:hover {
                color: $ins-primary;
            }
        }
        .ins-service-explore {
            color: $ins-secondary;
            svg {
                path {
                    transition: $transition-base;
                }
            }
            &:hover {
                color: $ins-primary;
                svg {
                    path {
                        stroke: $ins-primary; 
                        fill: $ins-primary;
                    }
                }
            }
        }
    }
    &:hover {
        box-shadow: $ins-shadow;
        .ins-feature-img {
            img {
                transform: scale(1.03);
            }
        }
    }
}
.ins-btn-meta {
    padding: 5px 15px;
    background-color: rgba($ins-secondary, 0.1);
    color: $ins-secondary;
    display: inline-block;
    font-size: 13px;
    border-radius: 4px;
    font-family: $headings-font-family; 
    font-weight: 600;
    transition: $transition-base; 
    &:hover {
        background: rgba($ins-primary, 0.1); 
        color: $ins-primary;
    }
}

// Global
.fs-64 {
	font-size: clamp(1.6rem, 3.333vw + 1rem, 4rem);
}

.fch-40 {
	max-width: 40ch;
}

.it-company-color {
	color: $github;
}

.it-company-color-two {
	color: $dg-warning-color;
}

.it-company-color-three {
	color: $it-company-1;
}

.it-company-hover-color {
	&:hover {
		color: $white !important;
	}
}

.it-company-hover-color-two {
	&:hover {
		color: $github !important;
	}
}

.it-company-bg {
	background-color: $crm-primary;
}

.it-company-bg-two {
	background-color: $it-company-2;
}

.it-company-bg-three {
	background-color: $dg-warning-color;
}

.it-company-bg-four {
	background-color: $it-company-3;
}

.it-company-bg-five {
	background-color: $twitter;
}

.it-company-bg-six {
	background-color: $dg-warning-color;
}

.it-company-bg-hover {
	&:hover {
		background-color: $crm-primary;
	}
}

.rounded-6 {
	border-radius: 6px;
}

.rounded-10 {
	border-radius: 10px;
}

.it-company-title {
	@media(max-width: 767px) {
		font-size: 28px;
		line-height: 42px;
	}
}

// Global

// Header
.main-header.header-fixed-two {
	position: fixed;
	top: 0;
}

// Header

// Hero
.it-company-hero-area {
	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/it_company/hero_bg_overlay.png);
		z-index: -1;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom center;
		top: 0;
		left: 0;
	}

	.s-one {
		top: 165px;
		left: 50px;

		@media(max-width: 1600px) {
			display: none;
		}
	}

	.s-two {
		top: 160px;
		right: 115px;

		@media(max-width: 1070px) {
			display: none;
		}
	}
}

// Hero

// About
.it-company-about-area {
	.position-relative {
		.d-inline-block.pl-40 {
			@media(max-width: 1199px) {
				padding-left: 0;
			}

			h6 {
				br {
					@media(max-width: 575px) {
						display: none;
					}
				}
			}

			.d-flex.align-items-center {
				@media(max-width: 486px) {
					gap: 20px !important;
				}

				.it-company-social-icons {
					@media(max-width: 486px) {
						gap: 0 !important;
					}
				}
			}
		}
	}
}

.it-company-about-testimonial {
	padding-left: 20px;
	padding-top: 40px;
	padding-bottom: 20px;
	padding-right: 171px;

	@media(max-width: 575px) {
		padding-right: 20px;
	}
}

.t_about_img {
	right: -90px;
	top: -3px;

	@media(max-width: 575px) {
		display: none;
	}
}

.it-com-link {
	width: 40px;
	height: 40px;
}

.it-company-about-box {
	float: right;
	margin-top: -170px;

	@media(max-width: 1199px) {
		margin-top: 40px;
	}

	@media(max-width: 575px) {
		float: left;
		width: 100%;
		padding: 25px 15px !important;
	}

	h5 {
		br {
			@media(max-width: 394px) {
				display: none;
			}
		}
	}
}

.it-company-custom-border {
	width: 1008px;
	height: 200px;
	border-top: 1px solid;
	border-left: 1px solid;
	border-color: $crm-placeholder;
	left: 90px;
	top: -35px;

	@media(max-width: 1199px) {
		display: none;
	}
}

.it-company-about-area {
	.it-company-title {
		@media(max-width: 1399px) {
			margin-bottom: 40px;
		}
	}

	.s-one {
		right: 20px;
		bottom: -20px;

		@media(max-width: 1399px) {
			display: none;
		}
	}
}


// About

// Service
.it-company-service-area {
	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/it_company/service_overlay.png);
		z-index: -1;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;
		top: 0;
		left: 0;
	}
}

.it-company-service-item {
	@media(max-width: 1399px) {
		border-radius: 16px !important;
	}
}

// .it-company-service-item-overlay {
// 	position: relative;
// 	z-index: 1;

// 	&::after {
// 		position: absolute;
// 		content: "";
// 		width: 100%;
// 		height: 100%;
// 		background-image: url(../../assets/img/it_company/service_hover.png);
// 		z-index: -1;
// 		background-size: contain;
// 		background-repeat: no-repeat;
// 		background-position: center;
// 		top: 0;
// 		left: 0;
// 	}
// }

// Service

// Team

.it-company-team-area {
	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/it_company/team_overlay.png);
		z-index: -1;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;
		top: 0;
		left: 0;
	}
}

.it-company-team-social-icon {
	width: 30px;
	height: 30px;
	border: 2px solid $white;
	position: absolute;

	@media(max-width: 767px) {
		position: inherit;
	}

	&:nth-child(1) {
		top: 190px;
		right: 125px;

		@media(max-width: 1399px) {
			top: 175px;
		}

		@media(max-width: 1199px) {
			right: 170px;
		}

		@media(max-width: 991px) {
			top: 195px;
		}
	}

	&:nth-child(2) {
		top: 170px;
		right: 85px;

		@media(max-width: 1199px) {
			top: 145px;
			right: 135px;
		}

		@media(max-width: 991px) {
			top: 185px;
			right: 130px;
		}
	}

	&:nth-child(3) {
		top: 135px;
		right: 55px;

		@media(max-width: 1199px) {
			top: 100px;
			right: 120px;
		}

		@media(max-width: 991px) {
			top: 165px;
			right: 95px;
		}
	}
}

.it-company-team-item {
	transition: .8s;

	.it-company-team-social {
		transition: .8s;
		opacity: 0;
		visibility: hidden;

		@media(max-width: 767px) {
			opacity: 1;
			visibility: visible;
			margin-top: 20px;
		}
	}

	&:hover {
		box-shadow: 14.30445px 23.84075px 66.75411px 0px rgba(2, 0, 91, 0.10);

		.it-company-team-social {
			opacity: 1;
			visibility: visible;
		}
	}
}

// Team

// Project

.it-company-project-slider {
	margin-right: -320px;

	@media(max-width: 1199px) {
		margin-right: 0;
	}
}

.it-company-project-content {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 99.48%);
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: .5s;

	@media(max-width: 1399px) {
		padding-left: 20px;
	}

	p {
		padding: 3px 15px;
		width: max-content;
	}
}

.it-company-project-item {
	&:hover {
		.it-company-project-content {
			opacity: 1;
			visibility: visible;
		}
	}
}

.it-slider-nav {
	width: 30px;
	height: 30px;

	&:hover {
		background-color: $dg-warning-color !important;
	}
}

.it-company-slider__pagination {
	span {
		margin: 0 !important;
		width: 88px;
		height: 4px;
		background: $it-company-4;
		opacity: 1;
		border-radius: 0;

		&:hover,
		&.swiper-pagination-bullet-active {
			background: $dg-warning-color;
		}
	}
}

// Project

// Feature

.it-company-feature {
	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/it_company/feature_overlay.png);
		z-index: -1;
		background-size: auto;
		background-repeat: no-repeat;
		background-position: center;
		top: 0;
		left: 0;
	}
}

.it-company-feature-item-w {
	min-width: 250px;

	@media(max-width: 767px) {
		margin: 10px 0;
	}
}

.it-company-feature-item-w_left {
	min-width: 200px;

	@media(max-width: 767px) {
		text-align: center;
	}
}

.it-company-feature-img {
	bottom: -30px;
	left: 250px;
	opacity: 0;
	visibility: hidden;
	transition: .8s;

	@media(max-width: 991px) {
		display: none;
	}
}

.it-company-feature-item {
	transition: .8s;

	@media(max-width: 767px) {
		flex-direction: column;
	}

	a {
		opacity: 0;
		visibility: hidden;
		transition: .8s;

		@media(max-width: 767px) {
			opacity: 1;
			visibility: visible;
		}
	}

	&:hover {
		background-color: $dg-warning-color;
		border-radius: 0;

		.it-company-feature-img,
		a {
			opacity: 1;
			visibility: visible;
		}
	}
}

// Feature

// Support
.it-com-support-two {
	left: -260px;
	bottom: -190px;

	@media(max-width: 1399px) {
		left: -290px;
	}

	@media(max-width: 1199px) {
		display: none;
	}
}

.it-com-support {
	@media(max-width: 991px) {
		margin-top: 40px;
	}
}

.it-company-support-area.style-two {
	.it-com-support {
		@media(max-width: 991px) {
			margin-top: 0;
			margin-bottom: 40px;
		}
	}
}

// Support

// Testimonial

// .sc-feedback-slider {
// 	margin: -30px;
// 	padding: 30px;

// 	.swiper-slide {
// 		&.swiper-slide-active {
// 			.sc-feedback-card {
// 				margin: 0;
// 				margin-top: 30px;
// 			}
// 		}
// 	}

// 	.sc-feedback-card {
// 		margin: 30px;
// 	}
// }

.it-company-testimonial-area {
	.sc-feedback-card {
		padding-left: 20px;
		padding-right: 20px;
		border: 1px solid $crm-placeholder;
		border-radius: 10px !important;

		&:hover {
			// box-shadow: 14.30445px 23.84075px 66.75411px 0px rgba(2, 0, 91, 0.10);
		}
	}
}

.itc-testimonial-slide-dots {
	span {
		background: $it-company-5;

		&.swiper-pagination-bullet-active {
			background: $it-company-1;
		}
	}
}

// Testimonial

// Faq
.it-company-faq-area {
	.ca-accordion .accordion-item {
		border: 0;
		border-radius: 0;
	}

	.ca-accordion .accordion-button {
		font-size: 18px;
		font-weight: 500;
		padding: 0;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.ca-accordion .accordion-header {
		border-bottom: 1px solid $mk-border;
	}

	.ca-accordion .accordion-body {
		padding: 0;
		padding-top: 15px;
	}

	.s-one {
		bottom: 100px;
		left: 42px;

		@media(max-width: 1640px) {
			display: none;
		}
	}

	.s-two {
		top: 115px;
		right: 86px;

		@media(max-width: 1700px) {
			display: none;
		}
	}
}

// Faq

// Footer
.it-company-footer {
	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/it_company/footer_overlay.png);
		z-index: -1;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom center;
		top: 0;
		left: 0;
	}

	.rm-footer-top {
		padding: 0;

		&::after {
			display: none;
		}

		.footer-single-col {
			p {
				color: $dg-text-color;
			}

			li {
				a {
					color: $dg-text-color !important;
					font-weight: 400;

					&:hover {
						color: $white;
					}
				}
			}
		}

		.ca-two-newsletter-form .btn {
			background: $it-company-1;
		}

		.ca-two-newsletter-form .form-control {
			border-color: $mk-border;
			padding-bottom: 9.5px;
		}

		.footer-social-list li a:hover {
			background: $it-company-1;
		}
	}

	.rm-footer-bottom {
		@media(max-width: 767px) {
			padding-top: 20px;
		}
	}
}

// Footer


// Hero Nine
.dots img {
  position: absolute;
}
.dots .dot-1 {
  bottom: 20px;
  left: 65px;
  z-index: -1;
}
.dots .dot-2 {
  top: 115px;
  right: 25px;
  z-index: -1;
}
.bubble span {
  position: absolute;
  border-radius: 50%;
}
.bubble .bubble-1 {
  height: 160px;
  width: 160px;
  background-color: #175cff;
  left: 0;
  bottom: 10%;
}
.bubble .bubble-2 {
  height: 85px;
  width: 85px;
  background-color: #fff;
  right: 0;
  top: 30%;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
}
// Service
.single-service:hover {
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
}

// Brand Logo
.brand-logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 25px;
}
@media (min-width: 767px) and (max-width: 992px) {
  .brand-logo-grid {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 25px;
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  .brand-logo-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 25px;
  }
}
.brand-logo-grid li {
  width: 100%;
  border-radius: 20px 0 30px 0;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
  padding: 15px 30px 15px 30px;
  text-align: center;
}

// About
.about-icon-box img {
  width: 60px;
  height: 60px;
  line-height: 60px;
  padding: 15px;
  border-radius: 50%;
  background-color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
}
.about-icon-box h5 {
  font-size: 18px;
  font-weight: 500;
}

//Service Tab
.service-tabs .nav-pills {
  border-bottom: 2px solid var(--bs-secondary-light);
}

.service-tabs .nav-pills .nav-link {
  font-weight: 600;
  font-size: 18px;
  padding: 0;
  padding-bottom: 20px;
  color: #fff;
  position: relative;
}
@media (min-width: 767px) and (max-width: 992px) {
  .service-tabs .nav-pills {
    border-bottom: 0;
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  .service-tabs .nav-pills {
    border-bottom: 0;
  }
}
.service-tabs .nav-pills .nav-link.active,
.service-tabs .nav-pills .show > .nav-link {
  color: var(--bs-white);
  background: none;
  border-radius: 0;
}
.service-tabs .nav-pills .nav-link.active::after {
  position: absolute;
  content: "";
  bottom: -2px;
  height: 2px;
  width: 100%;
  left: 0;
  background-color: var(--bs-primary);
}
.tab-right-content h2 {
  font-size: 34px;
}
.tab-right-content p {
  font-size: 18px;
}
.tab-right-content ul li span {
  padding-left: 10px;
}

// Portfolio
// Tab
.tab-button .nav-pills .nav-link {
  margin: 0 15px;
  font-weight: 600;
  color: var(--body-color);
  padding: 0;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}
.tab-button .nav-pills .nav-link.active,
.tab-button .nav-pills .show > .nav-link {
  color: var(--bs-primary);
  background: none;
  border-radius: 0;
  border-bottom: 2px solid var(--bs-primary);
  transition: all 0.3s;
}
.single-portfolio-item .portfolio-item-img {
  position: relative;
}
.single-portfolio-item .portfolio-item-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  z-index: 2;
}
.single-portfolio-item:hover .portfolio-item-img::after {
  opacity: 1;
}

.single-portfolio-item img {
  border-radius: 10px;
  width: 100%;
}
.portfolio-info {
  position: absolute;
  left: 20px;
  bottom: 20px;
  visibility: hidden;
  z-index: 5;
  transition: all 0.3s ease-in-out;
  opacity: 0;
}
.single-portfolio-item:hover .portfolio-info {
  visibility: visible;
  opacity: 1;
}
.portfolio-info .categories {
  font-size: 16px;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.7);
}
// Portfolio Details
.portfolio-feature-img img {
  width: 100%;
}
// Testimonial Slider Three
.testimonialThreeSwiper .swiper-slide p {
  font-size: 18px;
}

// Price Header
.pricing-header {
  padding-bottom: 32px;
  border-bottom: 1px dashed var(--bs-secondary);
}


.hero-payment-gateway {
    background: url("../img/pay-h.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .payment-hero-img .h-shape {
    position: absolute;
    right: 0;
    top: 21%;
  }
  @media (min-width: 320px) and (max-width: 768px) {
    .payment-gateway-text {
      padding-top: 200px;
    }
    .payment-hero-img .h-shape {
      display: none;
    }
  }
  
  // Benifits
  .benifits-left ul li:nth-child(1) {
    position: absolute;
    top: 0;
    right: 8%;
  }
  .benifits-left ul li:nth-child(2) {
    position: absolute;
    right: 8%;
    bottom: -13%;
  }
  .benifits-left ul li:nth-child(3) {
    top: 0;
    position: absolute;
    left: -21%;
  }
  .benifits-left ul li:nth-child(4) {
    position: absolute;
    left: -12%;
    z-index: 3;
    bottom: -7%;
  }
  @media (min-width: 992px) and (max-width: 1200px) {
    .benifits-left ul li:nth-child(1),
    .benifits-left ul li:nth-child(3) {
      display: none;
    }
  }
  @media (min-width: 320px) and (max-width: 768px) {
    .benifits-left ul li:nth-child(1),
    .benifits-left ul li:nth-child(2),
    .benifits-left ul li:nth-child(3),
    .benifits-left ul li:nth-child(4) {
      display: none;
    }
  }
  .benifits-right-content {
    margin-bottom: 40px;
  }
  .single-benifit {
    border-radius: 10px;
    padding: 48px 20px;
  }
  .single-benifit p {
    padding: 16px 0;
  }
  .benifit-icon {
    border-radius: 3px;
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
  }
  .benifit-icon.one {
    background: linear-gradient(255.07deg, #f97956 -2.38%, #ff4579 102.02%);
  }
  .benifit-icon.two {
    background: linear-gradient(96.49deg, #0082f8 0%, #3c10f2 101.82%);
  }
  
  // Brand Logo
  .logo-grid-item {
    width: 100%;
    padding: 24px 30px;
    text-align: center;
  }
  // Payment Step
  .single-payment-step {
    box-shadow: 50px 20px 100px rgba(116, 116, 116, 0.15);
    border-radius: 6px;
  }
  
  //Payment Feature
  .btn-gradient-sqr {
    display: inline-block;
    padding: 16px 34px;
    border-radius: 6px;
    background: linear-gradient(255.07deg, #f97956 -2.38%, #ff4579 102.02%);
    color: $white;
    text-decoration: none;
    font-weight: 600;
  }
  .btn-gradient-sqr:hover {
    color: $white;
  }
  .card-shape ul li .counter-circle {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: $white;
  }
  // Payment Feature
  .payment-feature-mockup img {
    z-index: 5;
  }
  .payment-feature-mockup::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 0;
    width: 565px;
    height: 565px;
    background: linear-gradient(255.07deg, #f97956 -2.38%, #ff4579 102.02%);
    border-radius: 50%;
    z-index: -3;
  }
  .payment-feture-shape .shape-one {
    position: absolute;
    left: -5px;
    bottom: 165px;
    z-index: 5;
  }
  .payment-feture-shape .shape-two {
    position: absolute;
    top: -16px;
    right: 154px;
    z-index: 5;
  }
  .payment-feture-shape .shape-three {
    position: absolute;
    left: -44px;
    bottom: 136px;
  }
  .payment-feture-shape .shape-four {
    position: absolute;
    top: -40px;
    left: 168px;
    z-index: -2;
  }
  .payment-feture-shape .shape-five {
    position: absolute;
    top: -16px;
    right: 0;
  }
  @media (min-width: 992px) and (max-width: 1200px) {
    .payment-feature-mockup::before {
      left: 0;
    }
  }
  @media (max-width: 768px) {
    .payment-feture-shape .shape-two {
      right: 65px;
    }
    .payment-feture-shape .shape-four {
      left: 0;
    }
  }
  @media (min-width: 320px) and (max-width: 475px) {
    .payment-feature-mockup::before {
      display: none;
    }
    .payment-feture-shape .shape-one,
    .payment-feture-shape .shape-two {
      display: none;
    }
  }
  
  // Payment Counter
  .payment-counter-bg {
    background-color: #fdf7f7;
  }
  .card-shape ul li:nth-child(1) {
    position: absolute;
    left: -7%;
    top: 35%;
  }
  .card-shape ul li:nth-child(2) {
    position: absolute;
    top: -9%;
    left: 40%;
  }
  .card-shape ul li:nth-child(3) {
    position: absolute;
    bottom: -8%;
    right: 42%;
  }
  @media (min-width: 768px) and (max-width: 992px) {
    .card-shape ul li:nth-child(3) {
      bottom: -15%;
      right: 10%;
    }
    .card-shape ul li:nth-child(2) {
      position: absolute;
      top: -20%;
      left: 40%;
    }
  }
  @media (min-width: 320px) and (max-width: 475px) {
    .card-shape ul li:nth-child(1) {
      left: -1%;
    }
    .card-shape ul li:nth-child(3) {
      right: 10%;
      bottom: -10%;
    }
  }
  // Cta
  .payment-store-btn ul li a {
    background-color: $white;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: $black;
    padding: 10px 23px;
    line-height: 40px;
    transition: all 0.3s;
  }
  .payment-store-btn ul li a:hover {
    background: linear-gradient(255.07deg, #f97956 -2.38%, #ff4579 102.02%);
    color: var(--bs-light);
  }
  .payment-store-btn ul li a i {
    font-size: 30px;
    transition: all 0.3s;
  }
  .payment-store-btn ul li a > span {
    line-height: 20px;
    font-weight: 500;
    text-align: left;
  }
  .payment-store-btnul li a span span {
    font-size: 16px;
    display: block;
    line-height: 20px;
  }
  
  //News Letter
  .payment-news-letter {
    background: linear-gradient(0deg, #fff2f2 13.3%, rgba(255, 255, 255, 0) 100%);
  }
  .payment-email-form .mail-input.form-control {
    height: 56px;
    padding: 16px;
    width: 100%;
    border-radius: 5px 0 0 5px;
    border: 1px solid $border-color;
  }
  .payment-btn {
    padding: 14px 16px;
    background: linear-gradient(96.49deg, #0082f8 0%, #3c10f2 101.82%);
    color: var(--bs-white);
    font-size: 16px;
    border: 0;
    border-radius: 0 5px 5px 0;
    display: inline-block;
  }
  .p-cta-img::before {
    position: absolute;
    content: "";
    width: 518px;
    height: 518px;
    background: #fae0d9;
    border-radius: 50%;
    left: 15%;
    top: 5%;
    z-index: -3;
  }
  .payment-cta-shape li:nth-child(1) {
    position: absolute;
    left: 13%;
    bottom: 21%;
  }
  .payment-cta-shape li:nth-child(2) {
    position: absolute;
    top: -10%;
    right: 12%;
    z-index: -4;
  }
  .payment-cta-shape li:nth-child(3) {
    position: absolute;
    left: 20%;
    top: 10%;
  }
  .payment-cta-shape li:nth-child(4) {
    position: absolute;
    right: 12%;
    top: 24%;
  }
  .payment-cta-shape li:nth-child(5) {
    position: absolute;
    bottom: 1%;
  }
  @media (min-width: 1200px) {
    .p-cta-img::before {
      left: 15%;
    }
    .payment-cta-shape li:nth-child(2) {
      right: 23%;
    }
  }
  @media (min-width: 992px) and (max-width: 1200px) {
    .p-cta-img::before {
      left: 2%;
    }
  }
  @media (min-width: 320px) and (max-width: 475px) {
    .p-cta-img::before {
      display: none;
    }
    .payment-cta-shape li:nth-child(1),
    .payment-cta-shape li:nth-child(3),
    .payment-cta-shape li:nth-child(4),
    .payment-cta-shape li:nth-child(5) {
      display: none;
    }
  }

  
  // Global
.ff-risk-pri {
	font-family: 'Plus Jakarta Sans', sans-serif;
}

.fs-42 {
	font-size: clamp(2rem, 2.1875vw + 1rem, 2.62rem);
}

.fw-700 {
	font-weight: 700;
}

.fw-800 {
	font-weight: 800;
}

.flh-26 {
	line-height: 26px;
}

.flh-28 {
	line-height: 28px;
}

.flh-44 {
	line-height: 44px;
}

.flh-56 {
	line-height: 56px;
}

.fch-14 {
	max-width: 14ch;
}

.fch-50 {
	max-width: 50ch;
}

.risk-title {
	@media(max-width: 767px) {
		font-size: 24px;
		line-height: 42px;
	}
}

.risk-gd-text {
	background: linear-gradient(270deg, #007FFF 26.08%, #FF4D54 116.12%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.risk-highlight-color {
	background: linear-gradient(270deg, #007FFF -40.1%, #FF4D54 -2.86%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.risk-sub-text {
	color: $risk-color-1;
}

.risk-color {
	color: $dark-un !important;
}

.risk-color-two {
	color: $risk-color-2;
}

.risk-gd-bg {
	background: linear-gradient(270deg, #007FFF -29.66%, #FF4D54 117.57%);
}

.risk-bg-color {
	background-color: $risk-color-1;
}

.risk-bg-color-two {
	background-color: $risk-color-3;
}

.risk-bg-color-three {
	background-color: $risk-color-4;
}

.risk-click-btn {
	width: 88px;
	height: 88px;
	right: 0;
	bottom: 0;
}

.risk-outline-btn {
	border: 1px solid $risk-color-1;

	&:hover {
		background-color: $risk-color-1;
		color: $white !important;
	}
}

.risk-btn-bg {
	background-color: $risk-color-1;
}

.risk-btn-hover {
	&:hover {
		background-color: $white;
		color: $risk-color-1;
	}
}

.risk-outline-btn-hover {
	&:hover {
		background-color: transparent;
		outline: 1px solid $risk-color-1;
		color: $risk-color-1;
	}
}

.risk-hover-text-white {
	&:hover {
		color: $white;
	}
}

.rounded-8 {
	border-radius: 8px;
}

.risk-border-hover {
	&:hover {
		background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box,
			linear-gradient(324.79deg, #007FFF -4.77%, #FF4D54 107.43%) border-box;
		border: 1px solid transparent !important;
	}
}

.risk-border-left {
	border-left: 1px solid;
}

.risk-border-color {
	border-color: #FFFFFF1A;
}

.risk-gd-border-line {
	height: 2px;
	background: linear-gradient(270deg, rgba(0, 25, 60, 0) 1.13%, #4DAAFF 63.18%, rgba(0, 25, 60, 0) 105.56%);
}

.rounded-12 {
	border-radius: 12px;
}

.risk-shadow {
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
}

.ptb-40 {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

.pr-50 {
	padding-right: 50px;
}

.pb-100 {
	padding-bottom: 100px;
}

// Global

// Hero
.rm-hero {
	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-image: url("../../assets/img/risk_managment/hero_overlay.png");
		z-index: -1;
		background-repeat: no-repeat;
		background-position: top center;
		top: 0;
		left: 0;

		@media(max-width: 1759px) {
			background-image: none;
			background-color: $risk-color-3;
		}
	}

	.hero-shape {
		top: -115px;
		left: -233px;

		@media(max-width: 991px) {
			display: none;
		}
	}
}

.rm-hero-title {
	text-indent: 45px;

	@media(max-width: 1399px) {
		text-indent: 0;
		font-size: clamp(2rem, 3.0vw + 1rem, 4.5rem);
	}

	.text-ind {
		display: inline-block;
		text-indent: 140px;

		@media(max-width: 1399px) {
			text-indent: 0;
		}
	}
}

.risk-customer-area {
	@media(max-width: 1399px) {
		margin-top: 30px;
	}

	@media(max-width: 991px) {
		margin-bottom: 30px;
	}
}

.risk-customer-logo-wrapper {
	@media(max-width: 1199px) {
		gap: 20px !important;
		;
	}
}

.risk-customer-logo {
	transition: .5s;
	opacity: .5;

	&:hover {
		opacity: 1;
	}
}

.risk-social {
	position: absolute;
	right: -230px;
	bottom: 160px;

	@media(max-width: 1759px) {
		right: -165px;
	}

	@media(max-width: 1619px) {
		right: -115px;
	}

	@media(max-width: 1499px) {
		right: -70px;
	}

	@media(max-width: 1023px) {
		display: none !important;
	}

	a {
		color: $white;
		font-weight: 700;
		opacity: .5;
		transform: rotate(-90deg);

		&:hover {
			opacity: 1;
		}
	}
}

// Hero

// Info Card 
.rm-info-card-area {
	h2 {
		@media(max-width: 991px) {
			margin-bottom: 0 !important;
		}
	}
}

.risk-info-card {
	h5 {
		span {
			position: relative;
			display: inline-block;
			height: 2px;
			width: 54px;
			margin-right: 12px;
			top: -5px;
		}
	}

	&:hover {
		h5 {
			span.risk-bg-color {
				background: linear-gradient(270deg, #007FFF -29.66%, #FF4D54 117.57%);
			}
		}
	}
}

// Info Card 

// Service

.rm-service-area {
	.pr-40 {
		@media(max-width: 1399px) {
			padding-right: 0;
		}
	}

	.rm-service-img {
		@media(max-width: 991px) {
			margin-bottom: 30px;
		}
	}

	.s-one {
		top: 25px;
		right: 55px;
		opacity: 0.4;

		@media(max-width: 1399px) {
			right: 0;
		}

		@media(max-width: 1199px) {
			display: none;
		}
	}

	.s-two {
		top: 0;
		left: 31px;

		@media(max-width: 1600px) {
			display: none;
		}
	}

	.s-three {
		top: 0;
		right: 0;

		@media(max-width: 1600px) {
			display: none;
		}
	}
}

.risk-service-count {
	width: 30px;
	height: 30px;
	background: linear-gradient($risk-color-3, $risk-color-3) padding-box,
		linear-gradient(324.79deg, #007FFF -4.77%, #FF4D54 107.43%) border-box;
	border: 1px solid transparent !important;
}

.risk-counter-item {
	h3 {
		@media(max-width: 1399px) {
			font-size: 38px;
		}
	}

	@media(max-width: 991px) {
		padding-left: 0;
		border: 0;
	}
}

// Service

// Service Content
.rm-service-content-area {
	@media(max-width: 991px) {
		padding-top: 60px;
		padding-bottom: 0;
	}

	.s-one {
		right: 0;
		bottom: auto;

		@media(max-width: 991px) {
			display: none;
		}
	}
}

.rm-service-content-area-two {
	@media(max-width: 991px) {
		padding-bottom: 60px;
	}
}

// Service Content

// Cta
.rm-cta-area {
	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-image: url("../../assets/img/risk_managment/cta_bg_overlay.png");
		background-repeat: no-repeat;
		background-position: right center;
		left: 0;
		top: 0;
		z-index: -1;
	}
}

.risk-cta-img {
	left: 0;
	top: -35px;

	@media(max-width: 991px) {
		display: none;
	}
}

// Cta

// Contact
.risk-contact-form-bg {
	padding: 32px;
	padding-bottom: 42px;

	@media(max-width: 991px) {
		margin-top: 40px;
	}

	@media(max-width: 399px) {
		padding: 15px;
	}

	.s-one {
		right: 0;
		bottom: 0;
	}
}

.rm-contact-area {
	.s-two {
		bottom: -275px;
		right: 0;
	}

	.pl-50 {
		@media(max-width: 1199px) {
			padding-left: 0;
		}
	}
}

.risk-form-box {
	padding: 40px 32px;

	@media(max-width: 399px) {
		padding: 20px;
	}
}

.risk-input {
	border-radius: 4px;

	&::placeholder {
		color: $risk-color-5;
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: 16px;
		font-weight: 400;
	}
}

// Contact

// Testimonial
.risk-slider__controls {
	.risk-slider__pagination {
		margin-top: 50px;
		display: flex;
		gap: 8px;
		justify-content: center;

		span {
			background: $dark-un;
			width: 8px;
			height: 8px;
			border-radius: 50px;

			&.swiper-pagination-bullet-active {
				width: 18px;
				background: linear-gradient(270deg, #007FFF -29.66%, #FF4D54 117.57%);
				border-radius: 4px;
			}
		}
	}
}

.rm-testimonial-area {
	@media(max-width: 991px) {
		padding-top: 0;
	}

	.s-one {
		right: 0;
		bottom: 0;
	}

	.text-end {
		@media(max-width: 991px) {
			text-align: left !important;
			margin-top: 10px;
		}
	}

	.risk-bg-color-three {
		@media(max-width: 991px) {
			padding: 20px;
			padding-top: 30px;
		}
	}
}

// Testimonial

// Blog
.rm-blog-area {
	.text-center {
		P {
			@media(max-width: 767px) {
				margin-bottom: 0;
			}
		}
	}
}

// Blog

// Footer

.rm-footer-top {
	padding-top: 170px;
	padding-bottom: 150px;

	@media(max-width: 1199px) {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	&::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/risk_managment/footer_overlay.png);
		z-index: -1;
		background-repeat: no-repeat;
		background-position: top center;
		top: 0;
		left: 0;

		@media(max-width: 1759px) {
			background-image: none;
			background-color: $risk-color-3;
		}
	}

	.footer-nav-list li a,
	.footer-single-col p {
		color: $white;
		opacity: 1;
	}

	.ca-two-newsletter-form .form-control {
		background-color: $white;
	}

	.ca-two-newsletter-form .btn {
		background: linear-gradient(270deg, #007FFF -29.66%, #FF4D54 117.57%);
		border: 0;

		&::after {
			filter: invert(1);
		}
	}

	.footer-social-list {
		li {
			a {
				&:hover {
					background: linear-gradient(270deg, #007FFF -29.66%, #FF4D54 117.57%);
					color: $white !important;
					border: 0;
				}
			}
		}
	}

	.footer-single-col {
		@media(max-width: 1199px) {
			margin-bottom: 20px;
		}

		h3 {
			@media(max-width: 1199px) {
				margin-bottom: 0px;
			}
		}

		&.pl-40 {
			@media(max-width: 1199px) {
				padding-left: 0;
			}
		}
	}
}

// Footer



/************* marketing hero start ***********/ 
.mk-hero-section {
    padding: 130px 0 130px;
    z-index: 1;
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    .mk-hero-circle-line {
        z-index: -1;
        top: 200px;
    }
    .mk-hero-rectangle-shape {
        width: 115px; 
        height: 220px;
        background: $mk-primary-gradient; 
        top: -50px; 
        right: 100px;
        z-index: -1;
        border-radius: 50px;
        transform: rotate(180deg);
    }
    .mk-hero-dashboard {
        z-index: 2;
        .mk-gradient-hero-shape {
            width: 110px; 
            height: 110px; 
            background: $mk-primary-gradient;
            z-index: -1;
            left: 70px; 
            top: -10px;
        }
        .mk-secondary-gradient-shape {
            bottom: -30px; 
            left: 230px; 
            width: 70px; 
            height: 70px; 
            background: $mk-secondary-gradient;
            z-index: -1;
        }
        .mk-hero-doted {
            right: 110px;
            bottom: 50px;
            z-index: -1;
        }
    }
    @include screen-1440 {
        background-position: center bottom; 
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 80%;
            background-color: $mk-primary;
            z-index: -1;
        }
    }
}

.mk-hero-content {
    .mk-btn-group {
        gap: 24px;
        .mk-white-btn {
            min-width: 180px;
            text-align: center;
        }
    }
    .mk-hero-play {
        color: $white;
        transition: $transition-base;
        span {
            width: 52px; 
            height: 52px;
            background: $mk-secondary;
        }
    }
}

.mk-hero-dashboard {
    padding: 0 80px;
    .dashboard-sm {
        position: absolute;
        bottom: -100px;
        left: -80px;
    }
    @include screen-768 {
        padding: 0;
        .dashboard-sm {
            position: relative;
            bottom: 0; 
            left: 0;
            max-width: 90%;
            margin-left: -60px; 
            margin-top: -200px;
        }
    }
}

.mk-title {
    mark {
        color: $mk-secondary;
    }
}
span.mk-subtitle {
    padding: 4px 24px; 
    background: rgba($mk-secondary, 0.1);
    display: inline-block;
    color: $mk-secondary;
    border-radius: 3px;
}

/************ mk feature section start ***********/ 
.mk-explore-btn {
    color: $mk-secondary;
    transition: $transition-base; 
    svg {
        transition: $transition-base;
        path {
            transition: $transition-base;
        }
    }
    &:hover {
        color: $mk-primary;
        svg {
            fill: $mk-primary;
            path {
                fill: $mk-primary; 
                stroke: $mk-primary;
            }
        }
    }
}

.mk-feature-dashboard {
    z-index: 1;
    .mk-feature-dot {
        right: 30px; 
        top: 70px;
        z-index: -1;
    }
}

/************* business section **********/
.mk-business-pr {
    z-index: 1;
    .mk-doted-lg {
        right: 102px;
        top: 100px;
        z-index: -1;
    }
}

.mk-business-reports {
    li {
        + li {
            margin-top: 24px;
        }
        .icon-wrapper {
            width: 56px; 
            height: 56px;
            background: rgba($mk-secondary, 0.15);
            &.bg-mk-primary {
                background: rgba($mk-primary, 0.15);
            }
        }
    }
}

/*********** mk-sf-section **********/ 
.mk-sf-bottom {
    z-index: 1;
    .mk-wave {
        margin-left: -80px;
        bottom: -30px;
        z-index: -1;
    }
}
.mk-sf-item {
    padding: 48px 32px;
    border-radius: 10px;
    border: 1px solid $border-color;
    transition: $transition-base; 
    .icon-wrapper {
        width: 56px; 
        height: 56px;
        background: rgba($mk-blue, 0.15);
        &.warning-bg {
            background: rgba($ins-warning, 0.20);
        }
        &.mk-primary {
            background: rgba($mk-primary, 0.10);
        }
    }
    &:hover {
        box-shadow: $ins-shadow;
        border-color: transparent;
    }
}

/*********** pricing section **********/
.mk-offer-text {
    color: $mk-secondary;
}

.mk-pricing-control-wrapper {
    .mk-arrow-shape {
        width: 60px;
        transform: rotate(70deg);
        margin-left: 15px;
    }
}

.mk-pricing-control {
    border-radius: 3px;
    overflow: hidden;
    li {
        a {
            padding: 10px 24px;
            background: $white; 
            color: $mk-black;
            font-weight: 700;
            display: inline-block;
            &.active {
                background: $mk-secondary; 
                color: $white;
            }
        }
    }
}

.mk-pricing-column {
    padding: 56px 32px;
    .icon-wrapper {
        width: 56px;
        height: 56px;
        background-color: rgba($mk-primary, 0.05);
        &.blue-bg {
            background-color: rgba($mk-blue-deep, 0.1);
        }
        &.warning-bg {
            background-color: rgba($ins-warning, 0.15);
        }
    }
    .mk-price-title {
        span {
            font-size: 16px;
            font-weight: 400;
        }
    }
    .mk_yearly_price {
        display: none;
    }
    .mk-pricing-list {
        li {
            font-size: 14px;

            + li {
                margin-top: 12px;
            }
        }
    }
}

.mk-pricing-btn {
    background: rgba($mk-secondary, 0.1);
    color: $mk-secondary;
    padding: 16px 32px;
    border-radius: 4px;
    display: inline-block;
    transition: $transition-base; 
    &:hover {
        color: $white; 
        background-color: $mk-secondary;
    }
    &.btn-deep {
        background-color: $mk-secondary;
        color: $white;
        &:hover {
            background-color: rgba($mk-secondary, 0.1); 
            color: $mk-secondary;
        }
    }
}


/*********** integration area *********/ 
.mk-app-single {
    border: 1px solid $border-color;
    border-radius: 4px;
    transition: $transition-base;
    .icon-wrapper {
        width: 60px;
        height: 60px;
        font-size: 32px;
        &.instagram {
            background-color: rgba($instagram, 0.1);
            color: $instagram;
        }
        &.slack {
            background-color: rgba($slack, 0.1);
            color: $slack;
        }
        &.twitter {
            background-color: rgba($twitter, 0.1);
            color: $twitter;
        }
        &.figma {
            background-color: rgba($figma, 0.1);
            color: $figma;
        }
        &.facebook {
            background-color: rgba($facebook, 0.1);
            color: $facebook;
        }
        &.zapier {
            background-color: rgba($zapier, 0.1);
            color: $zapier;
        }
        &.drive {
            background-color: rgba($drive, 0.1);
            color: $drive;
        }
    }
    p {
        font-weight: 500;
    }
    &:hover {
        box-shadow: $ins-shadow;
        border-color: transparent;
    }
}

.text-mk-secondary {
    color: $mk-secondary;
}

/************* feedback section start ************/ 
.mk-carousel-control {
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    button[data-bs-target] {
        width: 80px;
        height: 80px;
        opacity: 1;
        border-radius: 50%;
        transform: scale(0.8);
        flex-shrink: 0;
        display: block;
        padding: 0;
        border: 2px solid $white;
        transition: $transition-base;
        img {
            display: block;
        }
        + button[data-bs-target] {
            margin-left: -35px;
        }
        &.active {
            transform: scale(1);
            border: 2px solid $mk-secondary;
            position: relative;
            z-index: 1;
        }
    }
}
.mk-feedback-right {
    z-index: 1;
    .mk-doted {
        position: absolute;
        left: 60px;
        top: 130px;
    }
}
.mk-feedback-slider {
    max-width: 500px;
    margin-top: -180px;
    position: relative;
    box-shadow: $mk-shadow;
}
.mk-feedback-single {
    padding: 32px 24px;
    border-radius: 10px;
    .mk-feedback-author {
        h6 {
            font-size: 16px;
            margin-bottom: 4px;
        }
        .mk-rating {
            li {
                color: $mk-star;
                font-size: 14px;
            }
        }
    }   
}

/************* subscribe area started ***********/ 
.mk-subscribe-box {
    padding: 80px 48px 110px;
    z-index: 1; 
    .sb-shape {
        z-index: -1;
    }
    .sb-object {
        right: 96px;
        top: 62px;
    }
    @include screen-1200 {
        .sb-object {
            right: 30px;
            max-width: 360px;
            z-index: -1;
        }
    }
    @include screen-992 {
        overflow: hidden;
    }
    @include screen-576 {
        padding: 60px 32px;
    }
}

.mk-sb-form {
    max-width: 490px;
    input[type='email'] {
        padding: 16px 21px;
        background-color: $white;
        border: 0; 
        font-size: 18px;
        width: 100%;
        outline: 0;
        border-radius: 4px 0 0 4px;
        font-weight: 500;
    }
    .mk-submit-btn {
        background-color: $mk-secondary;
        border: 0;
        padding: 18px 36px;
        color: $white;
        transition: $transition-base;
        font-weight: 600;
        border-radius: 0 4px 4px 0;
    }
}

.sb-meta-text {
    gap: 16px;
    span {
        font-weight: 600;
        color: $mk-black;
        display: inline-flex; 
        align-items: center;
        .dot {
            width: 16px; 
            height: 16px; 
            background-color: rgba($mk-secondary, 0.2);
            border-radius: 50%;
            display: inline-block;
            position: relative;
            &::before {
                content: ''; 
                position: absolute;
                left: 50%; 
                top: 50%; 
                transform: translate(-50%, -50%); 
                width: 8px; 
                height: 8px; 
                border-radius: 50%;
                background-color: $mk-secondary;
            }
        }
    }
}


/************** faq section start *********/
.mk-accordion {
    .accordion-item {
        border-radius: 4px;
        transition: $transition-base;
        .accordion-header {
            .accordion-button {
                box-shadow: none;
                font-weight: 600;
                &::after {
                    background-image: none;
                    width: auto; 
                    height: auto;
                    font-family: 'Font Awesome 6 Free';
                    font-size: 16px;
                    font-weight: 700;
                }
                &:not(.collapsed) {
                    &::after {
                        content: '\f068';
                    }
                }
                &.collapsed {
                    &::after {
                        content: '\2b';
                    }
                }
            }
        }
        + .accordion-item {
            margin-top: 16px;
        }
        &.active {
            box-shadow: $mk-shadow;
        }
    }
}

/********* trusted partners **********/ 
.mk-partners-list {
    display: flex; 
    align-items: center;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    .mk-partner-item {
        width: calc(20% - 24px);
        height: 70px;
        padding: 16px 24px;
        border: 1px solid $border-color;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: $transition-base;
        img {
            transition: $transition-base;
        }
        &:hover {
            background-color: $white;
            box-shadow: $ins-shadow;
            border-color: transparent;
            img {
                filter: grayscale(100);
            }
        }
    }
    @include screen-992 {
        .mk-partner-item {
            width: calc(33% - 24px);
        }
    }
    @include screen-576 {
        gap: 16px;
        .mk-partner-item {
            width: calc(50% - 12px);
        }
    }
}

/****************** hero section start ***************/ 
.sc-hero-section {
    background: $sc-primary-gradient;
    padding: 150px 0 200px 0;
    .hero-circle-shape {
        animation: 10s rotate-animation linear infinite;
        left: -10px;
        top: -10px;

    }
    .prism {
        top: 230px;
        left: 50%;
        animation: 10s rotate-animation linear infinite;
    }
    .coin {
        left: 50%;
        bottom: 280px;
        animation: 10s upsdown-sm linear infinite;
    }
    .skew-1 {
        width: 360px; 
        height: 70px;
        background-color: #FFB116;
        right: 25px;
        bottom: 65px;
        transform: skew(-15deg);
        z-index: 1;
    }
    .skew-2 {
        width: 536px;
        height: 70px;
        background-color: #807DFB;
        transform: skew(-20deg);
        left: 275px;
        bottom: 0;
        z-index: 1;
    }
    .hero-line {
        left: calc(50% + 1px);
        opacity: 0.7;
    }
    @include screen-1400 {
        .skew-1 {
            bottom: 25px;
        }
        .skew-2 {
            left: 125px;
        }
    }
    @include screen-1200 {
        .skew-1, .skew-2 {
            display: none;
        }
    }
    @include screen-768 {
        padding: 130px 0;
    }
}

.border-line-bg {
    /* background-image: url('../img/software-company/border-line.png'); */
    background-repeat: repeat-y;
    background-position: center top;
}

/********************************** service section start **********************/ 
.sc-shape-gradient {
    border-radius: 100px;
    background: $sc-shape-gradient;
}
.sc-shape-gradient-1 {
    width: 115px;
    height: 215px;
    left: 60px;
    top: 100px;
    transform: rotate(-90deg);
}
.sc-shape-gradient-2 {
    width: 115px;
    height: 390px;
    top: 0;
    right: 40px;
}
.sc-shape-gradient-3 {
    width: 115px;
    height: 214px;
    top: 35px;
    right: 200px;
}
.sc-service-card {
    padding: 40px 24px;
    box-shadow: $sc-box-shadow; 
    transition: $transition-base; 
    .explore-more {
        color: $dg-text-color;
        font-weight: 600;
        &:hover {
            color: $primary;
        }
    }
    .feature-icon {
        opacity: 0.15;
        transition: $transition-base;
    }
    &:hover {
        box-shadow: $sc-hover-shadow;
        .feature-icon {
            opacity: 1;
        }
    }
}

/********************** about section start ******************/
.sc-about-section {
    .sc-shape-gradient-4 {
        width: 100px;
        height: 214px;
        top: 100px;
        left: 40px;
    }
    .sc-shape-gradient-5 {
        width: 115px;
        height: 270px;
        bottom: 60px;
        left: 100px;
    }
    .sc-shape-gradient-6 {
        width: 115px;
        height: 214px;
        right: 80px;
        top: 150px;
        transform: rotate(90deg);
    }
}
.sc-about-left {
    .ab-shape {
        left: 90px; 
        top: 25px;
    }
    @include screen-1440 {
        .ab-shape {
            left: 0; 
            top: 0;
        }
    }
}
.sc-about-right {
    .doted-border {
        border-bottom: 1px dotted $sc-border-color;
    }
}
.sc-about-author {
    @include screen-576 {
        flex-wrap: wrap;
    }
}

/******************** feedback section start ****************/
.sc-feedback-section {
    .client-demo-1 {
        left: 100px;
        top: 150px;
        animation: 3s zoom-1 infinite linear;
    }
    .client-demo-2 {
        top: 330px;
        left: 125px;
        animation: 3.1s zoom-1 infinite linear;
    }
    .client-demo-3 {
        left: 80px; 
        bottom: 85px;
        animation: 3.2s zoom-1 infinite linear;
    }
    .client-demo-4 {
        right: 110px;
        top: 120px; 
        animation: 3.3s zoom-1 infinite linear;
    }
    .client-demo-5 {
        right: 155px;
        top: 330px;
        animation: 3.4s zoom-1 infinite linear;
    }
    .client-demo-6 {
        right: 110px; 
        bottom: 130px;
        animation: 3.5s zoom-1 infinite linear;
    }
    .client-demo {
        box-shadow: $dg-shadow-1;
    }
}
.sc-feedback-card {
    padding: 40px 24px;
    box-sizing: border-box;
    .sc-star-list {
        gap: 1px;
        li {
            color: $dg-warning-color;
            font-size: 15px;
        }
    }
} 

/************************** portfolio section start *********************/
.sc-portfolio-section {
    .sc-shape-gradient-7 {
        width: 115px;
        height: 214px;
        left: 75px;
        top: 150px;
        transform: rotate(-90deg);
    }
    .sc-shape-gradient-8 {
        width: 100px; 
        height: 214px;
        left: 40px;
        bottom: 100px;
    }
    .sc-shape-gradient-9 {
        width: 100px; 
        height: 214px;
        left: 180px;
        bottom: 0;
    }
    .sc-shape-gradient-10 {
        width: 115px; 
        height: 214px;
        right: 180px;
        top: 100px;
    }
    .sc-shape-gradient-11 {
        width: 115px; 
        height: 380px;
        right: 40px;
        top: 130px;
    }
}
.sc-portfolio-card {
    & > img {
        transition: $transition-base;
    }
    .pf-content-box {
        position: absolute;
        left: 24px;
        bottom: 0;
        max-width: 424px;
        transition: $transition-base; 
        opacity: 0; 
        visibility: hidden;
    }
    &:hover {
        & > img {
            transform: scale(1.02);
        }
        .pf-content-box {
            opacity: 1;
            visibility: visible;
            bottom: 24px;
        }
    }
    &.card-sm {
        .pf-content-box {
            width: calc(100% - 48px);
            left: 24px;
            h5 {
                font-size: 18px;
            }
        }
    }
    &.active {
        .pf-content-box {
            opacity: 1; 
            bottom: 24px;
            visibility: visible;
        }
    }
    @include screen-1400 {
        .pf-content-box {
            width: calc(100% - 48px);
        }
    }
}

/******************* call to action start ****************/ 
.sc-cta-section {
 &::before {
    content: ''; 
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 65px;
    background-color: $gray-200;
    z-index: -1;
 }   
}
.sc-cta-box {
    background: $sc-primary-gradient; 
    padding: 64px 90px;
    .cta-shape {
        left: -2px;
        top: 3px;
        animation: 15s rotate-animation linear infinite;
    }
    @include screen-576 {
        padding: 60px 40px;
    }
}

/************************* how it work section start ******************/
.htw-single-item {
    padding: 40px 24px;
    box-shadow: $sc-box-shadow;
    transition: $transition-base; 
    &:hover {
        box-shadow: $sc-hover-shadow;
    }
}

/***************** team section start **************/
.sc-team-filter-nav {
    gap: 24px;
    li {
        a {
            display: inline-flex; 
            align-items: center;
            color: $dg-text-color;
            font-weight: 600;
            padding: 16px 35px;
            border: 1px solid $border-color;
            border-radius: 5px;
            transition: $transition-base; 
            &.active {
                background-color: $primary; 
                border-color: $primary;
                color: $white;
                svg {
                    stroke: $white;
                    path {
                        stroke: $white;
                    }
                }
            }
        }
    }
    @include screen-1400 {
        gap: 16px;
    }
    @include screen-576 {
        gap: 8px;
        li {
            a {
                padding: 10px 15px;
                font-size: 14px;
            }
        }
    }
}
.sc-team-card {
    padding: 40px 24px;
    box-shadow: $sc-box-shadow;
    transition: $transition-base;
    .thumbnail {
        .thumb-shape {
            left: 20px;
            top: 10px;
        }
    }
    h5 {
        transition: $transition-base;
    }
    .sc-team-social {
        gap: 15px;
        a {
            color: $dg-text-color;
            transition: $transition-base; 
            &:hover {
                color: $primary;
            }
        }
    }
    &:hover {
        box-shadow: $sc-hover-shadow;
        .thumbnail {
            .thumb-shape {
                animation: 3.5s shake-animation linear infinite;
            }
        }
        h5 {
            color: $primary;
        }
    }
}

/************************ pricing section start ****************/
.sc-pricing-switch {
    display: inline-block;
    background-color: $white;
    button {
        border: 0;
        background: transparent;
        color: $crm-secondary;
        font-weight: 600;
        transition: $transition-base; 
        padding: 10px 24px;
        &.active {
            background-color: $primary;
            color: $white;
        }
    }
}
.sc-pricing-column {
    padding: 40px;
    box-shadow: $sc-hover-shadow;
    .icon-wrapper {
        width: 70px;
        height: 70px; 
        background-color: $sc-icon-bg;
    }
    .sc-pricing-title {
        h6 {
            font-weight: 500; 
        }
        h4 {
            font-weight: 600;
        }
    }
    .pricing-features {
        li {
            font-weight: 600;
            span {
                color: $primary;
            }
            + li {
                margin-top: 12px;
            }
        }
    }
    &.popular {
        background: $sc-primary-gradient;
        h1,h5,h6,h4,p {
            color: $white !important;
        }
        ul {
            li {
                color: $white;
                span {
                    color: $dg-warning-color;
                }
            }
        }
    }
}

/**************** blog section start ***************/ 
.sc-blog-card {
    box-shadow: $sc-box-shadow; 
    transition: $transition-base; 
    .thumbnail {
        img {
            transition: $transition-base;
        }
    }
    .category-btn {
        background: $sc-primary-gradient; 
        color: $white;
        font-size: 14px;
        padding: 2px 8px;
        display: inline-block;
        margin-bottom: 12px;
    }
    .author-info {
        & > img {
            width: 45px;
        }
        .authors-info-right {
            .meta {
                font-size: 12px;
            }
        }
    }
    &:hover {
        box-shadow: $sc-hover-shadow;
        .thumbnail {
            img {
                transform: scale(1.02);
            }
        }
    }
}

//For dark version

[data-bs-theme="dark"] {

	//dark and light mood
	.tt-theme-light {
		display: none;
	}

	.tt-theme-dark {
		display: block;
	}

	//header
	.navbar-light .navbar-brand img.logo-white,
	.navbar-dark.sticky-header.affix .navbar-brand img.logo-white {
		display: block;
	}

	.navbar-dark.sticky-header.affix .navbar-brand img.logo-color,
	.navbar-dark .navbar-brand img.logo-color,
	.navbar-light .navbar-brand img.logo-color,
	.dg-hero-section .hero-curve.left,
	.dg-hero-section .hero-curve.right,
	.pf-curve.left,
	.pf-curve.right,
	.tm-curve.left,
	.tm-curve.right,
	.ct-curve.left,
	.ct-curve.right,
	.sc-cta-section,
	.dat-section-after::after {
		display: none !important;
	}

	.dropdown-grid-item a:hover,
	.ins-contact-form .ins-input-field label,
	.dg-portfolio-section,
	.dg-feedback-section,
	.bgc-white-50p,
	.it-company-footer,
	.aih-price-area {
		background: $gray-900;
	}

	.main-menu li.nav-item .dropdown-menu:before,
	.dg-pricing-column .dg-pricing-amount ,
	.risk-bg-color-two,
	.risk-bg-color-three,
	.it-company-bg-two, 
	.aiart-price-wrapper::after {
		background-color: $gray-800 !important;
	}

	.navbar-light .main-menu li a.nav-link,
	.navbar-light .action-btns a.btn-link,
	.navbar-dark.sticky-header.affix .main-menu li a.nav-link,
	.navbar-dark.sticky-header.affix .action-btns a.btn-link ,
	.ail-tab-con_list li p,
	.ail-tab-con_list li i {
		color: $gray-300 !important;
	}

	//  background
	.bg-white,
	.navbar-light.sticky-header.affix,
	.navbar-dark.sticky-header.affix,
	.payment-counter-bg,
	.hd-pricing-section,
	.ins-hero-section,
	.ins-brands,
	.bgc-white,
	.bg-design-agency-about,
	.design-agency-two-hero {
		background-color: $black !important;
	}

	.ins-hero-section .ins-hero-curve {
		display: none;
	}

	.ins-brands {
		padding: 30px;
		border-radius: 6px;
	}

	.bg-gradient,
	.event-hero {
		background: linear-gradient(90deg, $gray-900, darken($primary, 45%)) !important;
	}

	.ins-contact-section::before {
		background: linear-gradient(95.5deg, rgb(17 24 39), rgb(17 24 38 / 98%));
	}

	.payment-news-letter {
		background: linear-gradient(0deg, $gray-800 13.3%, rgba(255, 255, 255, 0) 100%);
	}

	.process-card:hover,
	.dg-feedback-bg,
	.ah-bg-3,
	.ah-bg-4,
	.hd-pricing-single {
		background-color: $gray-800 !important;
	}

	.two-bg-dark-light,
	.hd-hero-section {
		background-image: -webkit-gradient(linear,
				left top,
				right top,
				color-stop(40%, $dark),
				color-stop(0, $gray-900));
		background-image: linear-gradient(90deg, $dark 40%, $gray-900 0);
	}

	@media (min-width: 320px) and (max-width: 767px) {
		.two-bg-dark-light {
			background: $gray-900;
		}
	}

	.process-icon-2:after,
	.mk-sf-item,
	.mk-app-single,
	.mk-partner-item,
	.hd-accordion .accordion-item,
	.sponsor-logo-bg .logo,
	.sc-team-filter-nav li a {
		border-color: $gray-800 !important;
	}

	.mk-partners-list .mk-partner-item:hover,
	.up-coming-event,
	.event-about,
	.ev-price,
	.bgc-background,
	.ca-digital-service,
	.sc-service-card,
	.dat-bg.style-dark {
		background: $gray-800 !important;
	}

	.dat-bg,
	.ah-bg,
	.ah-bg-2,
	.ai-wt-body-bg,
	.ail-main-bg.aiart {
		background-color: $gray-900;
	}

	.bg-light-subtle.style-dark  {
		background-color: $gray-700 !important;
	}

	//  color
	body {
		color: $gray-400;
	}

	.bg-white h1,
	.bg-white h2,
	.bg-white h3,
	.bg-white h4,
	.bg-white h5,
	.bg-white h6,
	.bg-light h1,
	.bg-light h2,
	.bg-light h3,
	.bg-light h4,
	.bg-light h5,
	.bg-light h6 {
		color: $gray-100;
	}

	.clr-text {
		color: $gray-100;
	}

	.dat-about-btn,
	.sc-pricing-switch button {
		color: $gray-500;
	}

	.sc-pricing-switch button.active {
		color: $white;
	}

	//  form
	.form-control:focus,
	.hd-faq-section.ah-bg .hd-faq-wrapper .accordion-item ,
	.ail-ft-content,
	.ail-work-area .ail-main-bg ,
	.ai-wt-body-bg-2,
	.ai-wt-enc-slider-item {
		background-color: $gray-800 !important;
	}

	.bg-dark input.form-control,
	.bg-gradient input.form-control,
	.newsletter-form input.form-control,
	.crm-service-box {
		border-color: $gray-600;
	}

	.register-form,
	.hero-subscribe-form {

		input.form-control,
		textarea.form-control {
			border-color: $gray-800 !important;
		}
	}

	//  pricing
	.dg-pricing-section .dg-pricing-column,
	.dg-blog-section .dg-blog-card {
		background-color: $gray-700 !important;
	}

	//  testimonial
	.appTwoReviewSwiper-Controller .swiper-button-prev,
	.appTwoReviewSwiper-Controller .swiper-button-next,
	.dg-pricing-section .da-price,
	.agency-home-hero__des {
		color: $gray-300 !important;
	}

	.testimonial-tab-menu.nav-pills .nav-link.active,
	.connected-app-single:hover,
	.appTwoReviewSwiper-Controller .swiper-button-prev,
	.appTwoReviewSwiper-Controller .swiper-button-next,
	.swiper-nav-control .swiper-button-next,
	.swiper-nav-control .swiper-button-prev,
	.single-article {
		background-color: $gray-900 !important;
		border-color: $gray-800 !important;
	}
	

	// Home 27
	.ca-two-main {
		background: $white;
		position: relative;
		z-index: 1;
	}

	.ca-two-bg-hover-two {
		&:hover {
			background: linear-gradient(99deg, #2ACE93 7.76%, #9CE842 100%);
			border-color: transparent;
		}
	}

	.ca-two-hero svg path,
	.ca-two-portfolio-post-area svg path,
	.ca-two-tesimonial-area svg path,
	.ca-two-tesimonial-area rect {
		fill-opacity: 1;
		fill: $dark-new-1;
	}

	.ca-two-info-card-area .ca-two-subtitle,
	.ca-two-portfolio-post-area .ca-two-title,
	.ca-two-tesimonial-area .ca-two-title {
		color: $white;

		span {
			background-color: $white!important;
		}

		.counter {
			background-color: transparent !important;
		}
	}

	.ca-two-hover-bg:hover {
		background-color: $github;

		.ca-two-info-icon {
			filter: invert(1);
		}

		h5,
		p {
			color: $white;
		}
	}

	.ca-two-mission-img {
		filter: invert(1);
	}

	.ca-two-pf-posts .ca-two-bg-five {
		background-color: $dark-new-1;

		&:hover {
			color: $white;

			span {
				background-color: $white;
			}
		}
	}

	.ca-two-call-btn .call-btn {
		background-color: transparent !important;
	}

	.ca-two-pf-img {
		filter: brightness(0.9);
	}

	.ca-two-product-item {
		&.bg-white {
			background-color: inherit !important;
		}

		h5 {
			color: $dark-new-1;
		}

		&:hover {
			background-color: $dark-new-1 !important;

			h5 {
				color: $white;
			}
		}
	}

	.ca-two-price-item {
		.bg-white {
			background-color: $white !important;
		}

		.ca-two-bg-hover:hover {
			border-color: transparent;
			background: linear-gradient(99deg, #2ACE93 7.76%, #9CE842 100%);
			color: $white;
		}
	}

	.ca-two-ss-area,
	.ca-two-footer {
		background: linear-gradient(99deg, #2ACE93 7.76%, #9CE842 100%);
	}

	@media(max-width: 1850px) {

		.ca-two-portfolio-post-area,
		.ca-two-hero,
		.ca-two-tesimonial-area {
			background-color: $dark-new-1;
		}

		.ca-two-portfolio-post-area .ca-two-subtitle,
		.ca-two-tesimonial-area .ca-two-subtitle {
			color: $white;
		}

		.ca-two-info-card-area .ca-two-subtitle {
			color: $dark-new-1;

			span {
				background-color: $dark-new-1 !important;
			}
		}
	}

	@media(max-width: 1699px) {
		.ca-two-footer {
			background: $dark-new-1 !important;
		}
	}

	// Home 27

	// Home 28
	.risk-outline-btn,
	.risk-color-two,
	.rm-footer-bottom .risk-color,
	.rm-info-card-area .text-center .risk-color,
	.risk-title,
	.it-company-footer .footer-single-col h3, .footer-single-col .h3,
	.it-company-footer .rm-footer-top .footer-single-col li a,
	.it-company-footer .rm-footer-top .footer-single-col p,
	.aiwt-title,
	.ai-wt-info-card h4 ,
	.ai-wt-info-card .text-black ,
	.ai-wt-tab-nav .text-black,
	.ai-wt-testi-item .text-black,
	.ai-wt-enc-card .text-black,
	.ai-wt-enhanced-content h3.text-black,
	.ai-wt-price-item .text-black ,
	.ail-main-bg.aiart .text-black ,
	.aiart-footer .footer-nav-list li a, 
	.aiart-footer .footer-single-col p ,
	.aiart-footer .it-company-color {
		color: $white !important;
	}

	.risk-contact-form .risk-color-two,
	.risk-info-card .risk-color-two,
	.risk-blog .risk-color-two ,
	.it-company-footer .rm-footer-top .footer-single-col .footer-social-list li a {
		color: $dark-un !important;
	}

	.rm-footer-top .footer-social-list a,
	.risk-blog,
	.risk-form-box,
	.risk-info-card,
	.aih-info-card-item,
	.aih-faq-area .accordion-item,
	.aih-faq-area .accordion-item .accordion-button,
	.ail-card-item {
		background-color: $white !important;
	}

	.rm-hero::after,
	.rm-footer-top::after {
		filter: brightness(0.1);
	}

	.rm-service-area .s-two {
		filter: grayscale(1);
	}

	// Home 28

	// Home 29
	.it-company-hero-area .it-company-color,
	.it-company-title,
	.it-company-social-area p,
	.it-company-feature .it-company-color,
	.aih-title,
	.aih-color-three,
	.aih-color-two,
	.aih-color-five,
	.rm-testimonial-info .risk-color,
	.it-company-footer .rm-footer-bottom p,
	.it-company-footer .rm-footer-bottom p a,
	.ail-hero-title,
	.ail-hero-area p,
	.ail-title,
	.ail-feature-tab .nav-link p,
	.ail-tab-con h3,
	.ail-step-sub-title p,
	.ail-work-area h3,
	.ail-work__content p,
	.ail-work-area h6.text-black,
	.aih-testimonial-item h6,
	.ail-price-item h5 {
		color: $white !important;
	}

	.it-company-service-area .it-company-title,
	.it-company-team-area .it-company-title,
	.it-company-faq-area .it-company-title,
	.aih-faq-area .custom-accordion .accordion-body,
	.aih-price-area .aih-title {
		color: $github;
	}

	.it-company-service-area::after {
		filter: invert(1);
    	opacity: .9;
	}

	.it-company-team-area::after,
	.it-company-footer::after {
		filter: brightness(0.0);
	}

	.it-company-faq-area .ca-accordion .accordion-body {
		padding-bottom: 15px;
	}

	.it-company-faq-area .ca-accordion .accordion-item {
		padding-left: 15px;
		padding-right: 15px;
	}
	// Home 29

	// Home 30
	.aih-info-card-item .aih-color-two,
	.aih-btn.aih-color-two,
	.it-company-faq-area .ca-accordion .accordion-body ,
	.nav-link.active .ai-wt-tab-nav .text-black ,
	.nav-link:hover .ai-wt-tab-nav .text-black  {
		color: $dark-new-2 !important;
	}

	.aih-testimonial-img {
		border-color: $gray-900;

		&::before {
			background-image: radial-gradient(circle at 0 0, transparent 1rem, $gray-900 0.5rem);
		}
	}

	.aih-faq-area .custom-accordion .accordion-button::before,
	.aih-portfolio-area .qty-portfolio__arrow {
		background-color: $gray-900;
	}

	.aih-portfolio-area .qty-portfolio__arrow {
		border-color: $gray-900;
	}

	.digtal-marketing-logo.ah-bg .aih-shape svg path,
	.digtal-marketing-logo.ah-bg .aih-shape-two svg path {
		fill: $gray-900;
	}

	.aih-portfolio-area .qty-portfolio__arrow::before,
	.aih-portfolio-area .qty-portfolio__arrow::after {
		background-image: radial-gradient(circle at 0 0, transparent 1rem, $gray-900 0.5rem);
	}

	.aih-price-area::after {
		display: none;
	}

	// Home 30

	@media (min-width: 1200px) {

		.ca-design-section__title-top,
		.ca-design-section__title {
			color: $gray-100
		}
	}

	.ah-service::after {
		opacity: 0.2;
	}

	.ah-service .ah-outline-btn {
		border-color: $white;
	}

	// Home 31
	.ail-hero-area ,
	.ail-info-card-area,
	.ail-feedback-area {
		background-image: none;
	}

	.ail-feature-tab .nav-link img {
		filter: invert(1);
	}

	.ail-feature-tab .nav-link img.active {
		filter: inherit;
	}

	.ail-ft-content::after {
		display: none;
	}

	.ail-tab-con_list li span {
		border-color: $white-50;
	}
	
	.ail-sub-title.bg-white {
		background-color: $dg-meta-color !important;
	}

	.ail-step-sub-title .bg-black,
	.wt-cta-wrapper .bg-white {
		background-color: $white !important;
	}

	.ail-price-item.popular h5,
	.ail-price-item:hover h5 {
		color: $dark !important;
	}

	.ail-cta-wrapper {
		background: $gray-800;
	}

	.btn.ail-gd-bg:hover {
		background: $gray-700;
	}
}

.w-fit-content{
  width: fit-content !important;
}
.copied-msg {
  position: absolute;
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 0px 13px;
  border-radius: 4px;
  top: -40px;
    left: 98%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
  font-weight: bold;
    font-size: 15px !important;
}

.copied-msg::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

.show-copied {
  opacity: 1;
}
//Default dark version.
.tt-theme-light,
.tt-theme-dark{
  position: relative;
  top: 3px;
}
.tt-theme-light {
  display: block;
}
.tt-theme-dark {
  display: none;
}
[data-bs-theme="light"]{
  .digi-testimonial-title,
  .bg-dark .bg-light-subtle h1,
  .bg-dark .bg-light-subtle h2,
  .bg-dark .bg-light-subtle h3,
  .bg-dark .bg-light-subtle h4,
  .bg-dark .bg-light-subtle h5,
  .bg-dark .bg-light-subtle h6{
    color: $headings-color !important;
  }
}