@import url('https://fonts.cdnfonts.com/css/bdo-grotesk');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

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

body {
  font-family: 'BDO Grotesk', Arial, sans-serif;
}

.container {
    max-width: 1300px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.row{
    margin-left: 0px;
    margin-right: 0px;
}

.page-id-27 #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
	  letter-spacing: 0.8px;
    line-height: 20px;
    height: 20px;
    padding: 0px 10px;
    vertical-align: baseline;
    width: auto;
    display: block;
    color: #000;
    text-transform: none;
    text-decoration: none;
    text-align: left;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    border-radius: 0px;
    font-family: inherit;
    font-size: 16px;
    font-weight: normal;
    outline: none;
}
 #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
     letter-spacing: 0.8px;
    line-height: 20px;
    height: 20px;
    padding: 0px 10px;
    vertical-align: baseline;
    width: auto;
    display: block;
    color: #000;
    text-transform: none;
    text-decoration: none;
    text-align: left;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    border-radius: 0px;
    font-family: inherit;
    font-size: 16px;
    font-weight: normal;
    outline: none;
 }

.header-outer {
    
    padding-top: 15px !important;
    padding-bottom: 10px;
	
}
.header-outer .container {
    display: grid;
        grid-template-columns: 1fr 1.5fr auto;
	   
    width: 100%;
    
    padding-left: 2%;
    padding-right: 2%;
 align-items: center;
}

.header-left a {
    display: flex;
}

.page-id-27 .header-right a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;

  background: transparent;
  color: #000;
  padding: 9px 21px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 30px;
  border: 1px solid #4c4c4c;

  float: right;
  z-index: 1;
}

.header-right a {
     color: #000;
      position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  background: transparent;
   padding: 9px 21px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 30px;
  border: 1px solid #4c4c4c;
   float: right;
  z-index: 1;
}

/* flip layer */
.header-right a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;

  transform: rotateX(90deg);
  transform-origin: bottom;
  transition: transform 0.5s ease;

  z-index: 0; /* 👈 keep it BEHIND text */
}

/* 👇 wrap text in span (IMPORTANT) */
.header-right a span {
  position: relative;
  z-index: 2;
}

/* hover */
.header-right a:hover::before {
  transform: rotateX(0deg);
}

.header-right a:hover span {
  color: #fff;
}


#mega-menu-wrap-menu-1 #mega-menu-menu-1 {
/*     text-align: revert; */
    /* padding: 2px; */
    /* padding-top: 33px; */
    margin-top: 0px;
    display: -webkit-box;
/*     padding-top: 20px; */
}

/* #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.menu-contact {
    margin-left: auto;
} */

.header-outer {
/*   position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent; /* remove white bg */
      border-bottom: 1px solid #2925251a;
}


.header-left img {
    max-width: 160px;
}
/* .header-left img {
    max-width: 155px;
} */
.header-middle {

     display: flex;

    align-items: center; 
        justify-content: flex-end;
    padding-right: 10px;
}


#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:focus {
    background: transparent;
    color:  #009ada;
    font-weight: 400;
}
.page-id-27 #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-menu-item>a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-menu-ancestor>a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-page-ancestor>a.mega-menu-link

 {
    background: transparent !important;
    font-weight: 500 !important;
    color: #009ada;
	 font-size: 16px;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-menu-item>a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-menu-ancestor>a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-page-ancestor>a.mega-menu-link

 {
    background: transparent !important;
    font-weight: 500 !important;
    color: #000;
     font-size: 16px;
	 
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-menu-item>a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-menu-ancestor>a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-page-ancestor>a.mega-menu-link {
    background: transparent !important;
    font-weight: 500 !important;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.menu-contact {
    
	   display: none;
    
}

    #mega-menu-wrap-menu-1 {
        background-color: transparent !important;
    }


.elementor-element.elementor-element-da95622.e-con-full.e-flex.e-con.e-parent.e-lazyloaded {
    margin: 0px;
    padding: 0px;
}
span.elementor-button-text {
    color: white;
	    padding: 8px;
    border-radius: 10px;
}
.elementor-1584 .elementor-element.elementor-element-904d809 {
	margin-top:0px;
	margin-bottom:0px;
}


    /* ─── HERO ─── */

 /* ─── HERO ─── */

   section.Home-banner-outer {
    z-index: -1;
    background-color: var(--neutral-9);
    color: #000;
    background-image: url(https://thewebsitedemo.in/encrytnew/wp-content/uploads/2026/06/new.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    width: calc(100% - 10px);
    left: 5px;
    top: 5px;
}

    .Home-banner-outer {
      padding: 140px 0 80px;
      position: relative;
    }
    .hero-badge {
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
     
      padding: 8px 5px;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 600;
      color: #fff;
      margin-bottom: 15px;
    }
     .hero-badge h4 {
    font-size: 16px;
}

h1.banner-title {
    color: #fff;
    font-size: 45px;
    font-weight: 400;
}

h1.banner-title span{
    background: linear-gradient(90deg, #fff, #009ada);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

    .hero-badge span.dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #009ada;
      display: inline-block;
      animation: blink 1s infinite;
    }
    .hero-title {
      font-family: var(--ff-serif);
      font-size: clamp(42px, 6vw, 80px);
      line-height: 1.08;
      color: var(--clr-dark);
      max-width: 720px;
      margin-bottom: 28px;
    }
    .banner-content {
      font-size: 18px;
      color: #fff;
      line-height: 1.7;
      max-width: 480px;
      margin-bottom: 48px;
      margin-top: 60px;
    }
    .hero-avatars {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .hero-avatars .av {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 2.5px solid #fff;
      object-fit: cover;
      margin-left: -10px;
    }
    .hero-avatars .av:first-child { margin-left: 0; }
    .hero-trust {
      font-size: 16px;
      color: #fff;
      margin-left: 14px;
    }



/* ── ABOUT SECTION ── */
.home-about-section-outer {
 padding: 40px 0;
    background-color: #ffffff;
    padding-bottom: 80px;
}

.home-about-section-outer p{
      font-size: 18px;
    color: #4c4c4c;
    line-height: 1.7;
    
}

.home-about-section-outer p span{
      font-size: 18px;
    color: #cc0000;
    line-height: 1.7;
  
}

/* ── PHILOSOPHY ROW ── */
.philosophy-left-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #111111;
}

.philosophy-left-title .dot {
  width: 8px; height: 8px;
      border-radius: 50%;
      background: #009ada;
      display: inline-block;
}


h2.philosophy-right-content {
    font-size: 42px;

  color: #111111;
  line-height: 1.2;
}

h2.philosophy-right-content span{
 color: #009ada;
}

.philosophy-title .accent {
  color: #009ada;
}

/* ── IMAGE + STATS ROW ── */
.about-img-wrap {
  margin-top: 50px;
}

.about-img-wrap img {
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.about-stats {
  margin-top: 50px;
  padding: 40px;
  background-color: #f5f5f5;
  border-radius: 16px;
  height: 78%;
  border: 1px solid #0f0f0f14;
}

.stat-item {
  margin-bottom: 30px;
}

.stat-item h2 {
  font-size: 45px;
  font-weight: 500;
  color: #111111;
  margin-bottom: 4px;
}

.stat-item p {
  font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: #191919;
  text-transform: uppercase;
}

.learn-more-btn {
  display: inline-block;
  background-color: #111111;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  margin-top: 10px;
}

.learn-more-btn:hover {
  background-color: #009ada;
  color: #ffffff;
}


  

/* ── WORKS SECTION ── */
.home-works-section-outer {
  padding: 30px 0px 66px 0px;
  background-color: #ffffff;
}

/* ── BADGE ── */
.works-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.works-badge h4 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #111111;
  margin: 0;
}

.works-badge::before {
  content: '';
  width:8px;
    height:8px;
    background:#009ada;
    border-radius:50%;
    animation: blink 1s infinite;

  display: inline-block;
}

/* ── TITLE ── */
.works-title {
  font-size: 52px;
  font-weight: 500;
  color: #111111;
  line-height: 1.1;
  margin-bottom: 24px;
}

.works-title .accent {
  color: #009ada;
}

/* ── DESCRIPTION ── */
.works-desc {
  font-size: 18px;
  color: #4c4c4c;
  line-height: 1.7;
  margin-bottom: 60px;
}

/* ── BUTTON ── */
.view-all-btn {
  display: inline-block;
  background-color: #111111;
  color: #ffffff;
  padding: 18px 36px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.view-all-btn:hover {
  background-color: #009ada;
  color: #ffffff;
}

.work-card img {
    border-radius: 20px;
}

.work-content {
    padding-top: 15px;
}

h3.project-name {
    font-size: 28px;
}

p.paragraph.medium {
    color: #4c4c4c;
    font-size: 16px;
}

.home-works-section-outer .col-12.col-md-8 {
  
    padding-left: 50px;
}


.home-works-section-outer .col-12.col-md-4 {
    position: sticky;
    top: 43px;
    height: max-content;
}

/* ── SERVICES SECTION ── */
.services-section {
/*   background: url(https://thewebsitedemo.in/ninemedia/wp-content/uploads/2026/04/banner-bg-final.png); */
	background: url(https://thewebsitedemo.in/encrytnew/wp-content/uploads/2026/07/5b3d2d6b-6f13-46e2-923e-efb15e61ce63.webp);
    object-position: center;
    object-fit: contain;
  margin-left: 6px;
    margin-right: 6px;
    border-radius: 20px;
        padding: 70px 0px;
}

.services-section .row > .col-12 {
  /* border-top: 1px solid #2a2a2a; */
  padding-top: 30px;
  padding-bottom: 30px;
}

/* ── IMAGE ── */
.service-img-wrap img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  max-height: 180px;
}

/* ── TITLE ── */
.service-title {
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.1;
}

/* ── DESCRIPTION ── */
.service-desc {
  font-size: 16px;
  color: #aaaaaa;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* .border-line{
        border-top: 1px solid #2a2a2a;
} */

/* ── TAGS SLIDER ── */
.service-tags {
  display: flex;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
}

.tags-track {
  display: flex;
  gap: 10px;
  animation: slideLeft 12s linear infinite;
}

/* Section 2 and 4 → right to left (default slideLeft) */
/* Section 1 and 3 → left to right (slideRight) */
.slide-right .tags-track {
  animation: slideRight 12s linear infinite;
}

.service-tag {
  display: inline-block;
  border: 1px solid #fff;
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── ANIMATIONS ── */
@keyframes slideLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes slideRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}


.services-header {
  background-color: #111111;
  padding: 50px 60px;
}

.services-header-left h4 {
        display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 15px;
}
.services-header-left .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cc0000;
  flex-shrink: 0;
}

.services-header-content {
  display: flex;
  align-items: center;
  padding-bottom: 70px;
  
}

.services-header-left {
  flex: 0 0 55%;
}

.services-header-right {
  flex: 0 0 45%;
}

.services-main-title {
  font-size: 52px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.1;
  margin: 0;
}

.services-main-title .accent {
  background-color:  #ccf0ff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

p.services-main-content {
    color: #ccc;
    font-size: 18px;
}

.services-main-desc {
  font-size: 16px;
  color: #aaaaaa;
  line-height: 1.75;
  margin: 0;
}

/* ── SERVICES VISUAL SECTION ── */
.services-visual-section {
  background-color: #111111;
  padding: 0 0 0 0;
}

/* ── LEFT SIDE ── */
.services-small-img {
  padding-left: 80px;
  margin-bottom: 60px;
}

.services-small-img img {
  width: 65%;
  border-radius: 16px;
  object-fit: cover;
}

.services-visual-content {
  padding: 0 40px 60px 0;
}

.services-visual-desc {
  font-size: 16px;
  color: #aaaaaa;
  line-height: 1.75;
  margin-bottom: 30px;
  max-width: 420px;
}

.view-services-btn {
  display: inline-block;
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #444444;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.view-services-btn:hover {
  background-color: #cc0000;
  border-color: #cc0000;
  color: #ffffff;
}

/* ── RIGHT SIDE ── */
.services-large-img {
  height: 100%;
}

.services-large-img img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  border-radius: 20px 0 0 20px;
}

hr {
    color: #797777;
   
}

/* ── FOOTER ── */

footer#site-footer {
    padding: 0px;
}

.footer-outer {
  background-color: #111111;
  padding: 60px 0 30px;
}

/* ── TOP ── */
.footer-top {
  padding-bottom: 40px;
}

.footer-heading {
  font-size: 64px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}

.footer-heading .accent {
  color: #009ada;
}

.book-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #111111;
  padding: 18px 36px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.book-btn:hover {
  background-color: #009ada;
  color: #ffffff;
}

/* ── DIVIDER ── */
.footer-divider {
  border-color: #2a2a2a;
  margin: 0;
}

/* ── MIDDLE ── */
.footer-middle {
  padding: 40px 0;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}

.social-icon {
  width: 42px;
  height: 42px;
  border: 1px solid #444444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
}
.social-icon a {
    color: #ffffff;
}
.social-icon:hover {
  border-color: #009ada;
  color: #009ada;
}

.footer-nav {
  font-size: 13px;
  color: #aaaaaa;
  letter-spacing: 0.08em;
  line-height: 2;
}

.footer-nav a {
  color: #aaaaaa;
  text-decoration: none;
  margin: 0 4px;
}

.footer-nav a:hover {
  color: #009ada;
}

.footer-email {
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 20px;
}

.footer-contact-row {
  display: flex;
  justify-content: flex-end;
  gap: 60px;
}

.footer-address,
.footer-phone {
  font-size: 12px;
  color: #aaaaaa;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin: 0;
}

/* ── BOTTOM ── */
.footer-bottom {
  padding-top: 20px;
}

.footer-copy {
  font-size: 12px;
  color: #666666;
  margin: 0;
}

.footer-copy a {
  color: #ffffff;
  text-decoration: underline;
}

.footer-link {
  font-size: 12px;
  color: #666666;
  text-decoration: none;
  margin-left: 24px;
  letter-spacing: 0.08em;
}

.footer-link:hover {
  color: #009ada;
}


/* ── ABOUT HERO ── */
.about-hero-outer {
  background-color: #ffffff;
  padding-top: 70px;
  overflow: hidden;
}

/* ── TITLE ── */
.about-hero-title {
  font-size: 190px;
  font-weight: 300;
  color: #111111;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.02em;
  margin-bottom: 60px;
}

/* ── SLIDER OUTER ── */
.about-slider-outer {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
  background-color: #ffffff;
}

/* ── SLIDER TRACK ── */
.about-slider-track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  animation: slideLeft 18s linear infinite;
}

/* ── SLIDER ITEMS ── */
.about-slider-item {
  font-size: 24px;
  font-weight: 400;
  color: #111111;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-slider-dot {
  font-size: 18px;
  color: #111111;
  white-space: nowrap;
}

/* ── ANIMATION ── */
@keyframes slideLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ── ABOUT BASIC SECTION ── */
.about-basic-outer {
  background-color: #ffffff;
  padding: 80px 0;
}

/* ── BADGE ── */
.about-basic-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #111111;
  text-transform: uppercase;
}

.about-basic-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #009ada;
  animation: blink 1s infinite;
  
}

/* ── TITLE ── */
.about-basic-title {
  font-size: 52px;
  font-weight: 400;
  color: #111111;
  line-height: 1.15;
  margin-bottom: 30px;
}

.about-basic-title .accent {
  color: #009ada;
}

.about-basic-outer .col-12.col-md-8 {
    padding-left: 50px;
}

/* ── DESCRIPTION ── */
.about-basic-desc {
  font-size: 18px;
  color: #000;
  line-height: 1.75;
  margin-bottom: 20px;
}

.about-basic-desc:last-child {
  margin-bottom: 0;
}

.about-stats-outer {
  background-color: #ffffff;
  padding: 80px 0;
}

.about-stats-title {
  font-size: 52px;
  font-weight: 400;
  color: #111111;
  line-height: 1.2;
  margin-bottom: 40px;
}

.about-stats-title .accent {
  color: #009ada;
}

.lets-talk-btn {
  display: inline-block;
  background-color: #111111;
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.lets-talk-btn:hover {
  display: inline-block;
  background-color: #009ada;
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.stat-card {
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
}

.stat-card-dark {
  background-color: #111111;
  color: #fff;
  border: 1px solid #0f0f0f14;
}

h2.stat-item {
    font-size: 54px;
}



.stat-card-light {
  background-color: #f5f5f5;
  border: 1px solid #0f0f0f14;
  height: 230px;
}


.stat-number {
  font-size: 52px;
  font-weight: 700;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}


/* ── APPROACH SECTION ── */
.approach-outer {
  background-color: #111111;
  padding: 80px 0;
  margin-right: 5px;
  margin-left: 5px;
   border-radius: 20px;
       margin-bottom: 50px;
}

/* ── BADGE ── */
.approach-outer .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #009ada;
  display: inline-block;
  margin-right: 6px;
  animation: blink 1s infinite;
}

.approach-outer h4 {
  display: inline;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #aaaaaa;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* ── TOP ROW ── */
.approach-title {
  font-size: 52px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.15;
  margin-top: 20px;
  margin-bottom: 0;
}

.approach-title .accent {
  background: linear-gradient(90deg, #fff, #009ada);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.approach-outer .approach {
  font-size: 18px;
  color: #e0e0e0;
  line-height: 1.75;
  margin-top: 20px;
}

/* ── CARDS ROW ── */
.approach-cards {
  margin-top: 50px;
}

.approach-card {
  background-color: #1e1e1e;
  border-radius: 16px;
  padding: 30px;
  height: 100%;
    border: 1px solid #e8d7d714;
}

/* ── CARD TOP ── */
.approach-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 60px;
}

.approach-number {
  font-size: 20px;
  background: linear-gradient(135deg, #b3b3b3, #cccccc4d);
   background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    color: #00000000;
  
}

.approach-icon img {
  width: 60px;
  height: 60px;
  opacity: 0.6;
}

/* ── CARD TITLE ── */
.approach-card-title {
  font-size: 38px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 16px;
}

/* ── CARD DESC ── */
.approach-card-desc {
  font-size: 16px;
  color: #aaaaaa;
  line-height: 1.7;
  margin: 0;
}


/* ── SERVICES VISUAL SECTION ── */
.services-visual-section {
  background-color: #111111;
  padding: 0 0 0 0;
}

/* ── LEFT SIDE ── */
.services-small-img {
  padding-left: 80px;
  margin-bottom: 60px;
}

.services-small-img img {
  width: 65%;
  border-radius: 16px;
  object-fit: cover;
}

.services-visual-content {
  padding: 0 40px 60px 0;
}

.services-visual-desc {
  font-size: 16px;
  color: #aaaaaa;
  line-height: 1.75;
  margin-bottom: 30px;
  max-width: 420px;
}

.view-services-btn {
  display: inline-block;
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #444444;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.view-services-btn:hover {
  background-color: #FF4500;
  border-color: #FF4500;
  color: #ffffff;
}

/* ── RIGHT SIDE ── */
.services-large-img {
  height: 100%;
}

.services-large-img img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  border-radius: 20px 0 0 20px;
}




.services-list-outer { background-color: #ffffff; padding: 60px 0; }

.service-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid #e0e0e0;
  text-decoration: none;
  color: #111111;
}
.service-list-item.active { border-bottom: 2px solid #009ada; }
.service-list-name { font-size: 22px; font-weight: 600; color: #111111; }
.service-list-arrow { font-size: 20px; color: #111111; }
.service-list-item:hover .service-list-name { color: #009ada; }

.service-detail-outer { background-color: #ffffff; padding:10px 0; }
.service-detail-title { font-size: 52px; font-weight: 400; color: #111111; margin-bottom: 20px; }
.service-detail-divider { border-color: #e0e0e0; margin-bottom:15px; }
.service-detail-content { margin-bottom: 40px; }
.service-detail-desc { font-size: 18px; color: #555555; line-height: 1.75; margin: 0; }
.service-detail-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.service-detail-tag {
  display: inline-block;
  border: 1px solid #cccccc;
  color: #111111;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background-color: #f5f5f5;
}
.service-detail-img { margin-bottom: 60px; }
.service-detail-img img { width: 100%; border-radius: 16px; object-fit: cover; }

section.portfolio-outer {
    padding-top: 70px;
        padding-bottom: 40px;
}

/* ── CLIENTS SECTION ── */
.clients-outer {
  background-color: #ffffff;
  padding: 60px 0;
}

/* ── UL RESET ── */
.clients-list {
  list-style: none;
  padding: 0;
  margin: 0;
  
}

/* ── CLIENT ITEM ── */
.client-item {
 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  min-height: 150px;
  overflow: hidden;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
	
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

/* ── IMAGE ── */
.client-item img {
  max-width: 180px;
  max-height: 80px;
  object-fit: contain;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* ── HOVER ── */
.client-item:hover {
  background-color: #f5f5f5;
}

.client-item:hover img {
  transform: scale(1.08);
  opacity: 0.8;
}

.client-item {
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  min-height: 150px;
  overflow: hidden;
  background-color: #ffffff;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.client-item:hover {
  background-color: #f5f5f5;
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}

section.portfolio-detail-section {
    padding-top: 100px;
}

.mobile-section {
  background: #f5f5f5;
}

/* BIG TITLE */

.portfolio-detail-section .col-lg-6 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
} 

.portfolio-detail-title {
      font-size: 52px;
    font-weight: 400;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.challenge-list ul li {
    font-size: 18px;
}

/* LINE */
.divider {
  width: 80%;
  height: 1px;
  background: #ccc;
}

/* TEXT */
.portfolio-detail-text {
  font-size: 18px;
  color: #333;
  max-width: 500px;
  line-height: 1.6;
}



.mobile-img img {
 border-radius: 30px;
  object-fit: contain;
}

section.work-detail {
    padding-top: 70px;
    padding-bottom: 60px;
}


.info-pill {
  background: #eee;
  border-radius: 20px;
  padding: 13px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Label (grey text) */
.info-pill .label {
  color: #777;
  font-size: 16px;
}

/* Value (bold black text) */
.info-pill .value {
  color: #000;
  font-size: 16px;
  font-weight: 500;
}

/* Link style */
.info-pill .link {
  text-decoration: none;
}

.info-pill .arrow {
  margin-left: 5px;
  font-size: 16px;
}



.single-work-banner-img {
 

  overflow: hidden;
  
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.work-left h2 {
    font-size: 50px;
    padding-bottom: 20px;
}

.work-left p {
    font-size: 18px;
}

/* Image styling */
.single-work-banner-img img {
  
  object-fit: contain;
}

.work-left {
  position: sticky;
  top: 40px;
  height: max-content;
}

.services-header-left h4::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #009ada;
    display: inline-block;
    animation: blink 1s infinite;
}

.gallery-item {
  margin-bottom: 20px;
}

.gallery-item img {
  width: 100%;
  border-radius: 20px;
}

/* marquee start */

.marquee-section {
  
    padding: 60px 0;
    overflow: hidden;
    position: relative;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }

  section.marquee-section {
    padding-top: 150px;
    
    padding-bottom: 150px;

}
  /* ===== EACH BAND ===== */
  .marquee-band {
    width: 110%;
    padding: 16px 0;
    overflow: hidden;
    position: relative;
    margin-left: -5%;
  }

  /* Purple band - tilted left to right (positive angle) */
  .marquee-band.purple {
    background: linear-gradient(
90deg, #009ada, #009ada);
    transform: rotate(-6deg);
    margin-top: -10px;
    z-index: 2;
  }

  /* Black band - tilted right to left (negative angle) */
  .marquee-band.black {
    background: #000;
    transform: rotate(6deg);
    margin-top: -60px;
    z-index: 1;
  }

  /* ===== MARQUEE TRACK ===== */
  .marquee-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
  }

  .marquee-track.left-to-right {
    animation: scrollLTR 25s linear infinite;
  }

  .marquee-track.right-to-left {
    animation: scrollRTL 25s linear infinite;
  }

  @keyframes scrollLTR {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
  }

  @keyframes scrollRTL {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
  }

  /* ===== MARQUEE ITEMS ===== */
  .marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 0 32px;

    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
  }

  .marquee-item.muted {
    color: rgba(255, 255, 255, 0.45);
  }

  .marquee-star {
    display: inline-block;
    font-size: 20px;
    color: #ffffff;
    line-height: 1;
  }

  /* Star shape using clip-path */
  .star-icon {
    width: 20px;
    height: 20px;
    background: #ffffff;
    clip-path: polygon(
      50% 0%, 61% 35%, 98% 35%, 68% 57%,
      79% 91%, 50% 70%, 21% 91%, 32% 57%,
      2% 35%, 39% 35%
    );
    display: inline-block;
    flex-shrink: 0;
  }

  /* 4-point star */
  .star4 {
    width: 18px;
    height: 18px;
    background: #ffffff;
    clip-path: polygon(
      50% 0%, 55% 45%, 100% 50%,
      55% 55%, 50% 100%, 45% 55%,
      0% 50%, 45% 45%
    );
    display: inline-block;
    flex-shrink: 0;
  }


  /* 4 grid start */

  .bento-card.card-top-left {
    border-radius: 28px;
}

.bento-card.card-top-right {
    border-radius: 28px;
}

    .stats-section {
    background-color: #e8e8f0;
    padding: 50px 30px;
  }

  .bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
  }

  /* ===== BASE CARD ===== */
  .bento-card {
    border-radius: 28px;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
  }

  /* ===== TOP LEFT — White card ===== */
  .card-top-left {
    background-color: #ffffff;
    border-top-left-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
  }

  .card-top-left .card-desc {
    font-size: 16px;
    color: #888888;
    line-height: 1.6;
    max-width: 80%;
  }

  .card-top-left .card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .card-top-left .stat-number {
    font-size: 52px;
    font-weight: 400;
    color: #111111;
    line-height: 1;
    letter-spacing: -1px;
  }

  .card-top-left .stat-label {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    margin-top: 6px;
  }


 /* Circular CTA */
    .circular-cta {
      position: relative;
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .circular-cta svg.ring-text {
      position: absolute;
      top: 0; left: 0;
      width: 120px; height: 120px;
      animation: spin 10s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .circular-cta .arrow-btn {
      width: 44px; height: 44px;
      background: transparent;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color:#009ada;
      font-size: 16px;
      text-decoration: none;
      transition: background .2s;
      z-index: 1;
    }
    .circular-cta .arrow-btn:hover { background: #333; }



  /* ===== TOP RIGHT — Purple card ===== */
  .card-top-right {
    background: linear-gradient(160deg, #009ada 0%, #009ada 60%, #009ada 100%);
    border-top-right-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
  }

  .card-top-right .stat-number {
    font-size: 45px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -1px;
  }

  .card-top-right .stat-label {
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 8px;
  }

  .card-top-right .card-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    font-weight: 400;
    max-width: 90%;
  }

  /* ===== BOTTOM LEFT — Purple card ===== */
  .card-bottom-left {
    background: linear-gradient(160deg, #009ada 0%, #009ada 60%, #009ada 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
  }

  .card-bottom-left .stat-number {
    font-size: 45px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -1px;
  }

  .card-bottom-left .stat-label {
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    margin-top: 8px;
  }

  .card-bottom-left .card-desc {
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    font-weight: 400;
    line-height: 1.5;
    max-width: 90%;
  }

  /* ===== BOTTOM RIGHT — White card with falling pills ===== */
  .card-bottom-right {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 28px 28px 0 28px;
    overflow: hidden;
  }

  .card-bottom-right .features-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #111111;
    margin-bottom: 16px;
  }

  .features-label .star4 {
    width: 18px;
    height: 18px;
    background: #5b3fa0;
    clip-path: polygon(50% 0%,55% 45%,100% 50%,55% 55%,50% 100%,45% 55%,0% 50%,45% 45%);
    flex-shrink: 0;
  }

  .features-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin-bottom: 0;
    width: 100%;
  }

  /* Pills falling area */
 /* Pills area */
.pills-area {
  position: relative;
  flex: 1;
  min-height: 220px;
  overflow: hidden;
}

/* Base pill */
.pill {
  position: absolute;
  background: linear-gradient(135deg, #7b52c8, #4a2d8f);
  color: #ffffff;
  border-radius: 50px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;

  opacity: 0;
  animation: fallDown 0.9s ease forwards;
}

/* Icon */
.pill-icon {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

/* Animation */
@keyframes fallDown {
  0% {
    top: -80px;
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  85% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== FINAL POSITIONS (IMPORTANT) ===== */
.pill:nth-child(1) {
  left: 6%;
  top: 38%;
  transform: rotate(-15deg);
  animation-delay: 0s;
}

.pill:nth-child(2) {
  left: 28%;
  top: 48%;
  transform: scale(1.15) rotate(-6deg);
  z-index: 3;
  animation-delay: 0.1s;
}

.pill:nth-child(3) {
  left: 52%;
  top: 40%;
  transform: rotate(10deg);
  animation-delay: 0.15s;
}

.pill:nth-child(4) {
  left: 70%;
  top: 52%;
  transform: rotate(-10deg);
  animation-delay: 0.2s;
}

.pill:nth-child(5) {
  left: 10%;
  top: 65%;
  transform: rotate(6deg);
  animation-delay: 0.25s;
}

.pill:nth-child(6) {
  left: 35%;
  top: 70%;
  transform: rotate(-8deg);
  animation-delay: 0.3s;
}

.pill:nth-child(7) {
  left: 58%;
  top: 62%;
  transform: rotate(12deg);
  animation-delay: 0.35s;
}

.pill:nth-child(8) {
  left: 20%;
  top: 75%;
  transform: rotate(-4deg);
  animation-delay: 0.4s;
}

.pills-area {
  position: relative;
}

.pill {
  position: absolute;
  cursor: grab;
  transition: transform 0.2s ease;
  user-select: none;
}

.pill:active {
  cursor: grabbing;
}

.pill {
  animation-play-state: paused;
}

.pill {
  cursor: grab;
  user-select: none;
}


/* testimonial start  */

.section-wrapper {
      max-width: 1300px;
      width: 100%;
      margin: 0 auto;
      padding-top: 60px;
      padding-left: 30px;
        padding-right: 30px;
    }

    /* ── Header ── */
    .section-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-dark);
      margin-bottom: 22px;
    }
    .section-label::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #009ada;
      animation: blink 1s infinite;
    }

    .section-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 48px;
      flex-wrap: wrap;
      gap: 24px;
    }

.section-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #009ada;
    display: inline-block;
}

    .section-title {
      
      font-size: 52px;
      font-weight: 400;
      line-height: 1.1;
      max-width: 520px;
    }
    .section-title .highlight {
      color: #009ada;
    }

    /* ── Nav Buttons ── */
    .carousel-nav {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-shrink: 0;
      margin-top: 8px;
    }
    .nav-btn {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      border: 1.5px solid #d0cfc9;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, transform 0.15s;
      color: var(--text-dark);
    }
    .nav-btn:hover {
      background: transparent;
      border-color: #d0cfc9;
      color: #fff;
      transform: scale(1.05);
    }
    .nav-btn svg {
      width: 18px;
      height: 18px;
      stroke: #000;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ── Carousel ── */
    .testimonial-carousel {
      position: relative;
      overflow: hidden;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .carousel-slide {
      min-width: 100%;
      display: flex;
      gap: 24px;
      align-items: stretch;
    }

    /* ── Image Card ── */
    .img-card {
      flex: 0 0 38%;
      background: var(--card-bg);
      border-radius: var(--border-radius);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
    .img-card img {
      width: 100%;
      
      object-fit: contain;
      border-radius: 10px;
      display: block;
    }
    .img-placeholder {
      width: 100%;
      max-width: 320px;
      height: 340px;
      background: linear-gradient(135deg, #dddbd6 0%, #c8c5be 100%);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .img-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(255,255,255,0.07) 20px,
        rgba(255,255,255,0.07) 40px
      );
    }
    /* Phone mockup */
    .phone-mockup {
      width: 160px;
      height: 290px;
      background: #1a1a1a;
      border-radius: 30px;
      border: 3px solid #333;
      position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,0.35);
      overflow: hidden;
      z-index: 2;
    }
    .phone-mockup .screen {
      position: absolute;
      inset: 6px;
      background: #f5f0ea;
      border-radius: 25px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 8px;
      gap: 6px;
    }
    .phone-mockup .screen-bar {
      width: 30px;
      height: 3px;
      background: #ccc;
      border-radius: 2px;
      margin-bottom: 4px;
    }
    .phone-mockup .screen-title {
      font-size: 9px;
      font-family: 'Fraunces', serif;
      color: #333;
      letter-spacing: 0.05em;
    }
    .phone-mockup .screen-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      width: 100%;
      margin-top: 4px;
    }
    .phone-mockup .screen-img {
      height: 55px;
      border-radius: 6px;
      background: #d4c9b8;
    }
    .phone-mockup .screen-img:first-child {
      background: #c9b89a;
    }
    .phone-mockup .screen-img:nth-child(2) {
      background: #b8a890;
    }
    .phone-mockup .screen-img:nth-child(3) {
      background: #d0c0a8;
    }
    .phone-mockup .screen-img.wide {
      grid-column: 1 / -1;
      height: 30px;
      background: #e8dfd0;
    }
    .phone-mockup .screen-btn {
      margin-top: auto;
      width: 80%;
      height: 18px;
      border-radius: 9px;
      border: 1px solid #bbb;
      background: transparent;
      font-size: 5px;
      color: #888;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .phone-back {
      position: absolute;
      width: 155px;
      height: 285px;
      background: #1a1a1a;
      border-radius: 28px;
      border: 3px solid #2a2a2a;
      top: 28px;
      left: 40px;
      box-shadow: -4px 10px 40px rgba(0,0,0,0.4);
    }

    /* ── Quote Card ── */
    .quote-card {
      flex: 1;
      background: #f6f6f6;
       border: 1px solid #0f0f0f14;
      border-radius: 20px;
      padding: 52px 56px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 420px;
    }

    .quote-mark {
      font-family: 'Fraunces', serif;
      font-size: 4rem;
      color: var(--accent);
      line-height: 1;
      margin-bottom: 28px;
      user-select: none;
    }

    .quote-text {
      font-size: clamp(1rem, 1.5vw, 1.2rem);
      line-height: 1.75;
      color: #222;
      font-weight: 400;
      flex: 1;
      margin-bottom: 40px;
    }

    .author-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .author-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      background: #ccc;
      flex-shrink: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Fraunces', serif;
      font-size: 1.1rem;
      color: #fff;
    }
    .author-name {
      font-weight: 600;
      font-size: 1rem;
      color: var(--text-dark);
    }
    .author-title {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* ── Dots ── */
    .carousel-dots {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 32px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ccc;
      cursor: pointer;
      transition: background 0.25s, width 0.25s;
      border: none;
    }
    .dot.active {
      background: var(--accent);
      width: 24px;
      border-radius: 4px;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .carousel-slide { flex-direction: column; }
      .img-card { flex: none; min-height: 280px; }
      .quote-card { padding: 32px 28px; }
      .section-header { flex-direction: column; }
      .footer-email {
    font-size: 26px;
            text-align: left;
      }
      .header-right {
    display: none;
}
.header-outer .container {
    display: grid;
    grid-template-columns: 1fr auto;
}

.page-id-27 #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link{
      color: #fff;
      height: 40px;

}

#mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-menu-item>a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-menu-ancestor>a.mega-menu-link, #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item.mega-current-page-ancestor>a.mega-menu-link{
      color: #fff;
}

 #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link{
      color: #fff;
      height: 40px;

}
.Home-banner-outer {
    padding: 40px 0 34px;
}

h1.banner-title{
      font-size: 24px;
}

.hero-avatars span.hero-trust {
    width: 383%;
    font-size:12px;
}
.hero-avatars {
    
    padding-top: 20px;
    padding-bottom: 20px;
}
.home-about-section-outer {
    padding: 9px 0;
    background-color: #ffffff;
    padding-bottom: 0px;
}
.about-img-wrap {
    margin-top: 20px;
}
.about-stats {
    margin-top: 20px;
}
.learn-more-btn{
      margin-top: 15px;
}
.works-title {
    font-size: 30px;
}

.clients-list li.col {
    width: 500px;
}

.clients-outer {
    
    padding: 0px 0px !important;
    padding-bottom: 53px !important;
}

.ra-popular-apps{
  display: grid;
    grid-template-columns: 1fr !important;
    padding-bottom: 50px !important;
}
.ra-popular-apps__title {
    font-size: 35px !important;
}
button.faq-header{
      white-space: normal;
}

.life-text {
margin-bottom: 15px;
}

    }

/* testimonial end */

  @media (max-width: 767px) {
    .bento-grid {
      grid-template-columns: 1fr;
    }
    .card-top-left,
    .card-top-right {
      border-radius: 28px;
    }
    h2.philosophy-right-content {
    font-size: 30px;
    }
    .row>*{
          padding-right:0px;
    padding-left: 0px;

    }

    .home-works-section-outer .col-12.col-md-4 {
    position: relative;
     top: 0px;
             padding-bottom: 30px;
    }
    .works-desc{
          margin-bottom: 20px;
    }
   

.home-works-section-outer .col-12.col-md-8 .container{
      padding-left: 0px;
    padding-right: 0px;
}

.home-works-section-outer .col-12.col-md-8 {
    padding-left: 0px;
}
.home-works-section-outer{
      padding: 30px 0px 70px 0px;
}

.services-header-content {
    display: flex;
    
    padding-bottom: 0px;
    flex-direction: column;
}
.services-header-left.col-6{
  width: 100%;
}
.services-main-title {
    font-size: 32px;
}
.services-header-right.col-6{
  width: 100%;
}
.services-section .row > .col-12{
      padding-bottom: 0px;
}
section.marquee-section {
    padding-top: 60px;
    padding-bottom: 50px;
}
.card-top-left .card-bottom {
    display: flex;
     align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
}

.stats-section {
    background-color: #e8e8f0;
    padding: 50px 20px;
}
.section-title {
    font-size: 30px;
}
.section-wrapper{
      padding-left: 20px;
    padding-right: 20px;
}

.articles-section {
    padding: 10px 10px 28px !important;
}

.articles-title {
    font-size: 30px !important;
}

.blog-section {
    padding: 20px 0px !important;
}

h2.partners-label {
      font-size: 30px !important;
}
.partners-section {
    padding: 60px 8px!important;
}
.footer-heading {
    font-size: 40px;
}
.col-12.col-md-3.text-end {
    text-align: left !important;
}
.footer-bottom .text-end {
    text-align: left !important;
}
.footer-link{
      margin-left: 0px;
}

.about-hero-title {
      font-size: 60px;
}

.about-hero-outer{
  padding-top: 40px;
}
.services-list-outer{
      padding: 35px 0;
}
.service-detail-title {
    font-size: 30px;
}
.service-detail-tags{
  justify-content: flex-start;
      padding-top: 20px;
}

.services-section hr {
    border-top: none;
}

.portfolio-detail-title {
    font-size: 30px;
}
section.portfolio-detail-section {
    padding-top: 40px;
}

.info-bar .col-6 {
    flex: 0 0 auto;
    width: 100%;
}
.info-bar .row.g-3 {
    gap: 10px;
    display: flex;
    flex-direction: column;
}
section.work-detail {
    padding-top: 50px;
}
.work-left h2 {
    font-size: 30px;
}

.challenge-list ul {
    padding-left: 20px;
}

.challenge-list{
      padding-bottom: 20px;
}
section.work-detail-solutuon {
    padding: 30px 0px !important;
}
.work-left-solution h2 {
    font-size: 30px !important;

}
section.single-work-banner-logo{
      padding-top: 30px !important;
}

.sdxh-showcase{
      width: 90% !important;
          margin: 40px 20px !important;
}
    .sdxh-showcase__title {
        font-size: 30px !important;
    }

        .sdxh-showcase__button {
        width: 294px;
        font-size: 14px !important;
    }
        .sdxh-showcase__content {
        min-height: 360px !important;
    }
    .sdxh-showcase__button{
          margin-top: 30px !important;
    }

    .work-left-impact h2 {
    font-size: 30px !important;
    }
    .related-title{
      
    font-size: 30px !important;

    }
    section.work-detail-impact {
    padding-bottom: 30px;
    }

    .rbx-industries-wrapper{
      display: flex;
         gap: 30px !important;
    flex-direction: column;
    }
    .rbx-industries-section {

    padding: 10px 20px 40px !important;
    }

    .rbx-industries-heading{
          font-size: 35px !important;
    }

    section.rbx-industries-section.last {
    padding-bottom: 70px !important;
}

.card-top-left .card-desc{
  max-width: 100%;
}
  }


/* blog section :start */

    .articles-section {
        
        padding: 32px 10px 28px;
        background: #fff;
        border-bottom: 1px solid #E5E5E5;
    }
 
    .articles-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: #1A1A1A;
        margin-bottom: 18px;
    }
    .articles-label::before {
        content: '';
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #009ada;
        flex-shrink: 0;
    }
 
    .articles-title {
        font-size: 52px;
        font-weight: 400;
        line-height: 1.1;
        color: #1A1A1A;
        margin: 0;
    }
    .articles-title .highlight {
        color: #009ada;
    }
 
    .btn-all-articles {
        display: inline-flex;
        align-items: center;
        background: #1A1A1A;
        color: #fff !important;
       
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: 16px 28px;
        border-radius: 999px;
        text-decoration: none;
        white-space: nowrap;
        transition: background .2s, transform .15s;
        border: none;
    }
    .btn-all-articles:hover {
        background: #009ada;
        transform: translateY(-1px);
    }
 
    @media (max-width: 767px) {
        .articles-section .d-flex { flex-direction: column; gap: 24px; }
        .btn-all-articles { align-self: flex-start; }
        .about-stats-outer .col-6{
    width: 48%;
    gap: 10px;
}

.stat-card.stat-card-dark {
    height: 230px;
}
    }


    .blog-section {
  padding: 80px 10px;
 
}

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

/* CARD */
.blog-card {
  background: transparent;
}

/* IMAGE */
.blog-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 20px;
  transition: 0.4s;
}

.blog-card:hover .blog-image img {
  transform: scale(1.05);
}

/* CATEGORY */
.blog-category {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* CONTENT */
.blog-content {
  padding-top: 20px;
}

/* TITLE */
.blog-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 12px;
  color: #111;
}

.blog-title a {
  text-decoration: none;
  color: inherit;
}

/* DESCRIPTION */
.blog-econtent {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* BOTTOM */
.blog-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* READ MORE */
.read-more {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #111;
}

.read-more .icon {
  width: 36px;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.read-more:hover .icon {
  background: #111;
  color: #fff;
}

/* AUTHOR */
.blog-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-img img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info {
  font-size: 13px;
  color: #666;
}

.author-name {
  font-weight: 500;
  color: #111;
}


/* RESPONSIVE */
@media (max-width: 991px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-title {
    font-size: 22px;
  }
}


 /* blog section end   */


 /* client section start */

  .partners-section {
      padding: 60px 24px;
      background-color: #f0efed;
          padding-bottom: 70px;
    }

    h2.partners-label {
    color: #000;
    font-size: 50px;
    font-weight: 400;
    margin-bottom: 36px;
    text-align: center;
}



    /* Card flip wrapper */
    .card-wrap {
      perspective: 900px;
    }

    .card-inner {
      position: relative;
      width: 100%;
      padding-top: 55%;
      transform-style: preserve-3d;
      transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-inner.flipped {
      transform: rotateX(180deg);
    }

    .card-front,
    .card-back {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid #e5e5e5;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .card-back {
      transform: rotateX(180deg);
    }

    .card-front svg,
    .card-back svg {
      max-width: 100%;
      height: auto;
      color: #111;
    }



.chakra-section{
      padding-bottom: 60px;
       padding-left: 10px;
      padding-right: 10px;
}



.chakra-tabs{
  display:flex;
  gap:18px;
  height:370px;
  overflow:hidden;
  width:100%;
}

/* TAB */
.chakra-item{
  position:relative;
  flex:0 0 90px;
  border-radius:10px;
  background:var(--bg);
  transition:all .5s ease;
  overflow:hidden;
  cursor:pointer;
}

/* ACTIVE TAB */
.chakra-item.active {
  flex:1 1 58%;
}

/* DEFAULT */
.chakra-item{
  position:relative;
  flex:1;
  min-width:90px;
  border-radius:10px;
  background:var(--bg);
  overflow:hidden;
  cursor:pointer;

  transition:
    flex .65s cubic-bezier(.22,1,.36,1),
    transform .3s ease;
}

/* ACTIVE TAB */
.chakra-item.active{
  flex:7;
}

/* VERTICAL TEXT */
.chakra-vertical{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;
  color:#fff;
  font-size:28px;
  white-space:nowrap;
  transition:.4s ease;
  z-index:2;
}

/* CONTENT */
.chakra-content{
  opacity:0;
  visibility:hidden;

  transform:translateX(-120px);

  transition:
    opacity .45s ease,
    transform .42s cubic-bezier(.2,.9,.3,1);

  display:flex;
  justify-content:space-between;
  align-items:center;
  height:100%;
  padding:25px;
  gap:40px;
}

.chakra-item.active .chakra-content,
.chakra-item:hover .chakra-content{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}
.chakra-text{
  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.2,.9,.3,1);
}

.chakra-image{
  transition:
    opacity .4s ease;
}

.chakra-image img{
  transform:none !important;
  transition:none !important;
}

/* HIDE VERTICAL TEXT */
.chakra-item.active .chakra-vertical,
.chakra-item:hover .chakra-vertical{
  opacity:0;
}
.chakra-item:not(.active) .chakra-text,
.chakra-item:not(.active) .chakra-image{
  opacity:0;
}

/* TEXT */
.chakra-text{
  width:45%;
}

.chakra-text h3{
  font-size:32px;
  line-height:1.05;
  color:#b58e8e;
  font-weight:400;
}

.chakra-text strong{
  color:#fff;
  font-weight:700;
}

.chakra-text a{
  display:inline-block;
  margin-top:70px;
  color:#fff;
  font-size:22px;
}

/* IMAGE */
.chakra-image{
  width:45%;
}

.chakra-image img{
 
    width: 100%;
    object-fit: cover;
    min-height: 300px;
    max-height: 350px;
 
  border-radius:24px;
  display:block;
}


/* client start */

/* Carousel and animation css starts  */
.home-rc-carousel {
  --box-gap: 1.5rem;
  --tile-size: 13rem;
  width: 100%;
  max-width: calc(
    (var(--tile-size) + var(--box-gap)) * ((var(--tiles) / 2) - 1)
  );
  margin: var(--box-gap) auto;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

.home-rc-carousel::before {
  left: 0;
  --direction: left;
}

.home-rc-carousel::after {
  right: 0;
  --direction: right;
}
.home-rc-carousel-strip {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-animation: slideX 20s linear infinite;
  animation: slideX 20s linear infinite;
}
.home-rc-carousel-strip.reverse {
  /* reverse animation */
  animation-direction: reverse;
}
.home-rc-carousel-strip:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.home-rc-carousel-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: var(--box-gap);
}

.home-rc-carousel-item {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 12%;
  height: 120px;
}

.home-rc-carousel-item-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

@-webkit-keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}

@keyframes slideX {
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  0% {
    -webkit-transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
    transform: translateX(
      calc(-1 * (var(--tile-size) + var(--box-gap)) * (var(--tiles) / 2))
    );
  }
}


/* client end */



/* timeline start */


   .cbtl-wrap{
    width:100%;
    background: #f5f5f5;
    padding:50px 30px;
    overflow-x:auto;
  }

  .cbtl-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    grid-template-rows:auto auto auto;
    column-gap:36px;
    row-gap:0;
    max-width:1900px;
    min-width:1300px;
    margin:0 auto;
    align-items:center;
  }

  .cbtl-col{ display:contents; }

  .cbtl-slot-top, .cbtl-slot-bottom{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 8px;
  }

  .cbtl-slot-top{ grid-row:1; padding-bottom:26px; }
  .cbtl-slot-bottom{ grid-row:3; padding-top:26px; }

  .cbtl-spine-cell{
    grid-row:2;
    position:relative;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .cbtl-col:nth-of-type(1) > *{ grid-column:1; }
  .cbtl-col:nth-of-type(2) > *{ grid-column:2; }
  .cbtl-col:nth-of-type(3) > *{ grid-column:3; }
  .cbtl-col:nth-of-type(4) > *{ grid-column:4; }
  .cbtl-col:nth-of-type(5) > *{ grid-column:5; }

  /* continuous horizontal line across the whole grid row */
  .cbtl-spine-line{
    grid-row:2;
    grid-column:1 / -1;
    position:relative;
    height:2px;
    background: #9aa1ab;
    align-self:center;
    top:0;
  }

  .cbtl-diamond{
    position:absolute;
    left:50%;
    top:50%;
    width:14px;
    height:14px;
    background: #0c1a3d;
    transform:translate(-50%,-50%) rotate(45deg);
    border-radius:2px;
    z-index: 1;
  }

  .cbtl-stem{
    position:absolute;
    left:50%;
    width:1px;
    background: #0c1a3d;
    transform:translateX(-50%);
  }
  .cbtl-stem-up{ bottom:50%; height:44px; }
  .cbtl-stem-down{ top:50%; height:44px; }

  .cbtl-img{
    width:100%;
    max-width:310px;
    height:180px;
    border-radius:16px;
    object-fit:cover;
    display:block;
    box-shadow:0 4px 14px rgba(20,30,60,0.10);
  }

 .cbtl-label {
    font-size: 20px;
    font-weight: 500;
    color: #009ada;
    margin: 0 0 4px;
    text-align: center;
}

  .cbtl-year{
    font-size:30px;
    font-weight:800;
    color: #0c1a3d;
    margin:0 0 12px;
    text-align:center;
  }

  .cbtl-desc{
    font-size:18px;
    line-height:1.55;
    color: #000;
    margin:0;
    max-width:260px;
    text-align:center;
  }

  @media (max-width:1400px){
    .cbtl-grid{ min-width:1200px; }
  }


/* timeline end */


section.privacy-policy-outer {
    padding-top: 35px;
    padding-bottom: 50px;
}

h1.about-hero-title.privacy {
    font-size: 140px;
}

.contact-list.outer {
    align-items: flex-end;
}


.sdxh-showcase__buttons{
    display:flex;
    gap:18px;
    margin-top:40px;
        flex-direction: row;
}

.sdxh-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    
    padding: 17px 20px;
    border-radius:18px;
    text-decoration:none;
    color:#fff;
        font-size: 18px;
    font-weight: 600;
    line-height:1;
    transition:.3s ease;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
}

.sdxh-btn:hover{
    transform:translateY(-3px);
    color:#fff;
}

.sdxh-btn--whatsapp{
    background:linear-gradient(90deg,#21d95f,#22c85c);
    box-shadow:0 12px 22px rgba(34,201,92,.35);
}

.sdxh-btn--call{
    background:linear-gradient(90deg,#19a9ea,#12b7e8);
    box-shadow:0 12px 22px rgba(20,173,234,.35);
}

.sdxh-btn__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    line-height:1;
}

.sdxh-btn{
    color:#fff;
}

.sdxh-btn__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.sdxh-btn__icon svg{
    width: 19px;
    height: 19px;
    display:block;
}


h3.footer-email a {
    color: #fff;
    text-decoration: none;
}

h3.footer-email a:hover {
    color: #009ada;
    text-decoration: none;
}

.contact-detail-item a {
    color: #000 ;
    text-decoration: none;
}
.contact-detail-item a:hover {
    color: #009ada;
    text-decoration: none;
}

@media (max-width:768px){

    .sdxh-showcase__buttons{
        flex-direction:column;
        gap:15px;
    }

    .sdxh-btn{
        width:100%;
        min-width:100%;
        height: 45px;
        font-size: 15px;
        border-radius: 14px
    }

    .sdxh-btn__icon{
        font-size:22px;
    }

    #mega-menu-wrap-menu-1 .mega-menu-toggle{
              background-color: transparent;
    }
    #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner, #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before, #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after{
          background-color: #000;
    }

    #mega-menu-wrap-menu-1 .mega-menu-toggle ~ button.mega-close:before{
      font-size: 30px;
    }

    .Home-banner-outer .col-8.col-md-8 {
    width: 100%;
}

.card-5x {
    gap: 15px;
    display: flex;
}
.card-top-left .stat-number {
    font-size: 35px;
}

.card-top-left .stat-label {
    font-size: 17px;
}

.service-detail-box {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
    border-radius: 20px;
    gap: 10px;
    margin-bottom: 20px;
    padding: 20px 10px;
}

.service-detail-img {
    margin-bottom: 0px;
}
.service-detail-tag {
font-size: 11px;
}

.portfolio-outer .portfolio-card {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
    border-radius: 20px;
    padding: 20px 10px;
}

.awsm-job-entry-content h3 {
    font-size: 20px !important;
}
.awsm-job-single-wrap {
       gap: 30px !important;
    padding: 0px 10px !important;
}
.industry-grid {
    display: grid;
    grid-template-columns: 1fr !important;
}
.industries_box {
    width: 100%  !important;
}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link{
  color: #fff;
}

  }


/* MOBILE */
@media(max-width:991px){

  .chakra-tabs{
    flex-direction:column;
    height:auto;
  }

  .chakra-item{
    flex:none !important;
    width:100%;
    height:100px;
  }

  .chakra-item.active,
  .chakra-item:hover{
    height:auto;
    min-height:650px;
  }

  .chakra-vertical{
    writing-mode:initial;
    transform:translate(-50%,-50%);
    font-size:30px;
  }

  .chakra-content{
    flex-direction:column;
    padding:120px 30px 40px;
  }

  .chakra-text,
  .chakra-image{
    width:100%;
  }

  .chakra-text h3{
    font-size:42px;
  }

  .chakra-image img{
    height:auto;
  }
}




    /* Responsive grid override */
    @media (max-width: 576px) {
      .partners-grid .col {
        flex: 0 0 50%;
        max-width:47%;
      }
    }

  /* client section end */

/* 
challenge start */

.challenge-list{
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

.challenge-item{
    display:flex;
    align-items:flex-start;
        gap: 15px;
    margin-bottom: 20px;
}

.challenge-item:last-child{
    margin-bottom:0;
}

.challenge-number{
   
    flex-shrink:0;
    font-size:18px;
    font-weight:500;
    color:#474747;
    line-height:1;
    letter-spacing:1px;
        padding-top: 3px;
}


.challenge-content{
    flex:1;
    color:#000;
    font-size:18px;
    line-height:1.45;
    font-weight:400;
}

@media (max-width:768px){

    .challenge-item{
        gap:20px;
        margin-bottom:45px;
    }

    .challenge-number{
        width:40px;
        font-size:22px;
    }

    .challenge-content{
        font-size:18px;
        line-height:1.6;
    }
div#partnersGrid {
    gap: 15px;
}
.about-basic-outer .col-12.col-md-8 {
    padding-left: 0px; 
}
.about-basic-title {
    font-size: 30px;
            padding-top: 20px;
}
.about-basic-outer{
      padding: 60px 0;
}
.about-stats-title {
    font-size: 30px;
        margin-bottom: 30px;
}

.about-stats-outer{
      padding: 57px 0;
}

.about-stats-outer .row.g-3 {
    padding-top: 33px;
            gap: 10px;
   
}

h2.stat-item {
    font-size: 35px;
}
.stat-card{
      padding: 15px 28px;
}

.about-basic-desc{
      margin-bottom: 5px;
}

.approach-title {
    font-size: 30px;
}

.approach-outer {
    padding: 50px 0;
}

.approach-cards {
    margin-top: 30px;
}

.approach-card-top{
  margin-bottom: 20px;
}

.approach-card-title {
    font-size: 30px;
}

}

/* challenge end  */


/* solution */

.solution-list {
    font-size: 18px;
    color: #fff;
    /* max-width: 500px; */
    line-height: 1.6;
}

.works-badge.solution h4 {
    color: #fff;
}



.work-left-solution h2 {
      font-size: 50px;
    padding-bottom: 20px;
    color: #fff;
}

section.work-detail-solutuon {
       padding: 50px;
    background: url(https://thewebsitedemo.in/encrytnew/wp-content/uploads/2026/07/5b3d2d6b-6f13-46e2-923e-efb15e61ce63.webp);
    object-position: center;
    object-fit: contain;
    margin-left: 6px;
    margin-right: 6px;
    border-radius: 20px;
}

section.single-work-banner-logo {
    padding-bottom: 15px;
        padding-top: 50px;
}



.impact-list {
    font-size: 18px;
    color: #333;
    /* max-width: 500px; */
    line-height: 1.6;
}


.work-left-impact h2 {
      font-size: 50px;
    padding-bottom: 20px;
}

section.work-detail-impact {
    padding-bottom: 50px;
        padding-top:50px;
}



.related-works{
    padding:30px 0 60px;
}

.related-title{
    margin-bottom:20px;
    font-size:50px;
    font-weight:500;
    text-align: center;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:36px;
}

.related-card{
    text-decoration:none;
    color:#111;
}

.related-image{
    border-radius:32px;
    overflow:hidden;
}

.related-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.related-card:hover .related-image img{
    transform:scale(1.05);
}

.related-content{
    margin-top:28px;
}

.related-content h3{
    font-size:24px;
    margin-bottom:12px;
    font-weight:500;
}

.related-content p{
    font-size:16px;
    line-height:1.6;
    color:#666;
    margin:0;
}

@media(max-width:991px){

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

}

@media(max-width:767px){

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

   

}


/* industries */


.industry-grid {
    display: flex;
    flex-wrap: wrap;
}

.industries_box {
    width: 24.33%;
    border: 1px solid #ddd;
    text-align: center;
    padding: 30px 20px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background: #fff;
}

.industry-grid .industries_box {
    border-right: 1px solid #ddd;
}

.home-industries {
    padding: 50px 0px 70px;
}

.industries_box img {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    object-fit: contain;
    transition: .2s ease-in-out all;
    -webkit-transition: .2s ease-in-out all;
}

.industries_box h2 {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    margin: 0;
}

.industries_box:hover img {
    transform: scale(1.1);
}


/* ===========================
   cta gif Showcase Section
=========================== */

.sdxh-showcase{
    width:95%;
    max-width:1800px;
    margin:40px auto;
    display:grid;
    grid-template-columns:340px 1fr 340px;
    gap: 20px;
    align-items:stretch;
}

/* Left & Right Cards */

.sdxh-showcase__card{
    height:400px;
    overflow:hidden;
    border-radius:26px;
    background:#222;
}

.sdxh-showcase__card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/* Center */

.sdxh-showcase__content{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    background: #009ada;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
}



/* Heading */

.sdxh-showcase__title{
    position:relative;
    z-index:2;
    color:#fff;
    font-size:32px;
    line-height:1.28;
    font-weight:600;
    max-width:900px;
}

/* Button */

.sdxh-showcase__button{
    position:relative;
    z-index:2;
    margin-top:80px;
   
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#fff;
    
    
    border:1px solid #fff;
    background:rgba(255,255,255,.05);
    transition:.35s;
    padding: 18px 36px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
}



/* Responsive */

@media (max-width:1200px){

    .sdxh-showcase{
        grid-template-columns:1fr;
    }

    .sdxh-showcase__card{
        height:420px;
    }

    .sdxh-showcase__content{
        min-height:550px;
    }

    .sdxh-showcase__title{
        font-size:42px;
    }

    .sdxh-showcase__button{
        width:300px;
        font-size:22px;
    }

}