/*----------------------------------------------------------------------------------- 

Template Name: Xeno - Multipurpose Startup Agency PHP Template

Description: Xeno is a sleek and modern HTML template designed specifically for startups, tech companies, SaaS platforms, digital agencies, and entrepreneurs. Built with Bootstrap 5, GSAP animations, and clean semantic code, Zeno is your perfect front-end foundation for building stunning, high-converting websites with ease. 

Version: 1.0 

--------------------
CSS Index
---------------------

# Default CSS
# Hero Section CSS
# About Section CSS
# Service Section CSS
# Process Section CSS
# Project Section CSS
# Choose Section CSS
# Testimonial Section CSS
# Faqs Section CSS
# CTA Section CSS
# Blog Section CSS

------------------------------------------------------*/
/*======= Default CSS =======*/
:root {
  --primary-color: #34D1B3;
  --primary-black-color: #0F2B26;
  --gray-dark: #E6F9F5;
}

.gray-bg {
  background-color: var(--gray-dark);
}

.theme-btn.style-one {
  color: var(--heading-color);
}

.theme-btn.style-two:hover {
  color: var(--white-color) !important;
}

@media (max-width: 767.98px) {
  .section-title h2 {
    font-size: 30px;
    line-height: 40px;
  }
}

/*====== Start Hero Section ======*/
.xeno-hero-wa {
  padding: 200px 0 150px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 1199.98px) {
  .xeno-hero-wa {
    padding: 150px 0 100px;
  }
}

.xeno-hero-wa .shape {
  position: absolute;
  z-index: -1;
}

.xeno-hero-wa .shape.shape-one {
  top: 40%;
  left: 10%;
}

.xeno-hero-wa .shape.curve-shape {
  top: 0;
  right: 7%;
}

.xeno-hero-wa .hero-content {
  margin-bottom: 100px;
}

.xeno-hero-wa .hero-content h1 {
  margin-bottom: 50px;
  font-size: 65px;
  line-height: 1.2;
  max-width: 1033px;
  text-transform: uppercase;
  font-weight: 800;
}

@media screen and (max-width: 1199.98px) {
  .xeno-hero-wa .hero-content h1 {
    font-size: 55px;
  }
}

@media screen and (max-width: 991.98px) {
  .xeno-hero-wa .hero-content h1 {
    font-size: 45px;
  }
}

@media (max-width: 767.98px) {
  .xeno-hero-wa .hero-content h1 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 40px;
  }
}

@media (max-width: 575.98px) {
  .xeno-hero-wa .hero-content h1 {
    font-size: 32px;
    line-height: 1.3;
  }
}

.xeno-hero-wa .hero-content .text-box {
  max-width: 630px;
  margin-left: auto;
}

.xeno-hero-wa .hero-content .text-box p {
  margin-bottom: 40px;
}

/*====== End Hero Section ======*/
/*====== Start About Section ======*/
.xeno-about-wa {
  position: relative;
  z-index: 1;
}

.xeno-about-wa .xeno-content-box {
  max-width: 520px;
  padding-left: 80px;
}

@media screen and (max-width: 991.98px) {
  .xeno-about-wa .xeno-content-box {
    padding-left: 0;
  }
}

.xeno-about-wa .xeno-line-wrap {
  bottom: 20%;
  left: 0;
}

@media screen and (max-width: 1199.98px) {
  .xeno-about-wa .xeno-line-wrap {
    max-width: 450px;
  }
}

@media screen and (max-width: 991.98px) {
  .xeno-about-wa .xeno-line-wrap {
    bottom: 0;
  }
}

.xeno-about-wa .xeno-line-wrap span {
  background-color: var(--primary-black-color);
}

.xeno-counter-item {
  border-bottom: 1px solid rgba(25, 25, 25, 0.07);
}

.xeno-counter-item .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: 30px;
}

.xeno-counter-item .content h2 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-size: 80px;
}

.xeno-line-wrap {
  position: absolute;
  max-width: 610px;
  width: 100%;
  z-index: -1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}

.xeno-line-wrap span.line-shape {
  width: 100%;
  height: 1px;
}

/*====== End About Section ======*/
/*====== Start Service Section ======*/
.wa-service-list {
  overflow: hidden;
  border-bottom: 1px solid var(--heading-color);
}

.xeno-service-item {
  background-color: var(--gray-dark);
  border-bottom: 1px solid var(--heading-color);
}

.xeno-service-item:first-child {
  border-top: 1px solid var(--heading-color);
}

.xeno-service-item .service-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 1199.98px) {
  .xeno-service-item .service-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media (max-width: 767.98px) {
  .xeno-service-item .service-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.xeno-service-item .service-header .number {
  width: 20%;
  -ms-flex-item-align: end;
  align-self: flex-end;
  font-size: 30px;
  font-weight: 300;
  color: var(--heading-color);
}

@media (max-width: 767.98px) {
  .xeno-service-item .service-header .number {
    width: 100%;
    margin-bottom: 30px;
  }
}

.xeno-service-item .service-header .title {
  font-size: 100px;
  font-weight: 700;
  font-family: var(--heading-font);
  text-transform: uppercase;
  color: var(--heading-color);
  width: 60%;
  line-height: 1;
}

@media screen and (max-width: 1199.98px) {
  .xeno-service-item .service-header .title {
    font-size: 40px;
  }
}

@media (max-width: 767.98px) {
  .xeno-service-item .service-header .title {
    font-size: 30px;
    width: 100%;
  }
}

.xeno-service-item .service-header .button {
  text-align: right;
  margin-left: auto;
}

.xeno-service-item .service-header .button a {
  color: var(--heading-color);
}

@media (max-width: 767.98px) {
  .xeno-service-item .service-header .button {
    width: 100%;
    text-align: left;
  }
}

.xeno-service-item .service-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 30px 0;
  background-color: #E6F9F5;
}

@media screen and (max-width: 1199.98px) {
  .xeno-service-item .service-content {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media (max-width: 767.98px) {
  .xeno-service-item .service-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.xeno-service-item .service-content .content {
  padding-left: 20%;
  max-width: 710px;
}

.xeno-service-item .service-content .content p {
  margin-bottom: 25px;
}

.xeno-service-item .service-content .content ul.check-list li {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.xeno-service-item .service-content .content ul.check-list li:not(:last-child) {
  margin-bottom: 10px;
}

.xeno-service-item .service-content .content ul.check-list li:before {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #585858;
  margin-right: 10px;
}

@media screen and (max-width: 1199.98px) {
  .xeno-service-item .service-content .content {
    padding-left: 0;
    max-width: 380px;
    padding-right: 60px;
  }
}

@media (max-width: 767.98px) {
  .xeno-service-item .service-content .content {
    padding-left: 0;
    margin-bottom: 30px;
  }
}

.xeno-service-item .service-content .thumbnail {
  margin-left: auto;
}

@media (max-width: 767.98px) {
  .xeno-service-item:first-child {
    padding-top: 30px;
  }

  .xeno-service-item:not(:last-child) {
    margin-bottom: 30px;
  }
}

/*====== End Service Section ======*/
/*====== Start Process Section ======*/
.xeno-process-wa .xeno-content-box {
  padding-right: 50px;
}

@media screen and (max-width: 1199.98px) {
  .xeno-process-wa .xeno-content-box {
    padding-right: 0;
  }
}

.xeno-process-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid rgba(25, 25, 25, 0.07);
}

@media screen and (max-width: 991.98px) {
  .xeno-process-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.xeno-process-item:hover .step-box h2 {
  color: var(--heading-color);
}

.xeno-process-item .step-box {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 220px;
  padding: 60px 60px;
  border-right: 1px solid rgba(25, 25, 25, 0.07);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (max-width: 991.98px) {
  .xeno-process-item .step-box {
    width: 100%;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-right: none;
    border-bottom: 1px solid rgba(25, 25, 25, 0.07);
  }
}

.xeno-process-item .step-box span {
  position: absolute;
  top: 15px;
  left: 20px;
  font-weight: 600;
  color: var(--heading-color);
  text-transform: uppercase;
}

.xeno-process-item .step-box h2 {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--primary-black-color);
  color: transparent;
  font-family: var(--heading-font);
  font-size: 85px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.xeno-process-item .content {
  padding: 40px 60px 30px;
}

.xeno-process-item .content h4 {
  font-size: 22px;
  margin-bottom: 12px;
}

/*====== End Process Section ======*/
/*====== Start Projects Section ======*/
.xeno-projects-wa {
  background-color: #0F2B26;
}

.xeno-project-item {
  background-color: #1A3C36;
  padding: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width: 991.98px) {
  .xeno-project-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

@media (max-width: 767.98px) {
  .xeno-project-item {
    padding: 20px 15px;
  }
}

.xeno-project-item .content {
  padding: 50px 70px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

@media screen and (max-width: 1199.98px) {
  .xeno-project-item .content {
    padding: 50px 50px;
  }
}

@media screen and (max-width: 991.98px) {
  .xeno-project-item .content {
    padding: 20px 10px;
  }
}

.xeno-project-item .content .post-categories a {
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  line-height: 1;
  color: var(--white-color);
  margin-bottom: 15px;
  margin-right: 5px;
}

.xeno-project-item .content h3 {
  color: var(--white-color);
}

.xeno-project-item .content p {
  padding-top: 150px;
  max-width: 400px;
  line-height: 26px;
  color: var(--white-color);
  margin-bottom: 25px;
}

@media screen and (max-width: 991.98px) {
  .xeno-project-item .content p {
    padding-top: 30px;
  }
}

.xeno-project-item .thumbnail {
  text-align: right;
}

/*====== End Projects Section ======*/
/*====== Start Choose Section ======*/
.xeno-choose-wa {
  position: relative;
  z-index: 1;
}

.xeno-choose-wa .xeno-image-box {
  margin-left: -50%;
}

@media screen and (max-width: 1199.98px) {
  .xeno-choose-wa .xeno-image-box {
    margin-left: 0;
  }
}

.xeno-choose-wa .xeno-choose-list {
  padding-left: 100px;
}

@media screen and (max-width: 1199.98px) {
  .xeno-choose-wa .xeno-choose-list {
    padding-left: 0;
    margin-top: 50px;
  }
}

.xeno-choose-wa .xeno-line-wrap {
  position: relative;
  max-width: 100%;
}

.xeno-choose-wa .xeno-line-wrap span {
  background-color: var(--primary-black-color);
}

.xeno-choose-wa .xeno-line-wrap span:first-child {
  height: 10px;
}

.xeno-iconic-box {
  padding: 40px 50px;
  border: 1px solid rgba(25, 25, 25, 0.1);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.xeno-iconic-box:hover {
  background-color: var(--primary-color);
}

.xeno-iconic-box:hover .content p {
  color: var(--heading-color);
}

.xeno-iconic-box .icon {
  font-size: 55px;
  color: var(--heading-color);
  margin-bottom: 30px;
}

.xeno-iconic-box .content h4 {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(25, 25, 25, 0.1);
}

/*====== End Choose Section ======*/
/*====== Start Team Section ======*/
.xeno-team-wa .xeno-counter-item {
  margin-left: auto;
  max-width: 520px;
}

.xeno-team-item:hover .thumbnail .hover-content {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}

.xeno-team-item .thumbnail {
  position: relative;
  overflow: hidden;
}

.xeno-team-item .thumbnail img {
  width: 100%;
}

.xeno-team-item .thumbnail .hover-content {
  position: absolute;
  bottom: 0;
  left: 0px;
  padding: 30px 40px;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  -webkit-transition: all 0.33s;
  transition: all 0.33s;
}

.xeno-team-item .thumbnail .social-link {
  background-color: var(--primary-color);
  gap: 0 25px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 6px 25px;
  border-radius: 7px;
}

.xeno-team-item .thumbnail .social-link a {
  color: var(--heading-color);
}

.xeno-team-item .content {
  padding-top: 15px;
}

.xeno-team-item .content h5 {
  margin-bottom: 10px;
}

/*====== End Team Section ======*/
/*====== Start Testimonial Section ======*/
.cta-full-modern {
  background: linear-gradient(135deg, #00A88E 0%, #00876F 100%) !important;
  padding: 60px 40px;
  border-radius: 20px;
  text-align: center;
  color: white;
  margin-bottom: 50px;
}

.cta-full-modern h2 {
  color: white;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 15px;
}

.cta-full-modern p {
  color: #E6F9F5;
  font-size: 18px;
  margin-bottom: 30px;
}

.xeno-testimonial-wa {
  background-color: var(--secondary-color);
  position: relative;
  z-index: 1;
}

.xeno-testimonial-wa .shape {
  position: absolute;
  z-index: -1;
}

.xeno-testimonial-wa .shape.blur-shape {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background-color: var(--primary-color);
  -webkit-filter: blur(200px);
  filter: blur(200px);
}

.xeno-testimonial-wa .line-bg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.xeno-testimonial-item {
  text-align: center;
}

.xeno-testimonial-item .testimonial-content .icon {
  margin-bottom: 40px;
}

.xeno-testimonial-item .testimonial-content .icon img {
  display: inline-block;
}

.xeno-testimonial-item .testimonial-content .author-thumb-item .author-thumb {
  margin-bottom: 20px;
}

.xeno-testimonial-item .testimonial-content .author-thumb-item .author-thumb img {
  display: inline-block;
}

.xeno-testimonial-item .testimonial-content .author-thumb-item .author-info h5 {
  color: var(--white-color);
  margin-bottom: 15px;
}

.xeno-testimonial-item .testimonial-content .author-thumb-item .author-info span.position {
  color: var(--white-color);
}

.xeno-testimonial-item .testimonial-content p {
  line-height: 56px;
  font: 600 48px var(--heading-font);
  color: var(--white-color);
  margin-bottom: 40px;
}

@media screen and (max-width: 1199.98px) {
  .xeno-testimonial-item .testimonial-content p {
    font-size: 34px;
    line-height: 45px;
  }
}

@media (max-width: 767.98px) {
  .xeno-testimonial-item .testimonial-content p {
    font-size: 24px;
    line-height: 35px;
  }
}

/*====== End Testimonial Section ======*/
/*====== Start Faqs Section ======*/
.xeno-accordion-item {
  padding: 20px 30px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.xeno-accordion-item .accordion-header .accordion-title {
  line-height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

.xeno-accordion-item .accordion-header .accordion-title span.sn {
  margin-right: 8px;
}

.xeno-accordion-item .accordion-header .accordion-title:after {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  content: "\f061";
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  margin-left: auto;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.xeno-accordion-item .accordion-header .accordion-title[aria-expanded=true]:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.xeno-accordion-item .accordion-content p {
  padding-top: 15px;
}

/*====== End Faqs Section ======*/
/*====== Start CTA Section ======*/
.xeno-cta-wa .xeno-cta-wrapper {
  position: relative;
  padding: 90px 0 100px;
  background-color: #FFDB52;
  z-index: 1;
  overflow: hidden;
}

.xeno-cta-wa .xeno-cta-wrapper .xeno-line-wrap {
  top: 10px;
  left: 0;
}

.xeno-cta-wa .xeno-cta-wrapper .xeno-line-wrap span {
  background-color: rgba(25, 25, 25, 0.1);
}

.xeno-cta-wa .xeno-cta-wrapper .shape {
  position: absolute;
  z-index: -1;
}

@media (max-width: 767.98px) {
  .xeno-cta-wa .xeno-cta-wrapper .shape {
    display: none;
  }
}

.xeno-cta-wa .xeno-cta-wrapper .shape.shape-one {
  left: 85px;
  bottom: 40px;
}

.xeno-cta-wa .xeno-cta-wrapper .shape.shape-two {
  top: 50px;
  right: 60px;
}

.xeno-cta-wa .xeno-cta-wrapper .big-text {
  position: absolute;
  right: -30px;
  bottom: -25px;
}

.xeno-cta-wa .xeno-cta-wrapper .big-text h2 {
  font-size: 200px;
  line-height: 190px;
  color: var(--heading-color);
  opacity: 0.05;
}

@media (max-width: 767.98px) {
  .xeno-cta-wa .xeno-cta-wrapper .big-text h2 {
    font-size: 100px;
  }
}

@media (max-width: 767.98px) {
  .xeno-cta-wa .xeno-content-box {
    padding: 0 15px;
  }
}

.xeno-cta-wa .xeno-content-box h2 {
  font-size: 55px;
  line-height: 65px;
  margin-bottom: 25px;
}

@media screen and (max-width: 1199.98px) {
  .xeno-cta-wa .xeno-content-box h2 {
    font-size: 42px;
    line-height: 55px;
  }
}

@media (max-width: 767.98px) {
  .xeno-cta-wa .xeno-content-box h2 {
    font-size: 24px;
    line-height: 35px;
  }
}

.xeno-cta-wa .xeno-content-box p {
  font-size: 24px;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 35px;
}

@media (max-width: 767.98px) {
  .xeno-cta-wa .xeno-content-box p {
    font-size: 18px;
  }
}

.xeno-cta-wa .xeno-content-box .theme-btn.style-two {
  border-color: 1px solid var(--heading-color);
  color: var(--heading-color);
}

/*====== End CTA Section ======*/
/*====== Start Blogs Section ======*/
.xeno-blog-post {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 767.98px) {
  .xeno-blog-post {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.xeno-blog-post .thumbnail {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 300px;
  margin-right: 50px;
}

@media (max-width: 767.98px) {
  .xeno-blog-post .thumbnail {
    margin-bottom: 50px;
    margin-right: 0;
    max-width: 100%;
  }

  .xeno-blog-post .thumbnail img {
    width: 100%;
  }
}

.xeno-blog-post .content .post-meta {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.xeno-blog-post .content .post-meta span:not(:last-child):after {
  display: inline-block;
  content: "";
  margin-left: 20px;
  margin-right: 15px;
  vertical-align: middle;
  width: 50px;
  height: 1px;
  background-color: var(--border-color);
}

@media (max-width: 1650px) {
  .xeno-blog-post .content .post-meta span:not(:last-child):after {
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media (max-width: 1399.98px) {
  .xeno-blog-post .content .post-meta span:not(:last-child):after {
    margin-left: 10px;
    margin-right: 5px;
  }
}

.xeno-blog-post .content h3.title {
  font-size: 24px;
  line-height: 35px;
  margin-bottom: 15px;
}

@media (max-width: 1650px) {
  .xeno-blog-post .content h3.title {
    font-size: 22px;
  }
}

.xeno-blog-post .content .read-more {
  color: var(--heading-color);
}

/*====== End Blogs Section ======*/
/*====== End Blog Section ======*/

/* ====== Custom Service Card Improvements ====== */
.service-card.style-modern {
  background: #ffffff;
  border-radius: 12px;
  padding: 40px 30px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-card.style-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15);
}

.service-card.style-modern .icon-box {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 12px;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.service-card.style-modern:hover .icon-box {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
}

.service-card.style-modern .icon-box i {
  font-size: 32px;
  color: #ffffff;
}

.service-card.style-modern h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #1e293b;
}

.service-card.style-modern h3 a {
  color: #1e293b;
  transition: color 0.3s ease;
}

.service-card.style-modern:hover h3 a {
  color: #6366f1;
}

.service-card.style-modern p {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.service-card.style-modern .read-more.style-one {
  color: #6366f1;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.service-card.style-modern .read-more.style-one:hover {
  gap: 12px;
  color: #4f46e5;
}

.service-card.style-modern .read-more.style-one i {
  transition: transform 0.3s ease;
}

.service-card.style-modern:hover .read-more.style-one i {
  transform: translateX(4px);
}

/* Gray background improvement */
.xeno-service-wa.gray-bg {
  background: linear-gradient(to bottom, #f8fafc 0%, #f1f5f9 100%);
}

/* Icon spacing fix for service buttons */
.xeno-service-item .service-header .button .read-more {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  /* Reverses order so text comes first if icon is before */
  gap: 8px;
}

.xeno-service-item .service-header .button .read-more i {
  margin-left: 5px;
}

/* Service Detail Hero with Background Image */
.service-detail-hero {
  position: relative;
  z-index: 1;
  /* background-image: url(../../images/website-agency/service-detail-hero-bg.jpg); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 200px 0 100px;
  overflow: hidden;
}

.service-detail-hero::before {
  content: '';
  display: none !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%);
  z-index: 1;
}

.service-detail-hero .container {
  position: relative;
  z-index: 2;
}

.service-detail-hero .hero-content h1 {
  color: #ffffff;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: none;
}

.service-detail-hero .hero-content p.lead {
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  line-height: 1.6;
}

@media screen and (max-width: 991px) {
  .service-detail-hero {
    padding: 150px 0 80px;
  }

  .service-detail-hero .hero-content h1 {
    font-size: 36px;
  }
}

@media screen and (max-width: 767px) {
  .service-detail-hero {
    padding: 120px 0 60px;
  }

  .service-detail-hero .hero-content h1 {
    font-size: 28px;
  }

  .service-detail-hero .hero-content p.lead {
    font-size: 16px;
  }
}

/* Fix for submenu wrapping */
.header-navigation .main-menu ul>li .sub-menu li a {
  white-space: nowrap !important;
}

/* =========================================
   MEGA MENU STYLES (Duck Design Inspired)
   ========================================= */

.header-navigation .main-menu ul>li .sub-menu.mega-menu-2-col {
  width: 500px;
  /* Wider than standard */
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Override default sub-menu display logic handled by JS/Theme if needed, 
     but usually width and grid is enough if it's already visible on hover */
}

/* Ensure columns don't mess up list styles */
.mega-menu-column {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Styling links inside Mega Menu */
.header-navigation .main-menu ul>li .sub-menu.mega-menu-2-col li a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 15px !important;
  border-radius: 8px;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: all 0.2s ease;
  white-space: nowrap !important;
}

/* Hover Effect */
.header-navigation .main-menu ul>li .sub-menu.mega-menu-2-col li a:hover {
  background: #f8fafc;
  color: #6366f1 !important;
  padding-left: 15px !important;
  /* Prevent movement on hover */
  transform: translateX(5px);
}

/* Outline Icon Styling */
.header-navigation .main-menu ul>li .sub-menu.mega-menu-2-col li a i {
  font-size: 18px;
  color: #94a3b8;
  /* Muted color for outline */
  transition: all 0.2s ease;
  width: 24px;
  text-align: center;
}

/* Icon Hover Color */
.header-navigation .main-menu ul>li .sub-menu.mega-menu-2-col li a:hover i {
  color: #6366f1;
  /* Brand color on hover */
}

/* Adjust mobile view if necessary - keep generic style for mobile */
@media (max-width: 991px) {
  .header-navigation .main-menu ul>li .sub-menu.mega-menu-2-col {
    width: 100%;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* =========================================
   SEO CONTENT & FAQ STYLES
   ========================================= */

/* SEO Text Block */
.seo-content-block {
  padding: 80px 0;
  background: #ffffff;
}

.seo-content-block h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 30px;
  color: #1e293b;
}

.seo-content-block h3 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 15px;
  color: #334155;
}

.seo-content-block p {
  font-size: 18px;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 20px;
}

/* FAQ Accordion Section */
.faq-section {
  padding: 80px 0 120px;
  background: #f8fafc;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

/* Modern HTML5 Details/Summary Accordion */
details.modern-faq {
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

details.modern-faq:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

details.modern-faq[open] {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

summary.faq-question {
  padding: 25px 30px;
  cursor: pointer;
  position: relative;
  list-style: none;
  /* Hide default triangle */
  font-weight: 700;
  font-size: 18px;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
}

summary.faq-question::-webkit-details-marker {
  display: none;
}

/* Custom Icon for Summary */
summary.faq-question::after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: #6366f1;
  transition: transform 0.3s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e7ff;
  border-radius: 50%;
}

details.modern-faq[open] summary.faq-question::after {
  transform: rotate(45deg);
  background: #6366f1;
  color: #ffffff;
}

.faq-answer {
  padding: 0 30px 30px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.7;
  border-top: 1px solid transparent;
  animation: fadeIn 0.4s ease;
}

details.modern-faq[open] .faq-answer {
  border-top: 1px solid #f1f5f9;
  padding-top: 20px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fallback gradient for when images are missing or placeholders */
.service-detail-hero.no-image {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* =========================================
   MODERN SERVICE LANDING LAYOUT (Duck Style)
   ========================================= */

/* Full Width Container */
.service-full-width {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Bento Grid System */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

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

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

@media (max-width: 991px) {

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

/* Modern Card Style */
.modern-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.modern-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.3);
}

.modern-card .icon-large {
  font-size: 48px;
  margin-bottom: 25px;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  transition: all 0.3s ease;
}

.modern-card:hover .icon-large {
  /* 
   REMOVED RAINBOW COLORS (Web 2026 - Monochromatic Style)
   All cards now use the inline styles or default primary color defined in modern-card 
*/
  background: #6366f1;
  color: #ffffff;
  transform: scale(1.1) rotate(-5deg);
}

.modern-card h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #1e293b;
}

.modern-card p {
  color: #64748b;
  font-size: 17px;
  line-height: 1.6;
}

/* Feature Big Text */
.big-feature-text {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Process Steps Horizontal */
.process-horizontal {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 50px;
  position: relative;
}

.process-horizontal::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 50px;
  right: 50px;
  height: 2px;
  background: #e2e8f0;
  z-index: 0;
}

.process-step-item {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  padding: 0 10px;
}

.step-number {
  width: 80px;
  height: 80px;
  background: #ffffff;
  border: 4px solid #f1f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #6366f1;
  margin: 0 auto 25px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.process-step-item:hover .step-number {
  border-color: #6366f1;
  background: #6366f1;
  color: #ffffff;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .process-horizontal {
    flex-direction: column;
  }

  .process-horizontal::before {
    display: none;
  }

  .process-step-item {
    margin-bottom: 40px;
    display: flex;
    text-align: left;
    align-items: center;
    gap: 20px;
  }

  .step-number {
    margin: 0;
    min-width: 60px;
    width: 60px;
    height: 60px;
    font-size: 20px;
  }
}

/* Full Width CTA */
.cta-full-modern {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-radius: 30px;
  padding: 80px 20px;
  text-align: center;
  color: white;
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}

.cta-full-modern h2 {
  color: white;
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 20px;
}

.cta-full-modern p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  max-width: 700px;
  margin: 0 auto 40px;
}

.cta-full-modern .theme-btn {
  background: white;
  color: #6366f1;
  border: none;
  font-size: 18px;
  padding: 18px 40px;
}

.cta-full-modern .theme-btn:hover {
  background: #1e293b;
  color: white;
}