/*============================================================
Template Name   : Edubo
Description     : LMS And Education Course HTML5 Template
Author          : LunarTemp
Version         : 1.0
==============================================================*/
/*=====================================================
Table of contents
=======================================================

1. Google fonts
2. Theme variables
3. General css
4. Margin & padding
5. Preloader
6. Scroll top css
7. Bs custom css
8. Nice select css
9. Breadcrumb css
10. Pagination css 
11. Play btn
12. Site title css
13. Theme button
14. Header top css
15. Navbar css
16. Navbar multi level dropdown
17. Navbar mega menu
18. Sidebar popup css 
19. Search popup
20. Hero css 
21. About css 
22. Feature css 
23. Counter css 
24. Video css 
25. Contact us css 
26. Error css 
27. Terms/privacy css 
28. Coming soon css 
29. Faq css 
30. Team css 
31. Testimonial css 
32. Partner css 
33. Choose css 
34. Cta css 
35. Pricing css 
36. Blog css
37. Blog single css
38. Blog sidebar widget css
39. Auth css 
40. Step/process css  
41. Footer css
42. Skill css
43. Category css
44. Course css
45. Course single css
46. Instructor css
47. Instructor single css
48. Become instructor css
49. Download css
50. Mail success css
51. Gallery css
52. Help css 
53. Affiliate css 
54. Invoice css 
55. Career css 
56. Career single css 
57. Event css 
58. Event single css 
59. Cart css 
60. Checkout css 
61. Account css 
62. Home css

=======================================================*/
/*====================
1. Google fonts
======================*/
@import url("https://fonts.googleapis.com/css2?family=Sansation:wght@300;400;700&family=Roboto:wght@100;300;400;500;700;900&display=swap");
/*====================
2. Theme variables
======================*/
:root {
  --body-font: "Roboto", sans-serif;
  --heading-font: "Sansation", sans-serif;
  --theme-color: #8e79f9;
  --theme-color2: #f7931e;
  --theme-bg-light: #f6f6f6;
  --body-text-color: #757f95;
  --color-white: #ffffff;
  --color-dark: #000d83;
  --color-green: #15d4c9;
  --color-blue: #2075fe;
  --color-skyblue: #00bfff;
  --color-purple: #a855f7;
  --color-yellow: #fba707;
  --color-gray: #ececec;
  --color-red: #fd6a6a;
  --box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.05);
  --box-shadow2: 0 0 15px rgba(0, 0, 0, 0.17);
  --box-shadow3: 0 0 40px 5px rgba(142, 121, 249, 0.05);
  --transition: all 0.5s ease-in-out;
  --transition2: all 0.3s ease-in-out;
  --border-info-color: rgba(0, 0, 0, 0.08);
  --border-info-color2: rgba(0, 0, 0, 0.05);
  --border-white-color: rgba(255, 255, 255, 0.08);
  --border-white-color2: rgba(255, 255, 255, 0.15);
  --footer-bg: #000d83;
  --footer-text-color: #f5faff;
  --gradient: linear-gradient(to bottom right, #ff99ff 0%, #8e79f9 100%);
  --gradient2: linear-gradient(to bottom right, #fdd099 0%, #ff6f3d 100%);
  --gradient3: linear-gradient(90deg, #15d5ae 10%, #5177ff 35%, #de1dfc 100%);
}

/*====================
3. General css
======================*/
*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  scroll-behavior: inherit !important;
}

html,
body {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  color: var(--body-text-color);
  line-height: 1.8;
}

a {
  color: var(--color-dark);
  display: inline-block;
}

a,
a:active,
a:focus,
a:hover {
  outline: none;
  transition: all 0.3s ease-out 0s;
  text-decoration: none;
}

a:hover {
  color: var(--color-blue);
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-dark);
  margin: 0px;
  font-weight: 600;
  font-family: var(--heading-font);
  line-height: 1.2;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  margin: 0px;
}

.img,
img {
  max-width: 100%;
  transition: all 0.3s ease-out 0s;
  height: auto;
}

label {
  color: #999;
  cursor: pointer;
  font-weight: 400;
}

*::-moz-selection {
  background: #d6b161;
  color: var(--color-white);
  text-shadow: none;
}

::-moz-selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

::selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}

*::placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}

/* theme default */
.bg {
  background: var(--theme-bg-light);
}

.bg-2 {
      background: color(srgb 0.94 0.94 0.96 / 0.43);
}

/*====================
4. Margin & padding
======================*/
.pt-10 {
  padding-top: 10px;
}

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

.pt-20 {
  padding-top: 20px;
}

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

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

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

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

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

.pt-50 {
  padding-top: 50px;
}

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

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

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

.pt-70 {
  padding-top: 70px;
}

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

.py-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

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

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

.py-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pt-90 {
  padding-top: 90px;
}

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

.py-90 {
  padding-top: 90px;
  padding-bottom: 90px;
}

.pt-100 {
  padding-top: 100px;
}

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

.py-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-110 {
  padding-top: 110px;
}

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

.py-110 {
  padding-top: 110px;
  padding-bottom: 110px;
}

.pt-120 {
  padding-top: 120px;
}

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

.py-120 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.pt-130 {
  padding-top: 130px;
}

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

.py-130 {
  padding-top: 130px;
  padding-bottom: 130px;
}

.pt-140 {
  padding-top: 140px;
}

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

.py-140 {
  padding-top: 140px;
  padding-bottom: 140px;
}

.pt-150 {
  padding-top: 150px;
}

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

.py-150 {
  padding-top: 150px;
  padding-bottom: 150px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.my-70 {
  margin-top: 70px;
  margin-bottom: 70px;
}

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

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

.my-80 {
  margin-top: 80px;
  margin-bottom: 80px;
}

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

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

.my-90 {
  margin-top: 90px;
  margin-bottom: 90px;
}

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

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

.my-100 {
  margin-top: 100px;
  margin-bottom: 100px;
}

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

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

.my-110 {
  margin-top: 110px;
  margin-bottom: 110px;
}

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

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

.my-120 {
  margin-top: 120px;
  margin-bottom: 120px;
}

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

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

.my-130 {
  margin-top: 130px;
  margin-bottom: 130px;
}

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

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

.my-140 {
  margin-top: 140px;
  margin-bottom: 140px;
}

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

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

.my-150 {
  margin-top: 150px;
  margin-bottom: 150px;
}



/* faiz */

/* =========================
   GLOBAL VARIABLES
========================== */
/* ==================================
   CORPORATE HERO WITH LEFT IMAGE
================================== */

.image-hero {
  position: relative;
  padding: 120px 0 75px;
  background:
    radial-gradient(
      circle at 5% 20%,
      rgba(0, 212, 233, 0.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 95% 10%,
      rgba(138, 92, 255, 0.12),
      transparent 30%
    ),
    linear-gradient(135deg, #ffffff, #f8f9ff);
}

.image-left-layout {
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
}

.corporate-hero-image {
  position: relative;
  min-width: 0;
  margin-top: 20px;
}

.hero-image-frame {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(22, 55, 110, 0.18);
}

.hero-image-frame::before {
  content: "";
  position: absolute;
  inset: 15px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  pointer-events: none;
}

.hero-image-frame img {
  width: 100%;
  height: 610px;
  object-fit: cover;
  object-position: left;
  transition: transform 0.7s ease;
}

.hero-image-frame:hover img {
  transform: scale(1.05);
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(7, 31, 76, 0.02),
      rgba(7, 31, 76, 0.2)
    ),
    linear-gradient(
      120deg,
      rgba(0, 184, 255, 0.07),
      transparent 50%
    );
}

.hero-floating-badge {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 245px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(32, 88, 255, 0.12);
  border-radius: 17px;
  box-shadow: 0 18px 45px rgba(22, 55, 110, 0.15);
  backdrop-filter: blur(16px);
  animation: bespokeFloat 4.5s ease-in-out infinite;
}

.hero-floating-badge > i {
  min-width: 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, #2058ff, #00b8ff);
  border-radius: 13px;
  font-size: 17px;
}

.hero-floating-badge strong,
.hero-floating-badge span {
  display: block;
}

.hero-floating-badge strong {
  color: #08214d;
  font-size: 13px;
  line-height: 1.35;
}

.hero-floating-badge span {
  color: #62708a;
  font-size: 10px;
  margin-top: 3px;
}

.badge-top {
  top: 38px;
  right: 30px;
}

.badge-bottom {
  left: 30px;
  bottom: 35px;
}

.hero-image-pattern {
  position: absolute;
  top: -24px;
  left: -24px;
  z-index: -1;
  width: 145px;
  height: 145px;
  background-image: radial-gradient(
    rgba(32, 88, 255, 0.35) 1.4px,
    transparent 1.4px
  );
  background-size: 13px 13px;
  opacity: 0.42;
}

.image-left-layout .corporate-hero-text {
  padding-left: 15px;
}

/* .image-left-layout .corporate-hero-text h1 {
  font-size: clamp(50px, 5.5vw, 75px);
} */

.image-left-layout .corporate-hero-text h2 {
  font-size: clamp(22px, 2.2vw, 31px);
}

.image-left-layout .corporate-hero-text p {
  text-align: justify;
  line-height: 1.9;
}

/* =====================================================
   SUBTLE PREMIUM BACKGROUND BUBBLES
===================================================== */

.intel-trust-showcase {
  position: relative;
  isolation: isolate;
}

/* Soft bubble field */

.intel-trust-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 8% 24%,
      rgba(31, 171, 213, 0.08) 0 42px,
      transparent 43px
    ),
    radial-gradient(
      circle at 17% 78%,
      rgba(88, 118, 225, 0.055) 0 68px,
      transparent 69px
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(116, 91, 235, 0.06) 0 54px,
      transparent 55px
    ),
    radial-gradient(
      circle at 94% 72%,
      rgba(28, 164, 207, 0.055) 0 82px,
      transparent 83px
    );
}

/* Large outlined bubbles */

.intel-trust-showcase::after {
  content: "";
  position: absolute;
  top: -120px;
  left: -90px;
  width: 330px;
  height: 330px;
  z-index: -1;
  pointer-events: none;

  border: 1px solid rgba(33, 143, 190, 0.07);
  border-radius: 50%;

  box-shadow:
    560px 180px 0 -70px transparent,
    560px 180px 0 -69px rgba(105, 89, 228, 0.055),
    1120px 40px 0 -115px transparent,
    1120px 40px 0 -114px rgba(25, 151, 201, 0.05);

  animation: intelTrustBubbleDrift 14s ease-in-out infinite alternate;
}

@keyframes intelTrustBubbleDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(24px, 18px, 0) scale(1.04);
  }
}

/* Additional floating bubbles */

.intel-trust-accent-left {
  top: 58%;
  left: 7%;
  width: 58px;
  height: 58px;

  border: 1px solid rgba(22, 154, 202, 0.09);
  background: rgba(255, 255, 255, 0.32);

  box-shadow:
    0 14px 35px rgba(20, 77, 126, 0.04),
    inset 0 0 25px rgba(23, 164, 207, 0.035);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  animation: intelTrustSmallBubble 7s ease-in-out infinite;
}

.intel-trust-accent-right {
  right: 6%;
  bottom: 16%;
  width: 92px;
  height: 92px;

  border: 1px solid rgba(105, 87, 225, 0.075);
  background: rgba(255, 255, 255, 0.22);

  box-shadow:
    0 18px 42px rgba(46, 48, 118, 0.04),
    inset 0 0 30px rgba(105, 87, 225, 0.035);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  animation: intelTrustLargeBubble 9s ease-in-out infinite;
}

@keyframes intelTrustSmallBubble {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }
}

@keyframes intelTrustLargeBubble {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-12px, -20px, 0);
  }
}

/* Keep cards clearly above background decoration */

.intel-trust-heading,
.intel-trust-marquee,
.intel-trust-metrics {
  position: relative;
  z-index: 2;
}

/* Mobile: fewer effects for a cleaner look */

@media (max-width: 767.98px) {
  .intel-trust-showcase::before {
    background:
      radial-gradient(
        circle at 6% 26%,
        rgba(31, 171, 213, 0.06) 0 34px,
        transparent 35px
      ),
      radial-gradient(
        circle at 90% 75%,
        rgba(116, 91, 235, 0.05) 0 52px,
        transparent 53px
      );
  }

  .intel-trust-showcase::after {
    width: 220px;
    height: 220px;
    top: -85px;
    left: -100px;
  }

  .intel-trust-accent-left,
  .intel-trust-accent-right {
    opacity: 0.7;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .intel-trust-showcase::after,
  .intel-trust-accent-left,
  .intel-trust-accent-right {
    animation: none !important;
  }
}
/* RESPONSIVE */

@media (max-width: 1050px) {
  .image-left-layout {
    gap: 45px;
  }

  .hero-image-frame,
  .hero-image-frame img {
    height: 560px;
    min-height: 560px;
  }

  .badge-top {
    right: 20px;
  }
}

@media (max-width: 900px) {
  .image-left-layout {
    grid-template-columns: 1fr;
  }

  .corporate-hero-image {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
  }

  .image-left-layout .corporate-hero-text {
    padding-left: 0;
    text-align: center;
  }

  .image-left-layout .corporate-hero-text p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .image-hero {
    padding-top: 85px;
  }

  .hero-image-frame,
  .hero-image-frame img {
    height: 470px;
    min-height: 470px;
  }

  .hero-image-frame {
    border-radius: 23px;
  }

  .hero-floating-badge {
    min-width: auto;
    width: calc(100% - 30px);
    left: 15px;
    right: 15px;
  }

  .badge-top {
    top: 20px;
  }

  .badge-bottom {
    bottom: 20px;
  }

  /* .image-left-layout .corporate-hero-text h1 {
    font-size: 46px;
  } */
}

:root {
  --primary-blue: #2058ff;
  --secondary-blue: #00b8ff;
  --cyan: #00d4e9;
  --purple: #8a5cff;
  --dark-blue: #071f4c;
  --heading-color: #08214d;
  --text-color: #62708a;
  --light-bg: #f6f9ff;
  --white: #ffffff;
  --border-color: rgba(42, 97, 255, 0.12);
  --shadow: 0 24px 60px rgba(22, 55, 110, 0.1);
  --small-shadow: 0 12px 35px rgba(22, 55, 110, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Poppins", Arial, sans-serif;
  color: var(--text-color);
  background: #ffffff;
  line-height: 1.75;
}

img {
  display: block;
  width: 100%;
}

a {
  text-decoration: none;
}

.corporate-page {
  overflow: hidden;
}

.corporate-container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(0, 184, 255, 0.18);
  border-radius: 100px;
  color: var(--primary-blue);
  background: rgba(32, 88, 255, 0.06);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.gradient-text {
  background: linear-gradient(
    90deg,
    var(--primary-blue),
    var(--cyan),
    var(--purple)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-heading {
  max-width: 790px;
  margin-bottom: 65px;
}

.section-heading.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading h2 {
  color: var(--heading-color);
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.2;
  letter-spacing: -1.6px;
  margin-bottom: 18px;
}

.section-heading p {
  max-width: 680px;
  margin: 0 auto;
  font-size: 16px;
}

.primary-btn,
.light-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  transition: 0.35s ease;
}

.primary-btn {
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--secondary-blue)
  );
  box-shadow: 0 15px 30px rgba(32, 88, 255, 0.22);
}

.primary-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(32, 88, 255, 0.3);
}


/* =========================
   HERO SECTION
========================== */

.corporate-hero {
  position: relative;
  padding: 90px 0 70px;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(143, 92, 255, 0.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 15% 20%,
      rgba(0, 212, 233, 0.12),
      transparent 30%
    ),
    linear-gradient(135deg, #ffffff, #f8f9ff);
}

/* .corporate-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -180px;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(56, 109, 255, 0.08);
  border-radius: 50%;
} */

.corporate-hero::after {
  content: "";
  position: absolute;
  left: -150px;
  bottom: -240px;
  width: 450px;
  height: 450px;
  background: rgba(0, 206, 235, 0.06);
  border-radius: 50%;
}

.corporate-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 80px;
}

.corporate-hero-text h1 {
  color: var(--heading-color);
  font-size: clamp(46px, 4vw, 78px);
  line-height: 1.02;
  letter-spacing: -3px;
  margin-bottom: 22px;
}

.corporate-hero-text h2 {
  max-width: 640px;
  color: var(--heading-color);
  font-size: clamp(20px, 2.3vw, 29px);
  line-height: 1.35;
  margin-bottom: 22px;
}

.corporate-hero-text p {
  max-width: 650px;
  margin-bottom: 15px;
  font-size: 15px;
  text-align: justify;
}

.corporate-hero-text .primary-btn {
  margin-top: 18px;
}

.corporate-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.identity-orbit {
  position: relative;
  width: 470px;
  height: 470px;
}

.orbit {
  position: absolute;
  border: 1px dashed rgba(32, 88, 255, 0.22);
  border-radius: 50%;
}

.orbit-one {
  inset: 50px;
  animation: orbitRotate 20s linear infinite;
}

.orbit-two {
  inset: 105px;
  animation: orbitRotateReverse 16s linear infinite;
}

.identity-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 155px;
  height: 155px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(
    145deg,
    var(--primary-blue),
    var(--secondary-blue),
    var(--purple)
  );
  border: 12px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 25px 60px rgba(32, 88, 255, 0.28);
}

.identity-center i {
  font-size: 34px;
  margin-bottom: 9px;
}

.identity-center strong {
  font-size: 13px;
}

.orbit-item {
  position: absolute;
  z-index: 3;
  min-width: 112px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--heading-color);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-color);
  border-radius: 13px;
  box-shadow: var(--small-shadow);
  font-size: 12px;
  font-weight: 700;
}

.orbit-item i {
  color: var(--primary-blue);
}

.orbit-top {
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.orbit-right {
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
}

.orbit-bottom {
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
}

.orbit-left {
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
}

.corporate-stats {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 80px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.stat-box {
  position: relative;
  padding: 28px 25px;
  text-align: center;
}

.stat-box:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 1px;
  height: 50%;
  background: var(--border-color);
}

.stat-box strong {
  display: block;
  color: var(--primary-blue);
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.stat-box span {
  font-size: 12px;
  font-weight: 600;
}


/* =========================
   IDENTITY DESCRIPTION
========================== */

.identity-description {
  padding: 120px 0;
}

.identity-description-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 65px;
}

.identity-image-card {
  position: relative;
}

.identity-image-card > img {
  height: 570px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.identity-image-card::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -18px;
  width: 100px;
  height: 100px;
  border-top: 3px solid var(--cyan);
  border-left: 3px solid var(--cyan);
  border-radius: 26px 0 0 0;
}

.image-floating-card {
  position: absolute;
  right: -35px;
  bottom: 35px;
  width: 290px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.floating-icon {
  min-width: 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-blue), var(--cyan));
  border-radius: 14px;
}

.image-floating-card strong,
.image-floating-card span {
  display: block;
}

.image-floating-card strong {
  color: var(--heading-color);
  font-size: 13px;
}

.image-floating-card span {
  font-size: 11px;
}

.identity-content-card {
  position: relative;
  padding: 55px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 28px;
  box-shadow: var(--small-shadow);
}

.content-number {
  position: absolute;
  top: 25px;
  right: 30px;
  color: rgba(32, 88, 255, 0.08);
  font-size: 68px;
  font-weight: 900;
}

.small-title {
  display: block;
  color: var(--secondary-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.identity-content-card h3 {
  position: relative;
  z-index: 2;
  color: var(--heading-color);
  font-size: 30px;
  line-height: 1.35;
  margin-bottom: 22px;
}

.identity-content-card p {
  margin-bottom: 15px;
  font-size: 14px;
}

.identity-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  margin-top: 28px;
}

.identity-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--heading-color);
  font-size: 13px;
  font-weight: 600;
}

.identity-feature i {
  min-width: 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-blue), var(--cyan));
  border-radius: 50%;
  font-size: 10px;
}


/* =========================
   HERITAGE SECTION
========================== */

.heritage-section {
  padding: 100px 0;
  background:
    radial-gradient(
      circle at 95% 10%,
      rgba(138, 92, 255, 0.08),
      transparent 25%
    ),
    #f7f9ff;
}

.heritage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.heritage-card {
  position: relative;
  padding: 45px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  box-shadow: var(--small-shadow);
  transition: 0.35s ease;
}

.heritage-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

.heritage-card-dark {
  color: rgba(255, 255, 255, 0.74);
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(0, 212, 233, 0.25),
      transparent 32%
    ),
    linear-gradient(145deg, #061b46, #0b3175);
}

.heritage-card-top {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 25px;
}

.heritage-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-blue), var(--cyan));
  border-radius: 15px;
  box-shadow: 0 12px 25px rgba(32, 88, 255, 0.24);
}

.heritage-card-top span {
  color: var(--primary-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.heritage-card-dark .heritage-card-top span {
  color: var(--cyan);
}

.heritage-card h3 {
  color: var(--heading-color);
  font-size: 27px;
  line-height: 1.35;
  margin-bottom: 20px;
}

.heritage-card-dark h3 {
  color: #ffffff;
}

.heritage-card p {
  margin-bottom: 15px;
  font-size: 14px;
  text-align: justify;
}

.heritage-highlight {
  margin-top: 30px;
  padding-top: 25px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.heritage-highlight strong {
  color: var(--cyan);
  font-size: 42px;
}

.heritage-highlight span {
  font-size: 13px;
  font-weight: 600;
}

.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.portfolio-tags span {
  padding: 8px 13px;
  color: var(--primary-blue);
  background: rgba(32, 88, 255, 0.06);
  border: 1px solid rgba(32, 88, 255, 0.1);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
}


/* =========================
   CONTRIBUTION SECTION
========================== */

.contribution-section {
  padding: 90px 0;
}

.contribution-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 80px;
}

.framework-flow {
  position: relative;
  width: 470px;
  height: 470px;
  margin: auto;
  border: 1px dashed rgba(32, 88, 255, 0.25);
  border-radius: 50%;
}

.framework-flow::before {
  content: "";
  position: absolute;
  inset: 70px;
  border: 1px dashed rgba(0, 184, 255, 0.22);
  border-radius: 50%;
}

.framework-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  background: linear-gradient(145deg, var(--dark-blue), var(--primary-blue));
  border: 12px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 25px 55px rgba(19, 61, 130, 0.24);
}

.framework-center i {
  font-size: 33px;
  margin-bottom: 10px;
}

.framework-center strong {
  max-width: 100px;
  font-size: 12px;
  line-height: 1.3;
}

.framework-node {
  position: absolute;
  width: 105px;
  height: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--heading-color);
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: var(--small-shadow);
}

.framework-node span {
  position: absolute;
  top: 7px;
  right: 9px;
  color: var(--secondary-blue);
  font-size: 9px;
  font-weight: 800;
}

.framework-node i {
  color: var(--primary-blue);
  font-size: 23px;
  margin-bottom: 6px;
}

.framework-node strong {
  font-size: 11px;
}

.node-one {
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
}

.node-two {
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
}

.node-three {
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}

.node-four {
  top: 50%;
  left: -25px;
  transform: translateY(-50%);
}

.contribution-cards {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.contribution-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding: 35px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 22px;
  box-shadow: var(--small-shadow);
  transition: 0.35s ease;
}

.contribution-card:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow);
}

.contribution-card-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary-blue), var(--cyan));
  border-radius: 17px;
  font-size: 21px;
}

.contribution-card span {
  display: block;
  color: var(--secondary-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.contribution-card h3 {
  color: var(--heading-color);
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 13px;
}

.contribution-card p {
  margin-bottom: 10px;
  font-size: 13px;
  text-align: justify;
}

/* =========================================
   ALIGNMENT SECTION
========================================= */

.alignment-section {
    position: relative;
    overflow: hidden;
    padding: 110px 20px;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #f4f7ff 48%,
            #faf8ff 100%
        );
}

.corporate-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.alignment-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 85px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.alignment-content {
    max-width: 690px;
}

.alignment-content .section-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 25px;
    padding: 10px 17px;

    border: 1px solid #acd3ff;
    border-radius: 50px;

    background: rgba(255, 255, 255, 0.7);
    color: #176bff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    box-shadow:
        0 8px 24px rgba(31, 103, 215, 0.07);
}

.alignment-content h2 {
    margin: 0 0 28px;

    color: #082354;
    font-size: clamp(44px, 5vw, 66px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -3px;
}

.alignment-content h2 span {
    display: block;
}

.gradient-text {
    background:
        linear-gradient(
            90deg,
            #176bff 0%,
            #19bdf4 48%,
            #7657ff 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.alignment-content > h3 {
    max-width: 620px;
    margin: 0 0 24px;

    color: #092453;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.4;
}

.alignment-content > p {
    margin: 0 0 18px;

    color: #64748b;
    font-size: 16px;
    line-height: 1.85;
    text-align: justify;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin-top: 23px;
    padding: 17px 27px;

    border-radius: 13px;

    background:
        linear-gradient(
            90deg,
            #246cff,
            #12bdf5
        );

    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;

    box-shadow:
        0 15px 35px rgba(31, 112, 255, 0.24);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.primary-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 21px 43px rgba(31, 112, 255, 0.34);
}

.primary-btn i {
    transition: transform 0.3s ease;
}

.primary-btn:hover i {
    transform: translateY(4px);
}


/* =========================================
   RIGHT IMAGE AREA
========================================= */

.alignment-image-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alignment-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 520px;
    min-height: 620px;
    overflow: visible;
    border-radius: 34px;
}


/* =========================================
   MAIN IMAGE
========================================= */

/* =========================================
   BESPOKE ALIGNMENT SECTION
========================================= */

.bespoke-section {
    position: relative;
    overflow: hidden;
    padding: 90px 20px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f6f9ff 38%,
            #eef4ff 68%,
            #fbf9ff 100%
        );
}

.bespoke-section *,
.bespoke-section *::before,
.bespoke-section *::after {
    box-sizing: border-box;
}

.bespoke-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}


/* =========================================
   BACKGROUND DECORATIONS
========================================= */

.bespoke-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.bespoke-glow-one {
    top: -160px;
    right: -120px;
    width: 430px;
    height: 430px;

    background:
        radial-gradient(
            circle,
            rgba(61, 107, 255, 0.16) 0%,
            rgba(61, 107, 255, 0) 70%
        );
}

.bespoke-glow-two {
    bottom: -180px;
    left: -120px;
    width: 470px;
    height: 470px;

    background:
        radial-gradient(
            circle,
            rgba(28, 204, 242, 0.16) 0%,
            rgba(28, 204, 242, 0) 70%
        );
}

.bespoke-grid-pattern {
    position: absolute;
    top: 70px;
    right: 7%;
    width: 180px;
    height: 180px;
    opacity: 0.2;

    background-image:
        radial-gradient(
            rgba(43, 109, 255, 0.6) 1px,
            transparent 1px
        );

    background-size: 16px 16px;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.bespoke-layout {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 95px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.bespoke-content {
    max-width: 720px;
}

.bespoke-label {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 27px;
    padding: 11px 18px;

    border: 1px solid #b8d5ff;
    border-radius: 50px;

    background: rgba(255, 255, 255, 0.76);

    color: #176dff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;

    box-shadow:
        0 9px 28px rgba(30, 91, 185, 0.08);
}

.label-line {
    display: inline-block;
    width: 23px;
    height: 2px;
    border-radius: 10px;
    background: #176dff;
}

.bespoke-content h2 {
    margin: 0 0 28px;

    color: #082456;
    font-size: clamp(48px, 5.5vw, 72px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -3.5px;
}

.bespoke-gradient-text {
    display: block;

    background:
        linear-gradient(
            90deg,
            #176cff 0%,
            #19b9f3 50%,
            #735aff 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bespoke-content > h3 {
    max-width: 690px;
    margin: 0 0 25px;

    color: #092655;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.42;
}

.bespoke-content > p {
    margin: 0 0 18px;
    text-align: justify;
    color: #63738d;
    font-size: 16px;
    line-height: 1.88;
}


/* =========================================
   FEATURE POINTS
========================================= */

.bespoke-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 32px;
}

.bespoke-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;

    border: 1px solid #e0e9f6;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(247, 251, 255, 0.96)
        );

    box-shadow:
        0 10px 28px rgba(28, 66, 126, 0.07);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.bespoke-feature-item:hover {
    transform: translateY(-4px);
    border-color: #bdd6ff;

    box-shadow:
        0 16px 35px rgba(30, 91, 181, 0.12);
}

.bespoke-feature-icon {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #176dff,
            #1bbdf1
        );

    color: #ffffff;
    font-size: 14px;

    box-shadow:
        0 9px 20px rgba(24, 111, 255, 0.22);
}

.bespoke-feature-item strong {
    display: block;
    margin-bottom: 4px;

    color: #0b2a5b;
    font-size: 14px;
    font-weight: 800;
}

.bespoke-feature-item span {
    display: block;

    color: #748199;
    font-size: 12px;
    line-height: 1.55;
}


/* =========================================
   PRIMARY BUTTON
========================================= */

.bespoke-primary-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    overflow: hidden;

    margin-top: 33px;
    padding: 18px 29px;

    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            #176cff 0%,
            #1695ff 55%,
            #1dc3ed 100%
        );

    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;

    box-shadow:
        0 16px 35px rgba(23, 108, 255, 0.27);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.bespoke-primary-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 55%;
    height: 100%;

    transform: skewX(-25deg);

    background: rgba(255, 255, 255, 0.24);

    transition: left 0.7s ease;
}

.bespoke-primary-btn:hover::before {
    left: 140%;
}

.bespoke-primary-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 44px rgba(23, 108, 255, 0.36);
}

.bespoke-primary-btn span,
.bespoke-primary-btn i {
    position: relative;
    z-index: 2;
}

.bespoke-primary-btn i {
    transition: transform 0.3s ease;
}

.bespoke-primary-btn:hover i {
    transform: translateX(5px);
}


/* =========================================
   RIGHT VISUAL
========================================= */

.bespoke-visual {
    position: relative;
    width: 100%;
    max-width: 592px;
    margin: 0 auto;
    padding: 0px;
    margin-top: 60px;
}


/* =========================================
   IMAGE FRAME
========================================= */

.bespoke-image-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;

    border: 8px solid rgba(255, 255, 255, 0.92);
    border-radius: 31px;

    background: #ffffff;

    box-shadow:
        0 35px 80px rgba(24, 60, 120, 0.2);
}

.bespoke-image {
    display: block;
    width: 100%;
    height: auto;

    object-fit: contain;
    object-position: center;

    background: #ffffff;
}


/* =========================================
   IMAGE SHADE
========================================= */

.bespoke-image-shade {
    position: absolute;
    z-index: 2;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 27, 68, 0) 35%,
            rgba(4, 30, 75, 0.12) 58%,
            rgba(4, 30, 75, 0.9) 100%
        );

    pointer-events: none;
}


/* =========================================
   IMAGE TOP LABEL
========================================= */

.bespoke-image-label {
    position: absolute;
    z-index: 4;
    right: 30px;
    bottom: 115px;
    left: 30px;
}

.bespoke-image-label span {
    display: block;
    margin-bottom: 9px;

    color: #62d5ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.bespoke-image-label h3 {
    max-width: 430px;
    margin: 0;

    color: #ffffff;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.25;
}


/* =========================================
   IMAGE FOOTER
========================================= */

.bespoke-image-footer {
    position: absolute;
    z-index: 4;
    right: 27px;
    bottom: 27px;
    left: 27px;

    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 17px;

    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.image-footer-icon {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);

    color: #ffffff;
    font-size: 15px;
}

.bespoke-image-footer strong {
    display: block;
    margin-bottom: 3px;

    color: #ffffff;
    font-size: 13px;
}

.bespoke-image-footer span {
    display: block;

    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================
   FLOATING CARDS
========================================= */

.bespoke-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;

    border: 1px solid rgba(218, 228, 243, 0.9);
    border-radius: 17px;

    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);

    box-shadow:
        0 18px 43px rgba(25, 62, 122, 0.16);

    animation: bespokeFloat 4.5s ease-in-out infinite;
}

.bespoke-card-top {
    top: 70px;
    left: -55px;
}

.bespoke-card-bottom {
    right: -55px;
    bottom: 145px;
    animation-delay: 1.2s;
}

.floating-icon {
    display: flex;
    flex: 0 0 47px;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #176dff,
            #1bc3ed
        );

    color: #ffffff;
    font-size: 16px;
}

.floating-percentage {
    display: flex;
    flex: 0 0 54px;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 47px;

    border-radius: 13px;

    background: #edf5ff;
    color: #176dff;

    font-size: 16px;
    font-weight: 800;
}

.bespoke-floating-card strong {
    display: block;
    margin-bottom: 4px;

    color: #092655;
    font-size: 14px;
    font-weight: 800;
}

.bespoke-floating-card span {
    display: block;

    color: #758299;
    font-size: 11px;
}


/* =========================================
   STATUS CARD
========================================= */

.bespoke-status-card {
    position: absolute;
    z-index: 5;
    top: 17px;
    right: 58px;

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;

    border: 1px solid #deebf7;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 13px 32px rgba(25, 62, 122, 0.12);
}

.status-dot {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;

    border-radius: 50%;
    background: #21c77a;

    box-shadow:
        0 0 0 5px rgba(33, 199, 122, 0.12);
}

.bespoke-status-card strong {
    display: block;

    color: #0a2858;
    font-size: 11px;
}

.bespoke-status-card small {
    display: block;
    margin-top: 2px;

    color: #7b8799;
    font-size: 9px;
}


/* =========================================
   FLOAT ANIMATION
========================================= */

@keyframes bespokeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================
   LAPTOP RESPONSIVE
========================================= */

@media (max-width: 1200px) {

    .bespoke-layout {
        gap: 65px;
    }

    .bespoke-card-top {
        left: -25px;
    }

    .bespoke-card-bottom {
        right: -25px;
    }

}


/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .bespoke-layout {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    .bespoke-content {
        max-width: 850px;
    }

    .bespoke-visual {
        max-width: 620px;
    }

}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .bespoke-section {
        padding: 80px 15px;
    }

    .bespoke-layout {
        gap: 55px;
    }

    .bespoke-content h2 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .bespoke-content > h3 {
        font-size: 22px;
    }

    .bespoke-content > p {
        font-size: 15px;
    }

    .bespoke-features {
        grid-template-columns: 1fr;
    }

    .bespoke-visual {
        padding: 0;
    }

    .bespoke-floating-card,
    .bespoke-status-card {
        position: relative;
        inset: auto;
        margin-top: 14px;
        animation: none;
    }

    .bespoke-image-frame {
        border-radius: 25px;
    }

    .bespoke-image-label {
        right: 23px;
        bottom: 105px;
        left: 23px;
    }

    .bespoke-image-label h3 {
        font-size: 23px;
    }

    .bespoke-image-footer {
        right: 22px;
        bottom: 22px;
        left: 22px;
    }

}

/* =====================================================
   HERO CARDS RESPONSIVE FIX
===================================================== */

.hero-image-wrapper {
  position: relative;
}

.hero-image-wrapper > img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-card {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
}

/* =====================================================
   TABLET + MOBILE
   806px viewport par bhi apply hoga
===================================================== */

@media (max-width: 991.98px) {

  .hero-section {
    padding-top: 105px !important;
  }

  .hero-image-wrapper {
    width: 100%;
    max-width: 520px;
    margin: 25px auto 0;
    overflow: visible;
  }

  .hero-card {
    transform: none !important;
  }

  /* Monthly Progress Card */
  .hero-image-wrapper .hero-card.card-two {
    width: 138px !important;
    height: 74px !important;
    min-height: 74px !important;

    top: auto !important;
    right: 12% !important;
    bottom: 7% !important;
    left: auto !important;

    padding: 9px 10px !important;
    border-radius: 13px !important;
  }

  .hero-image-wrapper .card-two .card-top {
    margin: 0 0 4px !important;
  }

  .hero-image-wrapper .card-two .card-top h5 {
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  .hero-image-wrapper .card-two .card-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
  }

  .hero-image-wrapper .card-two .left-progress {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .hero-image-wrapper .card-two .check-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 9px !important;
  }

  .hero-image-wrapper .card-two .progress-lines {
    width: 35px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .hero-image-wrapper .card-two .progress-lines .line {
    width: 100% !important;
    height: 3px !important;
  }

  .hero-image-wrapper .card-two .progress-circle {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .hero-image-wrapper .card-two .progress-circle svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: rotate(-90deg);
  }

  .hero-image-wrapper .card-two .progress-circle .number {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    font-size: 8px !important;
  }

  /* Daily Progress Card */
  .hero-image-wrapper .hero-card.card-three {
    width: 105px !important;
    height: 76px !important;

    top: auto !important;
    right: auto !important;
    bottom: 3% !important;
    left: 16% !important;

    padding: 8px 8px 5px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .hero-image-wrapper .card-three .card-top {
    margin: 0 !important;
  }

  .hero-image-wrapper .card-three .card-top h5 {
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  .hero-image-wrapper .card-three .graph-area {
    position: relative !important;
    width: 100% !important;
    height: 48px !important;
    margin-top: 3px !important;
    overflow: hidden !important;
  }

  .hero-image-wrapper .card-three .bars {
    position: absolute !important;
    right: 4px !important;
    bottom: 0 !important;
    left: 4px !important;

    height: 41px !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-around !important;
    gap: 4px !important;
  }

  .hero-image-wrapper .card-three .bar {
    width: 10px !important;
    max-width: 10px !important;
    border-radius: 3px 3px 0 0 !important;
  }

  .hero-image-wrapper .card-three .bar1 {
    height: 17px !important;
  }

  .hero-image-wrapper .card-three .bar2 {
    height: 28px !important;
  }

  .hero-image-wrapper .card-three .bar3 {
    height: 38px !important;
  }

  .hero-image-wrapper .card-three .bar4 {
    height: 24px !important;
  }

  .hero-image-wrapper .card-three .graph-line {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 45px !important;

    pointer-events: none;
  }

  .hero-image-wrapper .card-three .graph-line path {
    fill: none !important;
    stroke-width: 4px !important;
    vector-effect: non-scaling-stroke;
  }
}

/* =====================================================
   PHONE
===================================================== */
/* =====================================================
   FINAL MOBILE HERO CARDS
===================================================== */

@media (max-width: 575.98px) {

  .hero-section {
    padding-top: 90px !important;
  }

  .hero-image-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 25px auto 0 !important;

    /* Cards ke liye bottom space */
    padding-bottom: 82px !important;
    overflow: visible !important;
  }

  .hero-image-wrapper > .main-hero-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Common mobile card */
  .hero-image-wrapper .hero-card {
    top: auto !important;
    bottom: 10px !important;

    transform: none !important;
    box-sizing: border-box !important;

    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(10, 42, 95, 0.13) !important;
  }

  /* Monthly Progress */
  .hero-image-wrapper .hero-card.card-two {
    right: 4% !important;
    left: auto !important;

    width: 46% !important;
    height: 72px !important;
    min-height: 72px !important;

    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  .hero-image-wrapper .card-two .card-top {
    margin: 0 0 5px !important;
  }

  .hero-image-wrapper .card-two .card-top h5 {
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .hero-image-wrapper .card-two .card-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
  }

  .hero-image-wrapper .card-two .left-progress {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .hero-image-wrapper .card-two .check-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 9px !important;
  }

  .hero-image-wrapper .card-two .progress-lines {
    width: 35px !important;
    gap: 3px !important;
  }

  .hero-image-wrapper .card-two .progress-lines .line {
    height: 4px !important;
  }

  .hero-image-wrapper .card-two .progress-circle {
    position: relative !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .hero-image-wrapper .card-two .progress-circle svg {
    width: 100% !important;
    height: 100% !important;
  }

  .hero-image-wrapper .card-two .progress-circle .number {
    font-size: 8px !important;
  }

  /* Daily Progress */
  .hero-image-wrapper .hero-card.card-three {
    left: 4% !important;
    right: auto !important;

    width: 42% !important;
    height: 72px !important;

    padding: 9px 9px 5px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .hero-image-wrapper .card-three .card-top {
    margin: 0 !important;
  }

  .hero-image-wrapper .card-three .card-top h5 {
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  .hero-image-wrapper .card-three .graph-area {
    position: relative !important;

    width: 100% !important;
    height: 45px !important;
    margin-top: 3px !important;

    overflow: hidden !important;
  }

  .hero-image-wrapper .card-three .bars {
    position: absolute !important;
    right: 5px !important;
    bottom: 0 !important;
    left: 5px !important;

    height: 38px !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-around !important;
    gap: 4px !important;
  }

  .hero-image-wrapper .card-three .bar {
    width: 9px !important;
    max-width: 9px !important;
  }

  .hero-image-wrapper .card-three .bar1 {
    height: 16px !important;
  }

  .hero-image-wrapper .card-three .bar2 {
    height: 25px !important;
  }

  .hero-image-wrapper .card-three .bar3 {
    height: 35px !important;
  }

  .hero-image-wrapper .card-three .bar4 {
    height: 22px !important;
  }

  .hero-image-wrapper .card-three .graph-line {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 42px !important;
  }
}

/* =====================================================
   EXTRA SMALL PHONE
===================================================== */

@media (max-width: 420px) {

  .hero-image-wrapper {
    max-width: 350px;
  }

  .hero-image-wrapper .hero-card.card-two {
    width: 100px !important;
    height: 61px !important;
    min-height: 61px !important;

    right: 1% !important;
    bottom: 6% !important;

    padding: 6px !important;
  }

  .hero-image-wrapper .hero-card.card-three {
    width: 88px !important;
    height: 63px !important;

    left: 1% !important;
    bottom: 2% !important;

    padding: 6px !important;
  }

  .hero-image-wrapper .card-two .card-top h5,
  .hero-image-wrapper .card-three .card-top h5 {
    font-size: 7px !important;
  }

  .hero-image-wrapper .card-two .progress-circle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .hero-image-wrapper .card-three .graph-area {
    height: 38px !important;
  }

  .hero-image-wrapper .card-three .bars {
    height: 33px !important;
  }

  .hero-image-wrapper .card-three .graph-line {
    height: 36px !important;
  }
}
/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .bespoke-section {
        padding: 70px 12px;
    }

    .bespoke-label {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .bespoke-content h2 {
        font-size: 36px;
    }

    .bespoke-content > h3 {
        font-size: 20px;
    }

    .bespoke-feature-item {
        padding: 14px;
    }

    .bespoke-image-label {
        bottom: 100px;
    }

    .bespoke-image-label span {
        font-size: 9px;
    }

    .bespoke-image-label h3 {
        font-size: 20px;
    }

    .bespoke-image-footer span {
        display: none;
    }

}


/* =========================================
   IMAGE GRADIENT OVERLAY
========================================= */

.alignment-image-wrapper::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;

    border: 9px solid transparent;
    border-radius: 34px;

    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(5, 31, 79, 0.15) 58%,
            rgba(4, 29, 72, 0.94) 100%
        );

    pointer-events: none;
}


/* =========================================
   IMAGE BOTTOM CONTENT
========================================= */

.alignment-image-overlay {
    position: absolute;
    z-index: 5;
    right: 36px;
    bottom: 38px;
    left: 36px;

    color: #ffffff;
}

.alignment-image-overlay span {
    display: inline-block;
    margin-bottom: 10px;

    color: #6bd8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.alignment-image-overlay h3 {
    margin: 0 0 10px;

    color: #ffffff;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.25;
}

.alignment-image-overlay p {
    margin: 0;

    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.65;
}


/* =========================================
   FLOATING BADGES
========================================= */

.alignment-image-badge {
    position: absolute;
    z-index: 6;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 16px 20px;

    border: 1px solid rgba(218, 229, 246, 0.8);
    border-radius: 17px;

    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(14px);

    box-shadow:
        0 18px 45px rgba(27, 69, 137, 0.16);
}

.top-badge {
    top: 45px;
    left: -55px;
}

.bottom-badge {
    right: -50px;
    bottom: 145px;
}

.badge-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #176bff,
            #19c4ef
        );

    color: #ffffff;
    font-size: 18px;
}

.badge-number {
    display: flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 48px;

    border-radius: 14px;

    background: #eaf4ff;
    color: #176bff;

    font-size: 16px;
    font-weight: 800;
}

.alignment-image-badge strong {
    display: block;
    margin-bottom: 4px;

    color: #092453;
    font-size: 14px;
    font-weight: 800;
}

.alignment-image-badge span {
    display: block;

    color: #708097;
    font-size: 11px;
}


/* =========================================
   DECORATIVE SHAPES
========================================= */

.image-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.image-decoration-one {
    top: -55px;
    right: -55px;

    width: 190px;
    height: 190px;

    background:
        radial-gradient(
            circle,
            rgba(39, 109, 255, 0.19),
            rgba(39, 109, 255, 0)
        );
}

.image-decoration-two {
    left: -80px;
    bottom: -70px;

    width: 240px;
    height: 240px;

    background:
        radial-gradient(
            circle,
            rgba(32, 205, 244, 0.17),
            rgba(32, 205, 244, 0)
        );
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .alignment-layout {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .alignment-content {
        max-width: 850px;
    }

    .alignment-image-wrapper {
        max-width: 680px;
    }

    .top-badge {
        left: -20px;
    }

    .bottom-badge {
        right: -20px;
    }

}


@media (max-width: 700px) {

    .alignment-section {
        padding: 80px 16px;
    }

    .alignment-layout {
        gap: 55px;
    }

    .alignment-content h2 {
        font-size: 43px;
        letter-spacing: -2px;
    }

    .alignment-content > h3 {
        font-size: 22px;
    }

    .alignment-content > p {
        font-size: 15px;
        text-align: left;
    }

    .alignment-image-wrapper {
        min-height: 540px;
    }

    .alignment-main-image {
        height: 540px;
        border-radius: 26px;
    }

    .alignment-image-wrapper::after {
        border-radius: 26px;
    }

    .alignment-image-badge {
        position: relative;
        inset: auto;
        margin-top: 15px;
    }

    .alignment-image-wrapper {
        display: flex;
        flex-direction: column;
    }

    .alignment-main-image {
        order: 1;
    }

    .alignment-image-overlay {
        bottom: 32px;
    }

    .top-badge {
        order: 2;
    }

    .bottom-badge {
        order: 3;
    }

}


@media (max-width: 480px) {

    .alignment-content h2 {
        font-size: 37px;
    }

    .alignment-content > h3 {
        font-size: 20px;
    }

    .alignment-main-image {
        height: 500px;
    }

    .alignment-image-wrapper {
        min-height: 500px;
    }

    .alignment-image-overlay {
        right: 25px;
        bottom: 25px;
        left: 25px;
    }

    .alignment-image-overlay h3 {
        font-size: 22px;
    }

}
/* =========================
   WORKFLOW SECTION
========================== */

.workflow-section {
  position: relative;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(0, 212, 233, 0.2),
      transparent 27%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(138, 92, 255, 0.2),
      transparent 30%
    ),
    linear-gradient(145deg, #061a42, #0b3071);
}

.light-heading h2,
.light-heading p {
  color: #ffffff;
}

.light-heading p {
  color: rgba(255, 255, 255, 0.65);
  text-align: justify;
}

.light-heading h2 span {
  color: var(--cyan);
}

.workflow-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.workflow-item {
  position: relative;
  width: 165px;
  text-align: center;
}

.workflow-number {
  position: absolute;
  top: -8px;
  right: 22px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
}

.workflow-item > i {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  font-size: 25px;
  backdrop-filter: blur(12px);
}

.workflow-item h3 {
  color: #ffffff;
  font-size: 17px;
  margin-bottom: 8px;
}

.workflow-item p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  line-height: 1.6;
}

.workflow-line {
  width: 55px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.workflow-cta {
  margin-top: 80px;
  padding: 35px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 23px;
  backdrop-filter: blur(15px);
}

.workflow-cta span {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.workflow-cta h3 {
  color: #ffffff;
  font-size: 26px;
  margin-top: 7px;
}

.light-btn {
  flex-shrink: 0;
  color: var(--primary-blue);
  background: #ffffff;
}

.light-btn:hover {
  color: #ffffff;
  background: var(--primary-blue);
  transform: translateY(-4px);
}


/* =========================
   ANIMATIONS
========================== */

@keyframes orbitRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}


/* =========================
   RESPONSIVE
========================== */

@media (max-width: 1100px) {
  .corporate-hero-content,
  .identity-description-grid,
  .contribution-layout,
  .alignment-layout {
    gap: 45px;
  }

  .identity-orbit,
  .framework-flow {
    transform: scale(0.88);
  }

  .workflow-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }

  .workflow-line {
    display: none;
  }

  .workflow-item {
    width: auto;
  }
}

@media (max-width: 900px) {
  .corporate-hero {
    padding-top: 100px;
  }

  .corporate-hero-content,
  .identity-description-grid,
  .contribution-layout,
  .alignment-layout {
    grid-template-columns: 1fr;
  }

  .corporate-hero-text {
    text-align: center;
  }

  .corporate-hero-text p,
  .corporate-hero-text h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .corporate-hero-visual {
    margin-top: 20px;
  }

  .corporate-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-box:nth-child(2)::after {
    display: none;
  }

  .heritage-grid {
    grid-template-columns: 1fr;
  }

  .identity-image-card {
    max-width: 650px;
    margin: auto;
  }

  .identity-content-card {
    max-width: 700px;
    margin: auto;
  }

  .framework-flow {
    margin-top: 30px;
    margin-bottom: 40px;
  }

  .alignment-content {
    text-align: center;
  }

  .alignment-content p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .alignment-visual {
    max-width: 600px;
    width: 100%;
    margin: auto;
  }

  .workflow-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 650px) {
  .corporate-container {
    width: min(100% - 26px, 1180px);
  }

  .corporate-hero,
  .identity-description,
  .heritage-section,
  .contribution-section,
  .alignment-section,
  .workflow-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .corporate-hero-text h1 {
    letter-spacing: -2px;
  }

  .identity-orbit {
    width: 330px;
    height: 330px;
    transform: scale(0.9);
  }

  .identity-center {
    width: 125px;
    height: 125px;
  }

  .orbit-item {
    min-width: 90px;
    padding: 9px 11px;
    font-size: 10px;
  }

  .corporate-stats {
    grid-template-columns: 1fr;
  }

  .stat-box::after {
    display: none;
  }

  .stat-box:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
  }

  .identity-image-card > img {
    height: 430px;
  }

  .image-floating-card {
    right: 12px;
    bottom: 15px;
    width: calc(100% - 24px);
  }

  .identity-content-card,
  .heritage-card,
  .contribution-card {
    padding: 27px;
  }

  .identity-features {
    grid-template-columns: 1fr;
  }

  .framework-flow {
    width: 330px;
    height: 330px;
    transform: scale(0.92);
  }

  .framework-center {
    width: 125px;
    height: 125px;
  }

  .framework-node {
    width: 86px;
    height: 86px;
  }

  .contribution-card {
    grid-template-columns: 1fr;
  }

  .alignment-visual {
    min-height: 580px;
  }

  .alignment-main-card {
    width: 280px;
  }

  .alignment-card {
    width: 215px;
  }

  .card-one {
    top: 10px;
  }

  .card-two {
    top: auto;
    right: 0;
    bottom: 20px;
    transform: none;
  }

  .card-three {
    top: 120px;
    left: auto;
    right: 0;
    bottom: auto;
  }

  .workflow-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .workflow-item {
    max-width: 290px;
    margin: auto;
  }

  .workflow-cta {
    padding: 28px;
    flex-direction: column;
    text-align: center;
  }

  .workflow-cta h3 {
    font-size: 22px;
  }
}

/* ======================================================
   INTELLISURVS PREMIUM FEATURES SECTION
====================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");


.is-features-section {

    --is-primary: #1769ff;
    --is-secondary: #00b9ef;
    --is-dark: #071b49;
    --is-dark-two: #0b285e;
    --is-heading: #081d4f;
    --is-text: #61718a;
    --is-white: #ffffff;
    --is-light: #f5f8ff;
    --is-border: rgba(12, 42, 94, 0.11);
    --is-green: #12aa6d;
    --is-shadow: 0 25px 70px rgba(16, 47, 105, 0.12);

    position: relative;
    overflow: hidden;
    padding-top: 115px;
    background: #ffffff;
    font-family: "DM Sans", sans-serif;

}


.is-features-section *,
.is-features-section *::before,
.is-features-section *::after {

    box-sizing: border-box;

}


.is-features-section h2,
.is-features-section h3,
.is-features-section h4 {

    margin: 0;
    color: var(--is-heading);
    font-family: "Manrope", sans-serif;

}


.is-features-section p {

    margin: 0;
    color: var(--is-text);
    line-height: 1.8;

}


.is-feature-orb {

    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);

}


.is-orb-one {

    width: 420px;
    height: 420px;
    top: -220px;
    left: -220px;
    background: rgba(23, 105, 255, 0.08);

}


.is-orb-two {

    width: 350px;
    height: 350px;
    top: 350px;
    right: -200px;
    background: rgba(0, 185, 239, 0.08);

}


/* ======================================================
   INTRODUCTION
====================================================== */

.is-feature-intro {

    position: relative;
    z-index: 2;
    max-width: 930px;
    margin: 0 auto 65px;
    text-align: center;

}


.is-section-label {

    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--is-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;

}


.is-section-label span {

    width: 22px;
    height: 2px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        var(--is-primary),
        var(--is-secondary)
    );

}


.is-main-heading {

    margin-top: 18px !important;
    font-size: clamp(38px, 4.5vw, 62px);
    line-height: 1.12;
    letter-spacing: -2.4px;

}


.is-main-heading span {

    display: block;
    background: linear-gradient(90deg, #176bff 0%, #19bdf4 48%, #7657ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.is-intro-text {

    max-width: 830px;
    margin: 24px auto 0 !important;
    font-size: 16px;

}


/* ======================================================
   CUSTOM PLATFORM
====================================================== */

.is-custom-platform {

    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;
    overflow: hidden;
    margin-bottom: 120px;
    border: 1px solid var(--is-border);
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(0, 185, 239, 0.13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f5f9ff
        );
    box-shadow: var(--is-shadow);

}


.is-custom-content {

    padding: 65px;

}


.is-small-label {

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(23, 105, 255, 0.13);
    border-radius: 50px;
    color: var(--is-primary);
    background: #f4f8ff;
    font-size: 10px;
    font-weight: 800;

}


.is-custom-content > h3 {

    margin-top: 18px;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -1.5px;

}


.is-custom-content > h3 span {

    display: block;
    background: linear-gradient(90deg, #176bff 0%, #19bdf4 48%, #7657ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}


.is-custom-content > p {

    margin-top: 18px;
    font-size: 14px;
    text-align: justify;

}


.is-custom-points {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 30px;

}


.is-point-item {

    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--is-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.82);
    transition: all 0.3s ease;

}


.is-point-item:hover {

    transform: translateY(-4px);
    border-color: rgba(23, 105, 255, 0.23);
    box-shadow: 0 14px 30px rgba(20, 54, 108, 0.09);

}


.is-point-icon {

    width: 37px;
    height: 37px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 11px;
    color: var(--is-primary);
    background: #edf4ff;
    font-size: 13px;

}


.is-point-item h4 {

    font-size: 13px;

}


.is-point-item p {

    margin-top: 5px;
    font-size: 10px;
    line-height: 1.55;

}


/* Custom Visual */

.is-custom-visual {

    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 55px;
    animation: bespokeFloat 4.5s ease-in-out infinite;

}


.is-dashboard-window {

    width: 100%;
    max-width: 510px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 30px 80px rgba(18, 52, 108, 0.18);
    transform: perspective(1100px) rotateY(-4deg);

}


.is-dashboard-topbar {

    min-height: 53px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 17px;
    border-bottom: 1px solid var(--is-border);
    color: #31466c;
    font-size: 11px;
    font-weight: 700;

}


.is-window-dots {

    display: flex;
    gap: 5px;

}


.is-window-dots span {

    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dce5f2;

}


.is-live-badge {

    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--is-green);
    font-size: 10px;

}


.is-live-badge i {

    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--is-green);
    box-shadow: 0 0 0 5px rgba(18, 170, 109, 0.12);

}


.is-dashboard-body {

    display: flex;
    min-height: 340px;

}


.is-dashboard-sidebar {

    width: 62px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 22px;
    padding-top: 20px;
    border-right: 1px solid var(--is-border);
    background: #f9fbff;

}


.is-side-logo {

    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--is-primary),
        var(--is-secondary)
    );

}


.is-dashboard-sidebar > span {

    width: 20px;
    height: 6px;
    border-radius: 10px;
    background: #dce6f4;

}


.is-dashboard-sidebar > span.active {

    background: var(--is-primary);

}


.is-dashboard-main {

    flex: 1;
    padding: 24px;

}


.is-dashboard-heading {

    display: flex;
    align-items: center;
    justify-content: space-between;

}


.is-dashboard-heading small {

    color: #8c99ad;
    font-size: 9px;

}


.is-dashboard-heading h4 {

    margin-top: 4px;
    font-size: 15px;

}


.is-dashboard-heading button {

    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 9px;
    color: #6f7f97;
    background: #f3f7fc;

}


.is-dashboard-stats {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 21px;

}


.is-dashboard-stats > div {

    padding: 15px;
    border: 1px solid var(--is-border);
    border-radius: 14px;

}


.is-dashboard-stats span,
.is-dashboard-stats strong,
.is-dashboard-stats small {

    display: block;

}


.is-dashboard-stats span {

    color: #8a97aa;
    font-size: 9px;

}


.is-dashboard-stats strong {

    margin-top: 7px;
    color: var(--is-heading);
    font-family: "Manrope", sans-serif;
    font-size: 18px;

}


.is-dashboard-stats small {

    margin-top: 4px;
    color: var(--is-green);
    font-size: 9px;

}


.is-dashboard-chart {

    margin-top: 15px;
    padding: 16px;
    border-radius: 15px;
    background: #f7faff;

}


.is-chart-title {

    display: flex;
    justify-content: space-between;
    color: var(--is-heading);
    font-size: 10px;
    font-weight: 700;

}


.is-chart-title small {

    color: #8a97aa;
    font-weight: 500;

}


.is-chart-bars {

    height: 110px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 20px;
    border-bottom: 1px solid #dce5f1;

}


.is-chart-bars span {

    flex: 1;
    min-height: 15px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(
        to top,
        var(--is-primary),
        var(--is-secondary)
    );

}


.is-floating-box {

    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 42px rgba(18, 52, 108, 0.14);
    backdrop-filter: blur(14px);

}


.is-floating-box > span {

    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--is-primary);
    background: #edf4ff;

}


.is-floating-box strong,
.is-floating-box small {

    display: block;

}


.is-floating-box strong {

    color: var(--is-heading);
    font-size: 11px;

}


.is-floating-box small {

    margin-top: 3px;
    color: #8a97aa;
    font-size: 9px;

}


.is-floating-one {

    top: 60px;
    right: 18px;

}


.is-floating-two {

    left: 20px;
    bottom: 60px;

}


/* ======================================================
   COMMON FEATURE BLOCK
====================================================== */

.is-feature-block {

    position: relative;
    padding: 120px 0;

}


.is-feature-content {

    position: relative;
    z-index: 2;

}


.is-block-number {

    color: var(--is-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;

}


.is-feature-content > h2 {

    margin-top: 17px;
    font-size: clamp(37px, 4vw, 55px);
    line-height: 1.13;
    letter-spacing: -2px;

}


.is-feature-content > h2 span {

    display: block;
    background: linear-gradient(90deg, #176bff 0%, #19bdf4 48%, #7657ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}


.is-feature-content > p {

    margin-top: 19px;
    font-size: 14px;
    text-align: justify;

}


/* ======================================================
   AI SECTION
====================================================== */

.is-ai-block {

    overflow: hidden;
    color: #b6c7e5;
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(0, 185, 239, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071a46,
            #0b285e
        );

}


.is-light-content > h2 {

    color: #ffffff;

}


.is-light-content > h2 span {

    color: #55d3ff;

}


.is-light-content > p {
text-align: justify;
    color: #afc1df;

}


.is-light-content .is-block-number {

    color: #91deff;

}


.is-ai-visual {

    position: relative;
    min-height: 520px;

}


.is-ai-circle {

    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 185, 239, 0.28),
        rgba(23, 105, 255, 0.06)
    );
    transform: translate(-50%, -50%);

}


.is-ai-rotating-ring {

    position: absolute;
    inset: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    animation: isRotate 18s linear infinite;

}


@keyframes isRotate {

    to {
        transform: rotate(360deg);
    }

}


.is-ai-core {

    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
    border-radius: 29px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--is-primary),
        var(--is-secondary)
    );
    box-shadow: 0 0 55px rgba(0, 185, 239, 0.3);
    font-size: 40px;

}


.is-ai-node {

    position: absolute;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: #dbe8ff;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    font-size: 11px;
    font-weight: 700;
    animation: bespokeFloat 4.5s ease-in-out infinite;

}


.is-ai-node i {

    color: #71ddff;

}


.is-node-one {

    top: 44px;
    left: 25px;

}


.is-node-two {

    top: 115px;
    right: 0;

}


.is-node-three {

    left: 0;
    bottom: 90px;

}


.is-node-four {

    right: 15px;
    bottom: 30px;

}


.is-feature-list {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;

}


.is-feature-list > div {

    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #d7e5fb;
    background: rgba(255, 255, 255, 0.05);
    font-size: 11px;
    font-weight: 700;

}


.is-feature-list i {

    color: #5cdaff;

}


/* ======================================================
   BESPOKE CARDS
====================================================== */

.is-bespoke-card {

    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 32px;
    padding: 25px;
    border-radius: 20px;

}


.is-dark-bespoke {

    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.06);

}


.is-light-bespoke {

    border: 1px solid var(--is-border);
    background: linear-gradient(
        135deg,
        #ffffff,
        #f5f9ff
    );
    box-shadow: var(--is-shadow);

}


.is-bespoke-icon {

    width: 48px;
    height: 48px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--is-primary),
        var(--is-secondary)
    );

}


.is-bespoke-card span {

    color: var(--is-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;

}


.is-dark-bespoke span {

    color: #74ddff;

}


.is-bespoke-card h3 {

    margin-top: 7px;
    font-size: 21px;

}


.is-dark-bespoke h3 {

    color: #ffffff;

}


.is-bespoke-card p {

    margin-top: 9px;
    font-size: 12px;
    line-height: 1.7;

}


.is-dark-bespoke p {

    color: #aebfdd;

}


/* ======================================================
   LOGIC SECTION
====================================================== */

.is-logic-block {

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(23, 105, 255, 0.08),
            transparent 25%
        ),
        #ffffff;

}


.is-logic-points {

    display: grid;
    gap: 12px;
    margin-top: 28px;

}


.is-logic-points > div {

    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--is-border);

}


.is-logic-points > div > span {

    width: 42px;
    height: 42px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 12px;
    color: var(--is-primary);
    background: #edf4ff;

}


.is-logic-points h4 {

    font-size: 14px;

}


.is-logic-points p {

    margin-top: 5px;
    font-size: 11px;
    line-height: 1.6;

}


.is-logic-visual {

    overflow: hidden;
    border: 1px solid var(--is-border);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--is-shadow);

}


.is-logic-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-bottom: 1px solid var(--is-border);

}


.is-logic-header small {

    color: #8a97aa;
    font-size: 9px;

}


.is-logic-header h3 {

    margin-top: 4px;
    font-size: 16px;

}


.is-logic-header > span {

    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 50px;
    color: var(--is-green);
    background: #eafff5;
    font-size: 9px;
    font-weight: 700;

}


.is-logic-canvas {

    min-height: 470px;
    padding: 38px 30px;
    background-color: #f8fbff;
    background-image:
        linear-gradient(
            rgba(15, 45, 96, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15, 45, 96, 0.045) 1px,
            transparent 1px
        );
    background-size: 28px 28px;

}


.is-flow-question {

    max-width: 260px;
    margin: auto;
    padding: 16px;
    border: 1px solid rgba(23, 105, 255, 0.2);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(17, 50, 103, 0.09);
    text-align: center;

}


.is-flow-question small,
.is-flow-question strong,
.is-flow-question span {

    display: block;

}


.is-flow-question small {

    color: var(--is-primary);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;

}


.is-flow-question strong {

    margin-top: 8px;
    color: var(--is-heading);
    font-size: 12px;

}


.is-flow-question span {

    margin-top: 4px;
    color: #8b98aa;
    font-size: 9px;

}


.is-flow-main-line {

    width: 1px;
    height: 30px;
    margin: auto;
    background: #a9bbd5;

}


.is-flow-options,
.is-flow-results {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;

}


.is-flow-options > div {

    padding: 9px;
    border-radius: 9px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;

}


.is-flow-options .positive {

    color: #0a9c63;
    background: #e8fff5;

}


.is-flow-options .neutral {

    color: #b17d20;
    background: #fff7e4;

}


.is-flow-options .negative {

    color: #d44d60;
    background: #fff0f2;

}


.is-flow-branch-lines {

    position: relative;
    height: 45px;

}


.is-flow-branch-lines::before {

    position: absolute;
    content: "";
    top: 0;
    left: 16.6%;
    right: 16.6%;
    height: 1px;
    background: #a9bbd5;

}


.is-flow-branch-lines span {

    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: #a9bbd5;

}


.is-flow-branch-lines span:nth-child(1) {

    left: 16.6%;

}


.is-flow-branch-lines span:nth-child(2) {

    left: 50%;

}


.is-flow-branch-lines span:nth-child(3) {

    right: 16.6%;

}


.is-flow-results > div {

    padding: 15px 8px;
    border: 1px solid var(--is-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(17, 50, 103, 0.07);
    text-align: center;

}


.is-flow-results i {

    margin-bottom: 7px;
    color: var(--is-primary);

}


.is-flow-results strong,
.is-flow-results span {

    display: block;

}


.is-flow-results strong {

    color: var(--is-heading);
    font-size: 10px;

}


.is-flow-results span {

    margin-top: 4px;
    color: #8a97aa;
    font-size: 8px;

}


/* ======================================================
   ANALYTICS SECTION
====================================================== */

.is-analytics-block {

    background: #f5f8ff;

}


.is-section-heading {

    max-width: 830px;
    margin: 0 auto 60px;
    text-align: center;

}


.is-section-heading > h2 {

    margin-top: 17px;
    font-size: clamp(38px, 4.3vw, 58px);
    line-height: 1.13;
    letter-spacing: -2px;

}


.is-section-heading > h2 span {

    display: block;
    background: linear-gradient(90deg, #176bff 0%, #19bdf4 48%, #7657ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.is-section-heading > p {

    max-width: 700px;
    margin: 20px auto 0;
    font-size: 15px;

}


.is-analytics-grid {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;

}


.is-intelligence-card {

    position: relative;
    min-height: 620px;
    overflow: hidden;
    padding: 40px;
    border: 1px solid var(--is-border);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 15px 45px rgba(16, 47, 105, 0.07);
    animation: bespokeFloat 4.5s ease-in-out infinite;


}


.is-intelligence-card::before {

    position: absolute;
    content: "";
    width: 230px;
    height: 230px;
    top: -125px;
    right: -125px;
    border-radius: 50%;
    background: rgba(23, 105, 255, 0.07);

}


.is-card-top {

    display: flex;
    align-items: center;
    gap: 14px;

}


.is-intelligence-icon {

    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--is-primary),
        var(--is-secondary)
    );
    box-shadow: 0 14px 28px rgba(23, 105, 255, 0.22);
    font-size: 21px;

}


.is-card-top > span {

    color: var(--is-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;

}


.is-intelligence-card > h3 {

    max-width: 520px;
    margin-top: 25px;
    font-size: 29px;
    line-height: 1.28;
    letter-spacing: -0.8px;

}


.is-intelligence-card > p {

    margin-top: 16px;
    font-size: 13px;
    text-align: justify;
}


.is-mini-chart-card {

    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 38px;
    height: 145px;
    padding: 18px;
    border-radius: 17px;
    background: #f5f8ff;

}


.is-mini-chart-heading {

    display: flex;
    justify-content: space-between;
    color: var(--is-heading);
    font-size: 10px;
    font-weight: 700;

}


.is-mini-chart-heading strong {

    color: var(--is-green);

}


.is-mini-bars {

    height: 90px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 14px;
    border-bottom: 1px solid #dce5f1;

}


.is-mini-bars span {

    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(
        to top,
        var(--is-primary),
        var(--is-secondary)
    );

}


.is-security-status {

    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 38px;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 20px;
    border: 1px solid rgba(18, 170, 109, 0.16);
    border-radius: 17px;
    background: #f0fff8;

}


.is-security-shield {

    width: 58px;
    height: 58px;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    color: var(--is-green);
    background: #def8eb;
    font-size: 22px;

}


.is-security-status small,
.is-security-status strong,
.is-security-status span {

    display: block;

}


.is-security-status small {

    color: #6d8a7d;
    font-size: 9px;

}


.is-security-status strong {

    margin-top: 3px;
    color: var(--is-heading);
    font-size: 13px;

}


.is-security-status span {

    margin-top: 6px;
    color: var(--is-green);
    font-size: 9px;

}


.is-analytics-bespoke {

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    margin-top: 28px;
    padding: 38px 42px;
    border: 1px solid var(--is-border);
    border-radius: 24px;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0, 185, 239, 0.1),
            transparent 30%
        ),
        #ffffff;
    box-shadow: 0 15px 45px rgba(16, 47, 105, 0.07);

}


.is-analytics-bespoke-icon {

    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--is-primary),
        var(--is-secondary)
    );
    font-size: 23px;

}


.is-analytics-bespoke-content > span {

    color: var(--is-primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;

}


.is-analytics-bespoke-content h3 {

    margin-top: 6px;
    font-size: 24px;

}


.is-analytics-bespoke-content p {

    max-width: 800px;
    margin-top: 10px;
    font-size: 12px;

}


.is-feature-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 13px 22px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--is-primary),
        var(--is-secondary)
    );
    box-shadow: 0 12px 25px rgba(23, 105, 255, 0.24);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.3s ease;

}


.is-feature-button:hover {

    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 17px 32px rgba(23, 105, 255, 0.32);

}


/* ======================================================
   RESPONSIVE
====================================================== */

@media screen and (max-width: 991px) {

    .is-features-section {

        padding-top: 90px;

    }


    .is-custom-platform {

        grid-template-columns: 1fr;
        margin-bottom: 90px;

    }


    .is-custom-content {

        padding: 50px;

    }


    .is-custom-visual {

        min-height: 540px;

    }


    .is-feature-block {

        padding: 90px 0;

    }


    .is-ai-visual {

        max-width: 600px;
        margin: auto;

    }


    .is-analytics-grid {

        grid-template-columns: 1fr;

    }


    .is-analytics-bespoke {

        grid-template-columns: auto 1fr;

    }


    .is-analytics-bespoke .is-feature-button {

        grid-column: 1 / -1;
        justify-self: start;

    }

}


@media screen and (max-width: 767px) {

    .is-main-heading,
    .is-feature-content > h2,
    .is-section-heading > h2 {

        letter-spacing: -1.3px;

    }


    .is-custom-content,
    .is-custom-visual {

        padding: 34px 24px;

    }


    .is-custom-content > h3 {

        font-size: 31px;

    }


    .is-custom-points {

        grid-template-columns: 1fr;

    }


    .is-custom-visual {

        min-height: 450px;

    }


    .is-dashboard-window {

        transform: scale(0.88);

    }


    .is-floating-box {

        display: none;

    }


    .is-ai-visual {

        min-height: 450px;
        transform: scale(0.88);

    }


    .is-feature-list {

        grid-template-columns: 1fr;

    }


    .is-bespoke-card {

        flex-direction: column;

    }


    .is-logic-canvas {

        padding: 30px 15px;

    }


    .is-intelligence-card {

        min-height: 680px;
        padding: 30px 24px;

    }


    .is-mini-chart-card,
    .is-security-status {

        left: 24px;
        right: 24px;
        bottom: 30px;

    }


    .is-analytics-bespoke {

        grid-template-columns: 1fr;
        padding: 30px 24px;

    }


    .is-analytics-bespoke .is-feature-button {

        grid-column: auto;

    }

}

@media screen and (max-width: 575px) {

    .is-feature-intro {
        margin-bottom: 45px;
    }

    /* Custom platform main layout */
    .is-custom-platform {
        width: 100%;
        grid-template-columns: 1fr !important;
        overflow: hidden;
        margin-bottom: 60px;
        border-radius: 22px;
    }

    .is-custom-platform > * {
        min-width: 0;
    }

    /* Text area */
    .is-custom-content {
        width: 100%;
        min-width: 0;
        padding: 32px 20px !important;
    }

    .is-small-label {
        max-width: 100%;
        padding: 7px 10px;
        font-size: 9px;
    }

    .is-custom-content > h3 {
        width: 100%;
        margin-top: 15px;
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.15;
        letter-spacing: -0.8px;
        overflow-wrap: anywhere;
    }

    .is-custom-content > h3 span {
        display: inline;
    }

    .is-custom-content > p {
        width: 100%;
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.75;
        text-align: left;
        overflow-wrap: anywhere;
    }

    /* Feature points */
    .is-custom-points {
        width: 100%;
        grid-template-columns: 1fr !important;
        gap: 12px;
        margin-top: 24px;
    }

    .is-point-item {
        width: 100%;
        min-width: 0;
        padding: 14px;
    }

    .is-point-item > div:last-child {
        min-width: 0;
        flex: 1;
    }

    .is-point-item h4 {
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .is-point-item p {
        margin-top: 4px;
        font-size: 10px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* Right visual */
    .is-custom-visual {
        width: 100%;
        min-width: 0;
        min-height: 360px;
        overflow: hidden;
    }

    .is-dashboard-window {
        width: 170%;
        max-width: none;
        transform: scale(1);
        transform-origin: center;
    }

    .is-ai-visual {
        min-height: 390px;
        transform: scale(0.72);
        transform-origin: center;
    }

    .is-ai-node {
        min-width: 160px;
    }

    .is-flow-results {
        grid-template-columns: 1fr;
    }

    .is-flow-branch-lines {
        display: none;
    }

    .is-flow-results > div {
        margin-top: 10px;
    }

    .is-intelligence-card {
        min-height: 760px;
    }

    .is-security-status {
        align-items: flex-start;
    }
}



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

.analytics-security{
    padding:110px 0;
    background:#f8fbff;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ======================
   SECTION HEADER
====================== */

.section-header{
    text-align:center;
    margin-bottom:70px;
}

.section-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:#e8f2ff;
    color:#246bff;
    font-size:14px;
    font-weight:600;
    letter-spacing:2px;
    margin-bottom:18px;
}

.section-header h2{
    font-size:56px;
    color:#071A52;
    font-weight:800;
    line-height:1.2;
    margin-bottom:20px;
}

.section-header h2 span{
    color:#2F80FF;
}

.section-header p{
    max-width:850px;
    margin:auto;
    color:#6c757d;
    font-size:18px;
    line-height:1.9;
}

/* ======================
   FEATURE GRID
====================== */

.feature-wrapper{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    margin-bottom:70px;
}

.feature-card{
    background:#fff;
    padding:40px;
    border-radius:25px;
    border:1px solid #e7eefc;
    box-shadow:0 15px 40px rgba(33,70,180,.08);
    transition:.35s;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(33,70,180,.18);
}

.icon{
    width:70px;
    height:70px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    background:linear-gradient(135deg,#4da3ff,#005eff);
    color:#fff;
    margin-bottom:25px;
}

.small-title{
    display:inline-block;
    color:#2F80FF;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:15px;
}

.feature-card h3{
    font-size:30px;
    color:#071A52;
    margin-bottom:20px;
    line-height:1.4;
}

.feature-card p{
    color:#6c757d;
    line-height:1.9;
    font-size:16px;
    margin-bottom:18px;
    text-align:justify;
}

.feature-card ul{
    list-style:none;
    margin-top:25px;
}

.feature-card ul li{
    padding:10px 0;
    color:#071A52;
    font-weight:600;
    border-bottom:1px solid #edf2ff;
}

/* ======================
   BOTTOM SECTION
====================== */

.bottom-content{
    /* background:#fff;
    text-align:center;
    padding:70px 50px;
    border-radius:30px;
    box-shadow:0 15px 40px rgba(33,70,180,.08); */
    background: #fff;
    text-align: center;
    padding:70px 50px;
    border-radius: 30px;
    border: 1px solid #e7eefc;
    box-shadow: 0 15px 40px rgba(33, 70, 180, .08);
    transition: .35s;
    
}
.bottom-content:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(33,70,180,.18);
}

.bottom-content h3{
    font-size:40px;
    color:#071A52;
    margin-bottom:20px;
}

.bottom-content p{
    max-width:850px;
    margin:0 auto 35px;
    color:#6c757d;
    line-height:1.9;
    font-size:17px;
    text-align:justify;
}

.btn{
    display:inline-block;
    padding:17px 42px;
    border-radius:50px;
    background:linear-gradient(90deg,#2F80FF,#00B4FF);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.btn:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(47,128,255,.35);
}

/* ======================
   RESPONSIVE
====================== */

@media(max-width:991px){

    .feature-wrapper{
        grid-template-columns:1fr;
    }

    .section-header h2{
        font-size:42px;
    }

    .feature-card h3{
        font-size:26px;
    }

    .bottom-content h3{
        font-size:32px;
    }
}

@media(max-width:576px){

    .analytics-security{
        padding:80px 0;
    }

    .section-header h2{
        font-size:32px;
    }

    .section-header p{
        font-size:16px;
    }

    .feature-card{
        padding:28px;
    }

    .feature-card h3{
        font-size:22px;
    }

    .bottom-content{
        padding:45px 25px;
    }

    .bottom-content h3{
        font-size:26px;
    }

    .btn{
        width:100%;
        text-align:center;
    }
}


/*=========================
    Enterprise Pricing
==========================*/

.pricing-section{
    padding:20px 0;
    background:#f8fbff;
}

.pricing-box{

    max-width:950px;
    margin:auto;

    background:#fff;

    padding:70px;

    border-radius:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.pricing-tag{

    display:inline-block;

    padding:10px 24px;

    background:#eaf2ff;

    color:#1f6dff;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    margin-bottom:25px;

}

.pricing-title{

    font-size:52px;

    font-weight:700;

    color:#0d2b7e;

    line-height:1.2;

    margin-bottom:30px;

}

.pricing-title span{

    background: linear-gradient(90deg, #176bff 0%, #19bdf4 48%, #7657ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}

.pricing-text{

    font-size:19px;

    line-height:1.9;

    color:#6b7280;

    margin-bottom:45px;
    text-align: justify;

}

.theme-btn{

    display:inline-block;

    padding:18px 40px;

    background:linear-gradient(135deg,#16a3ff,#2563eb);

    color:#fff;

    text-decoration:none;

    border-radius:12px;

    font-weight:600;

    transition:.4s;

}

.theme-btn:hover{

    transform:translateY(-5px);

    color:#fff;

    box-shadow:0 15px 35px rgba(37,99,235,.35);

}

@media(max-width:768px){

.pricing-box{

    padding:40px 25px;

}

.pricing-title{

    font-size:34px;

}

.pricing-text{

    font-size:17px;

}

}

/* =========================================
   ENTERPRISE CONTACT SECTION
========================================= */

.alk-contact-section {
    position: relative;
    overflow: hidden;
    padding: 120px 20px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 30%,
            #edf5ff 68%,
            #ffffff 100%
        );
}

.alk-contact-section *,
.alk-contact-section *::before,
.alk-contact-section *::after {
    box-sizing: border-box;
}

.alk-contact-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


/* =========================================
   BACKGROUND DECORATIONS
========================================= */

.alk-contact-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);
}

.alk-glow-left {
    top: -160px;
    left: -180px;
    width: 450px;
    height: 450px;

    background:
        radial-gradient(
            circle,
            rgba(31, 112, 255, 0.15) 0%,
            rgba(31, 112, 255, 0) 70%
        );
}

.alk-glow-right {
    right: -180px;
    bottom: -170px;
    width: 480px;
    height: 480px;

    background:
        radial-gradient(
            circle,
            rgba(34, 203, 255, 0.16) 0%,
            rgba(34, 203, 255, 0) 70%
        );
}


/* =========================================
   SECTION HEADING
========================================= */

.alk-contact-heading {
    max-width: 980px;
    margin: 0 auto 65px;
    text-align: center;
}

.alk-section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;

    color: #1670ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.alk-section-label span {
    display: inline-block;
    width: 24px;
    height: 2px;
    border-radius: 20px;
    background: #1670ff;
}

.alk-contact-heading h2 {
    margin: 0;

    color: #071f50;
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -2.5px;
}

.alk-contact-heading h2 strong {
    display: block;
    /* color: #1670ff; */
    background: linear-gradient(90deg, #18C8D8, #6D5BFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.alk-contact-heading p {
    max-width: 800px;
    margin: 24px auto 0;

    color: #69778f;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;
}


/* =========================================
   MAIN WRAPPER
========================================= */

.alk-contact-wrapper {
    display: grid;
    grid-template-columns: 0.94fr 1.06fr;
    align-items: stretch;
    overflow: hidden;

    border: 1px solid rgba(210, 224, 244, 0.9);
    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.97),
            rgba(247, 251, 255, 0.97)
        );

    box-shadow:
        0 35px 90px rgba(24, 65, 135, 0.13);
}


/* =========================================
   LEFT INFORMATION PANEL
========================================= */

.alk-contact-info {
    position: relative;
    overflow: hidden;
    padding: 58px 50px;

    border-right: 1px solid #e3ebf6;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7fbff 48%,
            #eaf4ff 100%
        );
}

.alk-contact-info::before {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -150px;

    width: 350px;
    height: 350px;

    border: 1px solid rgba(22, 112, 255, 0.11);
    border-radius: 50%;
}

.alk-contact-info::after {
    content: "";
    position: absolute;
    right: -75px;
    bottom: -75px;

    width: 210px;
    height: 210px;

    border: 1px solid rgba(22, 112, 255, 0.13);
    border-radius: 50%;
}

.alk-info-dot-pattern {
    position: absolute;
    top: 0;
    right: 0;

    width: 180px;
    height: 180px;
    opacity: 0.26;

    background-image:
        radial-gradient(
            rgba(22, 112, 255, 0.6) 1px,
            transparent 1px
        );

    background-size: 15px 15px;
}

.alk-info-content {
    position: relative;
    z-index: 2;
}

.alk-info-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 9px 15px;

    border: 1px solid #d7e6ff;
    border-radius: 50px;

    background: rgba(255, 255, 255, 0.85);

    color: #1670ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    box-shadow:
        0 8px 24px rgba(34, 99, 190, 0.08);
}

.alk-contact-info h3 {
    margin: 0 0 26px;

    color: #071f50;
    font-size: clamp(34px, 4vw, 43px);
    font-weight: 800;
    line-height: 1.17;
    letter-spacing: -1.8px;
}

.alk-contact-info h3 span {
    display: block;
    background: linear-gradient(90deg, #18C8D8, #6D5BFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.alk-info-description {
    margin: 0 0 17px;

    color: #63718a;
    font-size: 16px;
    line-height: 1.85;
}


/* =========================================
   INFORMATION CARDS
========================================= */

.alk-information-card {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    margin-top: 16px;
    padding: 20px;

    border: 1px solid #e0e9f6;
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 251, 255, 0.98)
        );

    box-shadow:
        0 12px 34px rgba(23, 65, 137, 0.08);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.alk-information-card:hover {
    transform: translateY(-4px);
    border-color: #bfd7ff;

    box-shadow:
        0 18px 40px rgba(23, 93, 201, 0.13);
}

.alk-information-icon {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #1670ff,
            #20b9ff
        );

    color: #ffffff;
    font-size: 18px;

    box-shadow:
        0 12px 25px rgba(22, 112, 255, 0.24);
}

.alk-information-text span {
    display: block;
    margin-bottom: 6px;

    color: #1670ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.alk-information-text h4 {
    margin: 0 0 6px;

    color: #09265b;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
}

.alk-information-text p {
    margin: 0;

    color: #6f7d94;
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   SECURE BOX
========================================= */

.alk-secure-box {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 26px;

    border-top: 1px solid #dce7f4;
}

.alk-secure-icon {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: #eaf4ff;
    color: #1670ff;
    font-size: 17px;
}

.alk-secure-box strong {
    display: block;
    margin-bottom: 4px;

    color: #102c5d;
    font-size: 15px;
}

.alk-secure-box p {
    margin: 0;

    color: #748097;
    font-size: 13px;
    line-height: 1.55;
}


/* =========================================
   RIGHT FORM PANEL
========================================= */

.alk-contact-form-panel {
    padding: 58px 50px;

    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #fbfdff 50%,
            #f4f9ff 100%
        );
}

.alk-form-heading {
    margin-bottom: 35px;
}

.alk-form-heading > span {
    display: inline-block;
    margin-bottom: 12px;

    color: #1670ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.alk-form-heading h3 {
    margin: 0 0 15px;

    color: #071f50;
    font-size: clamp(32px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.4px;
}

.alk-form-heading p {
    max-width: 660px;
    margin: 0;

    color: #6d7a91;
    font-size: 15px;
    line-height: 1.78;
}


/* =========================================
   FORM
========================================= */

.alk-enterprise-form {
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.alk-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
}

.alk-form-group label {
    display: block;
    margin-bottom: 9px;

    color: #213b68;
    font-size: 14px;
    font-weight: 700;
}

.alk-input-box {
    position: relative;
}

.alk-input-box > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 18px;

    transform: translateY(-50%);

    color: #8090aa;
    font-size: 15px;
    pointer-events: none;
}

.alk-input-box input,
.alk-input-box select,
.alk-input-box textarea {
    width: 100%;

    border: 1px solid #dce6f3;
    outline: none;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #f3f8fe
        );

    color: #102952;
    font-family: inherit;
    font-size: 14px;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.alk-input-box input,
.alk-input-box select {
    height: 57px;
    padding: 0 44px 0 49px;
}

.alk-input-box textarea {
    min-height: 150px;
    padding: 18px 18px 18px 49px;
    line-height: 1.7;
    resize: vertical;
}

.alk-textarea-box > i {
    top: 20px;
    transform: none;
}

.alk-input-box input::placeholder,
.alk-input-box textarea::placeholder {
    color: #9aa6b8;
}

.alk-input-box input:focus,
.alk-input-box select:focus,
.alk-input-box textarea:focus {
    border-color: #1670ff;
    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(22, 112, 255, 0.09);
}

.alk-input-box:focus-within > i {
    color: #1670ff;
}


/* =========================================
   SELECT
========================================= */

.alk-input-box select {
    appearance: none;
    cursor: pointer;
}

.alk-select-box::after {
    content: "\f107";
    position: absolute;
    top: 50%;
    right: 18px;

    transform: translateY(-50%);

    color: #6e7d96;
    font-family: "Font Awesome 6 Free";
    font-size: 13px;
    font-weight: 900;
    pointer-events: none;
}


/* =========================================
   CHECKBOX
========================================= */

.alk-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.alk-form-checkbox input {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-top: 3px;

    accent-color: #1670ff;
    cursor: pointer;
}

.alk-form-checkbox label {
    color: #68768d;
    font-size: 13px;
    line-height: 1.65;
    cursor: pointer;
}


/* =========================================
   SUBMIT BUTTON
========================================= */

.alk-submit-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
margin-left: 145px;
    width: 50%;
    min-height: 61px;
    overflow: hidden;

    border: none;
    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            #176bff 0%,
            #2196ff 55%,
            #27b9ff 100%
        );

    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 15px 35px rgba(22, 112, 255, 0.28);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.alk-submit-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 55%;
    height: 100%;

    transform: skewX(-25deg);

    background: rgba(255, 255, 255, 0.25);

    transition: left 0.7s ease;
}

.alk-submit-button:hover::before {
    left: 140%;
}

.alk-submit-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 42px rgba(22, 112, 255, 0.38);
}

.alk-submit-button span,
.alk-submit-button i {
    position: relative;
    z-index: 2;
}

.alk-submit-button i {
    transition: transform 0.3s ease;
}

.alk-submit-button:hover i {
    transform: translateX(5px);
}


/* =========================================
   TRUST ROW
========================================= */

.alk-trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 25px;
    padding-top: 23px;

    border-top: 1px solid #e3ebf5;
}

.alk-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #67758c;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.alk-trust-item i {
    color: #1670ff;
    font-size: 14px;
}


/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 1050px) {

    .alk-contact-wrapper {
        grid-template-columns: 1fr;
    }

    .alk-contact-info {
        border-right: none;
        border-bottom: 1px solid #e3ebf6;
    }

    .alk-contact-info,
    .alk-contact-form-panel {
        padding: 50px 44px;
    }

}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 700px) {

    .alk-contact-section {
        padding: 80px 15px;
    }

    .alk-contact-heading {
        margin-bottom: 45px;
    }

    .alk-contact-heading h2 {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .alk-contact-heading p {
        font-size: 15px;
    }

    .alk-contact-wrapper {
        border-radius: 22px;
    }

    .alk-contact-info,
    .alk-contact-form-panel {
        padding: 36px 25px;
    }

    .alk-contact-info h3 {
        font-size: 33px;
    }

    .alk-form-heading h3 {
        font-size: 31px;
    }

    .alk-form-row {
        grid-template-columns: 1fr;
    }

    .alk-trust-row {
        grid-template-columns: 1fr;
    }

    .alk-trust-item {
        justify-content: flex-start;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .alk-contact-section {
        padding: 70px 12px;
    }

    .alk-section-label {
        font-size: 11px;
    }

    .alk-contact-heading h2 {
        font-size: 33px;
    }

    .alk-contact-info,
    .alk-contact-form-panel {
        padding: 30px 19px;
    }

    .alk-contact-info h3 {
        font-size: 29px;
    }

    .alk-form-heading h3 {
        font-size: 28px;
    }

    .alk-info-description {
        font-size: 15px;
    }

    .alk-information-card {
        padding: 16px;
    }

    .alk-information-icon {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
    }

    .alk-submit-button {
        font-size: 14px;
    }

}

/* =========================================
   BREADCRUMB TEXT VISIBILITY FIX
========================================= */

.site-breadcrumb {
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Balanced dark overlay */
.site-breadcrumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    90deg,
    rgba(3, 18, 48, 0.48) 0%,
    rgba(5, 30, 72, 0.36) 50%,
    rgba(3, 18, 48, 0.50) 100%
  );
}

/* Content above overlay */
.site-breadcrumb .container {
  position: relative;
  z-index: 2;
  width: fit-content;
  padding: 2px 36px;

  text-align: center;

  background: rgba(4, 25, 65, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Heading */
.site-breadcrumb .breadcrumb-title {
  margin-bottom: 8px !important;

  color: #ffffff !important;
  font-size: clamp(38px, 4vw, 58px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;

  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}

/* Breadcrumb links */
.site-breadcrumb .breadcrumb-menu,
.site-breadcrumb .breadcrumb-menu li,
.site-breadcrumb .breadcrumb-menu li a {
  color: rgba(255, 255, 255, 0.94) !important;
}

.site-breadcrumb .breadcrumb-menu li.active {
  color: #7edcff !important;
}

@media (max-width: 767.98px) {

  .site-breadcrumb {
    min-height: 420px !important;
    background-position: center center !important;
  }

  .site-breadcrumb .container {
    width: calc(100% - 40px);
    padding: 18px 20px;
    margin-bottom: 100px;
  }

  .site-breadcrumb .breadcrumb-title {
    font-size: 38px !important;
  }
}

/* =====================================================
   MOBILE HERO BLANK SPACE FIX
===================================================== */

@media (max-width: 991.98px) {

  .hs-1 .hero-single,
  .hero-section .hero-single {
    padding-top: 95px !important;
    padding-bottom: 30px !important;
    min-height: auto !important;
  }

}
@media (max-width: 575.98px) {

  .hs-1 .hero-single,
  .hero-section .hero-single {
    padding-top: 88px !important;
    padding-bottom: 20px !important;
  }

}

/* =====================================================
   CORE CAPABILITIES — MOBILE FINAL FIX
===================================================== */

.feature-item > div:last-child {
  flex: 1;
  min-width: 0;
}

@media (max-width: 767.98px) {

  .feature-stack {
    width: 100%;
    gap: 20px;
  }

  .feature-item,
  .feature-item.move-right {
    width: 100%;
    margin-left: 0 !important;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 18px;
    padding: 26px 22px;

    border-radius: 22px;
    box-sizing: border-box;
  }

  .feature-item .icon {
    width: 64px;
    height: 64px;
    min-width: 64px;

    border-radius: 18px;
    font-size: 27px;
  }

  .feature-item h4 {
    width: 100%;
    margin: 0 0 12px;

    font-size: 23px;
    line-height: 1.25;
    letter-spacing: -0.3px;
  }

  .feature-item p {
    width: 100%;
    margin: 0;

    font-size: 15px;
    line-height: 1.75;

    text-align: center !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;

    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .solution-card p{
    text-align: center !important;
  }
}
@media (max-width: 420px) {

  .feature-item,
  .feature-item.move-right {
    padding: 22px 18px;
    gap: 16px;
  }

  .feature-item .icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    font-size: 24px;
  }

  .feature-item h4 {
    font-size: 21px;
  }

  .feature-item p {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* Solution Card */

.solution-card{

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

}

.card-icon{

    width: 68px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;

}

.solution-tag{

    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 24px;

}

.solution-card h3{

    text-align: center;

}

.solution-card p{

    text-align: center;
    max-width: 90%;
    margin: 0 auto;

}
/* =====================================================
   CORE CAPABILITIES — MOBILE FINAL FIX
===================================================== */

.feature-item > div:last-child {
  flex: 1;
  min-width: 0;
}

@media (max-width: 767.98px) {

  .feature-stack {
    width: 100%;
    gap: 20px;
  }

  .feature-item,
  .feature-item.move-right {
    width: 100%;
    margin-left: 0 !important;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 18px;
    padding: 26px 22px;

    border-radius: 22px;
    box-sizing: border-box;
  }

  .feature-item .icon {
    width: 64px;
    height: 64px;
    min-width: 64px;

    border-radius: 18px;
    font-size: 27px;
  }

  .feature-item h4 {
    width: 100%;
    margin: 0 0 12px;

    font-size: 23px;
    line-height: 1.25;
    letter-spacing: -0.3px;
  }

  .feature-item p {
    width: 100%;
    margin: 0;

    font-size: 15px;
    line-height: 1.75;

    text-align: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;

    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
}
@media (max-width: 420px) {

  .feature-item,
  .feature-item.move-right {
    padding: 22px 18px;
    gap: 16px;
  }

  .feature-item .icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    font-size: 24px;
  }

  .feature-item h4 {
    font-size: 21px;
  }

  .feature-item p {
    font-size: 14px;
    line-height: 1.7;
  }
}
/* =====================================================
   MOBILE FEATURE CARDS — FINAL CENTER ALIGNMENT
===================================================== */

@media (max-width: 575.98px) {

  .feature-item,
  .feature-item.move-right {
    width: 100% !important;
    margin: 0 !important;
    padding: 30px 22px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    text-align: center !important;
  }

  /* Icon center */
  .feature-item .icon {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;

    margin: 0 auto 8px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Content full width */
  .feature-item > div:last-child {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* Title center */
  .feature-item h4 {
    width: 100% !important;
    max-width: 310px !important;

    margin: 0 auto 16px !important;

    font-size: 23px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* Paragraph center and balanced */
  .feature-item p {
    width: 100% !important;
    max-width: 320px !important;

    margin: 0 auto !important;

    font-size: 14px !important;
    line-height: 1.75 !important;

    text-align: center !important;
    text-align-last: center !important;

    word-spacing: normal !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}
@media (max-width: 575.98px) {

  .feature-item,
  .feature-item.move-right {
    padding: 26px 20px !important;
  }

  .feature-item p {
    max-width: 330px !important;
    line-height: 1.65 !important;
  }
  .theme-btn2{
    margin-bottom: 20px;
  }
}
/* =====================================================
   INDUSTRY TIMELINE — MOBILE RESPONSIVE FIX
===================================================== */

.timeline-wrapper,
.timeline-item,
.timeline-content {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 767.98px) {

  .industry-timeline {
    padding: 0 0 !important;
    overflow: hidden;
  }

  .industry-timeline .container {
    width: 100%;
    max-width: 100%;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Heading */
  .timeline-heading {
    width: 100%;
    max-width: 100%;
    margin-bottom: 55px;
    padding: 0 6px;
  }

  .timeline-heading h2 {
    margin: 20px 0 18px;
    font-size: 38px !important;
    line-height: 1.15 !important;
  }

  .timeline-heading h2 span {
    display: block;
  }

  .timeline-heading p {
    max-width: 100%;
    margin: 0 auto;
    font-size: 16px !important;
    line-height: 1.8 !important;
    text-align: center;
  }

  /* Timeline wrapper */
  .timeline-wrapper {
    position: relative;
    width: 100%;
    padding-left: 0 !important;
  }

  /* Left vertical line */
  .timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25px !important;
    width: 1px;
  }

  /* Each item */
  .timeline-item {
    position: relative;
    display: block !important;

    width: 100%;
    margin-bottom: 35px;
    padding-left: 58px !important;
  }

  /* Number dot */
  .timeline-dot {
    position: absolute !important;
    top: 28px !important;
    left: 0 !important;

    width: 52px !important;
    height: 52px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px !important;
    z-index: 3;
  }

  /* Main card */
  .timeline-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 28px 20px !important;

    border-radius: 22px !important;
    overflow: hidden;
  }

  .timeline-category {
    display: inline-flex;
    max-width: 100%;

    padding: 10px 16px;
    font-size: 12px !important;
    line-height: 1.4;

    white-space: normal;
    text-align: left;
  }

  .timeline-content h3 {
    width: 100%;
    margin: 25px 0 20px;

    font-size: 27px !important;
    line-height: 1.3 !important;

    white-space: normal;
    overflow-wrap: break-word;
  }

  .timeline-content p {
    width: 100%;
    margin: 0;

    font-size: 15px !important;
    line-height: 1.85 !important;

    text-align: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;

    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Tags */
  .timeline-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;

    width: 100%;
    margin-top: 25px;
  }

  .timeline-tags span {
    max-width: 100%;
    padding: 9px 14px;

    font-size: 12px !important;
    line-height: 1.3;

    white-space: normal;
  }
}
@media (max-width: 420px) {

  .industry-timeline .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .timeline-heading h2 {
    font-size: 34px !important;
  }

  .timeline-line {
    left: 20px !important;
  }

  .timeline-item {
    padding-left: 47px !important;
  }

  .timeline-dot {
    top: 24px !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 15px !important;
  }

  .timeline-content {
    padding: 24px 16px !important;
  }

  .timeline-content h3 {
    font-size: 24px !important;
  }

  .timeline-content p {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
}



/* Logos scrolling start here */

/* =====================================================
   INTELLISURVS CLEAN ENTERPRISE CLIENT SHOWCASE
===================================================== */

.intel-trust-showcase {
  position: relative;
  width: 100%;
  padding: 20px 0 50px;
  overflow: hidden;
  background: #fbfcfe;
  border-top: 1px solid #edf1f7;
  border-bottom: 1px solid #edf1f7;
  isolation: isolate;
}

/* Minimal ambient decoration */

.intel-trust-accent {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px);
  z-index: -1;
}

.intel-trust-accent-left {
  top: -170px;
  left: -180px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(25, 147, 207, 0.08);
  box-shadow: inset 0 0 100px rgba(21, 175, 220, 0.035);
}

.intel-trust-accent-right {
  right: -160px;
  bottom: -190px;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle,
    rgba(108, 91, 245, 0.045),
    transparent 68%
  );
}

.intel-trust-container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* =====================================================
   HEADING
===================================================== */

.intel-trust-heading {
  max-width: 770px;
  margin: 0 auto 15px;
  text-align: center;
}

.intel-trust-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #49617e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.intel-trust-eyebrow-mark {
  position: relative;
  width: 24px;
  height: 1px;
  background: #17a6d4;
}

.intel-trust-eyebrow-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #17a6d4;
  transform: translateY(-50%);
}

.intel-trust-heading h2 {
  margin: 0;
  color: #0b2860;
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2.2px;
}

.intel-trust-heading h2 span {
  display: block;
  color: #27749d;
}

.intel-trust-heading p {
  max-width: 680px;
  margin: 20px auto 0;
  color: #6d7c91;
  font-size: 15px;
  line-height: 1.8;
}

/* =====================================================
   MARQUEE
===================================================== */

.intel-trust-marquee {
  position: relative;
  width: 100%;
  padding: 22px 0 30px;
  overflow: hidden;
}

/* Thin professional divider lines */

.intel-trust-marquee::before,
.intel-trust-marquee::after {
  content: "";
  position: absolute;
  right: 4%;
  left: 4%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(31, 65, 112, 0.09),
    transparent
  );
  z-index: 5;
}

.intel-trust-marquee::before {
  top: 0;
}

.intel-trust-marquee::after {
  bottom: 0;
}

/* Edge fades */

.intel-trust-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  pointer-events: none;
  z-index: 10;
}

.intel-trust-fade-left {
  left: 0;
  background: linear-gradient(
    to right,
    #fbfcfe 10%,
    rgba(251, 252, 254, 0.88) 38%,
    transparent
  );
}

.intel-trust-fade-right {
  right: 0;
  background: linear-gradient(
    to left,
    #fbfcfe 10%,
    rgba(251, 252, 254, 0.88) 38%,
    transparent
  );
}

/* Infinite track */

.intel-trust-track {
  display: flex;
  width: max-content;
  align-items: stretch;
  animation: intelTrustMarquee 38s linear infinite;
  will-change: transform;
}

.intel-trust-group {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  gap: 22px;
  padding-right: 22px;
}

@keyframes intelTrustMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.intel-trust-marquee:hover .intel-trust-track {
  animation-play-state: paused;
}

/* =====================================================
   CLIENT PANELS
===================================================== */

.intel-trust-client {
  width: 280px;
  height: 190px;
  flex: 0 0 280px;
  padding: 5px 0;
}

.intel-trust-client-inner {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e8edf4;
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    0 14px 40px rgba(20, 42, 76, 0.055),
    inset 0 1px 0 #ffffff;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.4s ease;
}

/* Minimal top line */

.intel-trust-client-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 44px;
  height: 2px;
  border-radius: 0 0 10px 10px;
  background: #24a5cb;
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition:
    opacity 0.35s ease,
    transform 0.4s ease;
}

/* Soft internal light */

.intel-trust-client-inner::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -70px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(31, 157, 205, 0.045);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.intel-trust-client:hover .intel-trust-client-inner {
  border-color: rgba(31, 134, 184, 0.18);
  box-shadow:
    0 25px 60px rgba(15, 45, 84, 0.11),
    inset 0 1px 0 #ffffff;
  transform: translateY(-8px);
}

.intel-trust-client:hover .intel-trust-client-inner::before {
  opacity: 1;
  transform: scaleX(1);
}

.intel-trust-client:hover .intel-trust-client-inner::after {
  opacity: 1;
}

/* =====================================================
   LOGOS
===================================================== */

.intel-trust-logo {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 130px;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 28px 26px 20px;
}

.intel-trust-logo img {
  display: block;
  width: auto;
  max-width: 88%;
  height: auto;
  max-height: 78px;
  object-fit: contain;
  opacity: 1;
  filter: none;
  transform: scale(1);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

.intel-trust-client:hover .intel-trust-logo img {
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.055);
}

/* Individual logo proportions */

.intel-trust-logo-ithra img {
  max-width: 145px;
  max-height: 76px;
}

.intel-trust-logo-kafd img {
  max-width: 205px;
  max-height: 74px;
}

.intel-trust-logo-mobily img {
  max-width: 190px;
  max-height: 82px;
}

.intel-trust-logo-sar img {
  max-width: 220px;
  max-height: 58px;
}

.intel-trust-logo-saudi-cup img {
  max-width: 120px;
  max-height: 92px;
}

.intel-trust-logo-alj img {
  max-width: 220px;
  max-height: 70px;
}

/* =====================================================
   CLIENT INFORMATION
===================================================== */

.intel-trust-client-info {
  position: relative;
  z-index: 2;
  min-height: 50px;
  padding: 14px 20px 17px;
  border-top: 1px solid #eef2f7;
  text-align: center;
}

.intel-trust-client-info strong,
.intel-trust-client-info span {
  display: block;
}

.intel-trust-client-info strong {
  margin-bottom: 3px;
  overflow: hidden;
  color: #18345f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intel-trust-client-info span {
  color: #8793a4;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

/* =====================================================
   TRUST METRICS
===================================================== */

.intel-trust-metrics {
  display: flex;
  max-width: 850px;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin: 42px auto 0;
  padding: 20px 28px;
  border-top: 1px solid #e6ebf2;
  border-bottom: 1px solid #e6ebf2;
}

.intel-trust-metric {
  flex: 1;
  text-align: center;
}

.intel-trust-metric strong,
.intel-trust-metric span {
  display: block;
}

.intel-trust-metric strong {
  margin-bottom: 4px;
  color: #173565;
  font-size: 14px;
  font-weight: 800;
}

.intel-trust-metric span {
  color: #8491a3;
  font-size: 11px;
  line-height: 1.4;
}

.intel-trust-metric-divider {
  width: 1px;
  height: 34px;
  background: #e2e8f0;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {
  .intel-trust-showcase {
    padding: 80px 0 75px;
  }

  .intel-trust-heading {
    margin-bottom: 44px;
  }

  .intel-trust-client {
    width: 250px;
    height: 176px;
    flex-basis: 250px;
  }

  .intel-trust-track {
    animation-duration: 32s;
  }

  .intel-trust-fade {
    width: 90px;
  }
}

@media (max-width: 767.98px) {
  .intel-trust-showcase {
    padding: 65px 0 60px;
  }

  .intel-trust-container {
    width: calc(100% - 28px);
  }

  .intel-trust-heading {
    margin-bottom: 35px;
  }

  .intel-trust-heading h2 {
    font-size: 35px;
    letter-spacing: -1.3px;
  }

  .intel-trust-heading p {
    font-size: 14px;
  }

  .intel-trust-fade {
    width: 38px;
  }

  .intel-trust-group {
    gap: 15px;
    padding-right: 15px;
  }

  .intel-trust-client {
    width: 215px;
    height: 160px;
    flex-basis: 215px;
  }

  .intel-trust-logo {
    min-height: 110px;
    padding: 22px 20px 15px;
  }

  .intel-trust-logo img {
    max-height: 65px;
  }

  .intel-trust-logo-saudi-cup img {
    max-height: 78px;
  }

  .intel-trust-client-info {
    min-height: 50px;
    padding: 11px 14px 13px;
  }

  .intel-trust-track {
    animation-duration: 25s;
  }

  .intel-trust-metrics {
    display: grid;
    gap: 16px;
    margin-top: 32px;
    padding: 20px 0;
  }

  .intel-trust-metric-divider {
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 480px) {
  .intel-trust-heading h2 {
    font-size: 30px;
  }

  .intel-trust-eyebrow {
    font-size: 9px;
    letter-spacing: 1.3px;
  }

  .intel-trust-client {
    width: 190px;
    height: 148px;
    flex-basis: 190px;
  }

  .intel-trust-logo {
    min-height: 99px;
  }

  .intel-trust-logo img {
    max-height: 58px;
  }

  .intel-trust-track {
    animation-duration: 22s;
  }
}

/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {
  .intel-trust-track {
    animation-play-state: paused;
  }

  .intel-trust-client-inner,
  .intel-trust-logo img {
    transition: none;
  }
}



/* =====================================================
   MOBILE LAYOUT FIX
   Client Network + Why IntelliSurvs
===================================================== */

@media (max-width: 767.98px) {

  /* -----------------------------------------
     CLIENT NETWORK SECTION
  ----------------------------------------- */

  .intel-trust-showcase {
    padding: 34px 0 42px !important;
    overflow: hidden;
  }

  /* Remove excessive decorative space on mobile */
  .intel-trust-accent,
  .intel-trust-showcase::after {
    display: none !important;
  }

  .intel-trust-showcase::before {
    opacity: 0.45;
  }

  .intel-trust-container {
    width: calc(100% - 20px) !important;
  }

  /* Enterprise Client Network label */
  .intel-trust-heading {
    margin: 0 auto 24px !important;
    padding: 0 12px;
  }

  .intel-trust-eyebrow {
    margin-bottom: 0 !important;
    font-size: 9px;
    letter-spacing: 1.3px;
  }

  /*
    Heading and paragraph are not being used,
    so they should not reserve any mobile space.
  */
  .intel-trust-heading h2,
  .intel-trust-heading p {
    display: none !important;
  }

  /* Slider spacing */
  .intel-trust-marquee {
    padding: 15px 0 22px !important;
  }

  .intel-trust-group {
    gap: 12px !important;
    padding-right: 12px !important;
  }

  /* Show approximately 1.45 cards */
  .intel-trust-client {
    width: 245px !important;
    height: 178px !important;
    flex: 0 0 245px !important;
    padding: 3px 0;
  }

  .intel-trust-client-inner {
    border-radius: 19px;
  }

  .intel-trust-logo {
    min-height: 123px !important;
    padding: 20px 18px 14px !important;
  }

  .intel-trust-logo img {
    max-width: 88% !important;
    max-height: 72px !important;
  }

  .intel-trust-logo-mobily img {
    max-width: 195px !important;
    max-height: 78px !important;
  }

  .intel-trust-logo-sar img {
    max-width: 205px !important;
    max-height: 54px !important;
  }

  .intel-trust-logo-kafd img {
    max-width: 195px !important;
    max-height: 67px !important;
  }

  .intel-trust-logo-saudi-cup img {
    max-width: 105px !important;
    max-height: 82px !important;
  }

  .intel-trust-logo-alj img {
    max-width: 205px !important;
    max-height: 62px !important;
  }

  .intel-trust-client-info {
    min-height: 52px !important;
    padding: 11px 12px 12px !important;
  }

  .intel-trust-client-info strong {
    font-size: 12px;
  }

  .intel-trust-client-info span {
    font-size: 8px;
    letter-spacing: 0.5px;
  }

  /* Softer fade so logos do not look heavily cropped */
  .intel-trust-fade {
    width: 22px !important;
  }

  .intel-trust-fade-left {
    background: linear-gradient(
      to right,
      #fbfcfe 2%,
      rgba(251, 252, 254, 0.55) 40%,
      transparent
    ) !important;
  }

  .intel-trust-fade-right {
    background: linear-gradient(
      to left,
      #fbfcfe 2%,
      rgba(251, 252, 254, 0.55) 40%,
      transparent
    ) !important;
  }

  .intel-trust-track {
    animation-duration: 27s !important;
  }

  /* Hide unused metrics area */
  .intel-trust-metrics {
    display: none !important;
  }

  /* -----------------------------------------
     WHY INTELLISURVS SECTION
  ----------------------------------------- */

  .ivp-area {
    padding-top: 52px !important;
    padding-bottom: 58px !important;
    overflow: hidden;
  }

  .ivp-area .container {
    padding-right: 18px;
    padding-left: 18px;
  }

  .ivp-intro {
    margin-bottom: 24px !important;
  }

  .ivp-eyebrow {
    margin-bottom: 17px !important;
    padding: 8px 13px !important;
    font-size: 10px !important;
  }

  .ivp-intro .site-title {
    max-width: 100%;
    margin-bottom: 18px !important;
    font-size: 34px !important;
    line-height: 1.12 !important;
    letter-spacing: -1.2px !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  .ivp-intro .text-gradient {
    display: inline;
  }

  .ivp-intro-text {
    margin-bottom: 12px;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  /* Disable desktop horizontal reveal on mobile */
  .js .ivp-reveal-left,
  .js .ivp-reveal-right,
  .js .ivp-reveal-scale {
    transform: translate3d(0, 28px, 0) !important;
    filter: blur(3px);
  }

  .ivp-reveal.is-visible {
    transform: translate3d(0, 0, 0) scale(1) !important;
    filter: blur(0);
  }

  /* -----------------------------------------
     BACK TO TOP BUTTON
  ----------------------------------------- */

  .scroll-top,
  .back-to-top {
    right: 15px !important;
    bottom: 18px !important;
    width: 46px !important;
    height: 46px !important;
    line-height: 46px !important;
  }
}

@media (max-width: 430px) {

  .intel-trust-showcase {
    padding-top: 28px !important;
  }

  .intel-trust-client {
    width: 230px !important;
    height: 168px !important;
    flex-basis: 230px !important;
  }

  .intel-trust-logo {
    min-height: 115px !important;
  }

  .ivp-intro .site-title {
    font-size: 31px !important;
    line-height: 1.13 !important;
    letter-spacing: -1px !important;
  }

  .ivp-eyebrow {
    font-size: 9px !important;
  }
}
/* Logos scrolling End here*/


/* Contact Us Start here*/

own-group,
.alk-premium-select {
    position: relative;
    overflow: visible;
}

.alk-dropdown-group {
    z-index: 20;
}

.alk-dropdown-group:has(.alk-premium-select.is-open) {
    z-index: 1000;
}

.alk-select-trigger {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 14px;
    font-family: inherit;
    text-align: left;
    color: #0b285c;
    background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%);
    border: 1px solid #d8e4f4;
    border-radius: 15px;
    outline: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(20, 68, 130, 0.04);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease;
}

.alk-select-trigger:hover {
    background: #ffffff;
    border-color: #9bc1ff;
    box-shadow: 0 12px 28px rgba(25, 102, 220, 0.1);
    transform: translateY(-1px);
}

.alk-premium-select.is-open .alk-select-trigger {
    background: #ffffff;
    border-color: #287cff;
    box-shadow:
        0 0 0 4px rgba(40, 124, 255, 0.11),
        0 16px 38px rgba(24, 91, 190, 0.13);
}

.alk-select-main-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #1678ff, #24bce8);
    border-radius: 11px;
    box-shadow: 0 8px 18px rgba(22, 120, 255, 0.23);
}

.alk-select-main-icon i {
    font-size: 15px;
}

.alk-selected-content {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.alk-selected-content small {
    color: #8b9ab1;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.025em;
}

.alk-selected-content strong {
    overflow: hidden;
    color: #0b285c;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alk-select-arrow {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d83a5;
    background: #edf4ff;
    border-radius: 9px;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.alk-select-arrow i {
    font-size: 11px;
}

.alk-premium-select.is-open .alk-select-arrow {
    color: #ffffff;
    background: #1678ff;
    transform: rotate(180deg);
}

.alk-select-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    z-index: 9999;
    max-height: 390px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(188, 211, 241, 0.9);
    border-radius: 18px;
    box-shadow:
        0 30px 75px rgba(11, 43, 89, 0.2),
        0 10px 28px rgba(20, 96, 196, 0.1);
    backdrop-filter: blur(18px);
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}

.alk-premium-select.is-open .alk-select-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.alk-select-menu-heading {
    padding: 8px 10px 13px;
    margin-bottom: 5px;
    border-bottom: 1px solid #e8f0fa;
}

.alk-select-menu-heading span {
    display: block;
    margin-bottom: 3px;
    color: #0b285c;
    font-size: 13px;
    font-weight: 750;
}

.alk-select-menu-heading small {
    color: #8494ab;
    font-size: 10.5px;
    line-height: 1.45;
}

.alk-select-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    margin: 3px 0;
    font-family: inherit;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 13px;
    outline: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.alk-select-option:hover,
.alk-select-option:focus-visible {
    background: linear-gradient(135deg, #f0f6ff, #f8fbff);
    border-color: #d7e7ff;
    transform: translateX(2px);
}

.alk-option-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1678ff;
    background: #eaf3ff;
    border-radius: 11px;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.alk-option-icon i {
    font-size: 13px;
}

.alk-select-option:hover .alk-option-icon,
.alk-select-option.is-selected .alk-option-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #1678ff, #24bce8);
    box-shadow: 0 7px 15px rgba(22, 120, 255, 0.19);
}

.alk-option-content {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.alk-option-content strong {
    color: #102d5c;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
}

.alk-option-content small {
    color: #8090a8;
    font-size: 10.5px;
    line-height: 1.4;
}

.alk-option-check {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: transparent;
    border-radius: 50%;
    font-size: 9px;
    transition: 0.2s ease;
}

.alk-select-option.is-selected {
    background: #eef6ff;
    border-color: #bcd8ff;
}

.alk-select-option.is-selected .alk-option-check {
    color: #ffffff;
    background: #1678ff;
}

.alk-premium-select.has-error .alk-select-trigger {
    border-color: #e95353;
    box-shadow: 0 0 0 4px rgba(233, 83, 83, 0.09);
}

.alk-select-error {
    display: none;
    margin-top: 7px;
    color: #d94848;
    font-size: 11px;
    font-weight: 600;
}

.alk-premium-select.has-error + .alk-select-error {
    display: block;
}

.alk-select-menu::-webkit-scrollbar {
    width: 5px;
}

.alk-select-menu::-webkit-scrollbar-track {
    background: transparent;
}

.alk-select-menu::-webkit-scrollbar-thumb {
    background: #c4d6ed;
    border-radius: 20px;
}

/* Prevent parent containers from cutting the dropdown */
.alk-contact-form-panel,
.alk-enterprise-form,
.alk-form-row,
.alk-form-group {
    overflow: visible;
}

@media (max-width: 767px) {
    .alk-dropdown-group:has(.alk-premium-select.is-open) {
        z-index: 1000;
    }

    .alk-select-menu {
        max-height: 340px;
    }
}

@media (max-width: 480px) {
    .alk-select-trigger {
        min-height: 58px;
        padding: 8px 11px;
    }

    .alk-select-main-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .alk-option-content small {
        display: none;
    }
}

/* Contact Us End here*/


/* faiz end */










/*====================
5. Preloader
======================*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.loader-ripple div {
  position: absolute;
  border: 4px solid var(--color-white);
  opacity: 1;
  border-radius: 50%;
  animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loader-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes loader-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
/*====================
6. Scroll top css
======================*/
#scroll-top {
  position: fixed;
  bottom: -20px;
  right: 30px;
  z-index: 99;
  font-size: 20px;
  border: none;
  outline: none;
  border-radius: 50px;
  color: var(--color-white);
  background-image: linear-gradient(90deg, #00adef 0%, #1dc1ff 100%) !important;
  cursor: pointer;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  box-shadow: var(--box-shadow2);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  transform: rotate(-40deg);
  z-index: 1;
}
#scroll-top:hover {
  transform: rotate(0);
}
#scroll-top.active {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}
@media all and (min-width: 768px) and (max-width: 1199px) {
  #scroll-top.active {
    bottom: 100px;
  }
}

/*====================
7. Bs custom css
======================*/
/* custom form */
.form-group {
  margin-bottom: 20px;
}
.form-group .form-label {
  color: var(--color-dark);
}
.form-group .form-control,
.form-group .form-select {
  padding: 14px 20px 14px 20px;
  background-color: var(--color-white);
  color: var(--color-dark);
  border-color: var(--border-info-color);
  border-radius: 15px;
}
.form-group .form-control:focus,
.form-group .form-select:focus {
  border-color: var(--theme-color);
  box-shadow: 0 0 0 0.25rem rgba(142, 121, 249, 0.25);
}
.form-group .form-control::-moz-placeholder {
  color: var(--body-text-color);
}
.form-group .form-control::placeholder {
  color: var(--body-text-color);
}
.form-group .form-icon {
  position: relative;
}
.form-group .form-icon i {
  position: absolute;
  top: 19px;
  left: 20px;
  color: var(--theme-color);
  z-index: 1;
}
.form-group .form-icon .form-control,
.form-group .form-icon .form-select {
  padding-left: 50px;
}

.form-check {
  margin-bottom: 20px;
}
.form-check-input {
  border-radius: 50px;
  margin-top: 6.5px;
  border-color: var(--border-info-color);
}
.form-check-input:checked {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}
.form-check-input:focus {
  border-color: var(--theme-color);
  box-shadow: 0 0 0 0.25rem rgba(142, 121, 249, 0.25);
}
.form-check-label {
  color: var(--color-dark);
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* custom tooltip */
.tooltip-inner {
  background: var(--theme-color);
  border-radius: 50px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: var(--theme-color) !important;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-top-color: var(--theme-color) !important;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -2.5px !important;
  border-left-color: var(--theme-color) !important;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -2.5px !important;
  border-right-color: var(--theme-color) !important;
}

.tooltip.show {
  opacity: 1;
}

/* custom modal */
.modal .modal-content {
  border-radius: 25px;
}
.modal .btn-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  line-height: 20px;
  background: var(--color-dark);
  border-radius: 50px;
  color: var(--color-white);
  font-size: 20px;
  opacity: 1;
  z-index: 1;
}
.modal .modal-body {
  padding: 25px;
}

/* custom form */
@media all and (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1200px;
  }
}
/*====================
8. Nice select css
======================*/
.nice-select {
  width: 100%;
  height: 54px;
  line-height: 54px;
  border-radius: 15px;
  font-size: 16px;
  color: var(--color-dark);
  margin-bottom: 20px;
  border-color: var(--border-info-color);
}
.nice-select::after {
  width: 9px;
  height: 9px;
  right: 20px;
  margin-top: -6.5px;
}
.nice-select:focus {
  border-color: var(--theme-color);
  box-shadow: 0 0 0 0.25rem rgba(142, 121, 249, 0.25);
}
.nice-select .list {
  width: 100%;
  border: none;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.05);
}
.nice-select .option.focus,
.nice-select .option.selected.focus,
.nice-select .option:hover {
  border-radius: 10px;
  background: var(--theme-bg-light);
  color: var(--theme-color);
}

.form-icon .nice-select {
  padding-left: 50px;
}

/*====================
9. Breadcrumb css
======================*/
.site-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  text-align: center;
  position: relative;
  padding-top: 180px;
  padding-bottom: 250px;
  margin-top: 0rem;
}
.site-breadcrumb .breadcrumb-title {
  font-size: 50px;
  color: white;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: capitalize; 
  /* margin-top: 20px; */
}
.site-breadcrumb .breadcrumb-menu {
  position: relative;
  z-index: 1;
}
.site-breadcrumb .breadcrumb-menu li {
  position: relative;
  display: inline-block;
  margin-left: 25px;
  color: var(--color-dark);
  font-weight: 500;
  text-transform: capitalize;
}
.site-breadcrumb .breadcrumb-menu li a {
  color: white;
  transition: all 0.5s ease-in-out;
}
.site-breadcrumb .breadcrumb-menu li a:hover {
  color: var(--theme-color);
}
.site-breadcrumb .breadcrumb-menu li::before {
content: "\f101";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  right: -21px;
  top: 1px;
  font-size: 16px;
  color: white;
}
.site-breadcrumb .breadcrumb-menu li:first-child {
  margin-left: 0;
}
.site-breadcrumb .breadcrumb-menu li:last-child:before {
  display: none;
}
.site-breadcrumb .breadcrumb-menu li.active {
  color: white;
}

/*====================
10. Pagination css 
======================*/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.pagination .page-item .page-link {
  border: none;
  background: var(--theme-bg-light);
  color: var(--color-dark);
  font-weight: 500;
  margin: 0 6px;
  border-radius: 12px !important;
  width: 40px;
  height: 40px;
  line-height: 28px;
  text-align: center;
  transition: var(--transition);
  z-index: 1;
}
.pagination .page-item .page-link:hover, .pagination .page-item.active .page-link {
  background: var(--theme-color);
  color: var(--color-white);
}

/*===================
11. Play btn
=====================*/
.play-btn {
  display: inline-block;
  padding: 0;
  height: 75px;
  width: 75px;
  line-height: 75px;
  font-size: 20px;
  text-align: center;
  background: var(--theme-color);
  color: var(--color-white);
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}
.play-btn:hover {
  color: var(--color-white);
}
.play-btn i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--theme-color);
  border-radius: 50px;
  animation: ripple-wave 1s linear infinite;
  transform: scale(1);
  transition: all 0.5s ease-in-out;
}

@keyframes ripple-wave {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}
/*====================
12. Site title css
======================*/
.site-heading {
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
}
.site-heading .site-title-tagline {
  display: inline-block;
  color: var(--color-white);
  font-weight: 500;
  text-transform: capitalize;
  font-size: 18px;
  background: var(--theme-color);
  border-radius: 50px;
  padding: 2px 15px 2px 3px;
  margin-bottom: 15px;
}
.site-heading .site-title-tagline.light {
  background: var(--color-white);
}
.site-heading .site-title-tagline i {
  font-size: 16px;
  width: 30px;
  height: 30px;
  line-height: 31px;
  background: var(--color-white);
  color: var(--theme-color);
  text-align: center;
  border-radius: 50px;
  margin-right: 5px;
}
.site-heading .site-title {
  font-weight: 700;
  text-transform: capitalize;
  font-size: 30px;
  color: var(--color-dark);
  margin-bottom: 0;
}
.site-heading .site-title span {
  color: var(--theme-color);
}
.site-heading .site-title .text-gradient {
  color: transparent;
  background-image: var(--gradient3);
  -webkit-background-clip: text;
          background-clip: text;
}
.site-heading p {
  margin-top: 15px;
}
.site-heading.inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}
.site-heading.inline .site-title {
  font-size: 35px;
}
.site-heading .heading-divider {
  display: inline-block;
  position: relative;
  border-bottom: 4px solid var(--theme-color);
  width: 90px;
  height: 4px;
  border-radius: 50px;
}
.site-heading .heading-divider::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 6px;
  width: 15px;
  border-radius: 0px;
  background-color: var(--color-white);
  animation: heading-move 5s infinite linear;
}
@keyframes heading-move {
  0% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(75px);
  }
  100% {
    transform: translateX(-1px);
  }
}
/*====================
13. Theme button
======================*/
.theme-border-btn,
.theme-btn2,
.theme-btn {
  font-size: 16px;
  color: var(--color-white);
  padding: 10px 20px;
  transition: all 0.5s;
  text-transform: capitalize;
  position: relative;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  border: none;
  /* background-image: linear-gradient(90deg, #00adef 0%, #1dc1ff 100%) !important; */
  /* background: linear-gradient(135deg,#00B4FF,#2563EB) !important; */
  background: linear-gradient(135deg, #00B4FF, #2563EB) !important;
  
  box-shadow: 0 12px 30px rgba(37,99,235,.25);
  z-index: 1;
}

.nav-btn a
 {
    background-image: linear-gradient(90deg, #00adef 0%, #1dc1ff 100%) !important;
}

.theme-border-btn::before,
.theme-btn2::before,
.theme-btn::before {
  content: "";
  height: 300px;
  width: 300px;
  background: var(--color-dark);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(0);
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
  background: transparent linear-gradient(90deg, #00adef 0%, #037ba9 100%) 0% 0% no-repeat !important;

}
.theme-border-btn:hover::before,
.theme-btn2:hover::before,
.theme-btn:hover::before {
  transform: translateY(-50%) translateX(-50%) scale(1);

}
.theme-border-btn i,
.theme-btn2 i,
.theme-btn i {
  margin-left: 8px;
  transform: rotate(-40deg);
  transition: var(--transition2);
}
.theme-border-btn:hover i,
.theme-btn2:hover i,
.theme-btn:hover i {
  transform: rotate(0deg);
}
.theme-border-btn span,
.theme-btn2 span,
.theme-btn span {
  margin-right: 5px;
}

.theme-btn:hover {
  color: var(--color-white);
}

.theme-btn2 {
  background: var(--gradient2);
  color: var(--color-white);
  box-shadow: 0 10px 30px 0 rgba(253, 156, 40, 0.25);
}
.theme-btn2::before {
  background: var(--color-dark);
}
.theme-btn2:hover {
  color: var(--color-white);
  transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0,123,255,.25);
transition: .35s ease;
}

.theme-border-btn {
  color: var(--theme-color);
  border: 2px solid var(--theme-color);
  padding: 2px 10px;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
.theme-border-btn::before {
  display: none;
}
.theme-border-btn:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

/*====================
14. Header top css
======================*/
.header-top {
  padding: 10px 0;
  background: var(--gradient3);
  position: relative;
  z-index: 3;
}
.header-top-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}
.header-top-list ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}
@media all and (max-width: 1199px) {
  .header-top-list ul {
    gap: 10px;
  }
}
@media all and (max-width: 991px) {
  .header-top-list ul {
    gap: 0px;
  }
}
@media all and (max-width: 991px) {
  .header-top-list ul li {
    margin-right: 10px;
  }
}
@media all and (max-width: 991px) {
  .header-top-list ul li:last-child {
    display: none;
  }
}
.header-top-list a {
  color: var(--color-white);
  font-weight: 500;
}
.header-top-list a:hover {
  color: var(--theme-color2);
}
.header-top-list a i {
  color: var(--color-white);
  margin-right: 5px;
}
@media all and (max-width: 1199px) {
  .header-top-left {
    margin-right: 5px;
  }
}
.header-top-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.header-top-right .header-top-list i {
  color: var(--color-white);
}
.header-top-social span {
  color: var(--color-white);
}
@media all and (max-width: 991px) {
  .header-top-social span {
    display: none;
  }
}
.header-top-social a {
  color: var(--color-white);
  font-size: 16px;
  text-align: center;
  margin-left: 14px;
  transition: var(--transition);
}
@media all and (max-width: 1199px) {
  .header-top-social a {
    width: 34px;
    height: 34px;
    line-height: 37px;
    margin-left: 0;
  }
}
.header-top-social a :hover {
  color: var(--theme-color2);
}
.header-top-lang .top-lang {
  color: var(--color-white);
}
.header-top-lang .dropdown-menu {
  min-width: 60px;
  border-radius: 15px;
  padding: 10px;
  border: none;
  box-shadow: var(--box-shadow);
}
.header-top-lang .dropdown-item {
  color: var(--color-dark);
  border-radius: 10px;
}
.header-top-lang .dropdown-item:hover {
  background: var(--theme-color);
  color: var(--color-white);
}
@media all and (max-width: 991px) {
  .header-top-lang .dropdown-toggle::after {
    margin-top: 12px;
  }
}

/* =====================================================
   INTELLISURVS COMPLETE FLOATING NAVBAR OVERRIDE
   Paste this CSS at the very end of your stylesheet
===================================================== */

/* =====================================================
   Header and Navigation Position
===================================================== */

.intel-header {
  position: relative;
  width: 100%;
  z-index: 99999;
}

.intel-navigation {
  position: fixed !important;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  padding: 8px 0 !important;
  background: transparent;
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 99999;
  transition:
    padding 0.35s ease,
    transform 0.35s ease,
    opacity 0.35s ease;
}

/* Disable navbar hide-on-scroll state */

.intel-navigation.is-hidden,
.intel-navigation.is-scrolled.is-hidden {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Remove old Bootstrap fixed-top conflicts */

.intel-navbar.fixed-top,
.navbar.fixed-top {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  width: auto;
  background: transparent;
  box-shadow: none;
  animation: none;
}

/* =====================================================
   Navbar Base
===================================================== */

.intel-navbar {
  position: relative;
  padding: 0 !important;
  background: transparent !important;
  z-index: 99999;
}

.intel-navbar > .container {
  width: 100%;
  max-width: 1210px;
  padding-right: 15px;
  padding-left: 15px;
}

/* =====================================================
   Floating Glass Shell
===================================================== */

.intel-nav-shell {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 74px !important;
  align-items: center;
  padding: 6px 12px 6px 18px !important;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.676);
  box-shadow:
    0 18px 48px rgba(10, 40, 103, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  isolation: isolate;
  transition:
    min-height 0.35s ease,
    padding 0.35s ease,
    background 0.35s ease,
    border-radius 0.35s ease,
    box-shadow 0.35s ease;
}

.intel-nav-shell::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 12%;
  left: 12%;
  height: 1px;
  border-radius: 50px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(17, 188, 232, 0.7),
    rgba(79, 111, 235, 0.65),
    rgba(137, 91, 246, 0.65),
    transparent
  );
  pointer-events: none;
}

.intel-nav-shell::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 42%;
  width: 190px;
  height: 42px;
  border-radius: 50%;
  background: rgba(27, 178, 231, 0.08);
  filter: blur(30px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

/* =====================================================
   Logo
===================================================== */

.intel-brand {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0 !important;
  padding: 3px 10px 3px 0 !important;
  z-index: 3;
}

.intel-navbar .intel-brand img {
  display: block;
  width: 183px !important;
  max-width: 100%;
  height: auto;
  transition:
    width 0.35s ease,
    transform 0.35s ease;
}

.intel-brand:hover img {
  transform: scale(1.025);
}

/* =====================================================
   Desktop Navigation
===================================================== */

@media (min-width: 992px) {

  .intel-navbar .offcanvas {
    position: static !important;
    display: block !important;
    flex: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
  }

  .intel-navbar .offcanvas-header {
    display: none !important;
  }

  .intel-offcanvas-body {
    display: flex;
    align-items: center;
    padding: 0 !important;
    overflow: visible !important;
  }

  .intel-nav-links {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin: 0 18px;
  }

  .intel-navbar .intel-nav-links .nav-item {
    position: relative;
  }

  .intel-navbar .intel-nav-links .nav-link {
    position: relative;
    display: inline-flex;
    min-height: 42px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 9px 13px !important;
    overflow: hidden;
    border-radius: 13px;
    color: #112e74;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1;
    text-transform: capitalize;
    isolation: isolate;
    transition:
      color 0.3s ease,
      transform 0.3s ease;
  }

  .intel-navbar .intel-nav-links .nav-link span {
    position: relative;
    z-index: 2;
  }

  .intel-navbar .intel-nav-links .nav-link::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 10px;
    background: linear-gradient(
      135deg,
      rgba(17, 188, 232, 0.11),
      rgba(126, 91, 245, 0.10)
    );
    opacity: 0;
    transform: scale(0.76);
    transition:
      opacity 0.3s ease,
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
  }

  .intel-navbar .intel-nav-links .nav-link::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: 4px;
    left: 13px;
    height: 3px;
    border-radius: 20px;
    background: linear-gradient(
      90deg,
      #11bce8,
      #416fe9,
      #8c5cf5
    );
    box-shadow: 0 4px 10px rgba(72, 104, 232, 0.28);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .intel-navbar .intel-nav-links .nav-link:hover,
  .intel-navbar .intel-nav-links .nav-link.active {
    color: #765df3 !important;
    transform: translateY(-1px);
  }

  .intel-navbar .intel-nav-links .nav-link:hover::before,
  .intel-navbar .intel-nav-links .nav-link.active::before {
    opacity: 1;
    transform: scale(1);
  }

  .intel-navbar .intel-nav-links .nav-link:hover::after,
  .intel-navbar .intel-nav-links .nav-link.active::after {
    transform: scaleX(1);
  }
}
/* =====================================================
   MOBILE OFFCANVAS NAVIGATION FIX
===================================================== */

@media (max-width: 991.98px) {

  .intel-navigation {
    position: relative;
    z-index: 1040;
  }

  .intel-nav-shell {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Mobile hamburger visible */
  .intel-mobile-actions {
    display: flex !important;
    align-items: center;
    margin-left: auto;
  }

  .intel-toggler {
    position: relative;
    z-index: 2;
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0 !important;
    border-radius: 12px;
    background: rgba(13, 77, 157, 0.08);
    box-shadow: none !important;
  }

  .intel-toggler span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 20px;
    background: #123b72;
  }

  /* Main mobile panel */
  #offcanvasNavbar.intel-offcanvas {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;

    width: min(370px, 88vw) !important;
    max-width: 88vw !important;
    height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;

    background: #ffffff !important;
    border-right: 0 !important;

    visibility: hidden;
    transform: translateX(-100%);
    transition:
      transform 0.35s ease,
      visibility 0.35s ease !important;

    z-index: 1060 !important;
  }

  #offcanvasNavbar.intel-offcanvas.show,
  #offcanvasNavbar.intel-offcanvas.showing {
    visibility: visible !important;
    transform: translateX(0) !important;
  }

  #offcanvasNavbar.intel-offcanvas.hiding {
    visibility: visible !important;
    transform: translateX(-100%) !important;
  }

  /* Offcanvas header */
  #offcanvasNavbar .intel-offcanvas-header {
    min-height: 82px;
    padding: 16px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0;

    background: #ffffff !important;
    border-bottom: 1px solid rgba(16, 57, 105, 0.1);
  }

  #offcanvasNavbar .offcanvas-brand {
    display: inline-flex;
    align-items: center;
  }

  #offcanvasNavbar .offcanvas-brand img {
    display: block;
    width: 145px;
    height: auto;
  }

  /* Close button */
  #offcanvasNavbar .intel-offcanvas-close {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 12px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    color: #123b72;
    background: rgba(13, 77, 157, 0.08);
    font-size: 22px;
    cursor: pointer;
  }

  /* Offcanvas body */
  #offcanvasNavbar .intel-offcanvas-body {
    width: 100%;
    padding: 22px 20px 28px !important;

    display: flex !important;
    flex-direction: column !important;

    background: #ffffff !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Navigation */
  #offcanvasNavbar .intel-nav-links {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px;
  }

  #offcanvasNavbar .intel-nav-links .nav-item {
    width: 100%;
    display: block;
    margin: 0 !important;
  }

  #offcanvasNavbar .intel-nav-links .nav-link {
    width: 100%;
    min-height: 50px;
    padding: 13px 16px !important;

    display: flex !important;
    align-items: center !important;

    color: #15385f !important;
    background: transparent;

    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: 0.25s ease;
  }

  #offcanvasNavbar .intel-nav-links .nav-link:hover,
  #offcanvasNavbar .intel-nav-links .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(
      135deg,
      #087fc5 0%,
      #174cac 100%
    ) !important;
  }

  /* Hide desktop buttons */
  #offcanvasNavbar .intel-nav-right {
    display: none !important;
  }

  /* Mobile buttons */
  #offcanvasNavbar .intel-mobile-cta {
    width: 100%;
    margin-top: auto;
    padding-top: 28px;

    display: grid !important;
    grid-template-columns: 1fr;
    gap: 11px;
  }

  #offcanvasNavbar .intel-mobile-cta a {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: 12px;
    text-decoration: none;
  }

  /* Backdrop menu ke peeche */
  .offcanvas-backdrop {
    z-index: 1050 !important;
    background-color: #061326 !important;
  }

  .offcanvas-backdrop.show {
    opacity: 0.65 !important;
  }

  body.offcanvas-open {
    overflow: hidden;
  }
}
/* =====================================================
   Right Side Actions
===================================================== */

.intel-nav-right {
  position: relative;
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-left: auto !important;
  z-index: 3;
}

/* Workspace button */

.intel-workspace-btn {
  position: relative;
  display: inline-flex;
  min-height: 46px !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px !important;
  overflow: hidden;
  border: 1px solid rgba(31, 131, 227, 0.14);
  border-radius: 14px;
  background: rgba(244, 250, 255, 0.92);
  box-shadow:
    0 8px 22px rgba(12, 72, 147, 0.08),
    inset 0 1px 0 #ffffff;
  color: #123d91;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  isolation: isolate;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.intel-workspace-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #10bce9, #337ce9);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.intel-btn-icon {
  display: inline-flex;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #15bce8, #7161ef);
  color: #ffffff;
  font-size: 12px;
  transition:
    transform 0.35s ease,
    background 0.35s ease;
}

.intel-workspace-btn:hover {
  color: #ffffff !important;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(31, 124, 226, 0.24);
}

.intel-workspace-btn:hover::before {
  opacity: 1;
}

.intel-workspace-btn:hover .intel-btn-icon {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(-7deg) scale(1.05);
}

/* Sign In button */

.intel-signin-btn {
  position: relative;
  display: inline-flex;
  min-height: 46px !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 17px !important;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(
    100deg,
    #11bce8 0%,
    #168fde 48%,
    #436ce9 100%
  );
  box-shadow:
    0 12px 26px rgba(27, 137, 220, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  isolation: isolate;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.intel-signin-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.42),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  z-index: -1;
}

.intel-signin-btn:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(27, 137, 220, 0.34);
}

.intel-signin-btn:hover::before {
  left: 145%;
}

.intel-signin-btn i {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.intel-signin-btn:hover i {
  transform: translateX(4px);
}

/* Sidebar button */

.intel-sidebar-btn {
  position: relative;
  display: inline-flex !important;
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(24, 77, 164, 0.10) !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.80) !important;
  box-shadow: 0 8px 22px rgba(12, 48, 110, 0.07);
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.intel-navbar .intel-sidebar-btn span {
  display: block;
  width: 21px;
  height: 2px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 20px;
  background: #0b2b86;
  transition:
    width 0.3s ease,
    margin 0.3s ease,
    background 0.3s ease;
}

.intel-navbar .intel-sidebar-btn span:first-child {
  width: 12px;
  margin-left: 9px !important;
}

.intel-navbar .intel-sidebar-btn span:last-child {
  width: 15px;
  margin-right: 6px !important;
}

.intel-sidebar-btn:hover {
  background: linear-gradient(135deg, #11bce8, #725ef1) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(44, 119, 222, 0.22);
}

.intel-navbar .intel-sidebar-btn:hover span {
  width: 21px;
  margin-right: 0 !important;
  margin-left: 0 !important;
  background: #ffffff;
}

/* =====================================================
   Scrolled State
===================================================== */

.intel-navigation.is-scrolled {
  position: fixed !important;
  padding: 6px 0 !important;
  transform: translateY(0) !important;
}

.intel-navigation.is-scrolled .intel-nav-shell {
  min-height: 64px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  border-color: rgba(28, 126, 219, 0.11);
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.676);
  box-shadow:
    0 16px 45px rgba(7, 35, 98, 0.14),
    inset 0 1px 0 #ffffff;
}

.intel-navigation.is-scrolled .intel-navbar .intel-brand img {
  width: 170px !important;
}

/* =====================================================
   Hero / First Section Spacing
===================================================== */

/*
  Navbar approximately 84px space occupy karta hai.
  Is padding ki wajah se hero heading navbar se chipkegi nahi.
*/
/* 
.hero-area,
.hero-single,
.site-breadcrumb,
.breadcrumb-area,
.banner-area,
.main-banner,
.hero-section {
  padding-top: 125px !important;
padding: 150px 0 90px !important;
} */

/* Inner hero content spacing */

.hero-area .hero-content,
.hero-single .hero-content,
.main-banner .hero-content,
.banner-area .hero-content {
  padding-top: 12px;
}

/* Anchor sections fixed navbar ke neeche na chhupe */

section[id] {
  scroll-margin-top: 100px;
}

/* =====================================================
   Medium Desktop
===================================================== */

@media (min-width: 992px) and (max-width: 1199.98px) {

  .intel-navbar > .container {
    max-width: 1140px;
  }

  .intel-nav-shell {
    padding-right: 10px !important;
    padding-left: 15px !important;
  }

  .intel-navbar .intel-brand img {
    width: 145px !important;
  }

  .intel-nav-links {
    gap: 0;
    margin-right: 10px;
    margin-left: 10px;
  }

  .intel-navbar .intel-nav-links .nav-link {
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: 13px !important;
  }

  .intel-workspace-btn,
  .intel-signin-btn {
    padding-right: 12px !important;
    padding-left: 12px !important;
    font-size: 13px;
  }

  .intel-sidebar-btn {
    width: 43px !important;
    height: 43px !important;
    flex-basis: 43px;
  }
}

/* =====================================================
   Mobile Navigation
===================================================== */

.intel-mobile-cta {
  display: none;
}

@media (max-width: 991.98px) {

  .intel-navigation {
    padding: 7px 0 !important;
  }

  .intel-navbar > .container {
    padding-right: 12px;
    padding-left: 12px;
  }

  .intel-nav-shell {
    min-height: 62px !important;
    justify-content: space-between;
    padding: 6px 8px 6px 14px !important;
    border-radius: 17px !important;
  }

  .intel-navbar .intel-brand img {
    width: 132px !important;
  }

  .intel-mobile-actions {
    display: flex !important;
    align-items: center;
  }

  .intel-toggler {
    display: inline-flex !important;
    width: 43px;
    height: 43px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px;
    background: linear-gradient(
      135deg,
      rgba(16, 188, 232, 0.12),
      rgba(118, 92, 243, 0.12)
    );
    box-shadow: inset 0 0 0 1px rgba(41, 111, 208, 0.08);
  }

  .intel-navbar .intel-toggler span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 20px;
    background: #092b85;
    transition:
      width 0.3s ease,
      transform 0.3s ease;
  }

  .intel-navbar .intel-toggler span:nth-child(2) {
    width: 14px;
  }

  .intel-navbar .intel-toggler span:nth-child(3) {
    width: 17px;
  }

  .intel-toggler:hover span {
    width: 20px;
  }

  /* Offcanvas */

  .intel-offcanvas {
    width: min(88vw, 360px) !important;
    border: 0 !important;
    border-radius: 0 26px 26px 0;
    background:
      radial-gradient(
        circle at 5% 5%,
        rgba(15, 187, 232, 0.12),
        transparent 28%
      ),
      radial-gradient(
        circle at 100% 90%,
        rgba(132, 91, 245, 0.12),
        transparent 32%
      ),
      #ffffff !important;
    box-shadow: 30px 0 80px rgba(7, 35, 98, 0.20);
  }

  .intel-offcanvas-header {
    min-height: 84px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(15, 65, 145, 0.07);
  }

  .intel-offcanvas-header .offcanvas-brand img {
    width: 145px;
  }

  .intel-offcanvas-close {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px;
    background: rgba(236, 242, 255, 0.95) !important;
    color: #092b85 !important;
    font-size: 18px;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  .intel-offcanvas-body {
    display: block;
    padding: 22px 20px 28px !important;
  }

  .intel-nav-links {
    gap: 6px;
    margin: 0;
  }

  .intel-navbar .intel-nav-links .nav-item {
    margin-bottom: 5px;
  }

  .intel-navbar .intel-nav-links .nav-link {
    position: relative;
    display: flex;
    min-height: 50px;
    align-items: center;
    margin: 0 !important;
    padding: 11px 15px !important;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #173371 !important;
    font-size: 15px;
    font-weight: 700;
    transition:
      color 0.3s ease,
      border-color 0.3s ease,
      background 0.3s ease,
      transform 0.3s ease;
  }

  .intel-navbar .intel-nav-links .nav-link::after {
    content: "\f061";
    position: absolute;
    right: 16px;
    font-family: "Font Awesome 6 Free";
    font-size: 12px;
    font-weight: 900;
    opacity: 0;
    transform: translateX(-8px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  .intel-navbar .intel-nav-links .nav-link:hover,
  .intel-navbar .intel-nav-links .nav-link.active {
    border-color: rgba(38, 124, 221, 0.10);
    background: linear-gradient(
      100deg,
      rgba(17, 188, 232, 0.10),
      rgba(125, 91, 243, 0.08)
    );
    color: #765df3 !important;
    transform: translateX(4px);
  }

  .intel-navbar .intel-nav-links .nav-link:hover::after,
  .intel-navbar .intel-nav-links .nav-link.active::after {
    opacity: 1;
    transform: translateX(0);
  }

  .intel-nav-right {
    display: none !important;
  }

  .intel-mobile-cta {
    display: grid;
    gap: 10px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(15, 65, 145, 0.08);
  }

  .intel-mobile-cta .intel-workspace-btn,
  .intel-mobile-cta .intel-signin-btn {
    width: 100%;
  }

  .intel-navigation.is-scrolled {
    padding: 5px 0 !important;
  }

  .intel-navigation.is-scrolled .intel-nav-shell {
    min-height: 58px !important;
    border-radius: 15px !important;
  }

  .intel-navigation.is-scrolled .intel-navbar .intel-brand img {
    width: 124px !important;
  }

  .hero-area,
  .hero-single,
  .site-breadcrumb,
  .breadcrumb-area,
  .banner-area,
  .main-banner,
  .hero-section {
    padding-top: 160px !important;
    padding-bottom: 26px;
  }
}

/* =====================================================
   Small Mobile
===================================================== */

@media (max-width: 575.98px) {

  .intel-navbar > .container {
    padding-right: 8px;
    padding-left: 8px;
  }

  .intel-nav-shell {
    min-height: 58px !important;
    padding-left: 12px !important;
  }

  .intel-navbar .intel-brand img {
    width: 118px !important;
  }

  .intel-toggler {
    width: 40px;
    height: 40px;
  }

  .hero-area,
  .hero-single,
  .site-breadcrumb,
  .breadcrumb-area,
  .banner-area,
  .main-banner,
  .hero-section {
    padding-top: 160px !important;
    padding-bottom: 26px;
  }
}

/* =====================================================
   Reduced Motion
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .intel-navigation,
  .intel-nav-shell,
  .intel-brand img,
  .intel-nav-links .nav-link,
  .intel-workspace-btn,
  .intel-signin-btn,
  .intel-sidebar-btn,
  .intel-toggler {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}


/*====================
18. Sidebar popup css 
======================*/
.sidebar-popup {
  padding: 20px;
}
.sidebar-popup .btn-close {
  background:#13bafa;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50px;
  color: var(--color-white);
  font-size: 20px;
  transition: var(--transition);
  box-shadow: var(--box-shadow);
  opacity: 1;
}
.sidebar-popup .btn-close:hover {
  background: var(--color-red);
}
.sidebar-popup .btn-close i {
  transition: var(--transition);
}
.sidebar-popup .btn-close:hover i {
  transform: rotate(180deg);
}
.sidebar-popup-logo img {
  width: 180px;
}
.sidebar-popup-about {
  margin-top: 10px;
}
.sidebar-popup-about h4 {
  margin-bottom: 10px;
  font-weight: 700;
}
.sidebar-popup-contact {
  margin-top: 20px;
}
.sidebar-popup-contact h4 {
  margin-bottom: 15px;
  font-weight: 700;
}
.sidebar-popup-contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}
.sidebar-popup-contact li .icon {
  width: 35px;
  height: 35px;
  line-height: 35px;
  color: var(--color-white);
background-image: linear-gradient(90deg, #00adef 0%, #1dc1ff 100%) !important;
  text-align: center;
  border-radius: 50px;
}
.sidebar-popup-contact li a:hover {
  color: var(--theme-color);
}
.sidebar-popup-social {
  margin-top: 25px;
}
.sidebar-popup-social h4 {
  margin-bottom: 20px;
  font-weight: 700;
}
.sidebar-popup-social a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50px;
  margin-right: 8px;
  background: #a1a1a1;
  color: var(--color-white);
  box-shadow: var(--box-shadow);
}
.sidebar-popup-social a:hover {
  background: var(--color-dark);
}

/* ======================
19. Search popup
====================== */
.search-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, 0.95);
  transition: all 1500ms cubic-bezier(0.86, 0, 0.07, 1);
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 75%;
  border: none;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 50px;
  text-align: center;
  background: var(--color-red);
  text-align: center;
  width: 50px;
  height: 50px;
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--box-shadow);
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
}
.search-popup form {
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin: -35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: all 300ms ease;
}
.search-popup .form-group {
  position: relative;
  margin: 0px;
  overflow: hidden;
}
.search-popup .form-group .form-control {
  position: relative;
  width: 100%;
  height: 70px;
  outline: none;
  border-radius: 0px;
  border: none;
  border-bottom: 2px solid var(--color-white);
  background-color: transparent;
  color: var(--color-white);
  font-size: 40px;
  padding: 0 70px 0 20px;
  transition: all 500ms ease;
  text-transform: capitalize;
}
.search-popup .form-group .form-control::-moz-placeholder {
  color: var(--color-white);
  font-size: 40px;
}
.search-popup .form-group .form-control::placeholder {
  color: var(--color-white);
  font-size: 40px;
}
.search-popup .form-group button {
  position: absolute;
  right: 5px;
  top: 5px;
  border-radius: 50px;
  background: transparent;
  text-align: center;
  font-size: 30px;
  color: var(--color-white);
  height: 50px;
  width: 50px;
  border: none;
  cursor: pointer;
  transition: all 500ms ease;
}
.search-popup .form-group button:hover {
  color: var(--theme-color);
}

.search-active .search-popup {
  transform: translateY(0%);
  margin-top: 0;
}
.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  transition-delay: 1500ms;
}
.search-active .search-popup .close-search span {
  transition: var(--transition);
}
.search-active .search-popup .close-search:hover span {
  transform: rotate(180deg);
}
.search-active .search-popup form {
  transform: scaleX(1);
  transition-delay: 1200ms;
}

/*====================
20. Hero css 
======================*/
.hero-section .hero-single {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  padding-top: 120px;
  padding-bottom: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.hero-section .hero-single::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -0.5px;
  background: linear-gradient(to bottom right, rgb(7, 54, 146) 0%, rgba(7, 54, 146, 0) 100%);
  z-index: -1;
}
.hero-section .hero-single .hero-content {
  height: 100%;
}
.hero-section .hero-single .hero-content .hero-sub-title {
  display: inline-block;
  color: var(--color-white);
  font-size: 24px;
  letter-spacing: 6px;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
}
@media all and (max-width: 767px) {
  .hero-section .hero-single .hero-content .hero-sub-title {
    font-size: 18px;
  }
}
.hero-section .hero-single .hero-content .hero-title {
  color: var(--color-white);
  font-size: 50px;
  font-weight: 600;
  margin: 20px 0;
  text-transform: capitalize;
}
@media all and (max-width: 1199px) {
  .hero-section .hero-single .hero-content .hero-title {
    font-size: 37px;
  }
}
@media all and (max-width: 991px) {
  .hero-section .hero-single .hero-content .hero-title {
    font-size: 50px;
  }
}
.hero-section .hero-single .hero-content .hero-title span {
  color: var(--theme-color);
}
.hero-section .hero-single .hero-content p {
  color: var(--color-white);
  font-size: 17px;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 20px;
}
.hero-section .hero-single .hero-content .hero-btn {
  display: flex;
  justify-content: start;
  gap: 1rem;
  margin-top: 35px;
}

/* hero-slider */
.hero-slider .owl-nav {
  margin-top: 0px;
}
.hero-slider .owl-nav button i {
  display: inline-block;
  height: 55px;
  width: 55px;
  line-height: 55px;
  color: var(--theme-color);
  font-size: 25px;
  text-align: center;
  background: var(--color-white);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
}
.hero-slider .owl-nav button:hover i {
  background: var(--theme-color);
  color: var(--color-white);
}
.hero-slider .owl-nav .owl-prev {
  left: 40px;
}
@media all and (max-width: 1199px) {
  .hero-slider .owl-nav .owl-prev {
    left: unset;
    right: 120px;
  }
}
.hero-slider .owl-nav .owl-next {
  right: 40px;
}
@media all and (max-width: 1199px) {
  .hero-slider .owl-nav .owl-next {
    right: 40px;
  }
}
.hero-slider .owl-nav .owl-prev,
.hero-slider .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
@media all and (max-width: 1199px) {
  .hero-slider .owl-nav .owl-prev,
  .hero-slider .owl-nav .owl-next {
    top: unset;
    bottom: 45px;
  }
}
.hero-slider .owl-dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
}
.hero-slider .owl-dots .owl-dot span {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: var(--color-white);
  border-radius: 50px;
  border: 2px solid var(--theme-color);
  margin: 5px;
  transition: var(--transition);
}
.hero-slider .owl-dots .owl-dot.active span {
  background-color: var(--theme-color);
}

/* hero-info */
.hero-info-wrap {
  position: relative;
}
.hero-info-wrap .hero-avatar-group {
  position: absolute;
  left: 20px;
  top: 0px;
  background: var(--color-white);
  border-radius: 20px;
  padding: 15px;
  box-shadow: var(--box-shadow3);
  z-index: 1;
}
@media all and (max-width: 991px) {
  .hero-info-wrap .hero-avatar-group {
    top: 40px;
    left: 0px;
  }
}
.hero-info-wrap .hero-avatar-group h6 {
  color: var(--color-dark);
  margin-bottom: 5px;
}
.hero-info-wrap .hero-avatar-group h6 span {
  color: var(--theme-color);
}
.hero-info-wrap .hero-avatar-group .avatar:first-child {
  margin-left: 0;
}
.hero-info-wrap .hero-avatar-group .avatar img {
  width: 40px;
  border-radius: 50px;
  border: 3px solid var(--color-white);
}
.hero-info-wrap .hero-avatar-group .avatar + .avatar {
  margin-left: -18px;
}
.hero-info-wrap .hero-course-info {
  position: absolute;
  right: -30px;
  top: 230px;
  background: var(--color-white);
  border-radius: 50px;
  padding-right: 16px;
  box-shadow: var(--box-shadow3);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}
@media all and (max-width: 991px) {
  .hero-info-wrap .hero-course-info {
    top: 200px;
    right: 0;
  }
}
.hero-info-wrap .hero-course-info .icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: var(--gradient);
  border-radius: 50px;
  text-align: center;
}
.hero-info-wrap .hero-course-info .icon img {
  width: 38px;
  filter: brightness(0) invert(1);
}
.hero-info-wrap .hero-course-info .title span {
  color: var(--theme-color);
}

/* hero section 1 */
.hs-1 {
  margin-top: -6rem;
}
.hs-1 .hero-single {
  padding-top: 200px;
  padding-bottom: 40px;
}
@media all and (max-width: 991px) {
  .hs-1 .hero-single {
    padding-bottom: 0px;
  }
}
.hs-1 .hero-single::before {
  display: none;
}
.hs-1 .hero-single .hero-content .hero-sub-title {
  color: var(--theme-color2);
  text-transform: capitalize;
  letter-spacing: 0;
  font-size: 25px;
}
.hs-1 .hero-single .hero-content .hero-title {
  color: var(--color-dark);
}
.hs-1 .hero-single .hero-content .hero-title span {
  color: var(--theme-color);
}
.hs-1 .hero-single .hero-content .hero-title .text-gradient {
  color: transparent;
  background-image: var(--gradient3);
  -webkit-background-clip: text;
          background-clip: text;
}
.hs-1 .hero-single .hero-content p {
  color: var(--color-dark);
}
.hs-1 .hero-single .hero-img .img-1 {
  position: absolute;
  bottom: 0;
  width: 48%;
}
@media all and (max-width: 991px) {
  .hs-1 .hero-single .hero-img .img-1 {
    position: relative;
    width: 100%;
    margin-top: 90px;
  }
}

/* hero section 2 */
.hs-2 {
  margin-top: -6rem;
}
.hs-2 .hero-single {
  padding-top: 150px;
  padding-bottom: 100px;
}
.hs-2 .hero-single::before {
  display: none;
}
.hs-2 .hero-single .hero-content .hero-title {
  color: var(--color-dark);
}
@media all and (max-width: 991px) {
  .hs-2 .hero-single .hero-content .hero-title {
    margin-bottom: 80px;
  }
}
.hs-2 .hero-single .hero-content .hero-title .text-gradient {
  color: transparent;
  background-image: var(--gradient3);
  -webkit-background-clip: text;
          background-clip: text;
}
.hs-2 .hero-single .hero-content .hero-sub-title {
  color: var(--theme-color2);
  letter-spacing: unset;
  text-transform: capitalize;
  border-bottom: 2px solid var(--theme-color2);
  margin-bottom: 20px;
}
.hs-2 .hero-single .hero-content p {
  color: var(--color-dark);
}
.hs-2 .hero-single .hero-content .hero-img img {
  border-radius: 20px;
}
.hs-2 .hero-single .hero-video {
  position: relative;
  height: 100%;
}
.hs-2 .hero-single .hero-video a {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* hero section 3 */
.hs-3 .hero-single {
  padding: 40px 50px;
  border-radius: 20px;
}
@media all and (max-width: 767px) {
  .hs-3 .hero-single {
    padding: 40px 10px;
  }
}
.hs-3 .hero-single::before {
  display: none;
}
.hs-3 .hero-single .hero-content .hero-title {
  color: var(--color-dark);
}
.hs-3 .hero-single .hero-content .hero-title .text-gradient {
  color: transparent;
  background-image: var(--gradient3);
  -webkit-background-clip: text;
          background-clip: text;
}
.hs-3 .hero-single .hero-content .hero-sub-title {
  background: var(--gradient2);
  letter-spacing: 1px;
  text-transform: capitalize;
  border-radius: 50px;
  padding: 4px 15px 4px 10px;
}
.hs-3 .hero-single .hero-content p {
  color: var(--color-dark);
}
@media all and (max-width: 991px) {
  .hs-3 .hero-single .hero-img {
    margin-top: 40px;
  }
}
.hs-3 .hero-slider .owl-nav button:hover i {
  background: var(--color-white);
  color: var(--theme-color);
}
.hs-3 .hero-slider .owl-nav .owl-prev {
  left: -30px;
}
@media all and (max-width: 1199px) {
  .hs-3 .hero-slider .owl-nav .owl-prev {
    left: unset;
    right: 80px;
    bottom: 0px;
  }
}
.hs-3 .hero-slider .owl-nav .owl-next {
  right: -30px;
}
@media all and (max-width: 1199px) {
  .hs-3 .hero-slider .owl-nav .owl-next {
    right: 20px;
    bottom: 0px;
  }
}

/* hero section 4 */
.hs-4 {
  margin-top: -6rem;
}
.hs-4 .hero-single {
  padding-top: 190px;
  padding-bottom: 150px;
}
.hs-4 .hero-single::before {
  display: none;
}
.hs-4 .hero-single .hero-content .hero-sub-title {
  letter-spacing: 0.1;
  color: var(--theme-color2);
  border-bottom: 2px solid var(--theme-color2);
}
.hs-4 .hero-single .hero-content .hero-title {
  color: var(--color-dark);
}
.hs-4 .hero-single .hero-content p {
  color: var(--color-dark);
}
.hs-4 .hero-single .hero-search {
  margin-top: 40px;
}
.hs-4 .hero-single .hero-search .form-group {
  position: relative;
}
.hs-4 .hero-single .hero-search .form-group .form-control {
  padding-right: 130px;
}
.hs-4 .hero-single .hero-search .form-group .theme-btn2 {
  position: absolute;
  right: 5px;
  top: 5.5px;
  padding: 7px 15px;
}
.hs-4 .hero-single .hero-search .form-group .theme-btn2 span {
  transform: unset;
}

/* ===================
21. About css 
====================== */
.about-left {
  position: relative;
}

.about-img::before {
  content: "";
  position: absolute;
  left: 25%;
  bottom: 5%;
  width: 200px;
  height: 200px;
  border: 10px solid var(--theme-color);
  border-radius: 50%;
  z-index: -1;
}
.about-img img {
  border-radius: 200px;
}
.about-img .img-2 {
  margin-left: -20px;
  margin-top: 110px;
  border: 10px solid var(--color-white);
}
@media all and (max-width: 767px) {
  .about-img .img-2 {
    margin-top: 60px;
    margin-left: -10px;
  }
}

.about-right {
  position: relative;
  display: block;
}
@media all and (max-width: 991px) {
  .about-right {
    margin-top: 80px;
  }
}

.about-experience {
  background: var(--gradient2);
  position: absolute;
  right: 90px;
  top: -15px;
  padding: 14px 25px;
  border-radius: 100px;
  text-align: center;
}
@media all and (max-width: 767px) {
  .about-experience {
    right: -7px;
  }
}
.about-experience h5 {
  color: var(--color-white);
  font-size: 40px;
}
.about-experience p {
  color: var(--color-white);
  font-weight: 600;
}

.about-content {
  margin-top: 25px;
  margin-bottom: 35px;
}
.about-content .about-item {
  display: flex;
  gap: 12px;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 20px;
  padding: 15px;
}
.about-content .about-item .icon {
  width: 65px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  background: var(--theme-color);
  border-radius: 50px;
}
.about-content .about-item .icon img {
  width: 45px;
  filter: brightness(0) invert(1);
}
.about-content .about-item .content {
  flex: 1;
}
.about-content .about-item .content h6 {
  color: var(--color-dark);
  margin-bottom: 5px;
}

/*====================
22. Feature css 
======================*/
.feature-area {
  position: relative;
  z-index: 1;
}
.feature-item {
  position: relative;
  transition:all .35s ease;
}
.feature-item:hover {
      transform:translateY(-8px);

    border-color:#19C8D9;

    box-shadow:0 25px 60px rgba(25,200,217,.18);
}

.feature-content {
  display: flex;
  gap: 18px;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 30px;
  padding: 20px;
}
.feature-content .count {
  position: absolute;
  left: 20px;
  bottom: -10px;
  font-size: 28px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--body-text-color);
  opacity: 0.5;
}
.feature-icon {
  position: relative;
  z-index: 1;
}
.feature-icon img {
  width: 65px;
}
.feature-icon::before {
  content: "";
  position: absolute;
  left: -11px;
  top: -11px;
  width: 50px;
  height: 50px;
  background: var(--theme-color);
  border-radius: 50px;
  z-index: -1;
}
.feature-info {
  flex: 1;
}
.feature-info h4 {
  color: var(--color-dark);
  font-size: 20px;
}
.feature-info p {
  color: var(--body-text-color);
  margin-top: 10px;
}

/* ===================
23. Counter css 
====================== */
.counter-wrap {
  position: relative;
  width: 88.5%;
  border-radius: 0 30px 30px 0;
  padding: 40px;
}
@media all and (max-width: 767px) {
  .counter-wrap {
    padding: 30px;
  }
}
.counter-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/04.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 0 30px 30px 0;
}
.counter-box {
  display: flex;
  gap: 12px;
  position: relative;
  padding: 20px 15px 20px 20px;
  border-radius: 15px;
  z-index: 1;
}
.counter-box .icon {
  width: 80px;
  height: 80px;
  line-height: 70px;
  font-size: 35px;
  border-radius: 50px;
  text-align: center;
  color: var(--color-white);
  background: var(--gradient2);
}
.counter-box .icon img {
  width: 50px;
  filter: brightness(0) invert(1);
}
.counter-box .info {
  display: flex;
  gap: 2px;
}
.counter-box .counter {
  display: block;
  line-height: 1;
  color: var(--color-dark);
  font-size: 50px;
  font-weight: 900;
}
.counter-box .unit {
  font-size: 25px;
  color: var(--theme-color2);
  font-weight: 500;
  line-height: 1;
  margin: 3px 0 0 3px;
}
.counter-box .title {
  color: var(--color-dark);
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
}

/* counter area 2 */
.counter-area2 .counter-wrap {
  width: 100%;
}
.counter-area2 .counter-wrap .counter-box {
  padding: 5px;
}
.counter-area2 .counter-wrap::before {
  border-radius: 20px;
}

/* ===================
24. Video css 
====================== */
.video-content {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 40px;
}
.video-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.01);
  border-radius: 20px;
}
.video-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  height: 400px;
  z-index: 1;
}
@media all and (max-width: 767px) {
  .video-wrap {
    height: 250px;
  }
}
.video-area .play-btn {
  display: inline-block;
  padding: 0;
  height: 75px;
  width: 75px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*===================
25. Contact us css 
=====================*/
.contact-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  text-align: center;
  padding: 30px 20px;
  position: relative;
  margin-bottom: 25px;
  border-radius: 50px;
  transition: var(--transition);
}
.contact-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/07.html);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50px;
  z-index: -1;
}
.contact-info:hover {
  transform: translateY(-8px);
}
.contact-info .icon {
  font-size: 35px;
  color: var(--color-white);
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50px;
  background: var(--gradient2);
}
.contact-info .content h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-dark);
}
.contact-info .content p {
  color: var(--color-dark);
  font-weight: 500;
  font-size: 16px;
}
.contact-img img {
  width: 100%;
  border-radius: 40px;
}
.contact-form {
  background: var(--color-white);
  padding: 30px;
  border-radius: 40px;
  box-shadow: var(--box-shadow);
}
.contact-form-header {
  margin-bottom: 30px;
}
.contact-form-header h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-dark);
}
.contact-form-header p {
  color: var(--body-text-color);
}
.contact-form .form-message.success, .contact-form .form-message.error {
  margin-bottom: 20px;
  border-radius: 10px;
  padding: 10px 18px;
}
.contact-form .form-message.success {
  color: #41be7d;
  background: rgba(65, 190, 125, 0.1);
}
.contact-form .form-message.error {
  color: #ff7f7f;
  background: rgba(255, 127, 127, 0.1);
}
.contact-map {
  margin-bottom: -9px;
}
.contact-map iframe {
  width: 100%;
  height: 400px;
  border-radius: 50px;
}

/*====================
26. Error css 
======================*/
.error-wrap {
  text-align: center;
}
.error-wrap h1 {
  font-size: 250px;
  letter-spacing: 5px;
  font-weight: bold;
  color: var(--theme-color);
}
@media all and (max-width: 767px) {
  .error-wrap h1 {
    font-size: 160px;
  }
}
.error-wrap h1 span {
  color: var(--color-dark);
}
.error-wrap h2 {
  margin-top: 30px;
  margin-bottom: 10px;
}
.error-wrap img {
  width: 100%;
}
.error-wrap .theme-btn {
  margin-top: 30px;
}

/*====================
27. Terms/privacy css 
====================== */
.terms-content:not(:last-child) {
  margin-bottom: 54px;
}
.terms-content:first-child {
  margin-top: -3px;
}
.terms-content .terms-list {
  margin-top: 37px;
}
.terms-content .terms-list li:not(:last-child) {
  margin-bottom: 16px;
}
.terms-content h3 {
  margin-bottom: 23px;
  position: relative;
  font-weight: 700;
}
.terms-content p:not(:last-child) {
  margin-bottom: 26px;
}

/*====================
28. Coming soon css 
======================*/
.coming-soon {
  position: relative;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  min-height: 100vh;
  width: 100%;
  z-index: 1;
}
.coming-soon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}
.coming-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75vh;
}
.coming-content {
  text-align: center;
}
.coming-info h1 {
  color: var(--color-white);
  font-weight: 700;
  font-size: 50px;
}
@media all and (max-width: 767px) {
  .coming-info h1 {
    font-size: 40px;
  }
}
.coming-info p {
  font-size: 18px;
  color: var(--color-white);
  margin-top: 10px;
}

.coming-countdown-wrap {
  margin-top: 30px;
  margin-bottom: 30px;
}
.coming-countdown .time-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
.coming-countdown .time {
  background: var(--color-white);
  width: 125px;
  border-radius: 15px;
  padding: 14px 10px;
}
.coming-countdown .time span {
  display: block;
}
.coming-countdown .time span:first-child {
  color: var(--theme-color);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
}
.coming-countdown .time .unit {
  color: var(--color-dark);
  font-weight: 500;
}
.coming-countdown .divider {
  display: none;
}

.coming-newsletter-form .form-group {
  position: relative;
}
.coming-newsletter-form .form-group .form-control {
  padding: 17px 150px 17px 20px;
  border-radius: 50px;
  border-color: transparent;
  color: var(--color-dark);
}
.coming-newsletter-form .form-group .form-control::-moz-placeholder {
  color: var(--color-dark);
}
.coming-newsletter-form .form-group .form-control::placeholder {
  color: var(--color-dark);
}
.coming-newsletter-form .form-group .form-control:focus {
  border-color: var(--theme-color);
}
.coming-newsletter-form .theme-btn {
  position: absolute;
  right: 5px;
  top: 6px;
  padding: 9px 15px;
}

.coming-social {
  margin-top: 40px;
  text-align: center;
}
.coming-social a {
  display: inline-block;
  background: var(--theme-color);
  color: var(--color-white);
  margin: 5px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50px;
  transition: 0.5s;
  box-shadow: var(--box-shadow2);
}
.coming-social a:hover {
  background: var(--theme-color2);
}

/*====================
29. Faq css 
======================*/
.faq-area .accordion-item {
  border: none;
  background: var(--color-white);
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: var(--box-shadow);
}
.faq-area .accordion-button {
  border-radius: 0px;
  background: transparent;
  font-weight: 700;
  font-size: 20px;
  color: var(--color-dark);
  box-shadow: none;
}
@media all and (max-width: 991px) {
  .faq-area .accordion-button {
    font-size: 16px;
  }
}
.faq-area .accordion-button::after {
  content: "\f107";
  background: none;
  color: var(--theme-color);
  font-size: 24px;
  font-weight: 500;
  font-family: "Font Awesome 6 pro";
  width: unset;
  height: unset;
  margin-right: 3px;
}
.faq-area .accordion-button:not(.collapsed) {
  color: var(--theme-color);
  background: transparent;
  border-bottom: 1px dashed var(--theme-color);
  box-shadow: none;
}
.faq-area .accordion-button:not(.collapsed)::after {
  content: "\f107";
  transform: rotate(-180deg);
}
.faq-area .accordion-button span {
  width: 45px;
  height: 45px;
  margin-right: 15px;
}
.faq-area .accordion-button span i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50px;
  background: var(--theme-color);
  text-align: center;
  color: var(--color-white);
}
.faq-area .accordion-button-body {
  color: var(--color-dark);
  font-weight: 500;
}
@media all and (max-width: 991px) {
  .faq-area .faq-content {
    margin-bottom: 50px;
  }
}

/* ===================
30. Team css 
====================== */
.team-area {
  position: relative;
}
.team-img {
  position: relative;
}
.team-img img {
  border-radius: 50px;
}
.team-social-btn {
  position: absolute;
  right: -3px;
  bottom: 0;
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border-top-left-radius: 50%;
  padding: 8px;
}
.team-social-btn::before {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: 5px 5px 0 5px var(--color-white);
  border-bottom-right-radius: 20px;
}
.team-social-btn::after {
  content: "";
  position: absolute;
  top: -20px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: 5px 5px 0 5px var(--color-white);
  border-bottom-right-radius: 20px;
}
.team-social-btn button {
  width: 42px;
  height: 42px;
  line-height: 42px;
  background: var(--theme-color);
  color: var(--color-white);
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  border: none;
}
.team-social {
  position: absolute;
  right: 9px;
  bottom: 25px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.team-social a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 5px;
  background: var(--color-white);
  color: var(--theme-color);
  border-radius: 50px;
}
.team-social a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}
.team-social-wrap:hover .team-social {
  opacity: 1;
  visibility: visible;
  bottom: 60px;
}
.team-content {
  margin-top: 10px;
}
.team-content h4 a {
  color: var(--color-dark);
  font-size: 20px;
}
.team-content h4 a:hover {
  color: var(--theme-color);
}
.team-content span {
  color: var(--theme-color);
  font-weight: 500;
  font-size: 15px;
}

/*====================
31. Testimonial css 
======================*/
.testimonial-item {
  position: relative;
  margin: 2px;
}
.testimonial-item::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(to top right, #ff99ff 10%, #8e79f9 35% 35%, rgb(255, 255, 255) 75%);
  border-radius: 42px;
  z-index: -1;
}
.testimonial-item .content {
  background: var(--color-white);
  border-radius: 40px;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.testimonial-item .content .icon {
  position: absolute;
  right: 20px;
  top: 10px;
  opacity: 0.6;
  z-index: -1;
}
.testimonial-item .content .icon img {
  width: 80px;
}
.testimonial-item .content .rating {
  color: var(--color-yellow);
  margin-bottom: 5px;
}
.testimonial-item .content .quote p {
  color: var(--body-text-color);
}
.testimonial-item .content .author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  border-radius: 50px;
  padding: 5px;
  position: relative;
  z-index: 1;
}
.testimonial-item .content .author::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient2);
  border-radius: 50px;
  opacity: 0.15;
  z-index: -1;
}
.testimonial-item .content .author-img img {
  width: 55px;
  border-radius: 50px;
}
.testimonial-item .content .author-info h5 {
  color: var(--color-dark);
}
.testimonial-item .content .author-info p {
  color: var(--theme-color2);
}

.ts-bg {
  position: relative;
}
.ts-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/04.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}

/* testimonial-slider */
.testimonial-slider .owl-dots {
  text-align: center;
  margin-top: 30px;
}
.testimonial-slider .owl-dots .owl-dot span {
  background: var(--theme-color);
  margin: 5px 7px;
  border-radius: 10px;
  width: 8px;
  height: 8px;
  display: inline-block;
  transition: var(--transition);
  position: relative;
}
.testimonial-slider .owl-dots .owl-dot.active span {
  background-color: var(--theme-color);
}
.testimonial-slider .owl-dots .owl-dot.active span::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.6px solid var(--theme-color);
  border-radius: 50px;
}

/*====================
32. Partner css 
======================*/
.partner-area {
  position: relative;
}

.partner-area2.negative {
  margin-top: -50px;
}

.partner-area2 .partner-wrapper {
  position: relative;
  padding: 25px 25px;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 20px;
  margin-right: 15px;
  z-index: 1;
}

.partner-area2 .partner-title h5 {
  color: var(--color-dark);
  font-size: 21px;
}

.partner-area2 .partner-title span {
  color: var(--theme-color);
}

/*====================
33. Choose css 
======================*/
.choose-content {
  margin-right: 30px;
}
@media all and (max-width: 767px) {
  .choose-content {
    margin-right: 0;
  }
}
.choose-img {
  margin-top: 36px;
}
.choose-img img {
  border-radius: 50px;
}
.choose-item {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  padding: 28px;
  border-radius: 50px;
  position: relative;
}
.choose-item::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 110px;
  height: 110px;
  background-image: url(../img/shape/05.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.choose-item .icon {
  width: 80px;
  height: 80px;
  line-height: 77px;
  background: var(--gradient2);
  box-shadow: var(--box-shadow);
  border-radius: 50px;
  margin-bottom: 20px;
  text-align: center;
}
.choose-item .icon img {
  width: 102px;
  
  border-radius: 74px;
}
.choose-item .info h5 {
  color: var(--color-dark);
  margin-bottom: 10px;
}

/*====================
34. Cta css 
======================*/
.cta-wrap {
  background: var(--color-white);
  border-radius: 30px;
  position: relative;
  z-index: 1;
}
.cta-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/04.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 30px;
  z-index: -1;
}
.cta-content {
  padding: 0px 0px 20px 40px;
}
@media all and (min-width: 992px) and (max-width: 1199px) {
  .cta-content {
    padding: 40px;
  }
}
@media all and (max-width: 991px) {
  .cta-content {
    padding: 40px;
  }
}
.cta-content h1 {
  color: var(--color-dark);
  text-transform: capitalize;
}
.cta-content h1 span {
  color: var(--theme-color);
}
.cta-content p {
  font-size: 18px;
  padding: 10px 0 25px 0;
}
.cta-img img {
  border-radius: 0 30px 30px 0;
  clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
}
@media all and (max-width: 767px) {
  .cta-img img {
    border-radius: 0 0 30px 30px;
    clip-path: unset;
  }
}

/*====================
35. Pricing css 
======================*/
.pricing-area {
  position: relative;
}
.pricing-item {
  background: var(--color-white);
  border-radius: 40px;
  position: relative;
  padding: 40px 20px;
  transition: var(--transition);
  z-index: 1;
  border: 2px solid #e7e7e7;
}
.pricing-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/01.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 40px;
  opacity: 0.8;
  z-index: -1;
}
.pricing-item:hover {
  transform: translateY(-10px);
}
.pricing-item .theme-btn {
  width: 100%;
}
.pricing-item.active {
  outline: 3px solid var(--theme-color);
}
.pricing-header-wrap {
  margin-bottom: 30px;
}
.pricing-header {
  position: absolute;
  right: 30px;
  top: -15px;
  background: var(--theme-color);
  padding: 0 15px;
  box-shadow: var(--box-shadow);
  border-radius: 50px 50px 50px 0;
  letter-spacing: 4px;
}
.pricing-header h5 {
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
  display: inline-block;
  color: var(--color-white);
}
.pricing-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: 35px;
}
.pricing-icon {
  width: 80px;
  height: 80px;
  line-height: 75px;
  background: var(--gradient2);
  border-radius: 50px;
  text-align: center;
}
.pricing-icon img {
  width: 50px;
  filter: brightness(0) invert(1);
}
.pricing-amount strong {
  font-size: 28px;
  font-weight: 900;
  color: var(--color-dark);
  line-height: 1;
}
.pricing-amount-type {
  color: var(--color-dark);
  font-size: 16px;
  font-weight: 500;
}
.pricing-text {
  color: var(--color-dark);
  text-transform: uppercase;
  font-size: 15px;
}
.pricing-feature {
  padding: 40px 0 0 0;
}
.pricing-feature li {
  margin-bottom: 15px;
  color: var(--color-dark);
  font-weight: 500;
}
.pricing-feature li:last-child {
  margin-bottom: 0px;
}
.pricing-feature li i {
  color: var(--theme-color);
  margin-right: 10px;
}
.pricing-feature li .not-include {
  color: var(--color-red);
}

/*====================
36. Blog css
======================*/
.blog-item {
  padding: 20px;
  background: var(--color-white);
  border-radius: 50px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  position: relative;
}
.blog-img {
  border-radius: 40px;
  overflow: hidden;
  position: relative;
}
.blog-img img {
  border-radius: 12px;
}
.blog-item:hover .blog-img img {
  transform: scale(1.1);
}
.blog-date {
  position: absolute;
  right: 70px;
  top: 2px;
  background: var(--color-white);
  color: var(--theme-color);
  font-weight: 500;
  text-align: center;
  padding: 0px 15px;
  border-radius: 50px;
  border: 3px solid var(--color-white);
  z-index: 1;
}
.blog-meta {
  padding: 14px 0 12px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-info-color);
}
.blog-meta ul li {
  display: inline-block;
  margin-right: 15px;
  position: relative;
}
.blog-meta ul li a {
  color: var(--color-dark);
  font-weight: 500;
}
.blog-meta ul li a:hover {
  color: var(--theme-color);
}
.blog-meta ul li i {
  margin-right: 5px;
  color: var(--theme-color);
}
.blog-title a {
  color: var(--color-dark);
  font-size: 22px;
  margin-bottom: 15px;
  text-transform: capitalize;
}
.blog-title a:hover {
  color: var(--theme-color);
}
.blog-info p {
  color: var(--body-text-color);
  margin-bottom: 20px;
}
.blog-info .theme-btn {
  border-radius: 18px;
}
.blog-area.blog-border .blog-item {
  border: 1.5px solid var(--theme-color);
  border-radius: 35px;
  box-shadow: none;
}
.blog-area.blog-border .blog-item:hover {
  border-color: var(--theme-color2);
}
.blog-area.blog-border .blog-img {
  border-radius: 20px;
}
.blog-area.blog-border .blog-img img {
  border-radius: 20px;
}
.blog-area.blog-border .blog-title a {
  margin-bottom: 20px;
}

/*========================
37. Blog single css
==========================*/
.blog-single {
  position: relative;
}

/* blog single img */
.blog-single-content img {
  border-radius: 25px;
}

/* blog single meta */
.blog-single .blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
@media all and (max-width: 767px) {
  .blog-single .blog-meta {
    flex-direction: column;
    font-size: 15px;
  }
}
.blog-single .blog-meta-left ul {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media all and (max-width: 767px) {
  .blog-single .blog-meta-left ul {
    gap: 10px;
  }
}
.blog-single .blog-meta-left ul li {
  color: var(--color-dark);
  font-weight: 500;
}
.blog-single .blog-meta i {
  margin-right: 5px;
  color: var(--theme-color);
}
.blog-single .blog-meta a {
  color: var(--color-dark);
  font-weight: 500;
}
.blog-single .blog-meta a:hover {
  color: var(--theme-color);
}

/* blog single details */
.blog-single .blog-details-title {
  font-size: 34px;
  color: var(--color-dark);
  font-weight: 700;
}

/* blog single blockqoute */
.blog-single .blockqoute {
  background: var(--theme-bg-light);
  border-left: 5px solid var(--theme-color);
  padding: 30px;
  font-size: 17px;
  font-style: italic;
  margin: 20px 0;
  border-radius: 0px;
  position: relative;
}
.blog-single .blockqoute .blockqoute-icon {
  position: absolute;
  right: 20px;
  bottom: 5px;
  color: var(--theme-color);
  font-size: 70px;
}
.blog-single .blockqoute-author {
  margin-top: 20px;
  padding-left: 60px;
  position: relative;
  color: var(--color-dark);
}
.blog-single .blockqoute-author::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 40px;
  background: var(--theme-color);
  left: 0;
  top: 10px;
}

/* blog single details tag */
.blog-single .blog-details-tag {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media all and (max-width: 767px) {
  .blog-single .blog-details-tag {
    flex-direction: column;
    align-items: flex-start;
  }
}
.blog-single .blog-details-tag h5 {
  color: var(--color-dark);
}
.blog-single .blog-details-tag ul {
  display: flex;
  align-items: center;
  gap: 15px;
}
.blog-single .blog-details-tag ul a {
  background: var(--theme-bg-light);
  color: var(--color-dark);
  padding: 5px 18px;
  border-radius: 50px;
  transition: var(--transition);
}
.blog-single .blog-details-tag ul a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

/* blog single author */
.blog-single .blog-author {
  display: flex;
  justify-content: start;
  align-items: center;
  background: var(--theme-bg-light);
  margin: 50px 0;
  padding: 20px;
  border-radius: 50px;
}
@media all and (max-width: 767px) {
  .blog-single .blog-author {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }
}
.blog-single .blog-author-img {
  width: 320px;
}
.blog-single .blog-author-img img {
  border-radius: 50%;
}
.blog-single .blog-author .author-name {
  font-size: 22px;
  color: var(--theme-color);
  margin: 8px 0;
}
.blog-single .blog-author .author-info {
  padding: 0 20px;
}
@media all and (max-width: 767px) {
  .blog-single .blog-author .author-info {
    margin-top: 25px;
  }
}
.blog-single .blog-author .author-social {
  margin-top: 10px;
}
.blog-single .blog-author .author-social a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  border: 2px solid var(--theme-color);
  border-radius: 50px;
  margin-right: 5px;
  color: var(--theme-color);
  transition: var(--transition);
}
.blog-single .blog-author .author-social a:hover {
  color: var(--color-white);
  background: var(--theme-color);
}

/* blog single comment */
.blog-single .blog-comment h3 {
  color: var(--color-dark);
  font-weight: 700;
}
.blog-single .blog-comment-wrap {
  margin: 30px 0;
}
.blog-single .blog-comment-item {
  display: flex;
  align-items: start;
  justify-content: start;
  border: 1px solid var(--border-info-color);
  border-radius: 20px;
  padding: 15px;
  margin-top: 50px;
}
@media all and (max-width: 767px) {
  .blog-single .blog-comment-item {
    flex-direction: column;
    text-align: center;
    padding: 30px 0px;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    border-radius: 15px;
  }
}
.blog-single .blog-comment-item.reply {
  margin-left: 50px;
}
@media all and (max-width: 767px) {
  .blog-single .blog-comment-item.reply {
    margin-left: 0px;
  }
}
.blog-single .blog-comment-item img {
  width: 80px;
  border-radius: 50%;
}
@media all and (max-width: 767px) {
  .blog-single .blog-comment-item img {
    margin: 0 auto 20px auto;
  }
}
.blog-single .blog-comment-content {
  padding: 0 0 0 20px;
}
.blog-single .blog-comment-content span {
  font-size: 14px;
  color: var(--theme-color);
  font-weight: 500;
}
.blog-single .blog-comment-content a {
  font-weight: 500;
  margin-top: 5px;
  color: var(--theme-color);
}
.blog-single .blog-comment-content a:hover {
  color: var(--theme-color2);
}
.blog-single .blog-comment-content h5 {
  color: var(--color-dark);
  font-weight: 700;
}

/* blog single comment form */
.blog-single .blog-comment-form {
  padding: 30px;
  margin-top: 50px;
  border-radius: 30px;
  background: var(--theme-bg-light);
}
.blog-single .blog-comment-form h3 {
  margin-bottom: 20px;
}

/*==========================
38. Blog sidebar widget css
============================*/
/* sidebar widget */
.blog-sidebar .widget {
  background: var(--theme-bg-light);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 25px;
}

/* sidebar widget title */
.blog-sidebar .widget-title {
  padding-bottom: 10px;
  margin-bottom: 30px;
  position: relative;
  font-size: 22px;
  color: var(--color-dark);
  font-weight: 700;
}
.blog-sidebar .widget-title::before {
  position: absolute;
  content: "";
  width: 15px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 0;
}
.blog-sidebar .widget-title::after {
  position: absolute;
  content: "";
  width: 30px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 22px;
}

/* sidebar widget search */
.blog-sidebar .widget .search-form .form-group {
  position: relative;
}
.blog-sidebar .widget .search-form .form-control {
  padding-right: 50px;
}
.blog-sidebar .widget .search-form button {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  padding: 12px 18px 6px 18px;
  background: transparent;
  border: none;
  color: var(--theme-color);
}

/* sidebar widget category */
.blog-sidebar .widget .category-list a {
  display: block;
  padding: 10px 0;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 1px solid var(--border-info-color);
  transition: var(--transition);
}
.blog-sidebar .widget .category-list a:last-child {
  margin-bottom: 0px;
  border-bottom: none;
}
.blog-sidebar .widget .category-list a:hover {
  padding-left: 10px;
  color: var(--theme-color);
}
.blog-sidebar .widget .category-list a i {
  margin-right: 5px;
  color: var(--theme-color);
}
.blog-sidebar .widget .category-list a span {
  float: right;
}

/* sidebar widget recent post */
.blog-sidebar .widget .recent-post-item {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.blog-sidebar .widget .recent-post-img img {
  width: 75px;
  border-radius: 15px;
}
.blog-sidebar .widget .recent-post-info {
  flex: 1;
}
.blog-sidebar .widget .recent-post-info h6 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.blog-sidebar .widget .recent-post-info h6 a:hover {
  color: var(--theme-color);
}
.blog-sidebar .widget .recent-post-info span {
  font-size: 14px;
  color: var(--theme-color);
  font-weight: 500;
}
.blog-sidebar .widget .recent-post-info i {
  margin-right: 5px;
}

/* sidebar widget social */
.blog-sidebar .widget .social-link a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  border: 2px solid var(--theme-color);
  color: var(--theme-color);
  text-align: center;
  margin-right: 5px;
  border-radius: 50px;
  transition: var(--transition);
}
.blog-sidebar .widget .social-link a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

/* sidebar widget tag */
.blog-sidebar .widget .tag-list a {
  background: var(--color-white);
  color: var(--color-dark);
  padding: 5px 18px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 50px;
  display: inline-block;
  transition: var(--transition);
}
.blog-sidebar .widget .tag-list a:hover {
  background-color: var(--theme-color);
  color: var(--color-white);
}

/*====================
39. Auth css 
======================*/
.auth-form {
  padding: 40px;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 25px;
}
@media all and (max-width: 991px) {
  .auth-form {
    padding: 40px 20px;
  }
}

/* auth-header */
.auth-form .auth-header {
  text-align: center;
  margin-bottom: 30px;
}
.auth-form .auth-header img {
  width: 200px;
  margin-bottom: 10px;
}
.auth-form .auth-header h3 {
  color: var(--theme-color);
  margin-bottom: 5px;
  font-weight: 800;
}
.auth-form .auth-header p {
  color: var(--color-dark);
  font-size: 20px;
}

/* auth-group */
.auth-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}
.auth-group .form-check {
  margin-bottom: 0;
}
.auth-group .form-check-label {
  color: var(--color-dark);
  font-weight: 500;
}
.auth-group .auth-group-link {
  color: var(--theme-color);
  font-weight: 500;
}
.auth-group .auth-group-link:hover {
  color: var(--color-red);
}

/* password-view */
.auth-form .password-view {
  cursor: pointer;
}
.auth-form .password-view i {
  left: unset;
  right: 20px;
  color: var(--body-text-color);
}
.auth-form .password-view.show i::before {
  content: "\f06e";
}

/* auth-btn */
.auth-form .theme-btn {
  width: 100%;
}
.auth-form .theme-btn::before {
  width: 420px;
  height: 420px;
  transition: var(--transition2);
}

/* auth-bottom */
.auth-form .auth-bottom {
  margin-top: 25px;
}
.auth-form .auth-bottom p {
  color: var(--color-dark);
  text-align: center;
}
.auth-form .auth-bottom a {
  color: var(--theme-color);
  font-weight: 500;
}
.auth-form .auth-bottom a:hover {
  color: var(--color-red);
}

/* auth-social */
.auth-form .auth-social {
  border-top: 1px solid var(--border-info-color);
  margin-top: 15px;
}
.auth-form .auth-social p {
  color: var(--color-dark);
  margin: 10px 0;
}
.auth-form .auth-social-list {
  text-align: center;
  margin-bottom: 10px;
}
.auth-form .auth-social-list a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: var(--theme-color);
  border-radius: 50px;
  margin: 5px;
}
.auth-form .auth-social-list a:hover {
  background: var(--color-red);
}
.auth-form .auth-social-list a i {
  color: var(--color-white);
}

/*====================
40. Step/process css  
======================*/
.process-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
}
.process-item .count {
  position: absolute;
  top: -20px;
  left: 0;
  font-weight: 800;
  font-size: 75px;
  line-height: 80px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--border-info-color);
  z-index: -1;
}
.process-item .icon {
  width: 80px;
  height: 80px;
  line-height: 77px;
  text-align: center;
  background: #e5e5ef;
  border-radius: 50px;
  box-shadow: var(--box-shadow);
}
.process-item .icon img {
  width: 50px;

}
.process-item .content {
  flex: 1;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 20px;
  padding: 20px;
}
.process-item .content h4 {
  font-size: 20px;
  color: var(--color-dark);
}
.process-item .content p {
  color: var(--body-text-color);
  margin-top: 10px;
}

/*====================
41. Footer css
======================*/
.footer-area {
  background: var(--footer-bg);
  position: relative;
  z-index: 1;
}
.footer-shape img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
}
@media all and (max-width: 991px) {
  .footer-wrap {
    padding-bottom: 0px;
  }
}
.footer-widget {
  position: relative;
}
@media all and (max-width: 1199px) {
  .footer-widget-box {
    margin-bottom: 50px;
  }
}
.footer-widget-box.about-us {
  margin-right: 50px;
}
.footer-widget-box p {
  color: var(--color-white);
  padding-right: 18px;
  margin-bottom: 20px;
}
.footer-widget-title {
  color: var(--color-white);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 21px;
  z-index: 1;
}
.footer-widget-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 3px;
  background: var(--theme-color);
  border-radius: 50px;
}
.footer-logo img {
  width: 200px;
  margin-bottom: 15px;
}
.footer-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer-list li a {
  color: var(--color-white);
  transition: var(--transition);
  position: relative;
  margin-left: -20px;
}
@media all and (max-width: 1199px) {
  .footer-list li a {
    font-size: 14px;
  }
}
@media all and (max-width: 991px) {
  .footer-list li a {
    font-size: 16px;
  }
}
.footer-list li a:hover {
  margin-left: 0px;
  color: var(--theme-color);
}
.footer-list li a i {
  margin-right: 5px;
  opacity: 0;
  transition: var(--transition);
}
.footer-list li a:hover i {
  opacity: 1;
}
.footer-social {
  display: flex;
  gap: 15px;
  justify-content: end;
}
@media all and (max-width: 767px) {
  .footer-social {
    justify-content: flex-start;
    margin-top: 20px;
  }
}
.footer-social li a i {
  height: 38px;
  width: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 50px;
  background: var(--color-white);
  color: var(--theme-color);
  transition: var(--transition);
}
.footer-social li a i:hover {
  background: var(--theme-color);
  color: var(--color-white);
}
.footer-contact li {
  position: relative;
  display: flex;
  justify-content: start;
  gap: 10px;
  color: var(--footer-text-color);
  font-size: 16px;
  margin-bottom: 12px;
}
.footer-contact .icon {
  width: 35px;
  height: 35px;
  line-height: 35px;
  background-image: linear-gradient(90deg, #00adef 0%, #1dc1ff 100%) !important;
  border-radius: 50px;
  text-align: center;
}
.footer-contact .content {
  flex: 1;
}
.footer-contact .content h6 {
  color: var(--color-white);
  margin-bottom: 5px;
}
.footer-contact .content a {
  color: var(--color-white);
}
.footer-newsletter h6 {
  color: var(--color-white);
  margin-bottom: 10px;
}
.footer-newsletter .newsletter-form .form-group {
  position: relative;
}
.footer-newsletter .newsletter-form .form-icon > i {
  top: 21px;
  left: 0;
  color: var(--theme-color);
}
.footer-newsletter .newsletter-form .form-control {
  padding: 16px 140px 16px 32px;
  border-radius: 0px;
  color: var(--color-white);
  box-shadow: none;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-white);
  outline: none;
}
.footer-newsletter .newsletter-form .form-control:focus {
  border-bottom-color: var(--theme-color);
}
.footer-newsletter .newsletter-form .form-control::-moz-placeholder {
  color: var(--color-white);
}
.footer-newsletter .newsletter-form .form-control::placeholder {
  color: var(--color-white);
}
.footer-newsletter .newsletter-form .theme-btn {
  position: absolute;
  right: 0px;
  top: 5px;
  border-radius: 50px;
  padding: 5px 15px;
}
.footer-newsletter .newsletter-form .theme-btn:hover {
  color: var(--theme-color);
}
.footer-newsletter .newsletter-form .theme-btn::before {
  background: var(--color-white);
}
.footer-newsletter .newsletter-form .theme-btn span {
  margin-right: 0;
  margin-left: 5px;
}
.footer-payment h6 {
  margin-bottom: 18px;
}
.footer-payment .payment-img {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
@media all and (max-width: 1199px) {
  .footer-payment .payment-img {
    gap: 25px;
  }
}
@media all and (max-width: 767px) {
  .footer-payment .payment-img {
    gap: 15px;
  }
}
.footer-payment .payment-img img {
  width: 60px;
}
.footer-payment .payment-img .paypal {
  width: 95px;
}
.footer-payment .payment-img .discover {
  width: 72px;
}
.footer-payment .payment-img .amazon {
  width: 110px;
}
.footer-lang .lang-btn {
  color: var(--color-dark);
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-info-color);
}
.footer-lang .lang-btn:hover {
  color: var(--theme-color);
}
.footer-lang .lang-btn span {
  margin-right: 7px;
}
.footer-lang-modal .modal-content {
  border-radius: 25px;
}
.footer-lang-modal .btn-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  line-height: 20px;
  background: var(--color-dark);
  border-radius: 50px;
  color: var(--color-white);
  font-size: 20px;
  opacity: 1;
  z-index: 1;
}
.footer-lang-modal .modal-body {
  padding: 25px;
}
.footer-lang-modal .lang-content h4 {
  color: var(--color-dark);
  font-size: 22px;
}
.footer-lang-modal .lang-content .lang-list {
  margin-top: 15px;
}
.footer-lang-modal .lang-content .lang-list a {
  color: var(--color-dark);
  font-weight: 500;
}
.footer-lang-modal .lang-content .lang-list a:hover {
  color: var(--theme-color);
}

.copyright {
  padding: 20px 0;
  border-top: 1px solid var(--border-white-color);
}
.copyright .footer-menu {
  margin: 0;
  padding: 0;
  text-align: right;
}
@media all and (max-width: 991px) {
  .copyright .footer-menu {
    float: left;
    margin-top: 20px;
    text-align: left;
  }
}
.copyright .footer-menu li {
  display: inline-block;
  margin-left: 25px;
  font-size: 16px;
}
@media all and (max-width: 991px) {
  .copyright .footer-menu li {
    margin-left: 0;
    margin-right: 15px;
  }
}
.copyright .footer-menu li a {
  color: var(--footer-text-color);
  transition: var(--transition);
}
.copyright .footer-menu li a:hover {
  color: var(--theme-color);
}
.copyright .copyright-text {
  color: var(--footer-text-color);
  margin-bottom: 0px;
  font-size: 16px;
}
.copyright .copyright-text a {
  color: var(--theme-color);
  font-weight: 500;
}

/* footer area 2 */
.footer-area.fta-2 .footer-shape img {
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.3;
}
.footer-area.fta-2 .footer-widget-title::before {
  background: var(--theme-color2);
}
.footer-area.fta-2 .footer-contact .icon {
  background: var(--gradient2);
}
.footer-area.fta-2 .footer-newsletter .newsletter-form .form-icon > i {
  color: var(--color-white);
}
.footer-area.fta-2 .footer-newsletter .newsletter-form .form-control:focus {
  border-bottom-color: var(--theme-color2);
}
.footer-area.fta-2 .footer-newsletter .newsletter-form .theme-btn {
  background: var(--gradient2);
}
.footer-area.fta-2 .footer-newsletter .newsletter-form .theme-btn:hover {
  color: var(--theme-color2);
}
.footer-area.fta-2 .footer-list li a:hover {
  color: var(--theme-color2);
}
.footer-area.fta-2 .footer-social li a i {
  color: var(--theme-color2);
}
.footer-area.fta-2 .footer-social li a i:hover {
  background: var(--theme-color2);
  color: var(--color-white);
}
.footer-area.fta-2 .copyright .copyright-text a {
  color: var(--theme-color2);
}

/* footer light */
.footer-area.light {
  background: var(--color-white);
    background-image: url(../img/shape/03.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.footer-area.light .footer-widget-title {
  color: var(--color-dark);
  font-weight: 800;
}
.footer-area.light .footer-widget-box p {
  color: var(--color-dark);
}
.footer-area.light .footer-newsletter h6 {
  color: var(--color-dark);
  font-weight: 700;
}
.footer-area.light .newsletter-form .form-control {
  color: var(--color-dark);
  border-bottom: 1.5px solid var(--color-dark);
}
.footer-area.light .newsletter-form .form-control::-moz-placeholder {
  color: var(--color-dark);
}
.footer-area.light .newsletter-form .form-control::placeholder {
  color: var(--color-dark);
}
.footer-area.light .newsletter-form .form-control:focus {
  border-bottom-color: var(--theme-color);
}
.footer-area.light .footer-list li a {
  color: var(--color-dark);
}
.footer-area.light .footer-list li a:hover {
  color: var(--theme-color);
}
.footer-area.light .footer-contact .content h6 {
  color: var(--color-dark);
  font-weight: 700;
}
.footer-area.light .footer-contact .content a {
  color: var(--color-dark);
}
.footer-area.light .footer-social li a i {
  background: #7a7a7a;
  color: var(--color-white);
}
.footer-area.light .footer-social li a i:hover {
  background-image: linear-gradient(90deg, #00adef 0%, #1dc1ff 100%) !important;
}
.footer-area.light .copyright {
  border-top-color: var(--border-info-color);
}
.footer-area.light .copyright .copyright-text {
  color: var(--color-dark);
}

/*====================
42. Skill css
======================*/
.skill-img {
  position: relative;
}
.skill-img::before {
  content: "";
  position: absolute;
  right: 50px;
  bottom: 0;
  width: 80%;
  height: 90%;
  background: var(--theme-color2);
  border-radius: 50px;
  transform: rotate(5deg);
  opacity: 0.12;
  z-index: 0;
}
@media all and (max-width: 767px) {
  .skill-img::before {
    right: 15px;
  }
}
.skill-img img {
  width: 85%;
  border-radius: 50px;
}
.skill-text {
  margin-top: 10px;
}
.skill-progress {
  margin-top: 25px;
}
.skill-progress .progress-item {
  margin-bottom: 25px;
}
.skill-progress .progress-item:last-child {
  margin-bottom: 0;
}
.skill-progress .progress-item h5 {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.skill-progress .progress-item .progress {
  height: 8px;
  background: var(--theme-bg-light);
  border-radius: 50px;
}
.skill-progress .progress-item .progress .progress-bar {
  background: var(--gradient2);
}

/*====================
43. Category css
======================*/
.category-item {
  background: var(--color-white);
  border-radius: 20px;
  text-align: center;
  width: 100%;
  position: relative;
}
.category-item::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(to top right, #3fcaff 10%, #b7a9ff 35%, rgb(255, 255, 255) 75%);
  border-radius: 22px;
  z-index: -1;
}
.category-item:hover {
  transform: scale(1.02);
}
.category-item .content {
  padding: 15px;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 20px;
}
.category-item .icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  margin: auto;
  border-radius: 50px;
}
.category-item .icon img {
  width: 50px;
}
.category-item .info {
  margin-top: 12px;
}
.category-item .info h6 {
  color: var(--color-dark);
  margin-bottom: 4px;
}
.category-item .info p {
  color: var(--body-text-color);
  font-size: 15px;
}

/* category-area2 */
.category-area2 .category-item .content {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 110px;
}
.category-area2 .category-item .content .icon {
  width: 70px;
  height: 70px;
  line-height: 67px;
  margin: unset;
}
.category-area2 .category-item .content .icon img {
  width: 45px;
}
.category-area2 .category-item .content .info {
  flex: 1;
  text-align: left;
  margin-top: 0;
}

/* category-slider */
.category-slider .category-item {
  margin: 2px;
}
.category-slider .category-item .content {
  box-shadow: none;
}
.category-slider .category-item .content .icon img {
  display: unset;
}
.category-slider .category-item:hover {
  transform: none;
}
.category-slider .owl-nav button {
  position: absolute;
  background: var(--theme-color) !important;
  color: var(--color-white) !important;
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 20px !important;
  text-align: center;
  border-radius: 50%;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  top: 50%;
  transform: translateY(-50%);
}
.category-slider .owl-nav button:hover {
  background: var(--theme-color) !important;
}
.category-slider .owl-prev {
  left: -16px;
}
@media all and (max-width: 767px) {
  .category-slider .owl-prev {
    left: -10px;
  }
}
.category-slider .owl-next {
  right: -16px;
}
@media all and (max-width: 767px) {
  .category-slider .owl-next {
    right: -10px;
  }
}

/* nav category */
@media all and (min-width: 992px) {
  .nav-category {
    margin-left: 50px;
  }
}
@media all and (max-width: 991px) {
  .nav-category {
    margin-bottom: 20px;
  }
}
.nav-category .dropdown > button {
  background: rgb(from var(--theme-color) r g b/0.08);
  color: var(--theme-color);
  border: none;
  border-radius: 10px;
  padding: 5px 12px;
  font-weight: 500;
}
.nav-category .dropdown .dropdown-menu {
  border-radius: 15px;
  padding: 10px;
  border: none;
  box-shadow: var(--box-shadow);
  min-width: 220px;
}
@media all and (max-width: 991px) {
  .nav-category .dropdown .dropdown-menu {
    width: 100%;
  }
}
.nav-category .dropdown .dropdown-menu .dropdown-item {
  color: var(--color-dark);
  padding: 4px 12px;
  border-radius: 10px;
}
.nav-category .dropdown .dropdown-menu .dropdown-item:hover {
  background: rgb(from var(--theme-color) r g b/0.08);
  color: var(--theme-color);
}
@media all and (min-width: 992px) {
  .nav-category .dropdown ul .dropdown-menu {
    top: 0;
    left: 107%;
  }
}
.nav-category .dropdown ul .dropdown-toggle::after {
  position: absolute;
  top: 6px;
  right: 12px;
}

/*====================
44. Course css
======================*/
.course-area.bg-img {
  position: relative;
}
.course-area.bg-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/02.html);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.course-item {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  padding: 14px;
  border-radius: 20px;
  position: relative;
}
.course-content {
  padding-top: 18px;
}
.course-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--theme-color);
  color: var(--color-white);
  font-size: 15px;
  padding: 5px 12px;
  line-height: 1;
  box-shadow: var(--box-shadow);
  border-radius: 50px 50px 0 50px;
  border: 3px solid var(--color-white);
  z-index: 1;
}
.course-tag.c1 {
  background: var(--color-skyblue);
}
.course-tag.c2 {
  background: var(--color-red);
}
.course-img a {
  display: block;
  overflow: hidden;
  border-radius: 15px;
}
.course-img a img {
  border-radius: 15px;
}
.course-item:hover .course-img img {
  transform: scale(1.1);
}
.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.course-meta .category {
  background: rgb(from var(--theme-color) r g b/0.08);
  color: var(--theme-color);
  font-size: 15px;
  padding: 0px 10px;
  border-radius: 50px 50px 50px 0;
}
.course-meta .category.c1 {
  background: rgb(from var(--color-green) r g b/0.08);
  color: var(--color-green);
}
.course-meta .category.c2 {
  background: rgb(from var(--color-skyblue) r g b/0.08);
  color: var(--color-skyblue);
}
.course-meta .category.c3 {
  background: rgb(from var(--color-yellow) r g b/0.08);
  color: var(--color-yellow);
}
.course-meta .category.c4 {
  background: rgb(from var(--color-red) r g b/0.08);
  color: var(--color-red);
}
.course-meta .category.c5 {
  background: rgb(from var(--color-blue) r g b/0.08);
  color: var(--color-blue);
}
.course-meta .rating {
  color: var(--body-text-color);
  font-size: 15px;
}
.course-meta .rating i {
  color: var(--color-yellow);
}
.course-title a {
  color: var(--color-dark);
  font-size: 18px;
  text-transform: capitalize;
}
.course-title a:hover {
  color: var(--theme-color);
}
.course-info {
  margin-top: 12px;
}
.course-info ul {
  display: flex;
  align-items: center;
  gap: 15px;
}
.course-info ul li {
  color: var(--body-text-color);
}
.course-info ul li i {
  margin-right: 5px;
}
.course-info .lecture i {
  color: var(--color-green);
}
.course-info .duration i {
  color: var(--color-red);
}
.course-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-info-color);
  padding-top: 12px;
  margin-top: 12px;
}
.course-instructor {
  display: flex;
  align-items: center;
  gap: 7px;
}
.course-instructor:hover h6 {
  color: var(--theme-color);
}
.course-instructor img {
  width: 32px;
  border-radius: 50px;
  box-shadow: var(--box-shadow);
}
.course-instructor h6 {
  color: var(--color-dark);
  font-size: 15px;
  transition: var(--transition);
}
.course-price span {
  color: var(--color-red);
  font-size: 17px;
  font-weight: 500;
}
.course-price del {
  color: var(--body-text-color);
  font-size: 15px;
  margin-right: 4px;
}
.course-border .course-item {
  border: 1px solid var(--border-info-color);
  box-shadow: none;
}

/* course slider */
.course-slider .course-item {
  box-shadow: none;
}
.course-slider .course-instructor img {
  width: 32px !important;
}
.course-slider .owl-nav button {
  position: absolute;
  background: var(--theme-color) !important;
  color: var(--color-white) !important;
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 20px !important;
  text-align: center;
  border-radius: 50%;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  top: 50%;
  transform: translateY(-50%);
  margin-top: -30px;
}
.course-slider .owl-nav button:hover {
  background: var(--theme-color) !important;
}
.course-slider .owl-prev {
  left: -16px;
}
@media all and (max-width: 767px) {
  .course-slider .owl-prev {
    left: -10px;
  }
}
.course-slider .owl-next {
  right: -16px;
}
@media all and (max-width: 767px) {
  .course-slider .owl-next {
    right: -10px;
  }
}
.course-slider .owl-dots {
  text-align: center;
  margin-top: 30px;
}
.course-slider .owl-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50px;
  border: 2px solid var(--theme-color);
  margin: 4px;
  transition: var(--transition2);
}
.course-slider .owl-dots button.active {
  background: var(--theme-color);
}

/* course tab */
.course-tab .nav {
  border: 1.5px solid var(--theme-color);
  border-radius: 50px;
  padding: 5px;
  gap: 12px;
}
@media all and (max-width: 767px) {
  .course-tab .nav {
    border-radius: 25px;
  }
}
.course-tab .nav .nav-link {
  padding: 4px 15px;
  border-radius: 50px;
  background: rgb(from var(--theme-color) r g b/0.07);
  color: var(--theme-color);
  font-weight: 500;
}
.course-tab .nav .nav-link.active {
  background: var(--gradient);
  color: var(--color-white);
}

/* course-sidebar */
.course-sidebar .widget {
  background: rgb(from var(--theme-color2) r g b/0.05);
  padding: 20px;
  border-radius: 15px;
}
.course-sidebar .widget .title {
  margin-bottom: 25px;
}
.course-sidebar .search-form .form-group {
  position: relative;
}
.course-sidebar .search-form .form-group .form-control {
  padding-right: 50px;
}
.course-sidebar .search-form .form-group button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50px;
  background: transparent;
  border: none;
  border-radius: 15px;
  color: var(--theme-color);
}
.course-sidebar .form-check {
  margin-bottom: 10px;
}
.course-sidebar .rating .form-check label i {
  color: var(--color-yellow);
}

/* course sort */
.course-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  background: rgb(from var(--theme-color2) r g b/0.05);
  padding: 5px 5px 5px 20px;
  border-radius: 15px;
}
@media all and (max-width: 767px) {
  .course-sort {
    flex-direction: column;
    gap: 15px;
    padding: 20px 10px;
  }
}
.course-sort .course-showing {
  color: var(--body-text-color);
}
.course-sort .nice-select {
  height: 45px;
  line-height: 45px;
  margin-bottom: 0;
  border-radius: 10px;
}

/* course-area list */
.course-area.list .course-item {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}
@media all and (max-width: 767px) {
  .course-area.list .course-item {
    gap: 20px;
  }
}
.course-area.list .course-item .course-tag {
  right: unset;
  left: 0;
}
.course-area.list .course-img img {
  width: 260px;
  height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media all and (max-width: 767px) {
  .course-area.list .course-img img {
    width: 100%;
    height: auto;
  }
}
.course-area.list .course-content {
  flex: 1;
  padding-top: 0;
}

/*====================
45. Course single css
======================*/
.course-single-header {
  position: relative;
  text-align: left;
}
.course-single-header .top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.course-single-header .top .category {
  padding: 4px 15px;
  border-radius: 8px;
  background: rgb(from var(--theme-color2) r g b/0.1);
  color: var(--theme-color2);
}
.course-single-header .top .bookmark {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: rgb(from var(--theme-color2) r g b/0.1);
  color: var(--theme-color2);
  border-radius: 50px;
  text-align: center;
}
.course-single-header .top .bookmark:hover {
  background: var(--theme-color2);
  color: var(--color-white);
}
.course-single-header .title {
  text-transform: capitalize;
  margin-top: 20px;
  margin-bottom: 10px;
}
.course-single-header p {
  color: var(--body-text-color);
}
.course-single-header .rating {
  margin-top: 10px;
}
.course-single-header .rating i {
  color: var(--color-yellow);
}
.course-single-header .rating .rating-avg {
  color: var(--color-dark);
  font-weight: 900;
  font-size: 18px;
  margin-left: 5px;
  margin-right: 5px;
}
.course-single-header .info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  margin-top: 30px;
}
@media all and (max-width: 767px) {
  .course-single-header .info {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
  }
}
.course-single-header .info .instructor {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}
.course-single-header .info .instructor img {
  width: 50px;
  border-radius: 50%;
  border: 2px solid var(--theme-color2);
  padding: 3px;
}
.course-single-header .info .update-date {
  position: relative;
}
.course-single-header .info .update-date::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background: var(--border-info-color);
  left: -21px;
  top: 0px;
}
.course-single-header .info .update-date span {
  color: var(--theme-color2);
}
.course-single-wrap .video-area {
  border-radius: 25px;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.course-single-wrap .video-area::before {
  border-radius: 8px;
}
.course-single-wrap .video-area .video-wrap {
  height: 450px;
}
@media all and (max-width: 767px) {
  .course-single-wrap .video-area .video-wrap {
    height: 250px;
  }
}
.course-single-wrap .video-area .video-wrap .video-btn {
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50px;
  background: var(--theme-color2);
  color: var(--color-white);
  text-align: center;
  font-size: 25px;
  padding-left: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: var(--box-shadow);
}
.course-single-tab {
  margin-top: 30px;
}
.course-single-tab .nav {
  border-bottom: 1px solid var(--border-info-color);
}
.course-single-tab .nav .nav-link {
  font-weight: 500;
  color: var(--color-dark);
  padding: 10px 0px;
  margin-right: 20px;
}
.course-single-tab .nav .nav-link.active {
  color: var(--theme-color);
  border-bottom: 2px solid var(--theme-color);
}
.course-single-tab .course-details .course-list {
  margin-top: 20px;
}
.course-single-tab .course-details .course-list li {
  margin-bottom: 12px;
}
.course-single-tab .course-details .course-list li i {
  margin-right: 10px;
  color: var(--theme-color);
}
.course-single-tab .course-curriculum .accordion-item {
  background: var(--color-white);
  margin-bottom: 15px;
  border-bottom: none;
  border-radius: 15px;
  box-shadow: var(--box-shadow);
}
.course-single-tab .course-curriculum .accordion-item .accordion-button {
  background: transparent;
  font-size: 17px;
  color: var(--color-dark);
  font-weight: 600;
}
.course-single-tab .course-curriculum .accordion-item .accordion-button:focus {
  box-shadow: none;
}
.course-single-tab .course-curriculum .accordion-item .accordion-button::after {
  content: "\f107";
  background: none;
  color: var(--theme-color);
  font-size: 24px;
  font-weight: 300;
  font-family: "Font Awesome 6 pro";
  width: unset;
  height: unset;
  margin-right: 3px;
}
.course-single-tab .course-curriculum .accordion-item .accordion-button:not(.collapsed) {
  color: var(--theme-color);
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--border-info-color);
}
.course-single-tab .course-curriculum .accordion-item .accordion-button:not(.collapsed)::after {
  content: "\f107";
  transform: rotate(-180deg);
}
.course-single-tab .course-curriculum .curriculum-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border-info-color);
  background: var(--color-white);
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}
@media all and (max-width: 767px) {
  .course-single-tab .course-curriculum .curriculum-item {
    padding: 8px 10px;
  }
}
@media all and (max-width: 767px) {
  .course-single-tab .course-curriculum .curriculum-item .left {
    width: 72%;
  }
}
.course-single-tab .course-curriculum .curriculum-item .left h6 {
  font-weight: normal;
}
@media all and (max-width: 767px) {
  .course-single-tab .course-curriculum .curriculum-item .left h6 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.course-single-tab .course-curriculum .curriculum-item .left h6 i {
  color: var(--theme-color);
  margin-right: 5px;
}
.course-single-tab .course-curriculum .curriculum-item .left span {
  font-weight: 500;
}
.course-single-tab .course-curriculum .curriculum-item .right .lock {
  margin-left: 15px;
  color: var(--theme-color2);
}
.course-single-tab .course-curriculum .curriculum-item .right .duration {
  color: var(--color-dark);
  font-size: 15px;
}
.course-single-tab .course-curriculum .curriculum-item.unlock h6 i {
  color: var(--color-green);
}
.course-single-tab .course-curriculum .curriculum-item.unlock .lock {
  color: var(--color-green);
}
.course-single-tab .course-curriculum .curriculum-item.unlock:hover {
  border-color: var(--color-green);
}
.course-single-tab .course-curriculum .curriculum-item.unlock.completed {
  border-color: var(--color-green);
}
.course-single-tab .course-instructor {
  background: var(--color-white);
  display: flex;
  gap: 30px;
  padding: 25px;
  border-radius: 25px;
  box-shadow: var(--box-shadow);
}
.course-single-tab .course-instructor .instructor-img {
  width: 160px;
}
.course-single-tab .course-instructor .instructor-img img {
  border-radius: 50%;
  width: 100%;
}
.course-single-tab .course-instructor .instructor-info {
  flex: 1;
}
.course-single-tab .course-instructor .instructor-info h4 {
  color: var(--color-dark);
}
.course-single-tab .course-instructor .instructor-info-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.course-single-tab .course-instructor .instructor-info-wrap .rating {
  color: var(--body-text-color);
}
.course-single-tab .course-instructor .instructor-info-wrap .rating i {
  color: var(--color-yellow);
}
.course-single-tab .course-instructor .instructor-info-wrap .course {
  color: var(--body-text-color);
}
.course-single-tab .course-instructor .instructor-info-wrap .course i {
  color: var(--color-green);
}
.course-single-tab .course-instructor .instructor-info-wrap .enrolled {
  color: var(--body-text-color);
}
.course-single-tab .course-instructor .instructor-info-wrap .enrolled i {
  color: var(--theme-color);
}
.course-single-tab .course-instructor .instructor-info p {
  color: var(--body-text-color);
}
.course-single-tab .course-review .review-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 35px;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  padding: 20px 25px;
  border-radius: 18px;
}
.course-single-tab .course-review .review-rating .rating-count {
  border: 1px solid var(--border-info-color);
  background: var(--color-white);
  border-radius: 15px;
  padding: 15px 35px;
  text-align: center;
}
.course-single-tab .course-review .review-rating .rating-count h2 {
  color: var(--color-dark);
  font-size: 50px;
}
.course-single-tab .course-review .review-rating .rating-count .rating-star {
  color: var(--color-yellow);
  margin: 5px 0;
}
.course-single-tab .course-review .review-rating .rating-count p {
  color: var(--body-text-color);
}
.course-single-tab .course-review .review-rating .rating-range {
  flex: 1;
}
.course-single-tab .course-review .review-rating .rating-range-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 5px 0;
}
.course-single-tab .course-review .review-rating .rating-range-item .rating-range-star i {
  color: var(--color-yellow);
  font-size: 14px;
}
.course-single-tab .course-review .review-rating .rating-range-item .rating-range-bar {
  flex: 1;
}
.course-single-tab .course-review .review-rating .rating-range-item .rating-range-bar .progress {
  height: 5px;
}
.course-single-tab .course-review .review-rating .rating-range-item .rating-range-bar .progress-width {
  background: var(--gradient2);
}
.course-single-tab .course-review .review-rating .rating-range-item .rating-range-percentage {
  color: var(--body-text-color);
}
.course-single-tab .course-review .review-content {
  background: var(--color-white);
  border-radius: 15px;
  padding: 30px;
  margin-top: 30px;
  box-shadow: var(--box-shadow);
}
.course-single-tab .course-review .review-content .title {
  color: var(--color-dark);
  font-size: 20px;
  margin-bottom: 25px;
}
.course-single-tab .course-review .review-content .review-item {
  border: 1px solid var(--border-info-color);
  padding: 20px;
  margin-top: 20px;
  border-radius: 15px;
}
.course-single-tab .course-review .review-content .review-item .review-author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.course-single-tab .course-review .review-content .review-item .review-author img {
  width: 60px;
  border-radius: 50%;
}
.course-single-tab .course-review .review-content .review-item .review-author .info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}
.course-single-tab .course-review .review-content .review-item .review-author .info h6 {
  color: var(--color-dark);
  margin-bottom: 2px;
}
.course-single-tab .course-review .review-content .review-item .review-author .info span {
  color: var(--theme-color);
}
.course-single-tab .course-review .review-content .review-item .review-author .rating {
  color: var(--color-yellow);
}
.course-single-tab .course-review .review-form {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 15px;
  margin-top: 25px;
  padding: 30px;
}
.course-single-tab .course-review .review-form h5 {
  font-size: 20px;
  margin-bottom: 25px;
}
.course-single-sidebar {
  position: relative;
  padding: 30px;
  margin-top: -250px;
  margin-left: 20px;
  background: var(--color-white);
  border-radius: 25px;
  box-shadow: 0px 30px 50px 0px rgba(1, 11, 60, 0.1);
  z-index: 1;
}
@media all and (max-width: 991px) {
  .course-single-sidebar {
    margin-top: 50px;
    margin-left: 0;
  }
}
.course-single-sidebar .price-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
}
.course-single-sidebar .price-wrap .price-amount span {
  font-weight: 900;
  color: var(--theme-color2);
  font-size: 25px;
  margin-right: 10px;
}
.course-single-sidebar .price-wrap .price-off {
  background: rgb(from var(--color-red) r g b/0.1);
  color: var(--color-red);
  font-weight: 500;
  padding: 2px 15px;
  border-radius: 8px;
  font-size: 14px;
}
.course-single-sidebar .theme-btn {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 100%;
}
.course-single-sidebar .more-info {
  color: var(--color-dark);
  margin-top: 20px;
}
.course-single-sidebar .more-info li {
  padding: 8px 0;
  font-size: 16px;
  border-bottom: 1px solid var(--border-info-color);
}
.course-single-sidebar .more-info li:last-child {
  border-bottom: none;
}
.course-single-sidebar .more-info li i {
  color: var(--theme-color);
  width: 24px;
}
.course-single-sidebar .more-info li span {
  float: right;
  color: var(--body-text-color);
}
.course-single-sidebar .include {
  margin-top: 20px;
}
.course-single-sidebar .include h5 {
  margin-bottom: 15px;
}
.course-single-sidebar .include li {
  margin-bottom: 5px;
}
.course-single-sidebar .include li i {
  color: var(--theme-color);
  margin-right: 5px;
}
.course-single-sidebar .share {
  margin-top: 25px;
}
.course-single-sidebar .share h5 {
  margin-bottom: 20px;
}
.course-single-sidebar .share-link a {
  width: 35px;
  height: 35px;
  line-height: 33px;
  margin-right: 5px;
  border: 2px solid var(--theme-color);
  color: var(--theme-color);
  text-align: center;
  border-radius: 50px;
}
.course-single-sidebar .share-link a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

/* course-single 2 */
.course-single.cs-2 .course-single-sidebar {
  margin-top: 0;
  box-shadow: var(--box-shadow);
}
.course-single.cs-2 .course-single-header {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 20px;
  padding: 30px 30px 0 30px;
  margin-top: 40px;
}
.course-single.cs-2 .course-single-header .title {
  font-size: 28px;
}
.course-single.cs-2 .course-single-header .info {
  margin-top: 20px;
}
.course-single.cs-2 .course-single-header .nav {
  border-top: 1px solid var(--border-info-color);
  margin-top: 15px;
}
@media all and (max-width: 767px) {
  .course-single.cs-2 .course-single-header .nav {
    gap: 0;
  }
}
.course-single.cs-2 .course-single-header .nav .nav-link {
  font-weight: 500;
  color: var(--color-dark);
  padding: 10px 0px;
  margin-right: 20px;
}
.course-single.cs-2 .course-single-header .nav .nav-link.active {
  color: var(--theme-color);
  border-bottom: 2px solid var(--theme-color);
}
.course-single.cs-2 .course-details {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 20px;
  padding: 30px;
}

/*====================
46. Instructor css
======================*/
.instructor-item {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 20px;
  padding: 15px;
}
.instructor-item:hover .instructor-img img {
  transform: scale(1.05);
}
.instructor-border .instructor-item {
  box-shadow: none;
  border: 1px solid var(--border-info-color);
}
.instructor-img {
  border-radius: 15px;
  overflow: hidden;
}
.instructor-img img {
  border-radius: 15px;
}
.instructor-content {
  margin-top: 12px;
}
.instructor-content h5 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.instructor-content h5 a {
  color: var(--color-dark);
}
.instructor-content h5 a:hover {
  color: var(--theme-color);
}
.instructor-content h5 span {
  font-size: 15px;
  color: var(--color-green);
}
.instructor-content p {
  font-size: 16px;
  color: var(--theme-color);
  margin-top: 2px;
}
.instructor-content .info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  color: var(--body-text-color);
  margin-top: 8px;
}
.instructor-content .info span {
  display: block;
}
.instructor-content .info .course i {
  color: var(--color-green);
}
.instructor-content .info .enrolled i {
  color: var(--color-red);
}
.instructor-content .info .rating i {
  color: var(--color-yellow);
}
.instructor-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-info-color);
  padding-top: 15px;
  margin-top: 15px;
}
.instructor-bottom .price span {
  display: block;
  line-height: 1;
}
.instructor-bottom .price .text {
  font-size: 15px;
  color: var(--body-text-color);
  margin-bottom: 6px;
}
.instructor-bottom .price .amount {
  color: var(--color-red);
  font-weight: 500;
}
.instructor-bottom .theme-border-btn {
  border-width: 1.6px;
  font-size: 15px;
}

/*========================
47. Instructor single css
==========================*/
/* instructor-sidebar */
.instructor-sidebar {
  background: var(--color-white);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--box-shadow);
}
.instructor-sidebar .instructor-img {
  text-align: center;
}
.instructor-sidebar .instructor-img img {
  width: 150px;
  border-radius: 50%;
}
.instructor-sidebar .instructor-info {
  text-align: center;
  margin-top: 15px;
}
.instructor-sidebar .instructor-info .name {
  color: var(--color-dark);
}
.instructor-sidebar .instructor-info .tagline {
  color: var(--theme-color);
  font-size: 18px;
}
.instructor-sidebar .instructor-info .social {
  margin-top: 15px;
}
.instructor-sidebar .instructor-info .social a {
  width: 35px;
  height: 35px;
  line-height: 31px;
  border: 2px solid var(--theme-color);
  border-radius: 50px;
  color: var(--theme-color);
  margin: 0 2px;
}
.instructor-sidebar .instructor-info .social a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}
.instructor-sidebar .instructor-more-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border-top: 1px solid var(--border-info-color);
  border-bottom: 1px solid var(--border-info-color);
  margin: 30px 0;
  padding: 25px 0;
  text-align: center;
}
.instructor-sidebar .instructor-more-info i {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: var(--theme-bg-light);
  border-radius: 50px;
  font-size: 25px;
}
.instructor-sidebar .instructor-more-info h6 {
  color: var(--color-dark);
  font-size: 20px;
  margin-top: 10px;
}
.instructor-sidebar .instructor-more-info .course i {
  background: rgb(from var(--color-green) r g b/0.1);
  color: var(--color-green);
}
.instructor-sidebar .instructor-more-info .student i {
  background: rgb(from var(--theme-color) r g b/0.1);
  color: var(--theme-color);
}
.instructor-sidebar .instructor-more-info .rating i {
  background: rgb(from var(--color-yellow) r g b/0.1);
  color: var(--color-yellow);
}
.instructor-sidebar .instructor-about h5 {
  color: var(--color-dark);
  margin-bottom: 10px;
}
.instructor-sidebar .instructor-about p {
  color: var(--body-text-color);
}

/* instructor-details */
.instructor-single .instructor-details .nav {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 15px;
  padding: 5px;
}
.instructor-single .instructor-details .nav .nav-link {
  color: var(--color-dark);
  font-size: 17px;
  font-weight: 500;
  border-radius: 12px;
}
.instructor-single .instructor-details .nav .nav-link:hover {
  color: var(--theme-color);
}
.instructor-single .instructor-details .nav .nav-link.active {
  background: var(--gradient);
  color: var(--color-white);
  box-shadow: var(--box-shadow);
}
.instructor-single .instructor-details .review-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 35px;
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  padding: 20px 25px;
  border-radius: 18px;
}
.instructor-single .instructor-details .review-rating .rating-count {
  border: 1px solid var(--border-info-color);
  background: var(--color-white);
  border-radius: 15px;
  padding: 15px 35px;
  text-align: center;
}
.instructor-single .instructor-details .review-rating .rating-count h2 {
  color: var(--color-dark);
  font-size: 50px;
}
.instructor-single .instructor-details .review-rating .rating-count .rating-star {
  color: var(--color-yellow);
  margin: 5px 0;
}
.instructor-single .instructor-details .review-rating .rating-count p {
  color: var(--body-text-color);
}
.instructor-single .instructor-details .review-rating .rating-range {
  flex: 1;
}
.instructor-single .instructor-details .review-rating .rating-range-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 5px 0;
}
.instructor-single .instructor-details .review-rating .rating-range-item .rating-range-star i {
  color: var(--color-yellow);
  font-size: 14px;
}
.instructor-single .instructor-details .review-rating .rating-range-item .rating-range-bar {
  flex: 1;
}
.instructor-single .instructor-details .review-rating .rating-range-item .rating-range-bar .progress {
  height: 5px;
}
.instructor-single .instructor-details .review-rating .rating-range-item .rating-range-bar .progress-width {
  background: var(--gradient2);
}
.instructor-single .instructor-details .review-rating .rating-range-item .rating-range-percentage {
  color: var(--body-text-color);
}
.instructor-single .instructor-details .review-content {
  background: var(--color-white);
  border-radius: 15px;
  padding: 30px;
  margin-top: 30px;
  box-shadow: var(--box-shadow);
}
.instructor-single .instructor-details .review-content .title {
  color: var(--color-dark);
  font-size: 20px;
  margin-bottom: 25px;
}
.instructor-single .instructor-details .review-content .review-item {
  border: 1px solid var(--border-info-color);
  padding: 20px;
  margin-top: 20px;
  border-radius: 15px;
}
.instructor-single .instructor-details .review-content .review-item .review-author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.instructor-single .instructor-details .review-content .review-item .review-author img {
  width: 60px;
  border-radius: 50%;
}
.instructor-single .instructor-details .review-content .review-item .review-author .info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}
.instructor-single .instructor-details .review-content .review-item .review-author .info h6 {
  color: var(--color-dark);
  margin-bottom: 2px;
}
.instructor-single .instructor-details .review-content .review-item .review-author .info span {
  color: var(--theme-color);
}
.instructor-single .instructor-details .review-content .review-item .review-author .rating {
  color: var(--color-yellow);
}
.instructor-single .instructor-details .review-form {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 15px;
  margin-top: 25px;
  padding: 30px;
}
.instructor-single .instructor-details .review-form h5 {
  font-size: 20px;
  margin-bottom: 25px;
}
.instructor-single .instructor-info-item {
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 20px;
  padding: 30px;
}
.instructor-single .instructor-info-item .content {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}
.instructor-single .instructor-info-item .content i {
  font-size: 40px;
  font-weight: 300;
  color: var(--theme-color);
}
.instructor-single .instructor-info-item .content .info h6 {
  color: var(--color-dark);
  font-size: 18px;
  margin-bottom: 2px;
}
.instructor-single .instructor-info-item .content .info span {
  color: var(--theme-color);
}
.instructor-single .instructor-info-item p {
  color: var(--body-text-color);
}

/*========================
48. Become instructor css
==========================*/
.become-instructor-img {
  position: relative;
  z-index: 1;
}
.become-instructor-img::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  background: var(--theme-color2);
  width: 300px;
  height: 300px;
  border-radius: 40px;
  z-index: -1;
  opacity: 0.1;
}
.become-instructor-img img {
  border-radius: 30px;
  margin-top: 40px;
}
.become-instructor-content .title {
  color: var(--color-dark);
}
.become-instructor-content .title span {
  color: var(--theme-color);
}
.become-instructor-content p {
  color: var(--body-text-color);
}
.become-instructor-rule {
  margin-top: 20px;
}
.become-instructor-rule li {
  margin-top: 10px;
}
.become-instructor-rule li i {
  color: var(--theme-color);
  margin-right: 5px;
}
.become-instructor-cta {
  background: var(--theme-color);
  text-align: center;
}
.become-instructor-cta-wrapper h1 {
  color: var(--color-white);
  margin-bottom: 15px;
}
.become-instructor-cta-wrapper p {
  color: var(--color-white);
}
.become-instructor-cta-wrapper a {
  background: var(--color-white);
  color: var(--color-dark);
  padding: 10px 22px;
  margin-top: 30px;
  border-radius: 5px;
  font-weight: 500;
}
.become-instructor-cta-wrapper a:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

/*====================
49. Download css
======================*/
.download-wrap {
  border-radius: 50px;
  overflow: hidden;
  background: rgb(from var(--color-green) r g b/0.08);
  position: relative;
}
.download-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/06.html);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.25;
  z-index: -1;
}
.download-content {
  padding: 30px;
}
@media all and (max-width: 767px) {
  .download-content {
    padding: 40px 20px;
  }
}
@media all and (min-width: 992px) and (max-width: 1199px) {
  .download-content .site-heading .site-title {
    font-size: 35px;
  }
}
@media all and (min-width: 992px) and (max-width: 1199px) {
  .download-content .site-heading p {
    display: none;
  }
}
.download-btn {
  display: flex;
  gap: 14px;
}
.download-btn a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 13px 13px 10px;
  width: 150px;
  background: var(--gradient);
  color: var(--color-white);
  border-radius: 15px;
  box-shadow: var(--box-shadow);
}
.download-btn a i {
  font-size: 32px;
}
.download-btn a.app-store {
  background: var(--gradient2);
}
.download-btn .content {
  display: flex;
  flex-direction: column;
}
.download-btn .content span {
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
}
.download-btn .content h6 {
  color: var(--color-white);
  font-size: 15px;
  margin-top: 5px;
  line-height: 1;
}

/*====================
50. Mail success css
======================*/
.mail-success {
  position: relative;
}
.mail-success-content {
  background: var(--color-white);
  padding: 50px;
  text-align: center;
  border-radius: 30px;
  box-shadow: var(--box-shadow);
}
.mail-success-content h3 {
  text-transform: capitalize;
  color: var(--color-dark);
}
.mail-success-content p {
  color: var(--body-text-color);
  margin-top: 15px;
  margin-bottom: 30px;
}
.mail-success-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 35px;
  color: var(--color-white);
  background: var(--gradient);
  margin: 0 auto;
  border-radius: 50px;
  margin-bottom: 20px;
}

/*====================
51. Gallery css
======================*/
.gallery-item {
  position: relative;
  width: 100%;
}
.gallery-img {
  height: 100%;
}
.gallery-img img {
  width: 100%;
  border-radius: 40px;
}
.gallery-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gallery-content::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  background: var(--theme-color);
  border-radius: 40px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.gallery-content:hover::before {
  opacity: 0.9;
  visibility: visible;
}
.gallery-content:hover .gallery-link {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.gallery-link {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.5s;
  border-radius: 50px;
  opacity: 0;
  visibility: hidden;
  font-size: 50px;
  color: var(--color-white);
}
.gallery-link:hover {
  color: var(--color-white);
}

/*====================
52. Help css 
======================*/
.help-area {
  position: relative;
}
.help-search {
  text-align: center;
  margin-bottom: 60px;
}
.help-search h3 {
  margin-bottom: 5px;
}
.help-search-form {
  margin-top: 20px;
}
.help-search-form .form-group {
  position: relative;
}
.help-search-form .form-group button {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px 15px 6px 15px;
  background: transparent;
  border: none;
  color: var(--body-text-color);
}
.help-search-form .form-control {
  padding: 12px 50px 12px 20px;
  border-radius: 12px;
  box-shadow: none;
}
.help-search-form .form-control:focus {
  border-color: var(--theme-color);
}
.help-search-keyword {
  text-align: left;
  margin-top: 5px;
}
.help-search-keyword span {
  color: var(--color-dark);
  font-weight: 500;
}
.help-search-keyword a {
  color: var(--body-text-color);
}
.help-search-keyword a:hover {
  color: var(--theme-color);
}
.help-item {
  text-align: center;
  margin-bottom: 25px;
  border: 1px solid var(--border-info-color);
  border-radius: 25px;
  padding: 30px;
}
.help-item .theme-btn {
  border-radius: 50px;
  padding: 6px 20px;
  margin-top: 25px;
}
.help-icon i {
  font-size: 45px;
  font-weight: 300;
  color: var(--theme-color);
}
.help-content h4 {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 20px;
}
.help-bottom {
  text-align: center;
  margin-top: 30px;
}
.help-bottom p {
  margin-top: 5px;
  margin-bottom: 20px;
}

/*====================
53. Affiliate css 
======================*/
.affiliate-img {
  position: relative;
  width: 90%;
}
.affiliate-img::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: var(--theme-color);
  border-radius: 50px;
  transform: skewY(30deg) rotate(5deg);
  z-index: -1;
}
.affiliate-img img {
  border-radius: 50px;
}
.affiliate-percentage h1 {
  color: var(--theme-color);
  margin-bottom: 10px;
}
.affiliate-percentage .level {
  color: var(--color-dark);
  font-weight: 500;
}

/*====================
54. Invoice css 
======================*/
.invoice-area {
  position: relative;
}
.invoice-container.not-print {
  padding: 0 150px;
}
.invoice-print {
  text-align: right;
  margin-bottom: 30px;
}
.invoice-wrapper {
  background: var(--color-white);
  border-radius: 10px;
  padding: 50px;
}
.invoice-header {
  display: flex;
  justify-content: space-between;
}
.invoice-width {
  width: 40%;
}
.invoice-logo img {
  width: 180px;
}
.invoice-date-box {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.invoice-address-box {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.invoice-address h5 {
  margin-bottom: 8px;
}
.invoice-table {
  margin-top: 30px;
}
.invoice-table table {
  width: 100%;
  border-collapse: collapse;
}
.invoice-table table,
.invoice-table td,
.invoice-table th {
  border: 1px solid var(--border-info-color);
}
.invoice-table td,
.invoice-table th {
  padding: 10px 20px;
}
.invoice-bottom {
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid var(--border-info-color);
  display: flex;
  justify-content: space-between;
}
.invoice-bottom a {
  color: var(--body-text-color);
}

/*====================
55. Career css 
======================*/
/* mission */
.mission-img {
  position: relative;
}
.mission-img img {
  border-radius: 3%;
  box-shadow: 0 0 30px 20px rgba(0, 0, 0, 0.08);
}
.mission-img .mission-img-1 {
  width: 380px;
}
.mission-img .mission-img-2 {
  position: absolute;
  bottom: -50px;
  right: -40px;
  border-radius: 100%;
  width: 190px;
  height: 190px;
  border: 8px solid var(--color-white);
}
@media all and (max-width: 767px) {
  .mission-img .mission-img-2 {
    bottom: -70px;
    right: -10px;
  }
}
.mission-img .mission-shape {
  position: absolute;
  right: 90px;
  top: 0px;
  z-index: -1;
}
@media all and (max-width: 767px) {
  .mission-img .mission-shape {
    right: 0;
  }
}
.mission-left {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
@media all and (max-width: 991px) {
  .mission-right {
    margin-top: 100px;
  }
}

/* career */
.career-item {
  padding: 20px;
  background: var(--color-white);
  border-radius: 30px;
  box-shadow: var(--box-shadow);
}

.job-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media all and (max-width: 767px) {
  .job-meta {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
.job-meta .badge {
  background: var(--theme-color2);
  border-radius: 50px;
  padding: 6px 12px;
}

.job-time {
  color: var(--theme-color);
}
@media all and (max-width: 767px) {
  .job-time {
    margin-top: 20px;
  }
}
.job-time i {
  margin-right: 5px;
}

.job-info-list {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  color: var(--color-dark);
}
@media all and (max-width: 767px) {
  .job-info-list {
    flex-direction: column;
    align-items: flex-start;
  }
}
.job-info-list li span {
  margin-right: 8px;
  color: var(--theme-color);
}

.job-content h3 {
  font-size: 25px;
  margin: 10px 0px;
  color: var(--color-dark);
}

.job-btn {
  margin-top: 30px;
  border: 2px solid var(--color-dark);
  color: var(--color-dark);
  padding: 6px 25px;
  border-radius: 50px;
  font-weight: bold;
  transition: var(--transition);
}
.job-btn:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.job-btn i {
  margin-left: 5px;
}

.career-promo-single {
  text-align: center;
  background: var(--color-white);
  padding: 30px;
  border-radius: 30px;
  box-shadow: var(--box-shadow);
}
.career-promo-single span {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background: var(--theme-color);
  border-radius: 50px;
  color: var(--color-white);
  font-size: 35px;
  margin-bottom: 20px;
}
.career-promo-single .career-promo-info h4 {
  margin-bottom: 14px;
}

/*====================
56. Career single css 
======================*/
.job-single-img img {
  border-radius: 25px;
  margin-bottom: 10px;
}

.job-single-list li {
  margin-bottom: 14px;
}
.job-single-list li i {
  margin-right: 5px;
  color: var(--theme-color);
  font-size: 12px;
}

.job-overview-list li {
  position: relative;
  display: flex;
  font-size: 16px;
  margin-bottom: 20px;
}
.job-overview-list li i {
  margin-right: 15px;
  font-size: 22px;
  color: var(--theme-color);
  margin-top: 6px;
}

.overview-item h6 {
  font-size: 18px;
}

.job-single-info {
  background: var(--color-white);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 25px;
  box-shadow: var(--box-shadow);
}
@media all and (max-width: 991px) {
  .job-single-info {
    margin-top: 40px;
  }
}

/*====================
57. Event css 
======================*/
.event-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px;
  background: var(--color-white);
  border-radius: 30px;
  margin-bottom: 25px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}
@media all and (max-width: 1199px) {
  .event-item {
    flex-direction: column;
  }
}
.event-item:hover {
  transform: translateY(-5px);
}
.event-img {
  border-radius: 20px;
  overflow: hidden;
}
.event-img img {
  width: 250px;
  height: 220px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}
@media all and (max-width: 1199px) {
  .event-img img {
    width: 100%;
  }
}
.event-img:hover .event-img img {
  transform: scale(1.2);
}
.event-content {
  flex: 1;
}
.event-content .theme-btn {
  margin-top: 15px;
  padding: 9px 18px;
  font-size: 15px;
}
.event-meta ul {
  display: flex;
  gap: 15px;
}
.event-meta ul li i {
  color: var(--theme-color);
  margin-right: 7px;
}
.event-title {
  margin: 5px 0;
}
.event-title a {
  color: var(--color-dark);
}
.event-title a:hover {
  color: var(--theme-color);
}

/*====================
58. Event single css 
======================*/
.event-details img {
  border-radius: 20px;
}
.event-map {
  margin-bottom: 20px;
}
.event-map iframe {
  border-radius: 15px;
  height: 400px;
  width: 100%;
}
.event-content-single {
  margin-bottom: 20px;
}
.event-content-single h5 {
  margin-bottom: 5px;
  font-size: 16px;
}
.event-content-single h5 a {
  color: var(--color-dark);
}
.event-content-single i {
  color: var(--theme-color);
  margin-right: 5px;
}
.event-single-info {
  background: var(--color-white);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 25px;
  box-shadow: var(--box-shadow);
}
.event-single-info h4 {
  color: var(--color-dark);
  margin-bottom: 10px;
}
.event-single-info p {
  margin-bottom: 20px;
}
.event-author {
  background: var(--color-white);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 25px;
  box-shadow: var(--box-shadow);
}
.event-author-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  text-align: center;
  margin-top: 50px;
}
.event-author-info h5 {
  font-size: 20px;
}
.event-author-info img {
  width: 120px;
  border-radius: 50%;
}

/*===================
59. Cart css 
=====================*/
.cart-table thead tr {
  background: var(--theme-color);
  color: var(--color-white);
}
.cart-table thead tr th {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-dark);
  letter-spacing: 0.4px;
}
.cart-table thead tr th,
.cart-table thead tr td {
  white-space: nowrap;
}
.cart-table tr td {
  color: var(--color-dark);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-info-color);
  border-top: none;
  position: relative;
  padding: 20px 10px;
  font-size: 16px;
}
.cart-img {
  width: 100px;
  border-radius: 15px;
  padding: 6px;
  border: 1px solid var(--border-info-color);
}
.cart-img img {
  width: 100%;
  border-radius: 10px;
}
.cart-content {
  width: 200px;
}
.cart-name {
  font-size: 16px;
  margin-bottom: 4px;
  font-weight: 600;
}
.cart-name a:hover {
  color: var(--theme-color);
}
.cart-info p {
  font-size: 14px;
  color: var(--body-text-color);
}
.cart-info p span {
  font-weight: 500;
  margin-right: 5px;
}
.cart-price {
  font-weight: 500;
}
.cart-qty {
  width: 110px;
}
.cart-qty button {
  width: 30px;
  height: 30px;
  line-height: 28px;
  color: var(--theme-color);
  text-align: center;
  border: 0;
  border-radius: 50px;
  background: var(--theme-bg-light);
}
.cart-qty button i {
  font-weight: 500;
}
.cart-qty input {
  width: 30px;
  border: none;
  background: transparent;
  color: var(--theme-color);
  text-align: center;
}
.cart-subtotal {
  font-weight: 500;
}
.cart-remove {
  font-size: 18px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border: 1px solid var(--border-info-color);
  text-align: center;
  border-radius: 50px;
}
.cart-remove:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}
.cart-footer {
  margin-top: 20px;
}
.cart-coupon {
  margin-bottom: 25px;
}
.cart-coupon .form-group {
  position: relative;
}
.cart-coupon .form-control {
  box-shadow: none;
  padding: 15px 160px 15px 25px;
  border-radius: 50px;
}
.cart-coupon .form-control:focus {
  border-color: var(--theme-color);
}
.cart-coupon .theme-btn {
  position: absolute;
  right: 5.4px;
  top: 5.4px;
  border-radius: 50px;
  padding: 8px 20px;
}
.cart-summary {
  padding: 30px;
  border: 1px solid var(--border-info-color);
  background: var(--theme-bg-light);
  border-radius: 15px;
  margin-top: 12px;
  margin-left: 20px;
}
@media all and (max-width: 991px) {
  .cart-summary {
    margin-left: 0;
  }
}
.cart-summary h5 {
  margin-bottom: 25px;
}
.cart-summary li {
  margin-bottom: 10px;
}
.cart-summary li span {
  float: right;
}
.cart-summary li strong {
  color: var(--color-dark);
}
.cart-total {
  padding-top: 10px;
  border-top: 1px solid var(--border-info-color);
}
.cart-total span {
  font-weight: bold;
  color: var(--theme-color);
}

/*===================
60. Checkout css 
=====================*/
.checkout-step .accordion-item {
  margin-bottom: 20px;
  border: 1px solid var(--border-info-color);
  border-radius: 15px;
}
.checkout-step .accordion-button {
  background: transparent;
  box-shadow: none;
  font-weight: 600;
  color: var(--color-dark);
}
.checkout-step .accordion-button::after {
  content: "\f107";
  background: none;
  color: var(--theme-color);
  font-size: 24px;
  font-weight: 300;
  font-family: "Font Awesome 6 pro";
  width: unset;
  height: unset;
  margin-right: 3px;
}
.checkout-step .accordion-button:not(.collapsed)::after {
  content: "\f107";
  transform: rotate(-180deg);
}
.checkout-step .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--theme-color);
}
.checkout-step .accordion-body {
  border-top: 1px solid var(--border-info-color);
}

.checkout-form .form-group {
  margin-bottom: 15px;
}
.checkout-form label {
  color: var(--color-dark);
  margin-bottom: 4px;
}
.checkout-form .form-control {
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: none;
}
.checkout-form .form-control:placeholder {
  color: var(--body-text-color);
}
.checkout-form .nice-select {
  width: 100%;
  font-size: 16px;
  border-radius: 12px;
  height: 50px;
  line-height: 47px;
  padding-left: 20px;
  margin-bottom: 15px;
}
.checkout-form .nice-select::after {
  width: 9px;
  height: 9px;
  margin-right: 8px;
  margin-top: -6px;
}
.checkout-form .nice-select .list {
  width: 100%;
  height: 300px;
  overflow-y: auto;
  border-radius: 8px;
}
.checkout-form .form-control:focus,
.checkout-form .nice-select {
  border-color: var(--theme-color);
}
.checkout-form .form-check-input {
  margin-top: 7px;
  box-shadow: none;
}
.checkout-form .form-check-input:focus {
  border-color: var(--theme-color);
}
.checkout-form .form-check-input:checked {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}
.checkout-form .theme-btn {
  margin-top: 15px;
  margin-bottom: 10px;
}

.checkout-payment .nav-link {
  background: transparent !important;
  border: 1px solid var(--border-info-color);
  text-align: center;
  border-radius: 12px;
  margin-right: 15px;
  margin-bottom: 20px;
  position: relative;
}
.checkout-payment .nav-link::before {
  content: "\f058";
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  font-weight: bold;
  font-size: 20px;
  color: var(--theme-color);
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  left: 4px;
  top: -4px;
  transition: var(--transition);
}
.checkout-payment .nav-link.active::before {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.checkout-payment .nav-link.active {
  border-color: var(--theme-color);
}
.checkout-payment .nav-link span {
  color: var(--body-text-color);
}
.checkout-payment .checkout-card-img {
  padding-top: 12px;
  margin-bottom: 12px;
}
.checkout-payment .checkout-card-img img {
  width: 34px;
}
.checkout-payment .checkout-payment-img img {
  width: 155px;
}

/* checkout complete */
.checkout-complete {
  position: relative;
}
.checkout-complete .content {
  background: var(--theme-bg-light);
  border-radius: 20px;
  padding: 50px;
  text-align: center;
  border: 1px solid var(--border-info-color);
}
@media all and (min-width: 992px) and (max-width: 1199px) {
  .checkout-complete .content {
    padding: 40px;
  }
}
.checkout-complete .content .icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 35px;
  color: var(--color-white);
  background: var(--color-green);
  margin: 0 auto;
  border-radius: 50px;
  margin-bottom: 20px;
}
.checkout-complete .content h3 {
  text-transform: capitalize;
}
.checkout-complete .content p {
  margin-top: 15px;
  margin-bottom: 30px;
}

/* ===================
61. Account css 
====================== */
.account-profile a img {
  border: 2px solid var(--theme-color);
  width: 40px;
  height: 40px;
  border-radius: 50px;
  padding: 2px;
}

/* user sidebar */
.user-sidebar {
  background: var(--color-white);
  border: 1px solid var(--border-info-color);
  border-radius: 15px;
  padding: 20px;
}
.user-sidebar .sidebar-top {
  text-align: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-info-color);
}
.user-sidebar .sidebar-top .profile-img {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 15px auto;
  border-radius: 50px;
  padding: 4px;
  border: 3px solid var(--theme-color);
}
.user-sidebar .sidebar-top .profile-img img {
  border-radius: 50%;
}
.user-sidebar .sidebar-top .profile-img-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  line-height: 28px;
  border-radius: 50px;
  background: var(--theme-color);
  color: var(--color-white);
  text-align: center;
  border: none;
}
.user-sidebar .sidebar-top .profile-img-file {
  display: none;
}
.user-sidebar .sidebar-top h5 {
  color: var(--color-dark);
}
.user-sidebar .sidebar-top p {
  color: var(--body-text-color);
}
.user-sidebar .sidebar-list li a {
  display: block;
  color: var(--color-dark);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 15px;
  transition: var(--transition);
}
.user-sidebar .sidebar-list li a:hover {
  color: var(--theme-color);
}
.user-sidebar .sidebar-list li a .icon {
  color: var(--theme-color);
  width: 24px;
}
.user-sidebar .sidebar-list li a .um-angle {
  float: right;
  margin-top: 6px;
}
.user-sidebar .sidebar-list li a.active {
  background: var(--theme-color);
  color: var(--color-white);
  border-radius: 10px;
}
.user-sidebar .sidebar-list li a.active i {
  color: var(--color-white);
}
.user-sidebar .sidebar-list li a span {
  float: right;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 10px;
  margin-top: 3.7px;
}
.user-sidebar .sidebar-menu-list {
  border: 1px solid var(--border-info-color);
  border-radius: 12px;
  margin: 0 15px;
  padding: 5px 10px;
}
.user-sidebar .sidebar-menu-list li a {
  position: relative;
  font-size: 14px;
}
.user-sidebar .sidebar-menu-list li a::before {
  content: "\e122";
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  left: 4px;
  top: 12px;
  color: var(--theme-color);
  font-size: 8px;
  font-weight: bold;
}

/* user badge */
.user-account .badge {
  border-radius: 50px;
  padding: 5px 12px;
  letter-spacing: 0.2px;
}
.user-account .badge-success {
  background: rgb(from var(--color-green) r g b/0.08);
  color: var(--color-green);
}
.user-account .badge-info {
  background: rgb(from var(--color-purple) r g b/0.08);
  color: var(--color-purple);
}
.user-account .badge-primary {
  background: rgb(from var(--color-skyblue) r g b/0.08);
  color: var(--color-skyblue);
}
.user-account .badge-danger {
  background: rgb(from var(--color-red) r g b/0.08);
  color: var(--color-red);
}

/* user card */
.user-card {
  background: var(--color-white);
  padding: 15px 20px 20px 20px;
  border-radius: 15px;
  margin-bottom: 25px;
  border: 1px solid var(--border-info-color);
}
.user-card .title {
  color: var(--color-dark);
  font-size: 20px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-info-color);
}
.user-card .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-info-color);
}
@media all and (max-width: 767px) {
  .user-card .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
.user-card .header .title {
  padding-bottom: 0px;
  margin-bottom: 0px;
  border-bottom: none;
}
.user-card .header .theme-btn {
  padding: 4px 12px;
  font-size: 15px;
}
.user-card .header .right {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media all and (max-width: 767px) {
  .user-card .header .right {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
.user-card .header .search .form-group {
  position: relative;
  margin-bottom: 0;
}
.user-card .header .search .form-control {
  padding: 10px 20px 10px 35px;
  border-radius: 10px;
  color: var(--color-dark);
}
.user-card .header .search i {
  position: absolute;
  left: 12px;
  top: 15px;
}
.user-card .header .filter .nice-select {
  margin-bottom: 0;
  min-width: 150px;
  height: 47px;
  line-height: 46px;
  border-radius: 10px;
}

/* user widget */
.user-widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 20px;
  border-radius: 20px;
  margin: 10px 0;
  background: rgb(from var(--theme-color) r g b/0.08);
  color: var(--theme-color);
}
.user-widget .info span {
  font-weight: 500;
}
.user-widget .info h1 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--theme-color);
}
.user-widget .icon {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border-radius: 50px;
  background: var(--theme-color);
  color: var(--color-white);
}
.user-widget.c1 {
  background: rgb(from var(--color-skyblue) r g b/0.08);
  color: var(--color-skyblue);
}
.user-widget.c1 h1 {
  color: var(--color-skyblue);
}
.user-widget.c1 .icon {
  background: var(--color-skyblue);
}
.user-widget.c2 {
  background: rgb(from var(--color-green) r g b/0.08);
  color: var(--color-green);
}
.user-widget.c2 h1 {
  color: var(--color-green);
}
.user-widget.c2 .icon {
  background: var(--color-green);
}
.user-widget.c3 {
  background: rgb(from var(--color-red) r g b/0.08);
  color: var(--color-red);
}
.user-widget.c3 h1 {
  color: var(--color-red);
}
.user-widget.c3 .icon {
  background: var(--color-red);
}

/* user country */
.user-country .country-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.user-country .country-list li:last-child {
  margin-bottom: 0;
}
.user-country .country-list li img {
  width: 35px;
  border-radius: 4px;
}
.user-country .country-list li h6 {
  color: var(--body-text-color);
  font-weight: 500;
  flex: 1;
}
.user-country .country-list li h6 span {
  color: var(--body-text-color);
  font-weight: 500;
}

/* user form */
.user-form .form-img-upload {
  width: 100%;
  height: 140px;
  border: 2px dashed var(--border-info-color);
  border-radius: 10px;
  cursor: pointer;
}
.user-form .form-img-file {
  display: none;
}
.user-form .form-img-upload span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.user-form .form-img-upload span i {
  margin-right: 5px;
}
.user-form .form-check label a {
  color: var(--theme-color);
}
.user-form .course-single-tab .course-curriculum .accordion-item {
  box-shadow: none;
  border: 1px solid var(--border-info-color);
}
.user-form .course-single-tab .course-curriculum .accordion-item .accordion-body .topic-btn .theme-btn {
  padding: 4px 12px;
  font-size: 15px;
}

/* user table */
.user-table .table {
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-bottom: 0;
}
.user-table .table > :not(caption) > * > * {
  vertical-align: middle;
  padding: 0.6rem 1rem;
}
.user-table .table th {
  color: var(--color-dark);
}
.user-table .table tr {
  background: rgb(from var(--theme-color) r g b/0.04);
  margin-bottom: 10px;
}
.user-table .table td {
  background: unset;
  color: var(--color-dark);
}
.user-table .table td:first-child {
  border-left-style: solid;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.user-table .table td:last-child {
  border-right-style: solid;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.user-table .table .content {
  display: flex;
  align-items: center;
  gap: 15px;
}
@media all and (max-width: 767px) {
  .user-table .table .content {
    display: block;
  }
}
.user-table .table .content h6 {
  margin-bottom: 5px;
}
@media all and (max-width: 767px) {
  .user-table .table .content h6 {
    margin-top: 10px;
  }
}
.user-table .table .content h6 a {
  color: var(--color-dark);
}
.user-table .table .content h6 a:hover {
  color: var(--theme-color);
}
.user-table .table .content p {
  color: var(--color-dark);
}
.user-table .table .content span {
  color: var(--color-dark);
}
.user-table .table .info:hover h6 {
  color: var(--theme-color);
}
.user-table .table .info span {
  font-size: 15px;
}
.user-table .table .info .more-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.user-table .table .info .more-info span {
  font-size: 14px;
}
.user-table .table .info .more-info span i {
  margin-right: 5px;
  color: var(--theme-color);
}
.user-table .table .img img {
  width: 80px;
  border-radius: 8px;
}
.user-table .table .title,
.user-table .table .code {
  color: var(--theme-color);
  font-weight: 500;
}
.user-table .table .action-btn {
  border: none;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgb(from var(--theme-color) r g b/0.05);
  color: var(--theme-color);
  font-size: 14px;
  transition: var(--transition);
}
.user-table .table .action-btn:hover {
  background: var(--theme-color);
  color: var(--color-white);
}
.user-table .table .action-icon-btn {
  border: none;
  background: rgb(from var(--theme-color) r g b/0.08);
  width: 32px;
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  color: var(--theme-color);
  transition: var(--transition);
}
.user-table .table .action-icon-btn:hover {
  background: var(--theme-color);
  color: var(--color-white);
}
.user-table .table .action-icon-btn.btn-success {
  background: rgb(from var(--color-green) r g b/0.08);
  color: var(--color-green);
}
.user-table .table .action-icon-btn.btn-danger {
  background: rgb(from var(--color-red) r g b/0.08);
  color: var(--color-red);
}
.user-table .table .dropdown-menu {
  border: none;
  border-radius: 15px;
  box-shadow: var(--box-shadow);
  padding: 10px;
}
.user-table .table .dropdown-menu .dropdown-item {
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--color-dark);
}
.user-table .table .dropdown-menu .dropdown-item:hover {
  background: var(--theme-color);
  color: var(--color-white);
}
.user-table .table .dropdown-menu .dropdown-item i {
  width: 23px;
  color: var(--theme-color);
}
.user-table .table .dropdown-menu .dropdown-item:hover i {
  color: var(--color-white);
}
.user-table .table .action-dropdown .action-icon-btn {
  line-height: 29px;
}

/* user message */
.user-message .header .account img {
  width: 45px;
  border-radius: 50%;
  cursor: pointer;
}
.user-message .header .account .dropdown-menu {
  border: none;
  border-radius: 15px;
  box-shadow: var(--box-shadow);
  padding: 10px;
}
.user-message .header .account .dropdown-menu .dropdown-item {
  color: var(--color-dark);
  border-radius: 10px;
  padding: 4px 10px;
}
.user-message .header .account .dropdown-menu .dropdown-item:hover {
  background: var(--theme-color);
  color: var(--color-white);
}
.user-message .header .account .dropdown-menu .dropdown-item i {
  width: 25px;
  color: var(--theme-color);
}
.user-message .header .account .dropdown-menu .dropdown-item:hover i {
  color: var(--color-white);
}
@media all and (max-width: 767px) {
  .user-message .header {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
}
.user-message .message-wrapper {
  display: flex;
}
@media all and (max-width: 767px) {
  .user-message .message-wrapper {
    flex-direction: column;
    gap: 50px;
  }
}
.user-message .message-inbox {
  max-width: 340px;
  border: 1px solid var(--border-info-color);
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
}
.user-message .message-inbox ul {
  max-height: 950px;
  overflow-y: scroll;
  width: 357px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.user-message .message-inbox ul li {
  border-bottom: 1px solid var(--border-info-color);
  transition: 0.2s;
  list-style: none;
}
.user-message .message-inbox ul li.message-active {
  border-left: 3px solid var(--theme-color);
}
.user-message .message-inbox ul li:last-child {
  border-bottom: none;
}
.user-message .message-inbox ul li a {
  position: relative;
  display: block;
  padding: 30px;
}
.user-message .message-inbox .message-avatar {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.user-message .message-inbox .message-avatar img {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.user-message .message-inbox .message-by {
  margin-left: 50px;
}
.user-message .message-inbox .message-by p {
  height: 26px;
  max-width: 205px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  margin: 0;
  padding: 0;
  color: var(--body-text-color);
  line-height: 27px;
}
.user-message .message-content {
  padding-left: 30px;
  position: relative;
  overflow: hidden;
  flex: 1;
}
@media all and (max-width: 767px) {
  .user-message .message-content {
    padding-left: 0;
    padding-bottom: 200px;
  }
}
.user-message .message-content-info {
  max-height: 750px;
  overflow-y: scroll;
  margin-right: -50px;
  padding-right: 50px;
}
.user-message .message-by-content h5 {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1;
}
.user-message .message-by-content h5 i {
  background: var(--color-yellow);
  padding: 3px 8px;
  border-radius: 50px;
  color: var(--color-white);
  font-size: 13px;
}
.user-message .message-by-content span {
  font-size: 13px;
  position: absolute;
  top: 25.5px;
  right: 25px;
  float: right;
  color: var(--body-text-color);
}
@media all and (max-width: 991px) {
  .user-message .message-by-content span {
    right: 65px;
  }
}
.user-message .message-item {
  display: block;
  position: relative;
  margin-bottom: 25px;
}
.user-message .message-item .message-avatar {
  position: absolute;
  left: 0;
  top: 0;
}
.user-message .message-item .message-avatar img {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
}
.user-message .message-item .message-description {
  margin-left: 70px;
  background: var(--theme-bg-light);
  border-radius: 12px;
  padding: 20px;
  position: relative;
}
.user-message .message-item .message-description::before {
  position: absolute;
  top: 0px;
  left: -9px;
  content: "\f0d9";
  font-family: "Font Awesome 6 Pro";
  font-weight: bold;
  font-size: 31px;
  color: var(--theme-bg-light);
}
.user-message .message-item .message-description p {
  font-size: 15px;
  padding: 0;
  margin: 0;
  line-height: 27px;
}
.user-message .message-item.me .message-avatar {
  left: auto;
  right: 0;
  position: absolute;
  top: 0;
}
.user-message .message-item.me .message-description {
  color: var(--theme-color);
  background: #f2f7ff;
  margin-left: 0;
  margin-right: 70px;
  border-radius: 12px;
  padding: 20px;
  position: relative;
}
.user-message .message-item.me .message-description::before {
  content: "\f0da";
  left: auto;
  right: -10px;
  color: #f2f7ff;
}
.user-message .message-reply {
  margin-top: 15px;
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 15px;
}
@media all and (max-width: 991px) {
  .user-message .message-reply {
    right: 0;
  }
}
@media all and (max-width: 767px) {
  .user-message .message-reply {
    left: 0;
  }
}
.user-message .message-reply .form-control {
  padding: 15px 20px;
  box-shadow: none;
  border-radius: 10px;
  color: var(--color-dark);
}
.user-message .message-reply .form-control::-moz-placeholder {
  color: var(--body-text-color);
}
.user-message .message-reply .form-control::placeholder {
  color: var(--body-text-color);
}
.user-message .message-reply .form-control:focus {
  border-color: var(--theme-color);
}
.user-message .message-reply .theme-btn {
  margin-top: 15px;
}
.user-message .message-status {
  width: 12px;
  height: 12px;
  background: var(--theme-color);
  display: flex;
  border-radius: 50%;
  border: 3px solid var(--color-white);
  position: absolute;
  right: -5px;
  top: 50%;
}
.user-message .message-status.online {
  background: var(--theme-color);
}
.user-message .message-status.offline {
  background: var(--color-red);
}
.user-message .message-status.busy {
  background: var(--color-yellow);
}

/* user notification */
.user-notification .user-table p {
  width: 300px;
  line-height: 1.5;
  white-space: wrap !important;
}

/* user payment method */
.user-payment-method .user-table .img {
  width: 100px;
  height: 60px;
  line-height: 57px;
  padding: 0;
  text-align: center;
  background: var(--color-white);
  border-radius: 10px;
}
.user-payment-method .user-table .img img {
  width: 70px;
}

/* user ticket details */
.user-ticket-detail .ticket-detail-content {
  margin-top: 30px;
}
.user-ticket-detail .ticket-chat-item {
  display: flex;
  gap: 20px;
  margin: 50px 0;
}
.user-ticket-detail .ticket-img img {
  width: 80px;
  border-radius: 50%;
}
.user-ticket-detail .ticket-info {
  flex: 1;
}
.user-ticket-detail .ticket-info span {
  color: var(--theme-color);
}

/* user order details */
.user-order-detail .order-detail-content {
  background: rgb(from var(--theme-color) r g b/0.04);
  padding: 30px;
  border-radius: 10px;
  margin-top: 15px;
}
.user-order-detail .order-detail-content h5 {
  margin-bottom: 20px;
}
.user-order-detail .order-detail-content p i {
  margin-right: 5px;
}
.user-order-detail .order-detail-content li {
  margin: 5px 0;
}
.user-order-detail .order-detail-content li span {
  float: right;
}
.user-order-detail .order-detail-content li:last-child {
  border-top: 1px solid var(--border-info-color);
  margin-top: 10px;
  padding-top: 10px;
  font-weight: 500;
}

/* user-list */
.user-list .content .img img {
  width: 65px;
  height: 65px;
  border-radius: 50px;
}
.user-list .content .info h6 {
  margin-bottom: 0;
}

/* instructor-profile */
.instructor-profile .experience .user-table p {
  white-space: wrap;
}
.instructor-profile .user-table .content .img {
  flex: 0 0 auto;
}
.instructor-profile .user-table .info h6 a {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.instructor-profile .rating i {
  color: var(--color-yellow);
}
.instructor-profile .review-content {
  border-radius: 15px;
  margin-top: 30px;
}
.instructor-profile .review-content .title {
  color: var(--color-dark);
  font-size: 20px;
  margin-bottom: 25px;
}
.instructor-profile .review-content .review-item {
  border: 1px solid var(--border-info-color);
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 15px;
}
.instructor-profile .review-content .review-item .review-author {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.instructor-profile .review-content .review-item .review-author img {
  width: 60px;
  border-radius: 50%;
}
.instructor-profile .review-content .review-item .review-author .info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}
.instructor-profile .review-content .review-item .review-author .info h6 {
  color: var(--color-dark);
  margin-bottom: 2px;
}
.instructor-profile .review-content .review-item .review-author .info span {
  color: var(--theme-color);
}
.instructor-profile .review-content .review-item .review-author .rating {
  color: var(--color-yellow);
}
.instructor-profile .review-content .review-item .review-on {
  color: var(--color-dark);
  margin-bottom: 8px;
}
.instructor-profile .review-content .review-item .review-on a {
  color: var(--theme-color);
}
.instructor-profile .review-content .review-item .reply-btn .theme-btn {
  padding: 4px 15px;
}

/* user payout */
.user-payout-content {
  margin-top: 20px;
}
.user-payout .payout-item {
  background: rgb(from var(--theme-color) r g b/0.05);
  padding: 30px;
  border-radius: 20px;
}
@media all and (max-width: 991px) {
  .user-payout .next-payout {
    margin-bottom: 20px;
  }
}
.user-payout .next-payout p {
  margin-top: 28px;
  margin-bottom: 35px;
  font-size: 18px;
}
.user-payout .next-payout p span {
  font-weight: 500;
}
.user-payout .payout-method-img {
  margin-top: 20px;
  margin-bottom: 25px;
}
.user-payout .payout-method-img img {
  width: 100px;
  margin-right: 10px;
}

/* user course */
.user-course .course-item .course-progress {
  width: 100%;
  height: 5px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  margin-top: 12px;
  margin-bottom: 5px;
  background: rgb(from var(--theme-color) r g b/0.08);
}
.user-course .course-item .course-progress-width {
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  border-radius: 5px;
}
.user-course .course-item .course-bottom {
  border-top: 0;
  margin-top: 0;
}
.user-course .course-item .course-bottom .course-status {
  font-size: 14px;
  font-weight: 500;
  color: var(--body-text-color);
}
.user-course .course-item.pending .course-progress-width {
  background: var(--color-red);
}
.user-course .course-item.pending .course-bottom .course-status {
  color: var(--color-red);
}
.user-course .course-item.finished .course-progress-width {
  background: var(--color-green);
}
.user-course .course-item.finished .course-bottom .course-status {
  color: var(--color-green);
}
.user-course .course-item .theme-btn {
  display: block;
  padding: 5px 15px;
  margin-top: 15px;
}

/* user course resume */
.course-resume .navbar {
  box-shadow: var(--box-shadow);
}
.course-resume .course-resume-wrap {
  margin-top: 12px;
}
.course-resume .course-resume-sidebar {
  overflow-y: auto;
  height: calc(100vh - 112px);
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  border-radius: 10px;
}
.course-resume .course-resume-sidebar::-webkit-scrollbar {
  width: 4px;
}
.course-resume .course-resume-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.course-resume .course-resume-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-info-color);
  border-radius: 50px;
}
.course-resume .course-resume-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--theme-color);
}
.course-resume .course-single-tab .course-curriculum .accordion-item {
  border-bottom: 1px solid var(--border-info-color);
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.course-resume .course-single-tab .course-curriculum .accordion-item:last-child {
  border-bottom: 0;
}
.course-resume .course-single-tab .course-curriculum .accordion-item .accordion-button {
  padding: 12px 20px;
}
.course-resume .course-single-tab .course-curriculum .accordion-item .accordion-button::after {
  font-size: 20px;
}
.course-resume .course-single-tab .curriculum-item {
  padding: 8px 15px;
}
@media all and (min-width: 992px) {
  .course-resume .course-resume-content {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100vh - 112px);
    padding: 0 10px;
  }
}
.course-resume .course-resume-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.course-resume .course-resume-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.course-resume .course-resume-attachment {
  margin-bottom: 150px;
}
@media all and (max-width: 991px) {
  .course-resume .course-resume-attachment {
    margin-bottom: 20px;
  }
}
.course-resume .course-resume-attachment .attachment-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border: 1px solid var(--border-info-color);
  border-radius: 20px;
  padding: 20px;
}
.course-resume .course-resume-attachment .attachment-item a:hover {
  border-color: var(--theme-color);
}
.course-resume .course-resume-attachment .attachment-item a .content {
  flex: 1;
}
.course-resume .course-resume-attachment .attachment-item a .content h6 {
  color: var(--color-dark);
  margin-bottom: 5px;
}
.course-resume .course-resume-attachment .attachment-item a .content p {
  font-size: 15px;
  color: var(--body-text-color);
}
.course-resume .course-resume-attachment .attachment-item a .icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: var(--theme-color);
  color: var(--color-white);
  font-size: 30px;
  border-radius: 50px;
  text-align: center;
}

/* user certificate */
.user-certificate .certificate-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  border: 1px solid var(--border-info-color);
  padding: 20px 30px 20px 20px;
  border-radius: 20px;
  position: relative;
  transition: var(--transition);
}
.user-certificate .certificate-item:hover {
  border-color: var(--theme-color);
}
.user-certificate .certificate-item .icon img {
  width: 100px;
}
.user-certificate .certificate-item .content {
  flex: 1;
}
.user-certificate .certificate-item .content h6 {
  color: var(--color-dark);
  margin-bottom: 8px;
}
.user-certificate .certificate-item .content p {
  color: var(--body-text-color);
}
.user-certificate .certificate-item .content p span {
  color: var(--theme-color);
  font-weight: 500;
}
.user-certificate .user-skill .skill-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.user-certificate .user-skill .skill-wrap a {
  border: 1px solid var(--border-info-color);
  padding: 5px 18px;
  border-radius: 50px;
  color: var(--color-dark);
}
.user-certificate .user-skill .skill-wrap a:hover {
  color: var(--theme-color);
  border-color: var(--theme-color);
}

/* user-subscription */
.user-subscription .subscription-item {
  border: 1px solid var(--border-info-color);
  padding: 20px;
  border-radius: 15px;
  position: relative;
}
.user-subscription .subscription-item .status {
  position: absolute;
  right: 5px;
  top: 5px;
  background: var(--theme-color);
  color: var(--color-white);
  display: block;
  padding: 0px 12px;
  border-radius: 50px;
  font-size: 14px;
}
.user-subscription .subscription-item.active {
  border-color: var(--color-green);
}
.user-subscription .subscription-item.active .status {
  background: var(--color-green);
}
.user-subscription .subscription-item.expire .status {
  background: var(--color-red);
}
.user-subscription .subscription-item .plan h4 {
  font-size: 20px;
  color: var(--color-dark);
}
.user-subscription .subscription-item .plan p {
  color: var(--body-text-color);
}
.user-subscription .subscription-item .subscription-info span {
  color: var(--body-text-color);
  font-size: 15px;
}
.user-subscription .subscription-item .subscription-info h6 {
  color: var(--color-dark);
  font-size: 15px;
}

/*====================
62. Home 5 css
======================*/
.home-5 .hs-1 {
  margin-top: -5.7rem;
}

.home-5 .hs-1 .hero-single {
  padding-top: 170px;
  padding-bottom: 120px;
}
.home-5 .hs-1 .hero-single .hero-img {
  margin: auto;
  width: 82%;
  position: relative;
}
@media all and (max-width: 991px) {
  .home-5 .hs-1 .hero-single .hero-img {
    margin-top: 80px;
  }
}
.home-5 .hs-1 .hero-single .hero-img::before {
  content: "";
  position: absolute;
  left: -15px;
  top: -15px;
  width: 100%;
  height: 100%;
  border: 3px solid var(--theme-color2);
  border-radius: 50%;
  z-index: -1;
}
.home-5 .hs-1 .hero-single .hero-img img {
  border-radius: 50%;
}/*# sourceMappingURL=style.css.map */

.course-bg{
    content: "";
    padding: 100px 0px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/shape/022.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}




/* Home page new css start */

.theme-btn-outline{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 9px 12px;
    border:2px solid #1EA7FF;
    border-radius:10px;
    color:#1EA7FF;
    background:transparent;
    font-weight:600;
    transition:.3s ease;
}

.theme-btn-outline:hover{
    /* background:#1EA7FF; */
    background: linear-gradient(135deg,#00B4FF,#2563EB);
    color:#fff;

    transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0,123,255,.25);

transition: .35s ease;
}

.theme-btn-outline i{
    font-size:14px;
}


/* Home page new css start */

/* New piller section start */
/*==========================
WHY INTELLISURVS
===========================*
/*==================================================
 WHY INTELLISURVS - STORY SECTION
 Part 2A (Base CSS)
==================================================*/
/* =====================================================
   IntelliSurvs Value Proposition
===================================================== */

.ivp-area {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(16, 187, 232, 0.09),
      transparent 26%
    ),
    radial-gradient(
      circle at 92% 85%,
      rgba(143, 87, 246, 0.10),
      transparent 30%
    ),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 48%, #fbf8ff 100%);
  isolation: isolate;
}

.ivp-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.28;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(8, 45, 127, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 45, 127, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to right, #000, transparent 45%);
  -webkit-mask-image: linear-gradient(to right, #000, transparent 45%);
  z-index: -2;
}

.ivp-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  z-index: -1;
}

.ivp-shape-one {
  width: 360px;
  height: 360px;
  top: -180px;
  right: -100px;
  background: linear-gradient(
    135deg,
    rgba(16, 187, 232, 0.14),
    rgba(132, 89, 245, 0.10)
  );
}

.ivp-shape-two {
  width: 260px;
  height: 260px;
  bottom: -150px;
  left: -70px;
  background: linear-gradient(
    135deg,
    rgba(15, 87, 206, 0.09),
    rgba(219, 61, 245, 0.08)
  );
}

/* =====================================================
   Intro Content
===================================================== */

.ivp-intro {
  position: relative;
}

.ivp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 9px 16px;
  border: 1px solid rgba(29, 139, 219, 0.14);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 35px rgba(11, 49, 114, 0.07);
  color: #127ebf;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ivp-eyebrow i {
  color: #7b5cf5;
  font-size: 13px;
  filter: drop-shadow(0 4px 8px rgba(123, 92, 245, 0.25));
}

.ivp-intro .site-title {
  max-width: 640px;
  margin-bottom: 24px;
  color: #071e78;
  font-size: clamp(38px, 4.3vw, 61px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2px;
}

.ivp-intro .text-gradient {
  display: inline;
  background: linear-gradient(
    90deg,
    #11b9db 0%,
    #775ff6 50%,
    #d43cf1 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ivp-intro-text {
  max-width: 640px;
  margin-bottom: 14px;
  color: #68738e;
  font-size: 16px;
  line-height: 1.9;
}

/* =====================================================
   Main Visual
===================================================== */

.ivp-visual {
  position: relative;
  margin-top: 36px;
  padding: 14px;
  border: 1px solid rgba(15, 87, 175, 0.10);
  border-radius: 30px;
  background: linear-gradient(
    145deg,
    rgba(17, 188, 230, 0.18),
    rgba(136, 91, 246, 0.14)
  );
  box-shadow: 0 28px 75px rgba(13, 45, 110, 0.14);
}

.ivp-visual::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  top: -30px;
  left: -25px;
  background-image: radial-gradient(#0f5bad 2px, transparent 2px);
  background-size: 13px 13px;
  opacity: 0.48;
  z-index: -1;
}

.ivp-visual img {
  display: block;
  width: 100%;
  height: 400px;
  border-radius: 22px;
  object-fit: cover;
}

.ivp-visual-badge {
  position: absolute;
  right: 30px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 255px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 15px 40px rgba(7, 37, 100, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ivp-badge-icon {
  display: inline-flex;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #10bdeb, #775af4);
  box-shadow: 0 9px 22px rgba(49, 114, 229, 0.25);
  color: #ffffff;
  font-size: 18px;
}

.ivp-visual-badge strong,
.ivp-visual-badge span {
  display: block;
}

.ivp-visual-badge strong {
  margin-bottom: 3px;
  color: #071e78;
  font-size: 14px;
}

.ivp-visual-badge span {
  color: #7a849c;
  font-size: 12px;
}

.ivp-mini-stat {
  position: absolute;
  top: 28px;
  left: 28px;
  max-width: 150px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  background: rgba(7, 30, 120, 0.88);
  box-shadow: 0 14px 35px rgba(6, 30, 92, 0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ivp-mini-stat strong,
.ivp-mini-stat span {
  display: block;
  color: #ffffff;
}

.ivp-mini-stat strong {
  margin-bottom: 2px;
  font-size: 28px;
  line-height: 1;
}

.ivp-mini-stat span {
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.82;
}

/* =====================================================
   Feature Timeline
===================================================== */

.ivp-feature-list {
  position: relative;
  padding-left: 18px;
}

.ivp-feature-list::before {
  content: "";
  position: absolute;
  top: 42px;
  bottom: 42px;
  left: 48px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(18, 188, 231, 0.18),
    rgba(40, 124, 237, 0.85),
    rgba(137, 91, 246, 0.78),
    rgba(213, 61, 241, 0.16)
  );
}

.ivp-feature-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  min-height: 225px;
  padding: 28px 10px 34px 0;
  transition: transform 0.35s ease;
}

.ivp-feature-item:not(:last-child) {
  margin-bottom: 12px;
}

.ivp-feature-item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 100px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(19, 91, 180, 0.14),
    transparent
  );
}

.ivp-feature-item:last-child::after {
  display: none;
}

.ivp-feature-item:hover {
  transform: translateX(8px);
}

.ivp-feature-number {
  position: absolute;
  top: 12px;
  right: 4px;
  color: rgba(9, 41, 122, 0.045);
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -8px;
  user-select: none;
}

.ivp-feature-marker {
  position: relative;
  display: inline-flex;
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  border: 7px solid #f8fbff;
  border-radius: 50%;
  background: linear-gradient(135deg, #10bde8, #725af1);
  box-shadow:
    0 12px 28px rgba(37, 118, 226, 0.24),
    0 0 0 1px rgba(33, 130, 221, 0.12);
  color: #ffffff;
  font-size: 21px;
  z-index: 2;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.ivp-feature-item:hover .ivp-feature-marker {
  transform: scale(1.08) rotate(-5deg);
  box-shadow:
    0 17px 36px rgba(37, 118, 226, 0.32),
    0 0 0 8px rgba(22, 171, 229, 0.08);
}

.ivp-feature-content {
  position: relative;
  padding-right: 16px;
  z-index: 1;
}

.ivp-feature-label {
  display: block;
  margin-bottom: 10px;
  color: #1592c3;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.85px;
  text-transform: uppercase;
}

.ivp-feature-content h3 {
  max-width: 480px;
  margin-bottom: 14px;
  color: #071e78;
  font-size: clamp(25px, 2.6vw, 35px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.8px;
}

.ivp-feature-content h3 span {
  color: #775df4;
}

.ivp-feature-content p {
  max-width: 520px;
  margin-bottom: 15px;
  color: #69748d;
  font-size: 15px;
  line-height: 1.82;
  text-align: justify;
}

.ivp-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #0c65cf;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition:
    gap 0.3s ease,
    color 0.3s ease;
}

.ivp-feature-link i {
  font-size: 12px;
}

.ivp-feature-link:hover {
  gap: 14px;
  color: #815bf5;
}

/* =====================================================
   Responsive
===================================================== */

@media (max-width: 991.98px) {
  .ivp-area {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .ivp-intro {
    margin-bottom: 30px;
  }

  .ivp-intro .site-title {
    max-width: 760px;
  }

  .ivp-feature-list {
    margin-top: 25px;
  }

  .ivp-visual img {
    height: 430px;
  }
}

@media (max-width: 767.98px) {
  .ivp-area {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .ivp-intro .site-title {
    font-size: 36px;
    letter-spacing: -1.2px;
  }

  .ivp-intro-text {
    font-size: 15px;
    line-height: 1.8;
  }

  .ivp-visual {
    border-radius: 23px;
  }

  .ivp-visual img {
    height: 340px;
    border-radius: 17px;
  }

  .ivp-visual-badge {
    right: 20px;
    bottom: 20px;
    min-width: 220px;
  }

  .ivp-mini-stat {
    top: 20px;
    left: 20px;
  }

  .ivp-feature-list {
    padding-left: 0;
  }

  .ivp-feature-list::before {
    left: 31px;
  }

  .ivp-feature-item {
    grid-template-columns: 62px 1fr;
    gap: 20px;
  }

  .ivp-feature-marker {
    width: 56px;
    height: 56px;
    border-width: 6px;
    font-size: 18px;
  }

  .ivp-feature-number {
    font-size: 72px;
  }

  .ivp-feature-content h3 {
    font-size: 28px;
  }

  .ivp-feature-item::after {
    width: calc(100% - 82px);
  }
}

@media (max-width: 575.98px) {
  .ivp-eyebrow {
    padding: 8px 13px;
    font-size: 11px;
  }

  .ivp-intro .site-title {
    font-size: 31px;
  }

  .ivp-visual img {
    height: 285px;
  }

  .ivp-visual-badge {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
  }

  .ivp-mini-stat {
    top: 17px;
    left: 17px;
    max-width: 128px;
    padding: 12px 14px;
  }

  .ivp-mini-stat strong {
    font-size: 23px;
  }

  .ivp-feature-item {
    grid-template-columns: 54px 1fr;
    gap: 14px;
    min-height: auto;
    padding-top: 22px;
    padding-bottom: 28px;
  }

  .ivp-feature-list::before {
    left: 27px;
  }

  .ivp-feature-marker {
    width: 50px;
    height: 50px;
    border-width: 5px;
    font-size: 16px;
  }

  .ivp-feature-number {
    top: 20px;
    font-size: 56px;
    letter-spacing: -5px;
  }

  .ivp-feature-content {
    padding-right: 0;
  }

  .ivp-feature-content h3 {
    font-size: 24px;
  }

  .ivp-feature-content p {
    font-size: 14px;
    line-height: 1.75;
  }

  .ivp-feature-item:hover {
    transform: translateX(3px);
  }
}

/*==================================================
 WHY INTELLISURVS
 Part 2B (Hover + Responsive)
==================================================*/


/*------------------------------
 Premium Hover
------------------------------*/

.story-content{
    position:relative;
    overflow:hidden;
    transition:all .45s cubic-bezier(.2,.8,.2,1);
}

/* Gradient Overlay */

.story-content::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
135deg,
rgba(24,200,216,.04),
rgba(109,91,255,.05)
);

opacity:0;

transition:.45s;

pointer-events:none;

}

.story-content:hover::before{

opacity:1;

}

/* Animated Top Border */

.story-content::after{

content:"";

position:absolute;

top:0;

left:0;

width:0;

height:4px;

background:linear-gradient(90deg,#18C8D8,#6D5BFF);

transition: 2s;

}

.story-content:hover::after{

width:100%;

}


/* Lift */

.story-content:hover{

transform:translateY(-10px);

border-color:#18C8D8;

box-shadow:
0 30px 80px rgba(15,23,42,.12);

}


/*------------------------------
 Icon Animation
------------------------------*/

.story-icon{

transition:all .45s ease;

}

.story-content:hover .story-icon{

transform:rotate(-10deg) scale(1.08);

box-shadow:
0 18px 40px rgba(24,200,216,.35);

}


/*------------------------------
 Title Animation
------------------------------*/

.story-content h3{

transition:.35s;

}

.story-content:hover h3{

color:#0A8CFF;

}


/*------------------------------
 Divider
------------------------------*/

.story-line{

transition:.4s;

}

.story-content:hover .story-line{

width:140px;

}


/*------------------------------
 Number
------------------------------*/

.story-count{

transition:.35s;

}

.story-item:hover .story-count{

color:#D6E7FF;

transform:scale(1.08);

}


/*------------------------------
 Paragraph
------------------------------*/

.story-content p{

transition:.35s;

}

.story-content:hover p{

color:#4A5568;

}


/*------------------------------
 Floating Glow
------------------------------*/

.story-item{

position:relative;

}

.story-item::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:radial-gradient(circle,
rgba(24,200,216,.08),
transparent 70%);

top:-70px;

right:-60px;

opacity:0;

transition:.5s;

pointer-events:none;

}

.story-item:hover::before{

opacity:1;

}


/*------------------------------
 Smooth Transition
------------------------------*/

.story-item,
.story-content,
.story-icon,
.story-count,
.story-line,
.story-content h3{

transition:all .4s ease;

}


/*==================================================
 Responsive
==================================================*/

@media(max-width:991px){

.story-title{

font-size:42px;

}

.story-desc{

font-size:16px;

}

.story-item{

grid-template-columns:70px 1fr;

gap:20px;

}

.story-item.reverse{

grid-template-columns:70px 1fr;

}

.story-item.reverse .story-count{

order:0;

text-align:left;

}

.story-item.reverse .story-content{

order:0;

}

.story-count{

font-size:58px;

}

.story-content{

padding:30px;

}

.story-content h3{

font-size:24px;

}

.story-icon{

width:60px;

height:60px;

font-size:24px;

}

}



@media(max-width:767px){

.story-section{

padding:80px 0;

}

.story-wrapper{

gap:25px;

margin-top:60px;

}

.story-item{

display:block;

}

.story-count{

display:none;

}

.story-content{

padding:24px;

border-radius:20px;

}

.story-title{

font-size:34px;

}

.story-desc{

font-size:15px;

line-height:1.8;

}

.story-content h3{

font-size:22px;

}

.story-content p{

font-size:15px;

}

.story-line{

width:70px;

}

.story-content:hover{

transform:none;

}

}

/*==========================
WHY INTELLISURVS
===========================*

/* New piller section End */





/* Core Capabilities section start */

/*=========================
 Core Capabilities
==========================*/

.capabilities-area{

background:#ffffff;

}

.cap-tag{

display:inline-block;

padding:10px 24px;

border-radius:50px;

background:#EEF6FF;

color:#0E8FFF;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:25px;

}

.cap-title{

font-size: 50px;

font-weight:800;

line-height:1.2;

color:#081B4B;

margin-bottom:25px;

}

.cap-desc{

font-size:18px;

line-height:1.9;

color:#667085;

margin-bottom:35px;

}

.feature-stack{

display:flex;

flex-direction:column;

gap:25px;

}

.feature-item{

display:flex;

gap:25px;

padding:35px;

border-radius:24px;

background:#fff;

border:1px solid #EEF2F7;

box-shadow:0 20px 50px rgba(15,23,42,.06);

transition:.35s;

}

.feature-item

.feature-item:hover{

transform:translateY(-8px);

border-color:#18C8D8;

box-shadow:0 35px 70px rgba(15,23,42,.12);

}

.move-right{

margin-left:60px;

}

.icon{

width:72px;

height:72px;

min-width:72px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#18C8D8,#6D5BFF);

color:#fff;

font-size:30px;

}

.feature-item h4{

font-size:24px;

font-weight:700;

margin-bottom:15px;

color:#081B4B;

}

.feature-item p{

margin:0;

font-size:16px;

text-align: justify;

line-height:1.9;

color:#667085;

}

/* Core Capabilities section end */


/* Strategic Solutions section start */

/*==================================================
STRATEGIC SOLUTIONS
==================================================*/

.strategic-solutions{
    position: relative;
    padding: 30px 0;
    background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    overflow: hidden;
}

/* Background Glow */

.strategic-solutions::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,#23C8F915 0%,transparent 70%);
    top:-180px;
    right:-150px;
    pointer-events:none;
}

.strategic-solutions::after{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    background:radial-gradient(circle,#6D5BFF10 0%,transparent 70%);
    bottom:-180px;
    left:-120px;
    pointer-events:none;
}


/*==========================
Heading
===========================*/

.section-badge{

display:inline-block;

padding:10px 24px;

border-radius:50px;

background:#EEF7FF;

color:#0A8CFF;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:20px;

}

.section-title{

font-size:54px;

font-weight:800;

line-height:1.2;

color:#081B4B;

margin-bottom: 10px;

}
.section-title h2 span{
    display: block;
    background: linear-gradient(90deg, #00c6ff, #6b5cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-description{

max-width:850px;

margin:auto;

font-size:18px;

line-height:1.9;

color:#667085;

}

.text-gradient{

background:linear-gradient(90deg,#16C7D8,#6D5BFF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



/*==========================
Cards
===========================*/

.solution-card{

position:relative;

background:#fff;

padding:32px;

border-radius:26px;

height:100%;

border:1px solid #EDF2F7;

overflow:hidden;

transition:.4s ease;

box-shadow:0 18px 45px rgba(15,23,42,.05);

display:flex;

flex-direction:column;

}

/* Decorative Circle */

.solution-card::before{

content:"";

position:absolute;

top:-60px;

right:-60px;

width:160px;

height:160px;

border-radius:50%;

background:linear-gradient(135deg,#16C7D815,#6D5BFF15);

transition:.4s;

}

.solution-card:hover::before{

transform:scale(1.2);

}

.solution-card:hover{

transform:translateY(-10px);

border-color:#17C8D8;

box-shadow:0 30px 70px rgba(15,23,42,.12);

}

.active-card{

border-color:#18C8D8;

}



/*==========================
Icon
===========================*/

.card-icon{

width:68px;

height:68px;

border-radius:20px;

background:linear-gradient(135deg,#16C7D8,#6D5BFF);

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

margin-bottom:20px;

box-shadow:0 15px 30px rgba(22,199,216,.25);

transition:.35s;

}

.solution-card:hover .card-icon{

transform:rotate(-8deg) scale(1.08);

}



/*==========================
Badge
===========================*/

.solution-tag{

display:inline-block;

padding:7px 16px;

background:#EEF7FF;

border-radius:50px;

font-size:12px;

font-weight:700;

color:#0A8CFF;

margin-bottom:22px;

}



/*==========================
Title
===========================*/

.solution-card h3{

font-size:26px;

font-weight:700;

line-height:1.35;

margin-bottom:18px;

color:#081B4B;

}



/*==========================
Description
===========================*/

.solution-card p{
Text-align: justify;

font-size:16px;

line-height:1.8;

color:#667085;

margin-bottom:25px;

flex-grow:1;

}



/*==========================
Link
===========================*/

.solution-link{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:700;

font-size:15px;

color:#0A8CFF;

text-decoration:none;

transition:.3s;

}

.solution-link i{

transition:.3s;

}

.solution-link:hover{

color:#081B4B;

}

.solution-link:hover i{

transform:translateX(6px);

}



/*==========================
Responsive
===========================*/

@media(max-width:991px){

.section-title{

font-size:42px;

}

.section-description{

font-size:16px;

}

.solution-card{

padding:28px;

}

}



@media(max-width:767px){

.strategic-solutions{

padding:80px 0;

}

.section-title{

font-size:34px;

}

.card-icon{

width:58px;

height:58px;

font-size:24px;

}

.solution-card h3{

font-size:22px;

}

.solution-card{

padding:24px;

}

}

/* Strategic Solutions section end */




<!---->