.banner-section {
  padding: 100px 0 80px;
  
}
.banner-section .banner-content h1 {
  font-family: 'Colasta';
  font-weight: 700;
  font-size: 70px;
  line-height: 85px;
  color: #333333;
  margin-bottom: 38px;
  text-align: center;
  
}
.banner-section .banner-content p.first-text {
  font-family: 'Colasta';
  font-weight: 700;
  font-size: 70px;
  line-height: 85px;
  color: #333333;
  margin-bottom: 38px;
  text-align: center;
  
}
.banner-section .banner-content .second-line {
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: center;
  
}
.banner-section h2 {
  font-family: 'Colasta';
  font-weight: 700;
  font-size: 70px;
  line-height: 85px;
  color: #333333;
  flex-shrink: 0;
  text-align: center;
  
}
.banner-section .banner-content .second-line {
  margin-bottom: 25px;
  
}
.banner-section .banner-content h1 span {
  background: -webkit-linear-gradient(12deg, #1F3763 16.4%, #358ECA 104.07%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}
.banner-section .short-descrip p {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: #333333;
  
}
.third-text {
  display: flex;
  align-items: center;
  justify-content: end;
  
}
.svipper-text {
  position: relative;
  overflow: hidden;
  height: 85px;
  display: inline-block;
  margin-right: 20px;
  
}
.svipper-text span {
  display: block;
  width: 100%;
  text-align: center;
  animation: bounce-swipe 10s cubic-bezier(0.1, -0.1, 0.1, 1) infinite;
  position: relative;
  
}
@keyframes bounce-swipe {
  0% {
  top: 0;
  
}
20% {
  top: -85px;
  
}
40% {
  top: -170px;
  
}
60% {
  top: -255px;
  
}
80% {
  top: -340px;
  
}
100% {
  top: -0;
  
}

}
.logo-sec {
  padding: 0 0 100px;
  
}
.logo-sec img {
  filter: grayscale(100%);
  
}
.logo-sec img:hover {
  filter: unset;
  
}
.logo-sec .content {
  display: flex;
  justify-content: space-around;
  
}
.logo-sec h3 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  
}
.home-about-us-sec {
  background: linear-gradient(180deg, rgba(29, 54, 101, 0.03) 0%, rgba(29, 54, 101, 0) 100%);
  
}
.home-about-us-sec .left-side img {
  width: 100%;
  
}
.home-about-us-sec .right-side {
  padding-left: 30px;
  
}
.home-about-us-sec p {
  color: #181818;
  
}
/* .home-about-us-sec .learn-more-btn {
  color: #767676;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  display: flex;
  align-items: center;
  padding-left: 18px;
  position: relative;
  width: max-content;
  
}
.home-about-us-sec .learn-more-btn .arrow {
  height: 34px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid transparent;
  border-radius: 50px;
  margin-left: 10px;
  
}
.home-about-us-sec .learn-more-btn::after {
  content: '';
  width: 34px;
  height: 34px;
  border: 1px solid #767676;
  position: absolute;
  right: 0;
  transition: 0.35s;
  border-radius: 50px;
  
}
.home-about-us-sec .learn-more-btn:hover::after {
  width: 100%;
  
}
.home-about-us-sec .learn-more-btn:hover .arrow {
  border: 1px solid #767676;
  
}
*/

.learn-more-btn{
  display: inline-block;
  
}
.learn-more-btn span {
  border-radius: 50px;
  top: 0;
  left: 0;
  transition: 0.3s;
  border-radius: 50px;
  padding: 0;
  color: #767676;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  display: flex;
  align-items: center;
  padding-left: 18px;
  position: relative;
  
}
.learn-more-btn .arrow {
  height: 34px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid transparent;
  border-radius: 50px;
  margin-left: 10px;
  border: 1px solid #767676;
  z-index: 11;
  position: relative;
  background-color: #fff;
  
}
.learn-more-btn span::before{
  content: "";
  position: absolute;
  width: 0%;
  height: 0%;
  background: transparent;
  opacity: 0;
  z-index: 2;
  top: 0%;
  right: 10%;
  border-top: 1px solid #767676;
  border-left: 1px solid #767676;
  transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;
  
}
.learn-more-btn span::after{
  content: "";
  position: absolute;
  width: 0%;
  height: 0%;
  background: transparent;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 10%;
  border-bottom: 1px solid #767676;
  transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;
  border-left: 1px solid #767676;
  
}
.learn-more-btn span:hover::before {
  width: 89.5%;
  height: 17px;
  opacity: 1;
  transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;
  border-top-left-radius: 16px;
  
}
.learn-more-btn span:hover::after {
  width: 89.5%;
  opacity: 1;
  height: 17px;
  transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;
  border-bottom-left-radius: 16px;
  
}
.mobile-banner-sec{
  display: none !important;
  
}
@media (max-width: 575.98px) {
  .banner-section {
  padding: 50px 0;
  
}
.banner-section .banner-content h1, .banner-section .banner-content p.first-text {
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 40px;
  
}
.banner-section .banner-content h2 {
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 40px;
  
}
.banner-section .banner-content .second-line {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  
}
.banner-section .short-descrip p {
  font-size: 15px;
  line-height: 25px;
  
}
.banner-section .short-descrip p br {
  display: none;
  
}
.svipper-text {
  margin-right: 10px;
  height: 33px;
  
}
.banner-section .banner-content h1.third-text {
  display: none;
  
}
.banner-section .banner-content h1.third-text span {
  margin: 0 10px;
  
}
marquee {
  display: block;
  
}
marquee span {
  margin: 0 10px;
  
}
.logo-sec .content {
  flex-wrap: wrap;
  gap: 20px;
  
}
.logo-sec {
  padding: 0 0 50px;
  
}
.logo-sec img {
  filter: unset;
  
}
.home-about-us-sec .right-side {
  padding-left: 12px;
  text-align: center;
  
}
.home-about-us-sec .learn-more-btn {
  margin-left: auto;
  margin-right: auto;
  
}
.mobile-banner-sec{
  display: block !important;
  
}
.desktop-banner-sec{
  display: none !important;
  
}

}
@media (max-width: 767.98px) and (orientation: landscape) {
  .banner-section {
  padding: 50px 0;
  
}
.banner-section .banner-content h1, .banner-section .banner-content p.first-text {
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 40px;
  
}
.banner-section .banner-content h2 {
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 40px;
  
}
.banner-section .banner-content .second-line {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  
}
.banner-section .short-descrip p {
  font-size: 15px;
  line-height: 25px;
  
}
.banner-section .short-descrip p br {
  display: none;
  
}
.svipper-text {
  margin-right: 10px;
  height: 33px;
  
}
.banner-section .banner-content h1.third-text {
  display: none;
  
}
.banner-section .banner-content h1.third-text span {
  margin: 0 10px;
  
}
marquee {
  display: block;
  
}
marquee span {
  margin: 0 10px;
  
}
.logo-sec .content {
  flex-wrap: wrap;
  gap: 20px;
  
}
.logo-sec {
  padding: 0 0 50px;
  
}
.logo-sec img {
  filter: unset;
  
}
.home-about-us-sec .right-side {
  padding-left: 12px;
  text-align: center;
  
}
.home-about-us-sec .learn-more-btn {
  margin-left: auto;
  margin-right: auto;
  
}
.mobile-banner-sec{
  display: block !important;
  
}
.desktop-banner-sec{
  display: none !important;
  
}

}
@media (min-width: 576px) and (max-width: 767.98px) {
  .banner-section {
  padding: 50px 0;
  
}
.banner-section .banner-content h1, .banner-section .banner-content p.first-text {
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 40px;
  
}
.banner-section .banner-content h2 {
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 40px;
  
}
.banner-section .banner-content .second-line {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  
}
.banner-section .short-descrip p {
  font-size: 15px;
  line-height: 25px;
  
}
.banner-section .short-descrip p br {
  display: none;
  
}
.svipper-text {
  margin-right: 10px;
  height: 33px;
  
}
.banner-section .banner-content h1.third-text {
  display: none;
  
}
.banner-section .banner-content h1.third-text span {
  margin: 0 10px;
  
}
marquee {
  display: block;
  
}
marquee span {
  margin: 0 10px;
  
}
.logo-sec .content {
  flex-wrap: wrap;
  gap: 20px;
  
}
.logo-sec {
  padding: 0 0 50px;
  
}
.logo-sec img {
  filter: unset;
  
}
.home-about-us-sec .right-side {
  padding-left: 12px;
  text-align: center;
  
}
.home-about-us-sec .learn-more-btn {
  margin-left: auto;
  margin-right: auto;
  
}
.mobile-banner-sec{
  display: block !important;
  
}
.desktop-banner-sec{
  display: none !important;
  
}

}
@media (min-width: 768px) and (max-width: 991.98px) {
  .banner-section {
  padding: 50px 0;
  
}
.banner-section .banner-content h1, .banner-section .banner-content p.first-text {
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 40px;
  
}
.banner-section .banner-content h2 {
  font-size: 28px;
  margin-bottom: 10px;
  line-height: 40px;
  
}
.banner-section .banner-content .second-line {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  
}
.banner-section .short-descrip p {
  font-size: 15px;
  line-height: 25px;
  
}
.banner-section .short-descrip p br {
  display: none;
  
}
.svipper-text {
  margin-right: 10px;
  height: 33px;
  
}
.banner-section .banner-content h1.third-text {
  display: none;
  
}
.banner-section .banner-content h1.third-text span {
  margin: 0 10px;
  
}
marquee {
  display: block;
  
}
marquee span {
  margin: 0 10px;
  
}
.logo-sec .content {
  flex-wrap: wrap;
  gap: 20px;
  
}
.logo-sec {
  padding: 0 0 50px;
  
}
.home-about-us-sec .right-side {
  padding-left: 12px;
  text-align: center;
  width: 100%;
  
}
.home-about-us-sec .learn-more-btn {
  margin-left: auto;
  margin-right: auto;
  
}
.home-about-us-sec h1 br {
  display: none;
  
}
.mobile-banner-sec{
  display: block !important;
  
}
.desktop-banner-sec{
  display: none !important;
  
}

}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .banner-section {
  padding: 60px 0 50px;
  
}
.banner-section .banner-content h1, .banner-section .banner-content p.first-text {
  font-size: 52px;
  margin-bottom: 20px;
  line-height: 66px;
  
}
.banner-section h2 {
  font-size: 52px;
  margin-bottom: 20px;
  line-height: 66px;
  
}
.banner-section .banner-content .second-line {
  margin-bottom: 15px;
  
}
.banner-section .short-descrip p {
  font-size: 18px;
  
}
.svipper-text {
  height: 52px;
  
}
@keyframes bounce-swipe {
  0% {
  top: 0;
  
}
20% {
  top: -75px;
  
}
40% {
  top: -150px;
  
}
60% {
  top: -225px;
  
}
80% {
  top: -300px;
  
}
100% {
  top: -350;
  
}

}
.home-about-us-sec .right-side {
  padding-left: 20px;
  
}
.home-about-us-sec .learn-more-btn {
  font-size: 14px;
  
}
.home-about-us-sec .learn-more-btn .arrow {
  height: 30px;
  width: 30px;
  
}
.home-about-us-sec .learn-more-btn::after {
  height: 30px;
  width: 30px;
  
}

}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .banner-section {
  padding: 80px 0 60px;
  
}
.banner-section .banner-content h1, .banner-section .banner-content p.first-text {
  font-size: 62px;
  margin-bottom: 28px;
  line-height: 75px;
  
}
.banner-section h2 {
  font-size: 62px;
  margin-bottom: 28px;
  line-height: 75px;
  
}
.banner-section .banner-content .second-line {
  margin-bottom: 15px;
  
}
.svipper-text {
  height: 65px;
  
}
@keyframes bounce-swipe {
  0% {
  top: 0;
  
}
20% {
  top: -85px;
  
}
40% {
  top: -170px;
  
}
60% {
  top: -235px;
  
}
80% {
  top: -310px;
  
}
100% {
  top: -0;
  
}

}

}
/* ==========================================================================
   Phase 2 — permanent hero (replaces the rotating service headline)
   Selectors are doubled up (.banner-section.hero-section) so they outrank the
   generic .banner-section rules above, including inside the media queries.
   ========================================================================== */

.banner-section.hero-section {
  padding: 74px 0 58px;
  
}
.banner-section.hero-section .banner-content {
  text-align: center;
  
}
.banner-section.hero-section .banner-content .hero-eyebrow {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2A8DCD;
  margin-bottom: 18px;
  
}
.banner-section.hero-section .banner-content h1 {
  font-family: 'Colasta';
  font-weight: 700;
  font-size: 56px;
  line-height: 1.14;
  color: #333333;
  margin-bottom: 22px;
  text-align: center;
  
}
.banner-section.hero-section .banner-content h1 span {
  display: block;
  background: -webkit-linear-gradient(12deg, #1F3763 16.4%, #358ECA 104.07%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}
.banner-section.hero-section .banner-content .hero-lede {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: #4A4A4A;
  max-width: 74ch;
  margin: 0 auto 30px;
  
}
.banner-section.hero-section .banner-content .hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .banner-section.hero-section {
  padding: 64px 0 50px;
  
}
.banner-section.hero-section .banner-content h1 {
  font-size: 50px;
  
}

}
@media (max-width: 1199.98px) {
  .banner-section.hero-section {
  padding: 58px 0 46px;
  
}
.banner-section.hero-section .banner-content h1 {
  font-size: 42px;
  margin-bottom: 18px;
  
}
.banner-section.hero-section .banner-content .hero-lede {
  font-size: 17px;
  line-height: 29px;
  
}

}
@media (max-width: 991.98px) {
  .banner-section.hero-section {
  padding: 46px 0 36px;
  
}
.banner-section.hero-section .banner-content h1 {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 16px;
  
}
.banner-section.hero-section .banner-content .hero-eyebrow {
  font-size: 13px;
  margin-bottom: 14px;
  
}
.banner-section.hero-section .banner-content .hero-lede {
  font-size: 16px;
  line-height: 27px;
  margin-bottom: 24px;
  
}

}
@media (max-width: 575.98px) {
  .banner-section.hero-section {
  padding: 38px 0 30px;
  
}
.banner-section.hero-section .banner-content h1 {
  font-size: 27px;
  line-height: 1.26;
  
}
.banner-section.hero-section .banner-content h1 span {
  display: inline;
  
}
.banner-section.hero-section .banner-content .hero-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  
}
.banner-section.hero-section .banner-content .hero-lede {
  font-size: 15px;
  line-height: 25px;
  
}
.banner-section.hero-section .banner-content .hero-actions {
  width: 100%;
  
}

}
/* ==========================================================================
   Phase 2 — new homepage sections
   Self-contained, ks- prefixed so they cannot collide with existing rules.
   ========================================================================== */

/* --- shared --- */
.ks-ai-sec .ks-ai-lede,
.ks-process-sec .ks-process-lede {
  font-size: 18px;
  line-height: 30px;
  color: #4A4A4A;
  margin: 14px auto 0;
  max-width: 76ch;
  
}
/* --- AI development & automation --- */
.ks-ai-sec {
  background: #F6F9FC;
  
}
.ks-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
  
}
.ks-ai-card {
  background: #FFFFFF;
  border: 1px solid #E4EBF1;
  border-radius: 12px;
  padding: 24px 22px;
  transition: border-color .2s ease, transform .2s ease;
  
}
.ks-ai-card:hover {
  border-color: #2A8DCD;
  transform: translateY(-3px);
  
}
.ks-ai-card h3 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: #1F3763;
  margin-bottom: 8px;
  
}
.ks-ai-card p {
  font-size: 15px;
  line-height: 25px;
  color: #55606B;
  margin: 0;
  
}
.ks-ai-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  
}
/* --- development process --- */
.ks-process-grid {
  list-style: none;
  padding: 0;
  margin: 46px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  
}
.ks-process-step {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E4EBF1;
  border-radius: 12px;
  padding: 26px 24px 24px;
  
}
.ks-process-step .ks-step-num {
  display: inline-block;
  font-family: 'Colasta', serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  color: #2A8DCD;
  opacity: .35;
  margin-bottom: 12px;
  
}
.ks-process-step h3 {
  font-size: 19px;
  line-height: 27px;
  font-weight: 700;
  color: #1F3763;
  margin-bottom: 8px;
  
}
.ks-process-step p {
  font-size: 15px;
  line-height: 25px;
  color: #55606B;
  margin: 0;
  
}
/* --- founder & team ---------------------------------------------------
   Rebuilt to a text-intro row (heading+link left, description+quote right)
   followed by an asymmetric photo grid: one tall featured portrait beside a
   2x2 grid of smaller ones, then a row of verified stat tiles. The 2x2 grid
   is its own nested grid so its row heights are governed only by its own
   (same-size) tiles;
  the hero portrait is given a matching aspect-ratio so
   its height comes out close to the two stacked rows + gap alongside it.  */
.ks-founder-intro {
  padding-top: 4px;
  
}
.ks-founder-intro .learn-more-btn {
  margin-top: 0px;
  
}
.ks-founder-body {
  padding-left: 24px;
  
}
.ks-founder-note {
  font-size: 16px;
  line-height: 28px;
  color: #4A4A4A;
  margin-bottom: 20px;
  
}
.ks-founder-quote {
  margin: 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid #2A8DCD;
  
}
.ks-founder-quote p {
  font-size: 19px;
  line-height: 32px;
  color: #333333;
  font-style: italic;
  margin-bottom: 14px;
  
}
.ks-founder-quote .ks-quote-attrib {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: none;
  padding: 0;
  
}
.ks-founder-name {
  font-weight: 700;
  font-size: 15px;
  color: #1F3763;
  
}
.ks-founder-role {
  font-size: 14px;
  color: #6B7680;
  
}
/* --- photo bento --- */
.ks-team-bento {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  margin-top: 56px;
  align-items: start;
  
}
.ks-team-figure {
  margin: 0;
  
}
.ks-team-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
  background: #E4EBF1;
  
}
.ks-team-hero .ks-team-photo img {
  aspect-ratio: 4 / 5;
  
}
.ks-team-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  
}
.ks-team-name {
  font-weight: 700;
  font-size: 17px;
  color: #1F3763;
  
}
.ks-team-hero .ks-team-name {
  font-size: 19px;
  
}
.ks-team-role {
  font-size: 14px;
  color: #6B7680;
  
}
.ks-team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  
}
.ks-team-grid .ks-team-photo img {
  aspect-ratio: 4 / 5;
  
}
.ks-team-grid .ks-team-figure figcaption {
  margin-top: 12px;
  
}
.ks-team-grid .ks-team-name {
  font-size: 16px;
  
}
/* --- stat tiles --- */
.ks-founder-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
  
}
.ks-founder-stat {
  background: #fff;
  border: 1px solid #E4EBF1;
  border-radius: 12px;
  padding: 20px 22px;
  
}
.ks-founder-stat-k {
  display: block;
  font-family: 'Colasta';
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: #1F3763;
  margin-bottom: 4px;
  
}
.ks-founder-stat-l {
  font-size: 14px;
  line-height: 20px;
  color: #6B7680;
  
}
@media (max-width: 1199.98px) {
  .ks-ai-grid, .ks-process-grid {
  grid-template-columns: repeat(2, 1fr);
  
}

}
@media (max-width: 991.98px) {
  .ks-ai-sec .ks-ai-lede, .ks-process-sec .ks-process-lede {
  font-size: 16px;
  line-height: 27px;
  
}
.ks-founder-body {
  padding-left: 12px;
  margin-top: 24px;
  
}
.learn-more-btn span::before {
  width: 89.5%;
  height: 17px;
  opacity: 1;
  transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;
  border-top-left-radius: 16px;
  
}
.learn-more-btn span::after {
  width: 89.5%;
  opacity: 1;
  height: 17px;
  transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;
  border-bottom-left-radius: 16px;
  
}
.ks-founder-quote p {
  font-size: 17px;
  line-height: 29px;
  
}
.ks-team-bento {
  grid-template-columns: 1fr;
  margin-top: 40px;
  
}
.ks-team-grid {
  margin-top: 4px;
  
}
.ks-founder-stats {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 32px;
  
}
.ks-founder-stat:last-child {
  grid-column: 1 / -1;
  
}

}
@media (max-width: 575.98px) {
  .ks-ai-grid, .ks-process-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 30px;
  
}
.ks-ai-card, .ks-process-step {
  padding: 20px 18px;
  
}
.ks-ai-cta {
  margin-top: 28px;
  
}
.ks-ai-cta .common-btn {
  width: 100%;
  justify-content: center;
  
}
.ks-team-grid {
  grid-template-columns: 1fr;
  gap: 18px;
  
}
.ks-team-bento {
  gap: 30px;
  margin-top: 32px;
  
}
.ks-founder-stats {
  grid-template-columns: 1fr;
  margin-top: 26px;
  
}
.ks-founder-stat:last-child {
  grid-column: auto;
  
}

}
@media (prefers-reduced-motion: reduce) {
  .ks-ai-card {
  transition: none;
  
}
.ks-ai-card:hover {
  transform: none;
  
}

}
/* The pull-up cancellation that used to live here has been removed: the CTA
   now overlaps into the Development Process band, which provides the landing
   room. See the overlap block at the end of this file. */
/* ==========================================================================
   Phase 2b — fixes from design review
   ========================================================================== */

/* --- Button hover ---------------------------------------------------------
   Colour, shape and gradient below are exactly the requested values (they
   also already exist unchanged in common-sections.css .common-btn:hover, so
   this block only needs to touch the icon/text motion).

   The requested icon distance was translateX(100px), which lands the icon on
   top of the label on any button wider than "Contact Us" (confirmed by
   rendering "Discuss Your Project" with that exact value: the icon sits on
   the "P" of "Project"). 300px was tested against every button label on the
   site, including the longest ("Request a Project Estimate"), and clears all
   of them. overflow:hidden is required so the icon disappears past the
   pill's edge instead of floating outside its rounded corners.             */
.common-btn {
  overflow: hidden;
  
}
.common-btn:hover {
  color: #fff;
  border-radius: 50px !important;
  background: linear-gradient(90deg, #1F3763 -15.09%, #358ECA 92.79%);
  
}
.common-btn img {
  transition: transform .35s ease;
  
}
.home-banner.common-btn:hover img{
  transform: translateX(180px);
  
}
.ks-ai-cta .common-btn:hover img{
  transform: translateX(212px);
  
}
.common-btn:hover span.text,
.common-btn:hover input {
  transform: translateX(-20px);
  
}
.cta-section.ks-cta-standalone a.common-btn:hover{
  color:#2A8DCD;
  
}
@media (prefers-reduced-motion: reduce) {
  .common-btn img,
  .common-btn span.text,
  .common-btn input {
  transition: none;
  
}
.common-btn:hover img {
  transform: none;
  
}
.common-btn:hover span.text,
  .common-btn:hover input {
  transform: none;
  
}

}
/* --- Services section spacing ---------------------------------------------
   .home-our-service-sec carries padding-bottom:350px purely so the old
   .cta-section (margin-top:-250px) could overlap up into it. The CTA no
   longer follows this section, so that 350px is dead space.                  */
.home-our-service-sec.ks-services-standalone {
  padding-bottom: 90px;
  
}
@media (max-width: 991.98px) {
  .home-our-service-sec.ks-services-standalone {
  padding-bottom: 60px;
  
}

}
/* ==========================================================================
   Phase 2b — two-column hero + verified stat strip
   These reuse the Phase 2 selectors deliberately: same specificity, later in
   the file, so they override the centred version without an !important war.
   ========================================================================== */

.banner-section.hero-section {
  padding: 64px 0 0;
  
}
.banner-section.hero-section .banner-content {
  text-align: left;
  
}
.banner-section.hero-section .banner-content .hero-eyebrow {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2A8DCD;
  margin-bottom: 16px;
  
}
.banner-section.hero-section .banner-content h1 {
  font-family: 'Colasta';
  font-weight: 700;
  font-size: 50px;
  line-height: 1.14;
  color: #1F3763;
  margin-bottom: 20px;
  text-align: left;
  
}
.banner-section.hero-section .banner-content h1 span {
  display: block;
  background: -webkit-linear-gradient(12deg, #1F3763 16.4%, #358ECA 104.07%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}
.banner-section.hero-section .banner-content .hero-lede {
  font-weight: 400;
  font-size: 17px;
  line-height: 29px;
  color: #4A4A4A;
  max-width: 58ch;
  margin: 0 0 28px;
  
}
.banner-section.hero-section .banner-content .hero-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  
}
/* The shared .common-btn auto-centres itself;
  inside the hero it sits left. */
.banner-section.hero-section .hero-actions .common-btn {
  margin-left: 0;
  margin-right: 0;
  
}
.banner-section.hero-section .hero-actions .hero-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: #1F3763;
  background: #fff;
  border: 1.5px solid #D5DEE8;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  transition: border-color .25s ease, color .25s ease, border-radius .25s ease;
  
}
.banner-section.hero-section .hero-actions .hero-btn-ghost:hover {
  border-color: #2A8DCD;
  color: #2A8DCD;
  border-radius: 50px;
  
}
.banner-section.hero-section .banner-content .hero-trust {
  font-size: 14px;
  line-height: 22px;
  color: #6B7680;
  margin: 18px 0 0;
  
}
.banner-section.hero-section .hero-media {
  text-align: right;
  
}
.banner-section.hero-section .hero-media img {
  width: 100%;
  height: auto;
  max-width: 620px;
  
}
/* --- verified stat strip --- */
.banner-section.hero-section .hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid #E4EBF1;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(31, 55, 99, 0.07);
  margin-top: 54px;
  overflow: hidden;
  
}
.banner-section.hero-section .hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 26px;
  border-left: 1px solid #E4EBF1;
  
}
.banner-section.hero-section .hero-stat:first-child {
  border-left: 0;
  
}
.banner-section.hero-section .hero-stat-k {
  font-family: 'Colasta';
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  color: #1F3763;
  
}
.banner-section.hero-section .hero-stat-l {
  font-size: 14px;
  line-height: 21px;
  color: #6B7680;
  
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .banner-section.hero-section {
  padding: 56px 0 0;
  
}
.banner-section.hero-section .banner-content h1 {
  font-size: 44px;
  
}

}
@media (max-width: 1199.98px) {
  .banner-section.hero-section {
  padding: 50px 0 0;
  
}
.banner-section.hero-section .banner-content h1 {
  font-size: 38px;
  margin-bottom: 16px;
  
}
.banner-section.hero-section .banner-content .hero-lede {
  font-size: 16px;
  line-height: 27px;
  margin-bottom: 22px;
  
}
.banner-section.hero-section .hero-stat {
  padding: 20px 18px;
  
}
.banner-section.hero-section .hero-stat-k {
  font-size: 27px;
  
}
.banner-section.hero-section .hero-stat-l {
  font-size: 13px;
  
}

}
@media (max-width: 991.98px) {
  .banner-section.hero-section {
  padding: 42px 0 0;
  
}
.banner-section.hero-section .hero-row {
  flex-direction: column-reverse;
  
}
.banner-section.hero-section .banner-content {
  text-align: center;
  margin-top: 30px;
  
}
.banner-section.hero-section .banner-content h1 {
  font-size: 33px;
  line-height: 1.2;
  text-align: center;
  
}
.banner-section.hero-section .banner-content .hero-lede {
  margin-left: auto;
  margin-right: auto;
  
}
.banner-section.hero-section .banner-content .hero-actions {
  justify-content: center;
  
}
.banner-section.hero-section .hero-media {
  text-align: center;
  
}
.banner-section.hero-section .hero-media img {
  max-width: 520px;
  
}
.banner-section.hero-section .hero-stats {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 40px;
  
}
.banner-section.hero-section .hero-stat:nth-child(odd) {
  border-left: 0;
  
}
.banner-section.hero-section .hero-stat:nth-child(n+3) {
  border-top: 1px solid #E4EBF1;
  
}

}
@media (max-width: 575.98px) {
  .banner-section.hero-section {
  padding: 34px 0 0;
  
}
.banner-section.hero-section .banner-content h1 {
  font-size: 27px;
  line-height: 1.26;
  
}
.banner-section.hero-section .banner-content h1 span {
  display: inline;
  
}
.banner-section.hero-section .banner-content .hero-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  
}
.banner-section.hero-section .banner-content .hero-lede {
  font-size: 15px;
  line-height: 25px;
  
}
.banner-section.hero-section .banner-content .hero-trust {
  font-size: 13px;
  
}
.banner-section.hero-section .hero-actions {
  flex-direction: column;
  align-items: stretch;
  
}
.banner-section.hero-section .hero-actions .common-btn,
  .banner-section.hero-section .hero-actions .hero-btn-ghost {
  width: 100%;
  
}
.banner-section.hero-section .hero-stats {
  margin-top: 32px;
  
}
.banner-section.hero-section .hero-stat {
  padding: 16px 14px;
  
}
.banner-section.hero-section .hero-stat-k {
  font-size: 23px;
  
}

}
/* --- Verified experience chips (replaces the duplicated stat boxes) ------- */
.ks-verified-sec .ks-verified-chips {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  
}
.ks-verified-sec .ks-verified-chips li {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #1F3763;
  background: #EDF5FB;
  border: 1px solid #D9E8F4;
  padding: 9px 16px;
  border-radius: 40px;
  
}
@media (max-width: 575.98px) {
  .ks-verified-sec .ks-verified-chips li {
  font-size: 13px;
  padding: 8px 13px;
  
}

}
/* The reference hero sets the whole headline in one solid navy and lets it
   wrap naturally. The inherited gradient span forced a block break and a
   fourth line, so it is neutralised here (still gradient elsewhere on site). */
.banner-section.hero-section .banner-content h1 span {
  display: inline;
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: #1F3763;
  color: #1F3763;
  
}
@media (max-width: 575.98px) {
  .banner-section.hero-section .banner-content h1 span {
  display: inline;
  
}

}
/* --- Service card sizing ---------------------------------------------------
   The shared card is a fixed 400px tall and hides "Learn More" until hover.
   With the seven new two-line titles that leaves a band of dead space, and a
   hover-only link is unreachable on touch. Scoped to the homepage section.  */
.home-our-service-sec.ks-services-standalone .services-slider-wraper .swiper-container .our-services-inner .service-box {
  height: 340px;
  padding: 40px 28px 26px;
  
}
.home-our-service-sec.ks-services-standalone .services-slider-wraper .swiper-container .our-services-inner .service-box h3 {
  font-size: 21px;
  line-height: 28px;
  margin-bottom: 14px;
  
}
.home-our-service-sec.ks-services-standalone .services-slider-wraper .swiper-container .our-services-inner .service-box .read-more-btn {
  opacity: 1;
  
}
@media (max-width: 575.98px) {
  .home-our-service-sec.ks-services-standalone .services-slider-wraper .swiper-container .our-services-inner .service-box {
  height: auto;
  min-height: 300px;
  
}

}
/* The shared card clamps the description to 3 lines at a fixed 78px, which
   truncates several of the seven service blurbs. Allow a 4th line and let the
   height follow the content so copy is never cut mid-word. */
.home-our-service-sec.ks-services-standalone .services-slider-wraper .swiper-container .our-services-inner .service-box {
  height: 358px;
  
}
.home-our-service-sec.ks-services-standalone .services-slider-wraper .swiper-container .our-services-inner .service-box p {
  height: auto;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  
}
/* ==========================================================================
   Platforms & technologies strip — sits directly under Verified Experience.
   Quiet divider band: hairline rule, small uppercase label, greyscale logos.
   Overrides the base .logo-sec rules (which used a 22px bold centred h3 and
   100px of bottom padding from its old position further down the page).
   ========================================================================== */

.logo-sec.ks-platforms-strip {
  padding: 0 0 80px;
  background: #fff;
  
}
.logo-sec.ks-platforms-strip > .container-md > .row > div {
  border-top: 1px solid #E4EBF1;
  padding-top: 34px;
  
}
.logo-sec.ks-platforms-strip h3 {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A94A0;
  text-align: center;
  margin-bottom: 26px;
  
}
.logo-sec.ks-platforms-strip .content {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 44px;
  
}
.logo-sec.ks-platforms-strip .content img {
  filter: grayscale(100%);
  opacity: .78;
  transition: filter .25s ease, opacity .25s ease;
  height: auto;
  
}
.logo-sec.ks-platforms-strip .content img:hover {
  filter: grayscale(0);
  opacity: 1;
  
}
@media (max-width: 991.98px) {
  .logo-sec.ks-platforms-strip {
  padding: 0 0 42px;
  
}
.logo-sec.ks-platforms-strip > .container-md > .row > div {
  padding-top: 28px;
  
}
.logo-sec.ks-platforms-strip .content {
  justify-content: center;
  gap: 26px 34px;
  
}
.logo-sec.ks-platforms-strip .content img {
  filter: grayscale(100%);
  opacity: .8;
  
}

}
@media (max-width: 575.98px) {
  .logo-sec.ks-platforms-strip {
  padding: 0 0 34px;
  
}
.logo-sec.ks-platforms-strip h3 {
  font-size: 11px;
  margin-bottom: 20px;
  
}
.logo-sec.ks-platforms-strip .content {
  gap: 20px 26px;
  
}
.logo-sec.ks-platforms-strip .content img {
  max-width: 84px;
  
}

}
/* The strip reads as the closing band of Verified Experience, so pull that
   section's bottom padding in rather than leaving a full section gap. */
.we-are-section.ks-verified-sec {
  padding-bottom: 70px;
  
}
@media (max-width: 991.98px) {
  .we-are-section.ks-verified-sec {
  padding-bottom: 24px;
  
}

}
/* ==========================================================================
   Homepage background rhythm
   --------------------------------------------------------------------------
   Before this the page used three different near-whites (#F6F9FC, #F8F9FA and
   a #F8F9FA->#FEFEFE gradient), two different blues (#EAF4FA, #EEF9FE) and a
   background image on the services band. The result was ~1700px and ~3300px
   runs of unbroken white where sections blurred together.

   One tint, one white, strictly alternating from the client logos down, with
   the dark enquiry band closing the page:

     1 Hero              white  |  9  Process          white
     2 Verified exp.     white  |  10 CTA band         tint
     3 Platforms strip   white  |  11 About us         white
     4 Client logos      tint   |  12 Founder & team   tint
     5 Core services     white  |  13 Testimonials     white
     6 AI                tint   |  14 Latest insights  tint
     7 Technology        white  |  15 Enquiry form     dark (unchanged)
     8 Industries        tint   |

   All of these sections are shared with 14-20 other templates, so every rule
   is scoped to body.home and changes nothing outside the homepage.
   ========================================================================== */

body.home .banner-section.hero-section,
body.home .we-are-section,
body.home .logo-sec.ks-platforms-strip,
body.home .home-our-service-sec,
body.home .tech-section,
body.home .ks-process-sec,
body.home .home-about-us-sec,
body.home .testimonials-section {
  background-color: #FFFFFF;
  background-image: none;
  
}
body.home .satisfied-section,
body.home .ks-ai-sec,
body.home .industries-section,
body.home .ks-founder-sec,
body.home .blog-section {
  background-color: #F1F6FB;
  background-image: none;
  
}
/* .cta-section is deliberately NOT in the list above. It is a dark navy card,
   not a band in the light/white rhythm — including it here (as an earlier
   pass did) used a two-class selector that outranks every single-class
   .cta-section rule in common-sections.css, including the ones that paint it
   navy at mobile widths, leaving white text on a near-invisible pale
   background below 992px. Its background is left entirely to
   common-sections.css's own breakpoint rules, plus the >=992px desktop
   overlap override futher down this file. */
/* Service cards are white with a white border, so they need a visible edge now
   that they sit on a white band rather than the old gradient image. */
body.home .home-our-service-sec .services-slider-wraper .swiper-container .our-services-inner .service-box {
  border: 1px solid #E4EBF1;
  box-shadow: 0 2px 10px rgba(31, 55, 99, 0.04);
  
}
body.home .home-our-service-sec .services-slider-wraper .swiper-container .our-services-inner .service-box:hover {
  border-color: #2A8DCD;
  
}
/* The eyebrow pill is white by default;
  on the tinted bands that reads as a
   smudge, so give it a touch more definition. */
body.home .satisfied-section.ks-common p.small-heading-center,
body.home .blog-section.ks-common p.small-heading-center, .ks-ai-sec p.small-heading, .industries-section p.small-heading, .ks-process-sec p.small-heading, .ks-founder-sec p.small-heading{
  background-color: #FFFFFF;
  border: 1px solid #E4EBF1;
  
}
/* ==========================================================================
   Development Process + nested CTA
   --------------------------------------------------------------------------
   The CTA card overlaps upward into the band above it via the base
   margin-top:-250px in common-sections.css. That only works if the section
   above reserves the room, so the process band takes the gradient image and
   350px of bottom padding — the same pairing the services band originally had.

   Confined to >=992px on purpose: below that, common-sections.css's own
   breakpoint rules reset .cta-section to margin-top:0 with a solid #1D3665
   background, so the card becomes a normal full-width navy band. Overriding
   the background outside this query would leave the mobile CTA transparent
   (this is exactly the bug fixed above — .cta-section removed from the tint
   list so it stops fighting these breakpoint rules on specificity).
   ========================================================================== */

@media (min-width: 992px) {
  body.home .ks-process-sec {
  background-image: url(../images/home-our-service-sec.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  padding-bottom: 350px;
  
}
body.home .cta-section.ks-cta-standalone {
  background-color: transparent;
  background-image: none;
  margin-top: -250px;
  padding-bottom: 20px;
  
}

}