@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@300;600&family=Open+Sans:wght@400;600&family=Lato:wght@400;700&family=Playfair+Display:wght@400;700&display=swap");
body {
  font-family: "Roboto", "Lato", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #6a6972;
  overflow-x: hidden;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a,
button,
input,
textarea {
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a,
a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Accessibility: the reset above removes the default focus ring for mouse
   clicks, but keyboard/assistive-tech users still need a visible focus
   indicator (WCAG 2.4.7). :focus-visible only fires for keyboard/non-pointer
   focus in modern browsers, so this doesn't reintroduce the "outline on
   every click" look while restoring keyboard navigability everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #9168ae !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

a:focus,
a:hover {
  text-decoration: none;
}

i,
span,
a {
  display: inline-block;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: #2e2e2e;
  margin: 0px;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #6a6972;
  margin: 0px;
}

.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

/*===== All Button Style =====*/
.main-btn {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0 25px;
  font-size: 16px;
  line-height: 48px;
  border-radius: 8px;
  border: 0;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  -webkit-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#84559f),
    color-stop(50%, #6e4a89),
    to(#84559f)
  );
  background: linear-gradient(to right, #84559f 0%, #6e4a89 50%, #84559f 100%);

  background-size: 200%;
}

.main-btn:hover {
  color: #fff;
  background-position: right center;
}

@media (max-width: 767px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/*===== All Section Title Style =====*/
.section-title .line {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#84559f),
    to(#6e4a89)
  );
  background: linear-gradient(#84559f 0%, #6e4a89 100%);
  width: 150px;
  height: 5px;
  margin-bottom: 10px !important;
}

.section-title .sub-title {
  font-size: 18px;
  font-weight: 400;
  color: #361cc1;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .section-title .sub-title {
    font-size: 16px;
  }
}

.section-title .title {
  font-size: 32px;
  padding-top: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-title .title {
    font-size: 30px;
  }
}

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

.section-title .title span {
  font-weight: 400;
  display: contents;
}

/*===== HEADER HERO =====*/
.header-hero {
  position: relative;
  z-index: 5;
  background-position: bottom center;
}

#particles-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.header-hero-content {
  padding-top: 180px;
}

@media (max-width: 767px) {
  .header-hero-content {
    padding-top: 130px;
  }
}

.header-hero-content .header-sub-title {
  font-size: 38px;
  font-weight: 300;
  color: #fff;
}

@media (max-width: 767px) {
  .header-hero-content .header-sub-title {
    font-size: 24px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-hero-content .header-sub-title {
    font-size: 30px;
  }
}

.header-hero-content .header-title {
  font-size: 38px;
  font-weight: 700;
  color: #fff;
}

@media (max-width: 767px) {
  .header-hero-content .header-title {
    font-size: 24px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-hero-content .header-title {
    font-size: 30px;
  }
}

.header-hero-content .text {
  color: #fff;
  margin-top: 30px;
}

/*===== GOOGLE RATING BADGE =====*/
.google-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.google-rating-badge:hover,
.google-rating-badge:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  transform: translateY(-1px);
}

.google-rating-badge i.fa-google {
  font-size: 15px;
  color: #fff;
}

.google-rating-badge-score {
  font-weight: 700;
}

.google-rating-badge-stars {
  display: inline-flex;
  gap: 2px;
  line-height: 1;
}

.google-rating-badge-stars i {
  font-size: 12px;
  color: #ffc107;
}

.google-rating-badge-count {
  font-weight: 500;
  opacity: 0.92;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .google-rating-badge {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 8px 14px;
    font-size: 13px;
  }
}

.header-hero-content .main-btn {
  margin-top: 40px;
}

.header-hero-image {
  padding-top: 45px;
}

.header-hero-image img {
  max-width: 650px;
}

@media (max-width: 767px) {
  .header-hero-image img {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .header-hero-image {
    padding-top: 30px;
  }
}

/*===========================
  BRAND css 
===========================*/
@media (max-width: 767px) {
  .brand-logo {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.single-logo {
  padding: 15px 30px;
  text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-logo {
    padding: 15px 15px;
  }
}

@media (max-width: 767px) {
  .single-logo {
    padding: 15px 30px;
  }
}

@media (max-width: 767px) {
  .single-logo {
    width: 50%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single-logo {
    width: 33.33%;
  }
}

.single-logo img {
  max-width: 100%;

  opacity: 0.8;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.single-logo:hover img {
  opacity: 1;
  -webkit-filter: none;
  filter: none;
}

/*===========================
  SERVICES css 
===========================*/
/* 
.single-services {

  background-color: #fff;
  -webkit-box-shadow: 0px 5px 30px 0px rgba(167, 167, 167, 0.16);
  box-shadow: 0px 5px 30px 0px rgba(167, 167, 167, 0.16);
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  padding: 50px 30px;
  border: 2px solid transparent;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .single-services {
    padding: 20px 20px 30px;
  }
}

.single-services .services-icon {
  display: inline-block;
  position: relative;
}

.single-services .services-icon img {
  -webkit-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
}

.single-services .services-icon .shape-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.single-services .services-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 34px;
  color: #fff;
}

.single-services .services-content .services-title a {
  font-size: 26px;
  font-weight: 700;
  color: #2e2e2e;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-services .services-content .services-title a {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .single-services .services-content .services-title a {
    font-size: 20px;
  }
}

.single-services .services-content .services-title a:hover {
  color: #361cc1;
}

.single-services .services-content .text {
  margin-top: 30px;
}

@media (max-width: 767px) {
  .single-services .services-content .text {
    margin-top: 20px;
  }
}

.single-services .services-content .more {
  margin-top: 30px;
  font-size: 16px;
  font-weight: 400;
  color: #fe7af3;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.single-services .services-content .more i {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 700;
}

.single-services .services-content .more:hover {
  letter-spacing: 2px;
}

.single-services:hover {
  border-color: #fe7add;
}

.single-services:hover .services-icon .shape {
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
} */

/*===========================
	ABOUT css 
===========================*/
.about-area {
  position: relative;
  z-index: 5;
}

.about-shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  height: 100%;
  z-index: -1;
}

.about-shape-1 img {
  width: 100%;
}

@media (max-width: 767px) {
  .about-shape-1 {
    display: none;
  }
}

.about-shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  z-index: -1;
}

.about-shape-2 img {
  width: 100%;
}

@media (max-width: 767px) {
  .about-shape-2 {
    display: none;
  }
}

.about-content {
  max-width: 480px;
}

.about-content .text {
  margin-top: 15px;
}

.about-content .main-btn {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#84559f),
    color-stop(50%, #6e4a89),
    to(#84559f)
  );
  background: linear-gradient(to right, #84559f 0%, #6e4a89 50%, #84559f 100%);
  background-size: 200%;
  height: 50px;
  line-height: 50px;
  padding: 0 35px;
  margin-top: 40px;
}

.about-content .main-btn:hover {
  background-position: right center;
}

.counter-wrapper {
  padding-left: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
  only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 767px) {
  .counter-wrapper {
    padding-left: 0;
  }
}

.counter-wrapper .counter-content .text {
  margin-top: 35px;
}

.counter-wrapper .single-counter {
  max-width: 155px;
  height: 120px;
  border-radius: 60px;
  position: relative;
  z-index: 5;
  margin-top: 60px;
}

@media (max-width: 767px) {
  .counter-wrapper .single-counter {
    max-width: 100px;
    height: 80px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .counter-wrapper .single-counter {
    max-width: 155px;
    height: 120px;
  }
}

.counter-wrapper .single-counter::before {
  position: absolute;
  content: "";
  width: 155px;
  height: 120px;
  border-radius: 60px;
  top: 0;
  left: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: -1;
}

@media (max-width: 767px) {
  .counter-wrapper .single-counter::before {
    max-width: 100px;
    height: 80px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .counter-wrapper .single-counter::before {
    max-width: 155px;
    height: 120px;
  }
}

.counter-wrapper .single-counter.counter-color-1::before {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#84559f),
    to(#9f7dbf)
  );
  background: linear-gradient(#84559f 0%, #9f7dbf 100%);
}

.counter-wrapper .single-counter.counter-color-2::before {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#8a6da5),
    to(#a58dbd)
  );
  background: linear-gradient(#8a6da5 0%, #a58dbd 100%);
}

.counter-wrapper .single-counter.counter-color-3::before {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#b28ccf),
    to(#d2a9e1)
  );
  background: linear-gradient(#b28ccf 0%, #d2a9e1 100%);
}

.counter-wrapper .single-counter .count {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

@media (max-width: 767px) {
  .counter-wrapper .single-counter .count {
    font-size: 18px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .counter-wrapper .single-counter .count {
    font-size: 22px;
  }
}

.counter-wrapper .single-counter .text {
  font-size: 16px;
  color: #fff;
}

@media (max-width: 767px) {
  .counter-wrapper .single-counter .text {
    font-size: 14px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .counter-wrapper .single-counter .text {
    font-size: 16px;
  }
}

/*===========================
  SUBSCRIBE  css 
===========================*/
.subscribe-area {
  padding: 40px 50px 90px;
  -webkit-box-shadow: 0px 0px 18px 0px rgba(50, 77, 215, 0.14);
  box-shadow: 0px 0px 18px 0px rgba(50, 77, 215, 0.14);
  border-radius: 10px;
  background-color: #fff;
}

@media (max-width: 767px) {
  .subscribe-area {
    padding: 10px 30px 60px;
  }
}

.subscribe-content .subscribe-title {
  font-size: 35px;
  font-weight: 700;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .subscribe-content .subscribe-title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .subscribe-content .subscribe-title {
    font-size: 24px;
  }
}

.subscribe-content .subscribe-title span {
  font-weight: 400;
}

.subscribe-form {
  position: relative;
}

.subscribe-form input {
  border: 2px solid #e1e1e1;
  height: 65px;
  padding: 0 30px;
  border-radius: 5px;
  width: 100%;
  color: #2e2e2e;
}

.subscribe-form input::-webkit-input-placeholder {
  opacity: 1;
  color: #b9b9b9;
}

.subscribe-form input:-ms-input-placeholder {
  opacity: 1;
  color: #b9b9b9;
}

.subscribe-form input::-ms-input-placeholder {
  opacity: 1;
  color: #b9b9b9;
}

.subscribe-form input::placeholder {
  opacity: 1;
  color: #b9b9b9;
}

.subscribe-form input::-moz-placeholder {
  opacity: 1;
  color: #b9b9b9;
}

.subscribe-form input::-moz-placeholder {
  opacity: 1;
  color: #b9b9b9;
}

.subscribe-form input::-webkit-input-placeholder {
  opacity: 1;
  color: #b9b9b9;
}

.subscribe-form input:focus {
  border-color: #361cc1;
}

.subscribe-form button {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 65px;
  line-height: 65px;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#8b3a89),
    color-stop(50%, #782e6b),
    to(#943e8e)
  );
  background: linear-gradient(to right, #84559f 0%, #7e3b7e 50%, #5c345a 100%);
  background-size: 200%;
}

@media (max-width: 767px) {
  .subscribe-form button {
    position: relative;
    width: 100%;
    margin-top: 10px;
    border-radius: 5px;
  }
}

/* nav-item */
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .subscribe-form button {
    position: absolute;
    width: auto;
    margin-top: 0;
    border-radius: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
}

.subscribe-form button:hover {
  color: #fff;
  background-position: right center;
}

/*===========================
	FOOTER  css 
===========================*/
.footer-area {
  background-position: top center;
  position: relative;
  z-index: 5;
}

.footer-area::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../images/footer/footer-bg.svg);
  background-position: top center;
  z-index: -1;
  background-size: cover;
}

@media only screen and (min-width: 1921px) {
  .footer-area::before {
    height: 1120px;
  }
}

#particles-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.footer-widget {
  padding-top: 50px;
}

.footer-about .logo img {
  width: 160px;
}

.footer-about {
  overflow: visible;
}

.footer-about .text {
  color: #fff;
  line-height: 30px;
  margin-top: 30px;
}

.footer-about .social {
  margin-top: 40px;
  width: 100%;
  overflow: visible;
}

.footer-about .social li {
  display: inline-block;
  margin-right: 30px;
}

.footer-about .social li a {
  font-size: 22px;
  color: #fff;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.footer-about .social li a:hover {
  color: #fe8464;
}

.footer-title .title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.link-wrapper {
  padding: 0 35px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .link-wrapper {
    padding: 0px 15px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 767px) {
  .link-wrapper {
    padding: 0;
    padding-right: 50px;
  }
}

.link-wrapper .link {
  padding-top: 20px;
}

.link-wrapper .link li {
  margin-top: 20px;
}

.link-wrapper .link li a {
  font-size: 16px;
  color: #fff;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.link-wrapper .link li a:hover {
  color: #fe8464;
}

.footer-contact .contact {
  padding-top: 20px;
}

.footer-contact .contact li {
  margin-top: 20px;
  font-size: 16px;
  color: #fff;
}

.footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 15px;
  padding-bottom: 30px;
}

.copyright-content {
  padding-top: 15px;
  text-align: center;
}

.copyright-content p {
  color: #fff;
}

.copyright-content a {
  font-size: 16px;
  color: #fff;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.copyright-content a:hover {
  color: #fe8464;
}

/* BIG UPDATE */

.styled-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #6f42c1;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 32px 8px 12px;
  /* extra right padding for arrow */
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.styled-select:hover {
  background-color: #7d4dcc;
}

.styled-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.4);
}

.styled-select option {
  color: #000;
}

/* Custom arrow */
.custom-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1rem;
  color: #fff;
}

.news-ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(191, 191, 240, 0.25);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6px);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.6rem 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  z-index: 999;
  text-align: center;
  line-height: 0.8;
  border-top: 2px solid rgba(0, 0, 0, 0.2);
  /* thicker border */
  opacity: 0;
  /* start hidden */
  transition: opacity 0.5s ease;
}

.news-track {
  display: inline-block;
  white-space: nowrap;
  animation: scrollNews 38s linear infinite;
  font-size: 0.75rem;
  color: #111;
  padding-left: 100%;
  font-weight: 500;
}

.news-ticker:hover .news-track {
  animation-play-state: paused;
}

.urgent {
  color: #e63946;
  animation: flicker 1s infinite;
  margin-right: 6px;
}

.smile-font {
  font-family: "Comic Neue", cursive;
  font-size: 14px;
  line-height: 1.6;
}

.smile-font h3.title {
  font-size: 20px;
  margin-bottom: 10px;
}

.education-item {
  margin-bottom: 8px;
}

.hover-service {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hover-service:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  color: #000000;
}

.header-area ul li a {
  text-decoration: none;
}

.header-area a {
  text-decoration: none;
}

a {
  text-decoration: none;
}

.review-section {
  margin-bottom: 50px;
}

/* Purple to dark blue gradient */
.clients-satisfaction {
  background: linear-gradient(135deg, #6a0dad, #001f4d);
  color: #fff;
}

/* Heading styles */
.clients-satisfaction h2 {
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  animation: fadeSlideUp 0.8s ease forwards;
  opacity: 0;
  color: #fff;
}

.clients-satisfaction p {
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
  animation: fadeSlideUp 0.8s ease 0.2s forwards;
  opacity: 0;
  color: #dc75d4;
}

/* Button styles */
.clients-satisfaction .btn-review {
  background: #fff;
  color: #6a0dad;
  font-weight: 600;
  font-size: 1.25rem;
  padding: 0.85rem 2.25rem;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(106, 13, 173, 0.5);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  animation: fadeSlideUp 0.8s ease 0.4s forwards;
  opacity: 0;
  text-decoration: none;
}

.clients-satisfaction .btn-review:hover,
.clients-satisfaction .btn-review:focus {
  background: #330961;
  color: #fff;
  box-shadow: 0 6px 20px rgba(51, 9, 97, 0.8);
  text-decoration: none;
}

/* Fade and slide up animation */
/* --- WhatsApp Button Base Styles (Desktop) --- */
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #25d366;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  animation: fadeInDelay 0.6s ease-in-out 1.5s forwards;
}

/* --- Fixed Mobile Styles (Responsive Fix) --- */
@media (max-width: 768px) {
  .whatsapp-btn {
    bottom: 16px;
    right: 16px;
    width: 45px;
    height: 45px;
  }

  /* Force Botpress to stay within the viewport bounds if it's drifting */
  #bp-web-widget-container,
  .bp-widget-widget {
    right: 5vw !important;
    bottom: 20px !important;
  }
}

/* --- Keyframes & Animations --- */
@keyframes fadeInDelay {
  to {
    opacity: 1;
  }
}

/* Shine effect */
.whatsapp-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transform: skewX(-20deg);
  animation: shine 4s ease-in-out 3s infinite;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  60% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}

/* --- Link Styling --- */
.whatsapp-btn a {
  color: white;
  font-size: 24px;
  line-height: 0;
  z-index: 1;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.youtube-btn {
  background: linear-gradient(45deg, #ff0000, #cc0000);
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
  text-decoration: none;
}

.youtube-btn:hover {
  background: linear-gradient(45deg, #cc0000, #ff3333);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6);
}

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

.youtube-btn:hover i {
  transform: scale(1.2) rotate(-10deg);
}

/* github btn */
.github-btn {
  background: linear-gradient(45deg, #410951, #4f2f84);
  box-shadow: 0 4px 15px rgba(115, 0, 255, 0.4);
  text-decoration: none;
}

.github-btn:hover {
  background: linear-gradient(45deg, #40014a, #b696d5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 5, 86, 0.6);
}

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

.github-btn:hover i {
  transform: scale(1.2) rotate(-10deg);
}

/*  */

.about-area .text strong,
.brand-area .text strong {
  color: #6f42c1;
  /* Purple */
}

.morocco-diamond {
  position: relative;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;

  /* 1. Flag Colors Gradient: Red (0-33%), Green (33-66%), Red (66-100%) */
  background: linear-gradient(
    to right,
    #c1272d 0%,
    #c1272d 45%,
    #006233 45%,
    #006233 73%,
    #c1272d 73%,
    #c1272d 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Added for standard compatibility */

  /* 2. Path-Following Glow (The Fix) */
  /* Drop-shadow follows the text shape, not the box */
  filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));

  transition: all 0.4s ease-in-out;
  animation: diamondPulse 3s infinite ease-in-out;
}

/* 3. The "Diamond" Sparkle Animation */
@keyframes diamondPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.4)) brightness(1);
    transform: scale(1);
  }

  50% {
    /* This creates the diamond glow that follows letter edges */
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8))
      drop-shadow(0 0 12px rgba(193, 39, 45, 0.4)) brightness(1.2);
    transform: scale(1.02);
  }
}

/* 4. Hover State */
.morocco-diamond:hover {
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 1)) brightness(1.4);
  letter-spacing: 1px;
  /* Subtle expansion like a gem reflecting light */
}

/* Extra Genius Tip: Smooth out the font rendering for gradients */
.header-title {
  -webkit-font-smoothing: antialiased;
}

/* Ayat */
.notif {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 360px;
  max-width: calc(100vw - 40px);
  background: rgba(15, 15, 18, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transform: translateX(-120%);
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
  z-index: 9999;
}

.notif.show {
  transform: translateX(0);
  opacity: 1;
}

.notif.hide {
  transform: translateX(-120%);
  opacity: 0;
}

.notif img {
  display: block;
  width: 100%;
  height: auto;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.15s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.hidden {
  pointer-events: none;
}

/* Ramadan */

.ramadan-premium-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #130a24 0%, #07030aa8 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100000;
  text-align: center;
  padding: 20px;
  animation: finish 1s ease-in forwards 8s;
}

/* Bright, Bold Crescent */
.crescent-moon {
  width: 120px;
  height: 120px;
  background: #f1d382;
  border-radius: 50%;
  box-shadow:
    0 0 40px #f1d382,
    0 0 80px rgba(241, 211, 130, 0.3);
  margin-bottom: 30px;
  position: relative;
}

/* The "Cut-out" part to make it a crescent */
.crescent-moon::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 30px;
  width: 110px;
  height: 110px;
  background: #0a241f;
  /* Matches background to "cut" the shape */
  border-radius: 50%;
}

.text-container {
  max-width: 900px;
}

/* High-Contrast Arabic */
.text-container h1 {
  font-family: "Amiri", serif;
  font-size: clamp(3.5rem, 12vw, 6rem);
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
  /* Multi-layered shadow for maximum "Pop" */
  text-shadow:
    0 0 10px #f1d382,
    0 0 20px #f1d382,
    0 0 40px rgba(241, 211, 130, 0.6);
  animation: breathe 3s ease-in-out infinite;
}

/* Ayah with better visibility */
.ayah-box {
  margin-top: 20px;
  padding: 15px 30px;
  border-top: 1px solid rgba(241, 211, 130, 0.3);
  border-bottom: 1px solid rgba(241, 211, 130, 0.3);
}

.ayah-box p {
  font-family: "Amiri", serif;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  color: #f1d382;
  /* Solid gold-yellow */
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  margin: 0;
}

.brand-text {
  margin-top: 40px;
  font-family: "Montserrat", sans-serif;
  color: white;
  letter-spacing: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.8;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.02);
    opacity: 0.9;
  }
}

@keyframes finish {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Floating Light Dust */
.dust {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(1px);
  animation: floatUp 15s linear infinite;
}

@keyframes floatUp {
  from {
    transform: translateY(100vh);
  }

  to {
    transform: translateY(-10vh);
  }
}

/* Loader */
.loader {
  position: relative;
  width: 108px;
  display: flex;
  justify-content: space-between;
}

.loader::after,
.loader::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-color: #fff;
  background-image: radial-gradient(circle 14px, #0d161b 100%, transparent 0);
  background-repeat: no-repeat;
  border-radius: 50%;
  animation:
    eyeMove 0.5s infinite,
    blink 0.5s infinite;
}

@keyframes eyeMove {
  0%,
  10% {
    background-position: 0px 0px;
  }

  13%,
  40% {
    background-position: -15px 0px;
  }

  43%,
  70% {
    background-position: 15px 0px;
  }

  73%,
  90% {
    background-position: 0px 15px;
  }

  93%,
  100% {
    background-position: 0px 0px;
  }
}

@keyframes blink {
  0%,
  10%,
  12%,
  20%,
  22%,
  40%,
  42%,
  60%,
  62%,
  70%,
  72%,
  90%,
  92%,
  98%,
  100% {
    height: 48px;
  }

  11%,
  21%,
  41%,
  61%,
  71%,
  91%,
  99% {
    height: 18px;
  }
}

.containermain {
  display: flex;
  justify-content: center;
  /* Horizontal centering */
  align-items: center;
  /* Vertical centering */
  min-height: 100vh;
  /* Takes up full screen height */
  background-color: #000;
  /* Optional: matches the vibe */
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 1s linear infinite;
}

/* From Uiverse.io by creator1116 */
@keyframes blinkCursor {
  50% {
    border-right-color: transparent;
  }
}

@keyframes typeAndDelete {
  0%,
  10% {
    width: 0;
  }

  45%,
  55% {
    width: 10em;
  }

  /* adjust width based on content */
  90%,
  100% {
    width: 0;
  }
}

.terminal-loader {
  border: 0.1em solid #333;
  background-color: #1a1a1a;
  color: #7c479f;
  font-family: "Courier New", Courier, monospace;
  font-size: 1em;
  padding: 1.5em 1em;
  width: 12em;
  margin: 100px auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.terminal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  background-color: #333;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 0 0.4em;
  box-sizing: border-box;
}

.terminal-controls {
  float: right;
}

.control {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.4em;
  border-radius: 50%;
  background-color: #777;
}

.control.close {
  background-color: #e33;
}

.control.minimize {
  background-color: #ee0;
}

.control.maximize {
  background-color: #0b0;
}

.terminal-title {
  float: left;
  line-height: 1.5em;
  color: #eee;
}

.textloder {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.2em solid rgb(243, 238, 249);
  /* Cursor */
  animation:
    typeAndDelete 4s steps(11) infinite,
    blinkCursor 0.5s step-end infinite alternate;
  margin-top: 1.5em;
}

:root {
  --rn-primary: #1b4d3e;
  /* Deep Emerald */
  --rn-gold: #d4af37;
  /* Premium Gold */
  --rn-text: #2d3436;
  --rn-bg: rgba(255, 255, 255, 0.98);
}

/* Container & Typography */
.achievements-wrapper {
  padding: 40px 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

.linkedin-posts-section {
  overflow: hidden;
}

.linkedin-posts-heading {
  margin: 0 auto 24px;
  max-width: 680px;
  text-align: center;
}

.linkedin-posts-line {
  width: 60px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 2px;
  background: #0a66c2;
}

.linkedin-posts-heading h2 {
  margin-bottom: 8px;
  color: var(--text-h, #08060d);
  font-size: 28px;
  font-weight: 700;
}

.linkedin-posts-heading p {
  color: var(--text, #6b6375);
}

.linkedin-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.linkedin-post {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(10, 102, 194, 0.18);
  border-radius: 8px;
  background: var(--bg, #fff);
  box-shadow: 0 8px 20px rgba(10, 40, 80, 0.08);
}

.linkedin-post iframe {
  display: block;
  width: 100%;
  max-width: 504px;
  margin: 0 auto;
  border: 0;
}

@media (max-width: 991px) {
  .linkedin-posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 575px) {
  .linkedin-posts-section {
    padding-inline: 12px;
  }

  .linkedin-posts-grid {
    display: flex;
    gap: 12px;
    margin-inline: -4px;
    padding: 0 4px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .linkedin-posts-grid::-webkit-scrollbar {
    display: none;
  }

  .linkedin-post {
    flex: 0 0 min(92vw, 360px);
    scroll-snap-align: start;
  }

  .linkedin-posts-heading h2 {
    font-size: 24px;
  }
}

.achievements-title {
  color: #7c479f; /* Your brand purple */
  text-align: center;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.achievements-subtitle {
  font-size: 15px;
  text-align: center;
  color: #86868b; /* Apple Pro Gray */
  margin-bottom: 20px;
  font-weight: 500;
}

/* Horizontal Scroll Area */
.achievements-scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 30px 20px 40px 20px; /* Extra padding so hover shadows don't cut off */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Clean Apple look: Hide scrollbars */
  scrollbar-width: none;
}
.achievements-scroll::-webkit-scrollbar {
  display: none;
}

/* The Apple-Style Pro Cards */
.achievement-card {
  min-width: 290px;
  flex-shrink: 0; /* CRITICAL: Stops cards from squishing together */
  background: rgba(255, 255, 255, 0.7); /* Translucent White */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 20px;
  /* Soft, premium shadow */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth spring animation */
}

.achievement-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow:
    0 20px 40px rgba(124, 71, 159, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.04);
  border-color: rgba(124, 71, 159, 0.3);
}

/* Header Area */
.achievement-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.achievement-header img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.achievement-header strong {
  font-size: 16px;
  color: #1d1d1f; /* Apple dark text */
  font-weight: 600;
  line-height: 1.2;
  display: block;
}

.achievement-header span {
  font-size: 13px;
  color: #86868b;
  font-weight: 500;
  margin-top: 4px;
  display: block;
}

/* Gallery Area */
.achievement-gallery {
  display: grid;
  grid-template-columns: repeat(
    2,
    1fr
  ); /* Automatically makes images equal width */
  gap: 10px;
}

.achievement-gallery img {
  width: 100%;
  height: 75px;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease;
}

.achievement-gallery img:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  z-index: 2;
  position: relative;
}

.achievements-footer {
  color: #7c479f;
  font-style: italic;
  margin-top: 10px;
  text-align: center;
  font-weight: 500;
}

/* Premium Image Viewer Overlay */
.image-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px); /* Apple glass blur */
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999;

  /* Animation defaults */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.image-viewer.active {
  opacity: 1;
  pointer-events: auto;
}

.image-viewer img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);

  /* Pop-in animation */
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-viewer.active img {
  transform: scale(1);
}
/* --- Premium Navigation Arrows --- */
.scroll-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.scroll-btn {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(124, 71, 159, 0.2);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #7c479f;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  outline: none;
}

.scroll-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(124, 71, 159, 0.15);
  color: #5a3373; /* Slightly darker purple on hover */
}

/* Adds a nice "press" effect when tapped on mobile */
.scroll-btn:active {
  transform: scale(0.95);
}

@media (max-width: 750px) {
  .rn- {
    width: calc(100% - 80px);
    right: 20px;
    left: 20px;
    margin: 5px;
  }
}

.hl-najz-section {
  padding: 12px 10px;
}

.subscribe-title {
  font-size: 1.4rem;
  margin-bottom: 6px;
  font-weight: 600;
}

.highlight {
  color: purple;
}

.hl-desc {
  font-size: 0.88rem;
  color: #000;
  margin-top: 4px;
  line-height: 1.5;
}

.hl-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #000;
}

.hl-list li {
  margin-bottom: 5px;
}

.arabic {
  font-family: "Cairo", sans-serif;
  color: purple;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .subscribe-title {
    font-size: 1.2rem;
  }

  .hl-desc {
    font-size: 0.82rem;
  }

  .hl-list {
    font-size: 0.78rem;
  }
}

.hln-area {
  padding: 30px 15px;
  background: #f9f9f9;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  max-width: 900px;
  margin: 0 auto 40px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hln-area:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.hl-img {
  max-width: 110px;
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid #6f42c1;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.hl-img:hover {
  transform: scale(1.05);
  border-color: #e83e8c;
}

.hln-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.highlight {
  color: #6f42c1;
}

.hl-desc {
  font-size: 0.95rem;
  color: #555;
  margin-top: 5px;
  line-height: 1.6;
}

.hl-list {
  list-style: none;
  padding: 0;
  margin-top: 12px;
}

.hl-list li {
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: #333;
}

.hl-list li .arabic {
  font-family: "Cairo", sans-serif;
  color: #6f42c1;
  margin-left: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hl-najz-section {
    text-align: center;
  }

  .hln-title {
    font-size: 1.4rem;
  }

  .hl-desc {
    font-size: 0.9rem;
  }

  .hl-list li {
    font-size: 0.85rem;
  }
}

/* --- Swiper Container --- */
.serviceSwiper {
  padding-top: 15px !important;
  padding-bottom: 70px !important;
  /* NOTE: was `overflow: visible !important`, which breaks Swiper's own
     clipping/transform math. On mobile, dragging a slide made the browser
     try to lay out & hit-test off-screen slides every touch frame, which
     is what caused the freeze/reload when swiping. `hidden` is what
     Swiper expects; slides still get enough breathing room via padding. */
  overflow: hidden;
  /* Prevent the swiper itself from creating horizontal scroll */
  max-width: 100%;
  touch-action: pan-y;
}

/* Equal Height Logic */
.serviceSwiper .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

.serviceSwiper .swiper-slide {
  height: auto !important;
  display: flex !important;
  /* Ensure the slide doesn't exceed screen width on mobile */
  width: 100%;
}

.service-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, var(--bg-color), #f9f7fc);
  border-radius: 20px;
  padding: 3rem 2rem;
  transition:
    all 0.4s ease,
    background 0.5s ease;
  box-sizing: border-box;
  position: relative; /* for left border accent and shimmer */
  border-left: 6px solid #9168ae; /* professional left border accent */
}

/* Left border hover effect */
.service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 35px rgba(145, 104, 174, 0.35);
  background-color: #9168ae !important;
  border-left-color: #fff; /* accent change on hover */
}

/* Icon styling */
.service-item i {
  display: inline-block;
  padding: 15px;
  border-radius: 50%;
  background: rgba(145, 104, 174, 0.1);
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}

.service-item:hover i {
  transform: rotate(12deg) scale(1.2);
  background: rgba(145, 104, 174, 0.3);
  color: #fff !important;
}

/* Text styling and hover effects */
.service-item h5,
.service-item p,
.service-item p.fw-bold {
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.service-item:hover h5,
.service-item:hover p,
.service-item:hover p.fw-bold {
  color: #fff !important;
}

/* Footer text animation */
.service-item p.fw-bold {
  font-size: 0.9rem;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.service-item:hover p.fw-bold {
  transform: translateY(-2px);
}

/* Shimmer highlight effect */
.service-item::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.1)
  );
  transform: rotate(25deg) translateX(-100%);
  transition: transform 0.7s ease;
  pointer-events: none;
  border-radius: inherit;
}

.service-item:hover::after {
  transform: rotate(25deg) translateX(100%);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
  .service-item {
    padding: 2rem 1.5rem;
    margin: 0 10px;
  }

  #services .service-item h5 {
    font-size: 1rem;
  }

  #services .service-item p {
    font-size: 0.85rem;
  }

  #services .service-item i {
    font-size: 2rem;
    margin-bottom: 0.8rem;
  }

  .serviceSwiper {
    padding-bottom: 50px !important;
  }
}

/* --- Swiper Pagination & Arrows --- */
.serviceSwiper .swiper-pagination {
  bottom: 10px !important;
}

.serviceSwiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #d1d1d1;
  opacity: 1;
  margin: 0 6px !important;
  transition: all 0.3s ease;
}

.serviceSwiper .swiper-pagination-bullet-active {
  background: #9168ae !important;
  width: 35px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(145, 104, 174, 0.5);
}

.serviceSwiper .swiper-button-next,
.serviceSwiper .swiper-button-prev {
  color: #9168ae;
  transform: scale(0.7);
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.serviceSwiper .swiper-button-next:hover,
.serviceSwiper .swiper-button-prev:hover {
  transform: scale(1);
  color: #fff !important;
}

/* All Animitions */

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

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

@keyframes flicker {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes pulse-crown {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px #d4af37);
  }

  50% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px #d4af37);
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px #d4af37);
  }
}
@keyframes gold-shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}
@keyframes rn-load {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*  */

/* 1. Define the Global WOW Base (if not using animate.css) whatsapp */
.wow {
  visibility: hidden; /* Hide until scroll/trigger */
}

/* 2. Modern FadeUp with a subtle 'Scale' */
.fadeInUp {
  animation-name: customFadeUp;
  visibility: visible !important;
}

@keyframes customFadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 3. Floating Animation for the Hero Image */
/* Add this class to your hero image div in the CSS */
.header-hero-image img {
  animation: smoothFloat 4s ease-in-out infinite;
}

@keyframes smoothFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* 4. Interactive Glow for the Resume Button */
.main-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  z-index: 1;
}

.main-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 20px rgba(145, 104, 174, 0.4);
  letter-spacing: 1px;
}

/* 5. Morocco Diamond Hover Link */
.morocco-diamond {
  transition: color 0.3s ease;
  display: inline-block;
}

.morocco-diamond:hover {
  color: #9168ae !important;
  transform: skewX(-10deg); /* Modern technical "tilt" */
}

/* Sponsor Logo Styling */
.sponsor-logo {
  max-width: 250px; /* Limits size on desktop */
  height: auto;
  border-radius: 10px; /* Smoother look */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.sponsor-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3); /* Subtle gold glow */
}

/* Mobile Responsiveness btn */
@media (max-width: 767px) {
  .footer-about,
  .footer-contact {
    text-align: center; /* Centers text on mobile */
  }

  .footer-about .social {
    justify-content: center; /* Centers social icons */
    display: flex;
  }

  .sponsor-logo {
    max-width: 200px; /* Slightly smaller on mobile */
    margin: 0 auto;
    display: block;
  }

  .footer-contact .contact {
    list-style: none;
    padding: 0;
  }
}

/* --- Base Toast Container --- */
#event-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 380px;
  background: var(--rn-bg, #fff);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  z-index: 9999999;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  opacity: 0;
  transform: translateX(120%) skewX(-5deg);
  pointer-events: none;
  display: block !important;
}

#event-toast.rn-show {
  opacity: 1;
  transform: translateX(0) skewX(0);
  pointer-events: auto;
}

.rn-hidden {
  display: none !important;
}

/* --- Theme Colors --- */
.rn-islamic {
  --rn-accent: #7c479f;
  --rn-bg: #f5edfb;
}
.rn-morocco {
  --rn-accent: #6f42c1;
  --rn-bg: #f3ecff;
}
.rn-birthday {
  --rn-accent: #9168ae;
  --rn-bg: #f9f2ff;
}

/* --- Elements --- */
.rn-content {
  position: relative;
  padding: 25px;
  z-index: 1;
  text-align: right;
}
.rn-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-direction: row-reverse;
}
.rn-icon {
  font-size: 24px;
}
.rn-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--rn-accent);
}
.rn-ayah {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 5px 0;
  font-weight: 600;
  color: var(--rn-accent);
}
.rn-subtext {
  margin: 0;
  font-size: 0.8rem;
  color: #636e72;
  opacity: 0.9;
}

.rn-close {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  color: #a4b0be;
  transition: 0.3s;
  z-index: 2;
}

.rn-progress {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 4px;
  width: 0%;
  background: var(--rn-accent);
  transform-origin: right;
}

/* --- Mobile Specific Improvements --- */
@media (max-width: 576px) {
  #event-toast {
    width: 90%;
    right: 5%;
    left: 5%;
    bottom: 20px;
    transform: translateY(150%); /* Slide from bottom on mobile */
  }

  #event-toast.rn-show {
    transform: translateY(0);
  }

  .rn-content {
    padding: 18px;
  }
  .rn-title {
    font-size: 1.1rem;
  }
  .rn-ayah {
    font-size: 0.95rem;
  }
}

/* Purple pagination dots service-item */
.swiper-pagination-bullet {
  background: #6f42c1; /* purple color */
  opacity: 0.6;
  transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
  transform: scale(1.3); /* effect on active */
  opacity: 1;
  box-shadow:
    0 0 5px #6f42c1,
    0 0 10px #6f42c1;
}

/* --- Footer Social Icons --- */
.footer-widget .social {
  display: flex;
  gap: 15px; /* spacing between icons */
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

/* Default: left-aligned on desktop */
.footer-widget .social li {
  display: flex;
  z-index: 100;
}

/* Icon size and hover */
.footer-widget .social li a {
  position: relative;
  z-index: 1000;
}

.footer-widget .social li a i {
  font-size: 1.5rem;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
  color: #f6f2f9;
  z-index: 1000;
}

/* Main footer icon row: keep brand purple in light mode */
.footer-main-social li a i,
.footer-main-social li a,
.footer-widget .footer-main-social li a i,
.footer-widget .footer-main-social li a {
  color: #7c3aed !important;
}

.footer-widget .social li a:hover i {
  transform: scale(1.2);
  color: #6f42c1;
}

/* --- Responsive: Center icons on mobile --- */
@media (max-width: 768px) {
  /* Force the whole block to center */
  .footer-about {
    text-align: center;
  }

  /* Kill UL default offset completely */
  .footer-about .social {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    margin: 0 auto;
    gap: 12px; /* clean spacing instead of weird inline gaps */
  }

  /* Remove inline-block weird spacing */
  .footer-about .social li {
    margin: 0;
    padding: 0;
  }

  /* Normalize anchor + icon centering */
  .footer-about .social li a {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Fix icon baseline shift (THIS is the hidden problem) */
  .footer-about .social li i {
    display: block;
    line-height: 1;
  }
}

/* 1. Kill the visibility of the widget on load */
#bp-web-widget-container,
.bp-widget-widget,
.webchatIframe {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2. The class we will add after 5 seconds to show it */
.show-chatbot {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.5s ease;
}
/* --- NAJZ BRANDED DESIGN SYSTEM 2026 --- */
:root {
  --nj-purple: #7c479f; /* Primary Brand */
  --nj-lavender: #d7d3f3; /* Secondary Accent */
  --nj-black: #000; /* Background Base */
  --nj-glass: #7c479fcf;
  --nj-border: rgba(124, 71, 159, 0.3);
  --nj-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

/* ==========================================
   MOBILE & TABLET: THE 3-STATE NAV ISLAND
   ========================================== */
@media (max-width: 991px) {
  .desktop-nav {
    display: none !important;
  }

  /* PHASE 1: THE CIRCLE (Base State) - UPDATED TO TOP RIGHT */
  .mobile-island {
    position: fixed;
    right: 15px; /* Moved from left to right */
    left: auto; /* Reset left */
    top: 20px; /* Moved from center to top */
    transform: none; /* Removed centering transform */
    width: 55px;
    height: 55px;
    background: var(--nj-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--nj-border);
    border-radius: 50px;
    z-index: 999999;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    overflow: visible;
    padding: 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    touch-action: manipulation;
  }

  /* PHASE 2: THE SKINNY (Icons Only - First Click) */
  .mobile-island.skinny {
    width: 45px;
    height: auto;
    max-height: 90vh;
    border-radius: 30px;
    padding: 15px 0;
    overflow-y: auto;
  }

  /* PHASE 3: THE EXPANDED (Icons + Labels - Second Click) */
  .mobile-island.expanded {
    width: 180px;
    height: auto;
    max-height: 90vh;
    border-radius: 20px;
    padding: 15px 0;
    border-color: var(--nj-purple);
    box-shadow: 0 20px 60px rgba(124, 71, 159, 0.3);
    overflow-y: auto;
  }

  .island-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }

  .island-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(215, 211, 243, 0.45);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.38);
    color: var(--nj-lavender);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
  }

  .island-close-btn:hover {
    border-color: var(--nj-purple);
    color: #ffffff;
  }

  /* --- Logo & Merged Toggle --- */
  .island-logo {
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    animation: visualVibrate 5s infinite ease-in-out;
  }

  .mobile-island.skinny .island-logo,
  .mobile-island.expanded .island-logo {
    animation: none;
    width: 100%;
    height: 50px;
  }

  .island-logo img {
    width: 26px;
    filter: brightness(0) invert(1) !important;
    drop-shadow: 0 0 8px rgba(124, 71, 159, 0.5);
  }

  /* Tiny dots icon merged into the logo circle */
  .merged-toggle-icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 12px;
    color: var(--nj-lavender);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 2px;
  }
  .mobile-island.skinny .merged-toggle-icon,
  .mobile-island.expanded .merged-toggle-icon {
    display: none;
  }

  /* --- Pointing Arrows - UPDATED FOR RIGHT SIDE --- */
  .hint-arrows {
    position: absolute;
    right: 65px; /* Positioned to the left of the circle */
    left: auto; /* Reset left */
    top: 28px; /* Centered to the circle height */
    color: var(--nj-lavender);
    font-size: 20px;
    display: flex;
    gap: -5px;
    opacity: 0;
    animation: pointToToggleRight 5s infinite ease-in-out;
  }

  /* --- The Menu List --- */
  .island-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    margin-top: 10px;
    max-height: calc(90vh - 80px);
    overflow-y: auto;
    padding-right: 5px;
  }

  .mobile-island.skinny .island-menu,
  .mobile-island.expanded .island-menu {
    opacity: 1;
    visibility: visible;
  }

  .nav-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff !important;
    width: 100%;
    transition: 0.3s;
  }

  .mobile-island.skinny .nav-item {
    justify-content: center;
    padding: 8px 0;
  }

  .mobile-island.expanded .nav-item {
    justify-content: flex-start;
    padding: 8px 18px;
  }

  .nav-item i {
    font-size: 22px;
    min-width: 24px;
    transition: transform 0.3s ease;
  }

  /* --- Nav Labels --- */
  .nav-label {
    margin-left: 0;
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    color: var(--nj-lavender);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .mobile-island.expanded .nav-label {
    margin-left: 12px;
    max-width: 100px;
    opacity: 1;
  }

  /* --- Animations --- */
  @keyframes visualVibrate {
    0%,
    85%,
    100% {
      transform: rotate(0deg);
    }
    87% {
      transform: rotate(-10deg);
    }
    89% {
      transform: rotate(10deg);
    }
    91% {
      transform: rotate(-10deg);
    }
    93% {
      transform: rotate(10deg);
    }
  }

  @keyframes pointToToggleRight {
    0%,
    80%,
    100% {
      opacity: 0;
      transform: translateX(10px);
    }
    85%,
    95% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* ==========================================
   DESKTOP: FANCY GLASS HEADER (Scroll-Reactive)
   ========================================== */
@media (min-width: 992px) {
  /* Ensure the mobile island is strictly hidden */
  .mobile-island {
    display: none !important;
  }

  .desktop-nav {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);

    /* INITIAL STATE: Wide & Lavender */
    width: 90%;
    max-width: 1100px;
    background: var(--nj-lavender); /* Your preferred color */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;

    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 15px 45px;
    z-index: 99999;

    /* Smooth transition for every property */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* STICKY STATE: Triggered on Scroll */
  .desktop-nav.sticky {
    top: 15px;
    width: 75%; /* Shrinks width */
    max-width: 900px;
    background: rgba(0, 0, 0, 0.82); /* Darker glass when scrolling */
    border-color: var(--nj-purple);
    padding: 10px 35px; /* Becomes slimmer */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  }

  .d-nav-list {
    display: flex !important;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
    align-items: center;
    transition: gap 0.4s ease;
  }

  /* Shrink gaps between links when sticky */
  .desktop-nav.sticky .d-nav-list {
    gap: 25px;
  }

  .d-nav-link {
    color: #7c479f; /* Keep white for readability on lavender */
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: 0.3s;
    position: relative;
    opacity: 0.9;
  }

  .desktop-nav.sticky .d-nav-link {
    color: #94a3b8; /* Slate gray on the dark sticky background */
  }

  .d-nav-link:hover,
  .d-nav-link.active {
    color: #ffffff !important;
    opacity: 1;
  }

  /* Underline logic */
  .d-nav-link::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 2px;
    background: #ffffff; /* White line for lavender state */
    border-radius: 5px;
    transition: width 0.3s ease;
  }

  /* Purple line for dark sticky state */
  .desktop-nav.sticky .d-nav-link::after {
    background: var(--nj-purple);
    box-shadow: 0 0 8px var(--nj-purple);
  }

  .d-nav-link:hover::after,
  .d-nav-link.active::after {
    width: 100%;
  }
} /* --- Custom Launcher Button --- */
/* ==========================================
   NAJZ "IFRAME ISOLATION" STYLING - FULL UPDATE
   ========================================== */
/* ==========================================
   NAJZ "IFRAME ISOLATION" STYLING - FINAL STABLE
   ========================================== */

#najz-chat-iframe-wrapper {
  position: fixed !important;
  bottom: 90px !important;
  right: 20px !important;
  z-index: 999998 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 60px rgba(124, 71, 159, 0.4) !important;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  background: transparent !important;
  border: 1px solid rgba(124, 71, 159, 0.2) !important;
  backdrop-filter: blur(10px) !important;

  /* FIX: Hidden state must not block scrolling or clicks */
  opacity: 0;
  visibility: hidden; /* Tells the browser to ignore the box layout */
  pointer-events: none !important; /* Allows clicks to pass through to the site */
  transform: translateY(20px) scale(0.95);

  /* Responsive Widths */
  width: 66vw !important;
  height: 50vh !important;
  max-width: 66vw !important;
  max-height: 50vh !important;
}

/* Logic for Laptops and Desktops (40% width) */
@media (min-width: 1024px) {
  #najz-chat-iframe-wrapper {
    width: 40vw !important;
    max-width: 40vw !important;
    right: 30px !important;
  }
}

/* Open State: Visible and fully active */
#najz-chat-iframe-wrapper.nj-chat-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important; /* Re-enables interaction */
}

/* Force the Iframe itself to fill container */
#najz-chat-frame {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}

/* Custom Launcher Button */
.najz-chat-launcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: #7c479f;
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  z-index: 999999;
  box-shadow: 0 10px 30px rgba(124, 71, 159, 0.4);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.najz-chat-launcher:active {
  transform: scale(0.9);
}

/* THE PURPLE HEADER MASK */
.nj-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #7c479f !important;
  z-index: 10;
  pointer-events: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nj-bot-title {
  color: #ffffff !important;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.95;
}

/*  */

/*  */
/* Apply these styles ONLY on Mobile and Tablets */
@media (max-width: 991px) {
  /* 1. Reset Swiper Defaults */
  .najz-swiper-btn::after {
    display: none !important;
  }

  /* 2. Premium Glassmorphic Buttons (Shared by Work & Education) */
  .najz-swiper-btn {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(124, 71, 159, 0.2) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #7c479f !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10;
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
  }

  .najz-swiper-btn:hover {
    background: #7c479f !important;
    color: white !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 8px 20px rgba(124, 71, 159, 0.3);
  }

  .najz-swiper-btn:active {
    transform: translateY(-50%) scale(0.9) !important;
  }

  /* 3. Mobile Positioning */
  .career-section .swiper-button-prev,
  .timeline .swiper-button-prev,
  .swiper-button-prev.najz-swiper-btn {
    left: 10px !important;
  }

  .career-section .swiper-button-next,
  .timeline .swiper-button-next,
  .swiper-button-next.najz-swiper-btn {
    right: 10px !important;
  }

  /* 4. Elegant Pagination Dots (Apple Style) */
  .timeline .swiper-pagination-bullet,
  .career-section .swiper-pagination-bullet {
    background: #d1d1d6;
    opacity: 1;
  }

  .timeline .swiper-pagination-bullet-active,
  .career-section .swiper-pagination-bullet-active {
    background: #7c479f !important;
    width: 20px !important;
    border-radius: 5px !important;
    transition: width 0.3s ease;
  }

  /* Fix to ensure pagination doesn't overlap text */
  .swiper-pagination {
    bottom: 0px !important;
  }
}

/* 5. Desktop Safety Net: Hide the custom buttons if they exist in HTML but aren't needed */
@media (min-width: 992px) {
  .najz-swiper-btn {
    display: none !important;
  }
}

/* projects */
/* --- NZ-V4 FINAL MASTER (CENTERED & REFINED) --- */
#nz-v4-wrapper {
  --nz-accent: #6f42c1;
  --nz-dark: #1d1d1f;
  --nz-gray: #86868b;
  --nz-bg: #fbfbfd;
  background-color: var(--nz-bg) !important;
  padding: 80px 0 !important;
  text-align: center; /* Center all inline content */
}

.nz-v4-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- HEADER CENTERING --- */
.nz-v4-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

.nz-v4-badge-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* BIG TRUST BADGE */
.nz-v4-badge-big {
  background: #fff;
  border: 2.5px solid var(--nz-accent);
  padding: 12px 28px;
  border-radius: 60px;
  font-size: 16px;
  font-weight: 800;
  color: var(--nz-accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 25px rgba(111, 66, 193, 0.12);
}

.nz-google-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  display: inline-block;
}

.nz-v4-title {
  font-size: 24px !important;
  font-weight: 800;
  color: var(--nz-dark);
  margin: 10px 0;
  letter-spacing: -1.5px;
}

/* --- WEBSITE LOGO CARDS --- */
.nz-v4-logo-card {
  height: 90px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.nz-v4-logo-card img {
  max-height: 40px !important;
  max-width: 70% !important;
  width: auto;
  height: auto;
  object-fit: contain;
}
.nz-v4-logo-card:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* --- SELECT BOX (BORDER RADIUS FIX) --- */
.nz-v4-filter-ui {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

.nz-v4-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #d2d2d7;
  border-radius: 20px; /* Applied to wrapper */
  padding: 10px 20px;
  gap: 10px;
  transition: 0.2s;
}

#nz-v4-repo-sort {
  border: none !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--nz-dark) !important;
  outline: none !important;
  cursor: pointer !important;
  border-radius: 15px !important; /* Forces internal radius on some systems */
}

#nz-v4-repo-sort:focus-visible {
  outline: 3px solid #9168ae !important;
  outline-offset: 2px !important;
}

#nz-v4-repo-sort option {
  border-radius: 15px !important;
  padding: 10px;
  background: #fff;
  color: var(--nz-dark);
}

/* --- NAVIGATION ARROWS --- */
.nz-v4-slider-rel {
  position: relative;
  padding: 0 50px;
}
.nz-v4-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px !important;
  height: 42px !important;
  background: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  z-index: 99;
  cursor: pointer;
  color: var(--nz-dark);
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.nz-v4-prev-c,
.nz-v4-prev-r {
  left: 0 !important;
}
.nz-v4-next-c,
.nz-v4-next-r {
  right: 0 !important;
}

.nz-v4-dots.swiper-pagination {
  position: static !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  width: 100%;
  left: auto !important;
  bottom: auto !important;
}

/* --- REPO CARDS --- */
.nz-v4-repo-card {
  background: #fff;
  border: 1px solid #e5e5e7;
  border-radius: 24px;
  padding: 24px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left; /* Keep text left-aligned inside cards */
}

@media (max-width: 768px) {
  .nz-v4-slider-rel {
    padding: 0 45px;
  }
  .nz-v4-nav {
    width: 36px !important;
    height: 36px !important;
  }
}

/* timeline */
/* ============================================================
   NAJZ V3 MASTER CAREER STYLES (Namespaced) nz-v4-title
   ============================================================ */

/* 1. SECTION WRAPPER */
#najz-v3-career-wrapper {
  --najz-v3-purple: #6f42c1;
  --najz-v3-white: #ffffff;
  --najz-v3-gray: #f5f5f7;
  --najz-v3-text: #1d1d1f;
  --najz-v3-sub: #86868b;
  background-color: #fbfbfd;
  overflow: hidden;
  position: relative;
}

/* 2. SWIPER OVERRIDES (High Priority) */
#NAJZ_V3_EDU,
#NAJZ_V3_WORK {
  width: 100% !important;
  /* was `overflow: visible !important` — same mobile-crash issue as the
     services swiper above. The parent wrapper already clips (line ~3414),
     so switching this to hidden is purely safer with no visual change. */
  overflow: hidden;
  padding-bottom: 50px !important;
  padding-top: 10px !important;
  touch-action: pan-y;
}

#najz-v3-career-wrapper .swiper-slide {
  width: auto !important; /* Essential for multiple cards to show at once */
  height: auto !important;
  display: flex !important;
  justify-content: center;
}

/* 3. EDUCATION CARDS (Beauty Small Cards) */
.najz-v3-edu-card {
  background: var(--najz-v3-white);
  border-radius: 20px;
  padding: 24px;
  width: 310px; /* Small fixed width */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border-left: 6px solid var(--c);
  text-align: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.najz-v3-edu-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.najz-v3-edu-card h5 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--najz-v3-text);
}

.najz-v3-edu-card p {
  font-size: 14px;
  color: var(--najz-v3-sub);
  margin: 0 0 12px 0;
}

.najz-v3-edu-card span {
  font-size: 11px;
  font-weight: 800;
  color: var(--c);
  text-transform: uppercase;
}

/* 4. WORK TIMELINE DESIGN */
.najz-v3-timeline-outer {
  position: relative;
  padding: 0 45px;
}

.najz-v3-timeline-outer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #e5e5e7;
  z-index: 0;
  transform: translateY(-50%);
}

.najz-v3-work-card {
  background: var(--najz-v3-white);
  border-radius: 16px;
  padding: 20px;
  width: 230px;
  border-top: 5px solid var(--c);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 55px;
}

/* Timeline Connection Dot */
.najz-v3-work-card::after {
  content: "";
  position: absolute;
  bottom: -43px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--c);
  border: 4px solid var(--najz-v3-white);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--c);
}

/* 5. NAVIGATION (Mobile & Desktop) */
.najz-v3-nav {
  display: flex !important; /* Force show on mobile */
  color: #1d1d1f !important;
  background: rgba(255, 255, 255, 0.95) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  top: 50% !important;
  z-index: 10 !important;
}

.najz-v3-nav:after {
  font-size: 18px !important;
  font-weight: 900 !important;
}

#najz-v3-edu-prev,
#najz-v3-work-prev {
  left: 5px !important;
}
#najz-v3-edu-next,
#najz-v3-work-next {
  right: 5px !important;
}

/* 6. PAGINATION DOTS */
.swiper-pagination-bullet {
  background: #d2d2d7 !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background: var(--najz-v3-purple) !important;
  width: 18px !important;
  border-radius: 4px !important;
}

/* 7. RESPONSIVE TWEAKS */
@media (max-width: 768px) {
  .najz-v3-outer,
  .najz-v3-timeline-outer {
    padding: 0 15px !important;
  }

  .najz-v3-nav {
    width: 36px !important;
    height: 36px !important;
  }

  .najz-v3-nav:after {
    font-size: 14px !important;
  }

  .najz-v3-edu-card {
    width: 270px;
  }
  .najz-v3-work-card {
    width: 190px;
  }
}

/* ===== Hero "Services" CTA — designed to pull the eye and get clicked =====
   Uses transform/opacity (GPU-compositable) instead of animating box-shadow,
   which forces a full repaint every frame and was a major contributor to
   the mobile jank/slowdowns.

   Structure: an outer wrapper (overflow: visible) holds the pulsing glow
   ring, which is allowed to bulge outward. The button itself clips its own
   shimmer sweep to the pill shape (overflow: hidden), so the ring and the
   shimmer no longer fight over the same overflow setting — that mismatch is
   what caused the glow to spill out in a rectangular shape before. */

.cta-services-wrap {
  position: relative;
  display: inline-flex;
  isolation: isolate;
}

/* Pulsing glow ring — sits on the wrapper, outside the button's own clip */
.cta-services-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(111, 66, 193, 0.55);
  animation: ctaPulseRing 2.6s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}

.cta-services {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 14px 34px !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 999px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 18px -4px rgba(111, 66, 193, 0.4);
  z-index: 1;
}

/* Shimmer sweep that loops across the button — clipped to the pill by the
   button's own overflow: hidden above, so it can never spill past the
   rounded corners. */
.cta-services::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-20deg) translateZ(0);
  animation: ctaShimmer 3.2s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

/* Keep label + icon above the shimmer layer */
.cta-services > * {
  position: relative;
  z-index: 2;
}

.cta-services .cta-arrow {
  display: inline-flex;
  transition: transform 0.3s ease;
}

.cta-services:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px -6px rgba(111, 66, 193, 0.55);
}

.cta-services:hover .cta-arrow {
  transform: translateX(6px);
}

.cta-services:active {
  transform: translateY(-1px) scale(0.99);
}

@keyframes ctaShimmer {
  0% {
    left: -60%;
  }
  55% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}

@keyframes ctaPulseRing {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-services::before,
  .cta-services-wrap::after {
    animation: none;
    display: none;
  }
}

/* Cheaper on small/low-power screens: drop the shimmer sweep entirely */
@media (max-width: 576px) {
  .cta-services::before {
    display: block;
    width: 34%;
    animation: ctaShimmer 4.2s linear infinite;
  }
}

/* ===== Cookie consent — small, non-blocking corner card (not a modal) ===== */
.cookie-bar {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 14px 40px 14px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  animation: cookieBarIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-bar.hide {
  animation: cookieBarOut 0.3s ease forwards;
}

@keyframes cookieBarIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cookieBarOut {
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

.cookie-bar-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
  font-size: 15px;
}

.cookie-bar-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #444;
  flex: 1;
}

.cookie-bar-text a {
  color: #6f42c1;
  font-weight: 600;
  text-decoration: underline;
}

.cookie-bar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.cookie-bar-btn {
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.2s ease;
}

.cookie-bar-btn.solid {
  background: #6f42c1;
  color: #fff;
}

.cookie-bar-btn.solid:hover {
  background: #5a34a0;
  transform: translateY(-1px);
}

.cookie-bar-btn.ghost {
  background: transparent;
  color: #666;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.cookie-bar-btn.ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}

.cookie-bar-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #999;
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-bar-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}

@media (max-width: 480px) {
  .cookie-bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    flex-wrap: wrap;
  }

  .cookie-bar-actions {
    flex-direction: row;
    width: 100%;
  }

  .cookie-bar-btn {
    flex: 1;
  }
}

html.dark .cookie-bar {
  background: rgba(20, 20, 24, 0.96);
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark .cookie-bar-text {
  color: #ccc;
}

.image-viewer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.image-viewer-close:hover {
  background: rgba(255, 255, 255, 0.28);
}