/*!
 * =======================================================
 *  SPK Editor 1.0.0
 * =======================================================
 *
 *  @version      :  V.1.0(15/Nov/2022)
 *  @author       :  Spruko Technologies Private Limited 
 *  @autorURL     :  https://spruko.com/
 *
 * -------------------------------------------------------
 */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

 :root {
     --primary-color: #01bcf3;
     --primary-color-transparent: rgba(95, 85, 255, 0.1);
     --white: white;
     --black: black;
     --body-background: #fff;
     --border-color: rgb(238, 238, 238);
     --background-color: transparent;
     --placeholder-bg: 0 0 0;
     --placeholder-color: gray;
     --sourcecode-bg: rgb(185, 185, 185);
     --sourcecode-color: rgb(68, 68, 68);
     --hr-color: var(--white);
     --modal-color: rgb(255, 255, 255);
     --modal-backdrop-color: rgb(0, 0, 0, 0.1);
     --spk-editor-color: #363636;
     --green: green;
 }
 
 body {
     font-size: 0.8125rem !important;
     color: #212e3c !important;
     background-color: #f7fcfe !important;
     font-family: 'Poppins', sans-serif !important;
 }
 
 .nav-pills .nav-link.active {
     color: var(--primary-color) !important;
     background-color: transparent !important;
     position: relative;
 }
 
 .nav-pills .nav-link.active:before {
     position: absolute;
     content: "";
     width: 50%;
     height: 0.15rem;
     border-radius: 50px;
     background-color: var(--primary-color);
     inset-block-end: 00.25rem;
     inset-inline-start: 1.25rem;
 }
 
 .nav-link {
     border-radius: 0 !important;
     font-weight: 500 !important;
     color: #202020 !important;
 }
 .landing-page-header::after {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     background-image: url(images/header-svg-after.svg);
     top: -10%;
     background-size: cover;
     inset-inline-end: 0;
     border-radius: 0 0 50% 50%;
     opacity: 0.5;
     z-index: -1;
 }
 .landing-page-header:before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     background-image: linear-gradient(to top, #01bbf315, #ffffff0e);
     border-radius: 0 0 50% 50%;
     top: -10%;
     z-index: -1;
 }
 .landing-page-header {
     position: relative;
     z-index: 1;
 }
 .landing-page-header .nav-item {
     margin-inline-end: 1rem;
 }
 
 .landing-header-content {
     min-height: 920px;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }
 
 .landing-page-header .text-primary {
     color: var(--primary-color) !important;
 }
 
 .landing-page-header h1 {
     color: #202020;
 }
 
 .landing-page-header .text-editor-spk-view {
     min-height: 400px !important;
 }
 
 .landing-page-header .text-editor-spk {
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 .landing-page-header h6 {
     line-height: 1.5 !important;
 }
 
 .landing-page-header .btn-primary {
     background-color: var(--primary-color) !important;
     border: 1px solid var(--primary-color) !important;
     border-radius: 0.25rem !important;
     font-size: 0.9rem;
     box-shadow: 0px 4px 16px rgba(0,0,0,0.05);
 }
 
 .editor-description {
     font-weight: 500;
     font-size: 0.95rem;
     margin-block-end: 2rem;
     width: 70%;
     margin: 0 auto 2rem auto;
 }
 
 .main-editor {
     position: relative;
 }
 
 @media (min-width: 576px) {
     /* .main-editor:before {
         position: absolute;
         content: "";
         width: 400px;
         height: 400px;
         inset-block-start: -162px;
         inset-inline-start: -242px;
         background-image: url(images/editor-before.png);
         transform: rotate(211deg);
     }
 
     .main-editor:after {
         position: absolute;
         content: "";
         width: 400px;
         height: 400px;
         inset-block-end: -80px;
         inset-inline-end: -80px;
         background-image: url(images/editor-after.png);
         transform: rotate(360deg);
     } */
 
     .landing-page-header header {
         margin-bottom: 5rem;
     }
 }
 
 .card-header {
     font-size: 1rem;
     font-weight: 600;
     background-color: #fff !important;
     border-bottom: 1px solid #e6ebf1 !important;
     padding: 1rem 1.5rem !important;
 }
 
 .card {
     border: 1px solid #e6ebf1 !important;
     margin-block-end: 1.5rem;
 }
 
 .card .card-body {
     padding: 1.5rem !important;
 }
 
 .landing-page .btn-primary {
     background-color: var(--primary-color) !important;
     border: 1px solid var(--primary-color);
 }
 .landing-page .text-primary {
     --bs-text-opacity: 1;
     color:  var(--primary-color) !important;
 }
 .landing-page .bg-primary {
     background-color:  var(--primary-color) !important;
 }
 .feature-image {
     width: 60px;
     height: 60px;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 .responsive-image img {
     border-radius: 0.25rem;
 }
 
 .responsive-image {
     position: relative;
 }
 
 .responsive-image:before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     inset-inline-start: -10%;
     /* background-image: url(images/responsive-bg.png); */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     z-index: -1;
 }
 
 .landing-demos {
     position: relative;
 }
 
 .landing-demos:before {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     inset-inline-start: 0;
     /* content: ""; */
     background-image: url(images/demos-before.svg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }
 
 .landing-demos:after {
     position: absolute;
     width: 100%;
     height: 100%;
     bottom: 0;
     inset-inline-end: 0;
     /* content: ""; */
     background-image: url(images/demos-after.svg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }
 
 /* .row {
     width: 100%;
 } */
 
 .section {
     padding: 70px 0;
     background-position: center center;
     background-size: cover;
 }
 
 .landing-page .bg-primary {
     background-color: #01bcf3 !important;
 }
 
 .demo-screen-footer {
     padding: 60px 0;
     background-color: #031938;
     text-align: center;
 }
 
 .landing-page .btn {
     border-radius: 0.25rem !important;
     font-size: 0.8125rem !important;
 }
 
 
 
 .buynow .money-bag,
 .free-img {
     margin: 0 auto;
     display: block;
     margin-top: -20px;
 }
 
 .buynow .dropdown-item {
     display: block;
     width: 100%;
     padding: 0.45rem .80rem;
     clear: both;
     font-weight: 400;
     color: #576074;
     text-align: inherit;
     white-space: nowrap;
     background-color: transparent;
     border: 0;
     font-size: 15px;
 }
 
 .buynow .dropdown-item:hover {
     background-color: #f5f4ff !important;
 }
 
 .buynow .btn {
     padding: 0.375rem 0.75rem;
 }
 
 .buynow .dropdown-menu {
     border-radius: 5px !important;
     background-color: #ffffff;
     border: 1px solid #ffffff8a;
     box-shadow: 0 0px 90px rgb(155 153 153 / 48%) !important;
 }
 
 .buynow .card-block {
     border: 1px solid rgb(231 229 245 / 11%) !important;
     box-shadow: 0 0.15rem 1.75rem 0 rgb(255 255 255 / 6%);
     top: 0;
     bottom: 0;
     background: #6a1cbb69;
     left: 0;
     border-radius: 7px;
     width: 100%;
     height: 100%;
     position: absolute;
     inset-inline-end: 0;
     bottom: 0;
     inset-inline-start: 0;
 }
 
 @media (max-width: 480px) {
     .buynow .card .btn {
         display: initial !important;
     }
 }
 
 .buynow.modal .btn-close:focus {
     box-shadow: none;
 }
 
 .buynow .modal-content {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 100%;
     pointer-events: auto;
     background-color: #000000a8;
     background-clip: padding-box;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 1rem;
     outline: 0;
 }
 
 .buynow .modal-dialog .image-top {
     margin-top: -10px !important;
 }
 
 .buynow .modal-dialog .card-block {
     background: #6a1cbbbf;
 }
 
 .buynow .regular-license {
     z-index: 9;
 }
 
 .border-0 {
     border: 0px !important;
 }
 
 .modal .modal-header {
     padding: 10px 20px;
 }
 
 @media (max-width: 480px) {
     .buynow .modal-dialog .modal-body {
         margin: 15px;
     }
 }
 
 .buynow .modal-dialog .btn-close {
     position: absolute;
     float: right;
     margin-inline-end: auto;
     inset-inline-end: 33px;
     top: 30px;
     padding: 8px;
     background-image: none;
     border: 1px solid #ffffff47;
     border-radius: 5px;
     line-height: 1;
 }
 
 .buynow .modal-dialog .btn-close span {
     color: #fff;
     font-size: 24px;
     padding: 9px 0px;
     line-height: .6;
 }
 
 .lh-xs {
     line-height: 0.75 !important;
     margin-top: 6px;
 }
 
 .buynow .license-view {
     text-align: center;
     text-decoration: underline;
 }
 
 .buynow .license-view a {
     padding: 10px;
     border-radius: 5px;
 }
 
 .buynow .card:hover {
     transform: none;
 }
 
 .buynow .license-view a:hover {
     padding: 10px;
     background-color: rgb(255 255 255 / 12%);
     border-radius: 5px;
 }
 
 .bg-image-style {
     background-image: url(images//bg3.jpg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     inset-block-start: 0;
     inset-inline-start: 0;
     inset-inline-end: 0;
     position: relative;
     border-radius: 0px;
     z-index: 0;
 }
 
 .bg-image-style::before {
     content: "";
     background-color: #ffffffa6;
     width: 100%;
     height: 100%;
     inset-inline-start: 0%;
     top: 0;
     position: absolute;
     z-index: -1;
 }
 
 .buynow .modal-backdrop {
     background-color: #000000b8;
 }
 
 .buynow .card-body.imag-list {
     overflow: visible;
 }
 
 .buynow .imag-list {
     position: relative;
     content: "";
     inset-inline-start: 0;
     background-repeat: no-repeat !important;
     background-position: center !important;
     background-size: cover !important;
     width: 100%;
     height: 100%;
     border-radius: 7px;
     overflow: hidden;
     z-index: 1;
 
 }
 
 .buynow .imag-list::before {
     content: "";
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     top: 0;
     left: 0;
     right: 0;
     border-radius: 7px;
     position: absolute;
     background: #6a1cbb82;
     width: 100%;
     height: 100%;
     z-index: -1;
 }
 
 .buynow .modal-content {
     z-index: 0;
     border: 0px #000 solid !important;
 }
 
 .buynow .modal-content::before {
     content: "";
     content: "";
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     top: 0;
     left: 0;
     right: 0;
     border-radius: 1rem;
     position: absolute;
     background: #000000b3;
     width: 100%;
     height: 100%;
     z-index: -1;
 }
 
 .buynow .Licenses-img {
     border: 1px solid #ffffff2e;
     border-radius: 7px;
 }
 
 .modal.buynow .modal-body .card {
     background: transparent;
 
 }
 
 .modal {
     z-index: 99999;
 }
 
 /* licenses */
 .tx-26 {
     font-size: 26px;
 }
 
 .tx-14 {
     font-size: 14px;
 }
 
 .tx-12 {
     font-size: 12px;
 }
 
 .font-weight-semibold {
     font-weight: 500;
 }
 
 .w-50 {
     width: 50% !important;
 }
 
 .w-55 {
     width: 50% !important;
 }
 
 .w-xs {
     min-width: 90px;
 }
 
 .w-sm {
     min-width: 110px;
 }
 
 .w-md {
     min-width: 130px;
 }
 
 .w-lg {
     min-width: 150px;
 }
 
 .w-xl {
     min-width: 190px;
 }
 
 .demo-screen-skin {
     padding: 30px 0;
     color: #1f2427;
 }
 
 #license-terms2 {
     /* font-size: 14px; */
     border: 0;
     border-radius: 12px;
     padding: 20px;
     text-align: left;
     margin-bottom: 2rem;
     background-color: #fff3cd !important;
     border-color: rgba(255, 193, 7, 0.2) !important;
 }
 
 #license-terms2 .card-header {
     border-color: rgba(255, 193, 7, 0.3) !important;
 }
 
 #license-terms2 ul {
     list-style-type: decimal;
 }
 
 #license-terms2 a {
     color: #ec3229;
 }
 
 @media (min-width: 991px) {
     .demo-screen-skin h1 {
         font-size: 26px !important;
         font-weight: 500;
         color: #0d0c22;
         z-index: 1;
     }
 }
 
 @media screen and (min-width:1200px) {
 
     .license-buy {
         border-inline-end: 1px solid #dee2e6 !important;
     }
 }
 .banner-name {
     margin-bottom: 2.25rem;
 }
 .banner-name span{
     border: 1px solid var(--primary-color);
     color: var(--primary-color);
     border-radius: 20px;
     padding: 4px 10px;
     margin-bottom: 1rem;
     background-color: #01bbf313;
 }
 .landing-page-header .landing-header-content .spk-editor {
     box-shadow: 0px 4px 16px rgba(0,0,0,0.05);
 }
 .spk-editor-button.color,.spk-editor-button.backgroundColor {
     width: 38px;
 }
 
 hr.section-devider {
     width: 100%;
     height: 1px;
     background-color: transparent;
     background-image: linear-gradient(90deg, rgba(206, 211, 246, 0) 0, #bbb 38%, #bbb 64%, rgba(206, 211, 246, 0) 99%);
     opacity: 0.4;
     border: none;
     margin: 0;
 }
 .landing-page .pb-5 {
     padding-bottom: 4rem !important;
 }
 .landing-page .pt-5 {
     padding-top: 4rem !important;
 }
 .landing-page .py-5 {
     padding-top: 4rem !important;
     padding-bottom: 4rem !important;
 }
 .landing-page .btn.btn-primary:hover {
     border-color: #01bcf3;
 }
 .landing-page .border {
     border: 1px solid #e6ebf1 !important;
 }
 /* Start::avatar styles */
 .avatar {
     position: relative;
     height: 2.625rem;
     width: 2.625rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 0.25rem;
     color: #fff;
     font-weight: 500;
 }
 .avatar a.badge:hover {
     color: #fff;
 }
 .avatar img {
     width: 100%;
     height: 100%;
     border-radius: 0.25rem;
 }
 .avatar svg {
     width: 1.5rem;
     height: 1.5rem;
 }
 .avatar.avatar-rounded {
     border-radius: 50%;
 }
 .avatar.avatar-rounded img {
     border-radius: 50%;
 }
 .avatar.avatar-radius-0 {
     border-radius: 0;
 }
 .avatar.avatar-radius-0 img {
     border-radius: 0;
 }
 .avatar .avatar-badge {
     position: absolute;
     inset-block-start: -4%;
     inset-inline-end: -0.375rem;
     width: 1.4rem;
     height: 1.4rem;
     font-size: 0.625rem;
     border: 2px solid #fff;
     border-radius: 50% !important;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .avatar.online:before, .avatar.offline:before {
     position: absolute;
     content: "";
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
     inset-inline-end: 0;
     inset-block-end: 0;
     border: 2px solid #fff;
 }
 .avatar.online:before {
     background-color: #000;
 }
 .avatar.offline:before {
     background-color: #949eb7;
 }
 .avatar.avatar-xs {
     width: 1.25rem;
     height: 1.25rem;
     line-height: 1.25rem;
     font-size: 0.65rem;
 }
 .avatar.avatar-xs .avatar-badge {
     padding: 0.25rem;
     width: 1rem;
     height: 1rem;
     line-height: 1rem;
     font-size: 0.5rem;
     inset-block-start: -25%;
     inset-inline-end: -0.5rem;
 }
 .avatar.avatar-sm {
     width: 1.75rem;
     height: 1.75rem;
     line-height: 1.75rem;
     font-size: 0.65rem;
 }
 .avatar.avatar-sm .avatar-badge {
     padding: 0.3rem;
     width: 1.1rem;
     height: 1.1rem;
     line-height: 1.1rem;
     font-size: 0.5rem;
     inset-block-start: -38%;
     inset-inline-end: -0.5rem;
 }
 .avatar.avatar-sm.online:before, .avatar.avatar-sm.offline:before {
     width: 0.5rem;
     height: 0.5rem;
 }
 .avatar.avatar-sm svg {
     width: 1rem;
     height: 1rem;
 }
 .avatar.avatar-md {
     width: 2.5rem;
     height: 2.5rem;
     line-height: 2.5rem;
     font-size: 0.8rem;
 }
 .avatar.avatar-md .avatar-badge {
     padding: 0.4rem;
     width: 1.2rem;
     height: 1.2rem;
     line-height: 1.2rem;
     font-size: 0.65rem;
     inset-block-start: -6%;
     inset-inline-end: -13%;
 }
 .avatar.avatar-md.online:before, .avatar.avatar-md.offline:before {
     width: 0.75rem;
     height: 0.75rem;
 }
 .avatar.avatar-md svg {
     width: 1.5rem;
     height: 1.5rem;
 }
 .avatar.avatar-lg {
     width: 3rem;
     height: 3rem;
     line-height: 3rem;
     font-size: 1rem;
 }
 .avatar.avatar-lg .avatar-badge {
     inset-block-start: -15%;
     inset-inline-end: -0.25%;
 }
 .avatar.avatar-lg.online:before, .avatar.avatar-lg.offline:before {
     width: 0.8rem;
     height: 0.8rem;
 }
 .avatar.avatar-lg svg {
     width: 1.5rem;
     height: 1.5rem;
 }
 .avatar.avatar-xl {
     width: 4rem;
     height: 4rem;
     line-height: 4rem;
     font-size: 1.25rem;
 }
 .avatar.avatar-xl .avatar-badge {
     inset-block-start: -8%;
     inset-inline-end: -0.2%;
 }
 .avatar.avatar-xl.online:before, .avatar.avatar-xl.offline:before {
     width: 0.95rem;
     height: 0.95rem;
 }
 .avatar.avatar-xxl {
     width: 5rem;
     height: 5rem;
     line-height: 5rem;
     font-size: 1.5rem;
 }
 .avatar.avatar-xxl .avatar-badge {
     inset-block-start: -4%;
     inset-inline-end: 0rem;
 }
 .avatar.avatar-xxl.online:before, .avatar.avatar-xxl.offline:before {
     width: 1.05rem;
     height: 1.05rem;
     inset-block-end: 0.25rem;
 }
 .avatar-list-stacked {
     padding: 0;
 }
 .avatar-list-stacked .avatar {
     margin-inline-end: -0.65rem !important;
     border: 2px solid transparent;
     vertical-align: middle;
     transition: transform ease 200ms;
 }
 .avatar-list-stacked .avatar:last-child {
     margin-inline-end: 0 !important;
 }
 .avatar-list-stacked .avatar:hover {
     z-index: 1;
     transform: scale(1.15);
     border: 2px solid #fff;
 }
 
 .fs-6 {
     font-size: 0.375rem;
   }
   .fs-7 {
     font-size: 0.4375rem; 
   }
   .fs-8 {
     font-size: 0.5rem; 
   }
   .fs-9 {
     font-size: 0.5625rem; 
   }
   .fs-10 {
     font-size: 0.625rem; 
   }
   .fs-11 {
     font-size: 0.6875rem; 
   }
   .fs-12 {
     font-size: 0.75rem; 
   }
   .fs-13 {
     font-size: 0.8125rem;
   }
   .fs-14 {
     font-size: 0.875rem;
   }
   .fs-15 {
     font-size: 0.9375rem; 
   }
   .fs-16 {
     font-size: 1rem;
   }
   .fs-17 {
     font-size: 1.0625rem;
   }
   .fs-18 {
     font-size: 1.125rem; 
   }
   .fs-19 {
     font-size: 1.1875rem; 
   }
   .fs-20 {
     font-size: 1.25rem;
   }
   .fs-21 {
     font-size: 1.3125rem;
   }
   .fs-22 {
     font-size: 1.375rem;
   }
   .fs-23 {
     font-size: 1.4375rem;
   }
   .fs-24 {
     font-size: 1.5rem; 
   }
   .fs-25 {
     font-size: 1.5625rem; 
   }
   .fs-26 {
     font-size: 1.625rem; 
   }
   .fs-27 {
     font-size: 1.6875rem; 
   }
   .fs-28 {
     font-size: 1.75rem; 
   }
   .fs-29 {
     font-size: 1.8125rem; 
   }
   .fs-30 {
     font-size: 1.875rem; 
   }
   .fs-32 {
     font-size: 2rem;
   }
   .fs-34 {
     font-size: 2.125rem;
   }
   .fs-36 {
     font-size: 2.25rem;
   }
   .fs-38 {
     font-size: 2.375rem;
   }
   .fs-40 {
     font-size: 2.5rem;
   }
   @media (max-width: 360px) {
     .banner-name span {
     font-size: 11px;       
   }
 }
 .bg-primary svg{
     fill: #fff !important;
 }
 .bg-primary-transparent svg{
     fill: rgba(1, 188, 243, 1);
 }
 .bg-primary-transparent, .card.bg-primary-transparent {
     background-color: rgba(1, 188, 243, 0.1);
     border: 0 !important;
 }
 /* Start::avatar styles */
 .avatar {
     position: relative;
     height: 2.625rem;
     width: 2.625rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 0.25rem;
     color: #fff;
     font-weight: 500;
 }
 .avatar a.badge:hover {
     color: #fff;
 }
 .avatar img {
     width: 100%;
     height: 100%;
     border-radius: 0.25rem;
 }
 .avatar svg {
     width: 1.5rem;
     height: 1.5rem;
 }
 .avatar.avatar-rounded {
     border-radius: 50%;
 }
 .avatar.avatar-rounded img {
     border-radius: 50%;
 }
 .avatar.avatar-radius-0 {
     border-radius: 0;
 }
 .avatar.avatar-radius-0 img {
     border-radius: 0;
 }
 .avatar .avatar-badge {
     position: absolute;
     inset-block-start: -4%;
     inset-inline-end: -0.375rem;
     width: 1.4rem;
     height: 1.4rem;
     font-size: 0.625rem;
     border: 2px solid #fff;
     border-radius: 50% !important;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .avatar.online:before, .avatar.offline:before {
     position: absolute;
     content: "";
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
     inset-inline-end: 0;
     inset-block-end: 0;
     border: 2px solid #fff;
 }
 .avatar.online:before {
     background-color: #000;
 }
 .avatar.offline:before {
     background-color: #e6ebf1;
 }
 .avatar.avatar-xs {
     width: 1.25rem;
     height: 1.25rem;
     line-height: 1.25rem;
     font-size: 0.65rem;
 }
 .avatar.avatar-xs .avatar-badge {
     padding: 0.25rem;
     width: 1rem;
     height: 1rem;
     line-height: 1rem;
     font-size: 0.5rem;
     inset-block-start: -25%;
     inset-inline-end: -0.5rem;
 }
 .avatar.avatar-sm {
     width: 1.75rem;
     height: 1.75rem;
     line-height: 1.75rem;
     font-size: 0.65rem;
 }
 .avatar.avatar-sm .avatar-badge {
     padding: 0.3rem;
     width: 1.1rem;
     height: 1.1rem;
     line-height: 1.1rem;
     font-size: 0.5rem;
     inset-block-start: -38%;
     inset-inline-end: -0.5rem;
 }
 .avatar.avatar-sm.online:before, .avatar.avatar-sm.offline:before {
     width: 0.5rem;
     height: 0.5rem;
 }
 .avatar.avatar-sm svg {
     width: 1rem;
     height: 1rem;
 }
 .avatar.avatar-md {
     width: 2.5rem;
     height: 2.5rem;
     line-height: 2.5rem;
     font-size: 0.8rem;
 }
 .avatar.avatar-md .avatar-badge {
     padding: 0.4rem;
     width: 1.2rem;
     height: 1.2rem;
     line-height: 1.2rem;
     font-size: 0.65rem;
     inset-block-start: -6%;
     inset-inline-end: -13%;
 }
 .avatar.avatar-md.online:before, .avatar.avatar-md.offline:before {
     width: 0.75rem;
     height: 0.75rem;
 }
 .avatar.avatar-md svg {
     width: 1.5rem;
     height: 1.5rem;
 }
 .avatar.avatar-xl svg{
     width: 2rem;
     height: 2rem;
 }
 .avatar.avatar-lg {
     width: 3rem;
     height: 3rem;
     line-height: 3rem;
     font-size: 1rem;
 }
 .avatar.avatar-lg .avatar-badge {
     inset-block-start: -15%;
     inset-inline-end: -0.25%;
 }
 .avatar.avatar-lg.online:before, .avatar.avatar-lg.offline:before {
     width: 0.8rem;
     height: 0.8rem;
 }
 .avatar.avatar-lg svg {
     width: 1.5rem;
     height: 1.5rem;
 }
 .avatar.avatar-xl {
     width: 4rem;
     height: 4rem;
     line-height: 4rem;
     font-size: 1.25rem;
 }
 .avatar.avatar-xl .avatar-badge {
     inset-block-start: -8%;
     inset-inline-end: -0.2%;
 }
 .avatar.avatar-xl.online:before, .avatar.avatar-xl.offline:before {
     width: 0.95rem;
     height: 0.95rem;
 }
 .avatar.avatar-xxl {
     width: 5rem;
     height: 5rem;
     line-height: 5rem;
     font-size: 1.5rem;
 }
 .avatar.avatar-xxl .avatar-badge {
     inset-block-start: -4%;
     inset-inline-end: 0rem;
 }
 .avatar.avatar-xxl.online:before, .avatar.avatar-xxl.offline:before {
     width: 1.05rem;
     height: 1.05rem;
     inset-block-end: 0.25rem;
 }
 .avatar-list-stacked {
     padding: 0;
 }
 .avatar-list-stacked .avatar {
     margin-inline-end: -0.65rem !important;
     border: 2px solid transparent;
     vertical-align: middle;
     transition: transform ease 200ms;
 }
 .avatar-list-stacked .avatar:last-child {
     margin-inline-end: 0 !important;
 }
 .avatar-list-stacked .avatar:hover {
     z-index: 1;
     transform: scale(1.15);
     border: 2px solid #fff;
 }
 [dir="rtl"] .avatar-list-stacked .ri-arrow-right-s-line {
     transform: rotate(180deg);
 }
 .row.spk-features-row .features-content {
     min-height: 14rem;
     background-color: #fff;
     box-shadow: 0px 4px 16px rgba(0,0,0,0.05);
 }
 /* End::avatar styles */
 .sticky {
     position: sticky;
     top: 0;
     z-index: 1000; /* Adjust as needed */
     transition: background-color 0.3s;
 }
 
 .sticky-pin {
     background-color: rgba(255, 255, 255, 0.2); /* Change as needed */
     backdrop-filter: blur(30px);
     border-radius: 0 0 20px 20px;
 }
 [dir="rtl"] {
     @media (min-width: 768px) {
         .ms-md-auto {
             margin-right: auto !important;
             margin-left: 0 !important;
         }
     }
 }
 @media (min-width: 1400px) {
     header.sticky {
        width: 1320px;
        margin: 0 auto;
    }
 }
.scrollToTop svg {
    fill: #fff;
}
.scrollToTop {
    background-color: #01bcf3;
    color: #fff;
    position: fixed;
    bottom: 20px;
    inset-inline-end: 40px;
    inset-block-end: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: none;
    z-index: 10000;
    height: 2.5rem;
    width: 2.5rem;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color .1s linear;
    border-radius: 50%;
    box-shadow: rgba(100, 100, 110, .2) 0 0.438rem 1.813rem 0;
}
/* Start::Nav-style-4 */
.nav.nav-style-4 {
    border: 0;
  }
  .nav.nav-style-4 .nav-link img {
      width: 20px;
      height: 20px;
      margin-inline-end: 0.65rem;
  }
  .nav.nav-style-4 .nav-link svg {
    width: 20px;
    height: 20px;
    color: #01bcf3;
    fill: #01bcf3;
    margin-inline-end: 0.65rem;
  }
  .nav.nav-style-4 .nav-item {
    margin-inline-end: 0;
  }
  .nav.nav-style-4 .nav-link {
    color: #212e3c;
    border: 0;
    font-weight: 500;
    font-size: 15px;
    padding: 0.7rem 1rem;
    margin: 2px;
    display: flex;
    align-items: center;
    margin-inline-end: 0;
    border-radius: 0.3rem;
  }
  .nav.nav-style-4 .nav-link.active {
    background-color: rgba(1, 188, 243, 0.1);
    color: #01bcf3;
    border: 0;
  }
  .nav.nav-style-4 .nav-link:hover, .nav.nav-style-4 .nav-link:focus {
    border: 0;
  }
  .nav-style-4 {
    position: sticky;
    top: 6rem;
}
pre {
    margin-bottom: 0;
}
  /* End::Nav-style-4 */

.technologies-tab-content .tab-pane {
    max-height: 31.15rem;
    overflow-y: scroll;
    background-color: #031938;
    color: #fff;
}