@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

* {
  box-sizing: border-box;
}

:root{
    --brand: #0ea5e9; /* sky-500 */
    --brand-dark: #0284c7; /* sky-600 */
    --text: #eaf2f7;
    --vId-color-token-a: #51abd6;
    --vId-color-token-b: #e9dc7a;
    --vId-32b413d1-3e26-4060-bf2a-7a10d6a4b84e: #c05731;
    --vId-27cacf66-6566-4577-bafe-9813e9526c9c: #d5ae50;
    --vId-color-token-c: #fff;
    --vId-color-token-d: #111;
    --vId-font-token-a: Raleway;
    --vId-a99f6c00-bd7f-4663-a350-5ae2cc986844: #f0e8e8ff;
    --radio-dot-svg: url('data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27%231337ec%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3ccircle cx=%278%27 cy=%278%27 r=%273%27/%3e%3c/svg%3e');
    --checkbox-tick-svg: url('data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27rgb(255,255,255)%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e');
}

html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: rgba(0,0,0,0);
    line-height: 1;
    font-family: "Nunito Sans";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    font-family: "Raleway", "Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    overflow-x: hidden;
}

.hero-section {
    padding: 10px 10px 50px 10px;
    flex-direction: column;
    column-gap: 0px;
    row-gap: 0px;
    background-color: #caa5a5ff;
    background-image: linear-gradient(270deg,rgba(0,0,0,0.4)0%,rgba(0,0,0,0.4)100%), url("./includes/images/background.svg");
    background-position: 50% 50%, 50% 50%;
    font-family: "Raleway", sans-serif;
    background-size: cover, cover;
    background-repeat: no-repeat no-repeat, no-repeat no-repeat;
    background-attachment: scroll, fixed;
    background-clip: border-box, border-box;
    background-origin: padding-box, padding-box;
    display: flex;
    margin: 0px auto;
    height: auto;
    width: 100%;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow-x: hidden;
}

.navbar {
    display: flex;
    margin: 0px auto;
    height: auto;
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: 10px 16px 10px 16px;
    font-family: "Raleway", sans-serif;
    flex-direction: column;
    column-gap: 0px;
    row-gap: 0px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Keep original hamburger icon when menu is collapsed */
.navbar-toggler[aria-expanded="false"] .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"%3E%3Cpath fill="none" stroke="%23fff" stroke-width="2" d="M 5 7 L 25 7 M 5 14 L 25 14 M 5 21 L 25 21" /%3E%3C/svg%3E');
}

/* Change to a cross (X) icon when the menu is expanded */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"%3E%3Cpath fill="none" stroke="%23fff" stroke-width="2" d="M 5 5 L 25 25 M 25 5 L 5 25" /%3E%3C/svg%3E');
}


.navbar-container{
    display: flex;
    width: 100%;
    height: fit-content;
    margin: 0px auto;
    max-width: 1170px;
    position: relative;
    padding: 10px 0px 10px 0px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #00000000;
    border-radius: 0px 30px 0px 0px;
    border-width: 0px 0px 1px 0px;
    border-style: none none solid none;
    border-color: transparent transparent #00000000 transparent;
}

.navbar-brand{
    display: block;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-family: "Raleway", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    padding: 0px 0px 0px 0px;
    letter-spacing: 0px;
    line-height: 40px;
    opacity: 100%;
}

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

.btn-quote{
    background: #ffffff; color:#0b1620; font-weight: 600; border: 0; padding:.6rem 1rem; border-radius: .75rem;
}
.btn-quote:hover{ background:#f3f6f9; }

/* Hero */
.hero-container .row{
    display: flex;
    margin: 0px auto;
    height: auto;
    width: 100%;
    max-width: 1170px;
    position: relative;
    padding: 50px 0px 10px 0px;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 10px;
    row-gap: 50px;
}

.hero-container .row .content{
    display: flex;
    z-index: 1;
    width: 45%;
    height: auto;
    margin: 0px;
    min-height: 20px;
    position: relative;
    padding: 0px 0px 0px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.hero-container .row .media-card{
    display: flex;
    z-index: 1;
    width: 100%;
    height: 570px;
    margin: auto 0px;
    min-height: 20px;
    max-width: 570px;
    position: relative;
    padding: 0px 0px 0px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    background-image: url("./includes/images/hero_image.png");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat no-repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    box-shadow: 0px 5px 20px 0px #00000033;
    border-radius: 10px 10px 10px 10px;
    border-width: 0px 0px 0px 0px;
    border-style: none none none none;
    border-color: transparent transparent transparent transparent;
}

.hero-container .eyebrow{
    display: block;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: #ffffffff;
    letter-spacing: 3px;
    line-height: 32px;
    padding: 0px 0px 20px 0px;
    opacity: 100%;
}
.hero-container .display-3{
    display: block;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-size: 72px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0px;
    line-height: 80px;
    padding: 0px 0px 30px 0px;
    opacity: 100%;
}

.hero-container .lead{ 
    display: block;
    width: 100%;
    height: auto;
    margin: 0px;
    max-width: 470px;
    position: relative;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    line-height: 32px;
    padding: 0px 0px 30px 0px;
}

.cta-btn{
    display: block;
    z-index: 1;
    margin: 0px;
    width: fit-content;
    height: fit-content;
    position: relative;
    min-width: 170px;
    min-height: 48px;
    padding: 10px 30px 10px 30px;
    background-color: var(--vId-color-token-c);
    border-radius: 8px 8px 8px 8px;
    border-width: 1px 1px 1px 1px;
    border-style: groove groove groove groove;
    border-color: #ffffff4c #ffffff4c #ffffff4c #ffffff4c;
    font-family: var(--vId-font-token-a);
    font-size: 14px;
    font-weight: 700;
    color: var(--vId-color-token-d);
    letter-spacing: 0px;
    line-height: 14px;
}
.cta-btn:hover{ 
  background: var(--brand-dark); 
  color: white !important;
}

#services .service-container{
    display: flex;
    margin: 0px auto;
    height: auto;
    width: 100%;
    max-width: 1980px;
    position: relative;
    padding: 50px 16px 50px 16px;
    flex-direction: column;
    column-gap: 0px;
    row-gap: 0px;
    background-color: var(--vId-color-token-c);
}

#services .service-container .grid-layout.what{
    display: flex;
    width: 100%;
    height: fit-content;
    margin: 0px auto;
    max-width: 720px;
    position: relative;
    padding: 10px 0px 10px 0px;
    flex-direction: column;
    align-items: center;
}

#services .service-container .grid-layout .what-we-offer{
    display: block;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: var(--vId-color-token-d);
    letter-spacing: 3px;
    line-height: 32px;
    padding: 0px 0px 20px 0px;
    opacity: 50%;
}

#services .service-container .grid-layout .heading{
    display: block;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-size: 50px;
    font-weight: 700;
    color: var(--vId-color-token-d);
    letter-spacing: 0px;
    line-height: 60px;
    padding: 0px 0px 30px 0px;
    opacity: 100%;
    text-align: center;
}

#services .service-container .paragraph {
    display: block;
    width: 100%;
    height: auto;
    margin: 0px;
    max-width: 470px;
    position: relative;
    font-size: 20px;
    font-weight: 400;
    color: var(--vId-color-token-d);
    padding: 0px 0px 30px 0px;
    text-align: center;
    line-height: 32px;
    opacity: 80%;
}

#services .service-container .service-card-container {
    display: flex;
    margin: 0px auto;
    height: auto;
    width: 100%;
    max-width: 1170px;
    position: relative;
    padding: 10px 0px 10px 0px;
    flex-direction: row-reverse;
    justify-content: center;
    column-gap: 35px;
    row-gap: 10px;
    background-color: #00000000;
}

#services .service-container .service-card-container .grid-layout {
    display: flex;
    z-index: 1;
    width: 50%;
    height: auto;
    margin: 0px;
    min-height: 20px;
    max-width: 470px;
    position: relative;
    padding: 0px 0px 0px 0px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    row-gap: 20px;
}

#services .service-container .service-card-container .grid-layout .service-card.ecommerce, #services .service-container .service-card-container .grid-layout .service-card.web {
    display: flex;
    margin: 0px;
    height: auto;
    width: 100%;
    position: relative;
    padding: 30px 30px 30px 30px;
    flex-direction: column;
    column-gap: 20px;
    row-gap: 0px;
    border-radius: 10px 10px 10px 10px;
    border-width: 1px 1px 1px 1px;
    border-style: solid solid solid solid;
    border-color: #DDDDDD #DDDDDD #DDDDDD #DDDDDD;
}

#services .service-container .service-card-container .grid-layout .service-card.ecommerce img, #services .service-container .service-card-container .grid-layout .service-card.web img {
    display: block;
    width: 100%;
    height: 240px;
    margin: 0px;
    position: relative;
    max-height: 600px;
}

#services .service-container .service-card-container .grid-layout .service-card.ecommerce div, #services .service-container .service-card-container .grid-layout .service-card.web div {
    display: flex;
    margin: 0px;
    height: auto;
    width: 100%;
    max-width: 370px;
    position: relative;
    padding: 0px 0px 0px 0px;
    flex-direction: column;
    column-gap: 0px;
    row-gap: 0px;
}

  #services .service-container .service-card-container .grid-layout .service-card.ecommerce div h5, #services .service-container .service-card-container .grid-layout .service-card.web div h5 {
    display: block;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-size: 24px;
    font-weight: 700;
    color: var(--vId-color-token-d);
    letter-spacing: 0px;
    line-height: 32px;
    padding: 0px 0px 10px 0px;
    opacity: 100%;
}

#services .service-container .service-card-container .grid-layout .service-card.ecommerce div p, #services .service-container .service-card-container .grid-layout .service-card.web div p {
    display: block;
    width: 100%;
    height: auto;
    margin: 0px;
    max-width: 470px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: var(--vId-color-token-d);
    line-height: 32px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    opacity: 50%;
}

#services .service-container .service-card-container .landing-pages-container {
    display: flex;
    z-index: 1;
    width: 50%;
    height: auto;
    margin: auto 0px;
    min-height: 20px;
    max-width: 470px;
    position: relative;
    padding: 30px 30px 30px 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--vId-a99f6c00-bd7f-4663-a350-5ae2cc986844);
    border-radius: 10px 10px 10px 10px;
}

#services .service-container .service-card-container .landing-pages-container .image {
    display: block;
    width: fit-content;
    height: 181px;
    margin: 0px;
    position: relative;
    max-width: 155px;
    max-height: 600px;
}

#services .service-container .service-card-container .landing-pages-container .image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#services .service-container .service-card-container .landing-pages-container .grid-layout {
    display: flex;
    margin: 0px;
    height: auto;
    width: 100%;
    position: relative;
    padding: 0px 0px 0px 0px;
    flex-direction: column;
    column-gap: 0px;
    row-gap: 0px;
}

#services .service-container .service-card-container .landing-pages-container .grid-layout h4{
    display: block;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-size: 24px;
    font-weight: 700;
    color: var(--vId-color-token-d);
    padding: 0px 0px 20px 0px;
    letter-spacing: 0px;
    line-height: 32px;
    opacity: 100%;
}

#services .service-container .service-card-container .landing-pages-container .grid-layout p {
    display: block;
    width: 100%;
    height: auto;
    margin: 0px;
    max-width: 470px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: var(--vId-color-token-d);
    padding: 0px 0px 0px 0px;
    opacity: 80%;
}

#services .need-unique {
    display: flex;
    margin: 50px auto 0px;
    height: auto;
    width: fit-content;
    position: relative;
    padding: 0px 0px 0px 0px;
    flex-direction: row;
    align-items: center;
    column-gap: 5px;
    row-gap: 0px;
}

#services .need-unique p{
    display: block;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: var(--vId-color-token-d);
    letter-spacing: 0px;
    line-height: 32px;
    padding: 0px 0px 0px 0px;
    opacity: 50%;
}

#services .need-unique a{
    display: block;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-size: 16px;
    font-weight: 400;
    color: var(--vId-color-token-d);
    letter-spacing: 0px;
    line-height: 32px;
    padding: 0px 0px 0px 0px;
    opacity: 100%;
}

.layout-content-container .website-card {
  height: fit-content;
}

.layout-content-container .website-card img {
  height: 400px;
}


/* ===== About Section ===== */

  .animate-fadeInUp {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
  }

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

  .about-section .btn-primary {
    background-color: #4f46e5;
    color: white;
  }

  .about-section .btn-primary:hover {
    background-color: #4338ca;
  }

.about-section {
  font-family: "Raleway", sans-serif;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-color: #f8f9fa;
  gap: 10px;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ===== Left Side ===== */
.about-left {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 720px;
  background-image: url("./includes/images/about.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


.about-image {
  position: relative;
  margin: 0;
  /* display: block; */
  width: 100%;
  max-width: 496px;
  max-height: 600px;
  height: 380px;
  object-fit: cover;
  border-radius: 10px;
}

/* ===== Right Side ===== */
.about-right {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px;
}

.about-content {
  max-width: 470px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== Text Styles ===== */
.sub-heading {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 3px;
  color: #666;
  opacity: 0.5;
  margin-bottom: 20px;
}

.heading {
  font-size: 56px;
  font-weight: 700;
  line-height: 64px;
  margin-bottom: 30px;
  color: #222;
}

.description {
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  opacity: 0.8;
  margin-bottom: 30px;
  color: #333;
  text-align: left;
}

.more {
  font-size: 16px;
  font-weight: 500;
  color: #0077ff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.more:hover {
  color: #0056cc;
}



/* Team Section */

.team-section {
  font-family: "Raleway", sans-serif;
  display: flex;
  gap: 10px;
  background-position: center;
  background-size: cover;
  padding: 20px 0px 0px 0px ;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Left side (team images) */
.left-content {
  background-image: url('./includes/images/left.svg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
  z-index: 1;
  height: 600px;
  min-height: 20px;
  width: 60%;
  max-width:none;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
 
}

.team-members {
  display: flex;
  justify-content: space-between;
  width: 75%;
  /* gap: 10px; */
  height: fit-content;
  margin: 0px auto 0px 50px;
  max-width: 1170px;
  position: relative;
  padding: 10px 10px 10px 10px;
  column-gap: 10px;
  row-gap: 10px;

  
}

.member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 45%;
}

/* Image styles */
.image-block {
  /* width: 100%; */
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
    margin: 0px;
    width: 100%;
    max-width: none;
    position: relative;


}

.image-block img {
  /* width: 100%; */
  height: 200px;
  object-fit: wrap;
  max-height: 600px;
  border-radius: 8px;
}

/* Background colors for different members */
.blue-bg {
  background-color: #6A7BE2;
}

.orange-bg {
  background-color: #FCA086;
}

/* Text info below each image */
.info {
  padding-top: 20px;
}

.info h3 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.info .role {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Right side (text content) */
.right-content {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1; 
  height: auto; 
  margin: 0px; 
  min-height: 20px;
  position: relative;
  }

.text-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text-block .sub-heading {
  font-size: 16px;
  color: #333;
  margin: 0;
}

.text-block h2 {
  font-size: 40px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.text-block .description {
  font-size: 16px;
  line-height: 1.8;
  color:  #333;
  opacity: 0.8;
  max-width: 470px;
}


.feature-section {
  font-family: "Raleway", sans-serif;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 50px 16px 70px 16px;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}

.feature-box {
  width: 100%;
  max-width: 100%;
  height: 448px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: 50% auto;
  box-sizing: border-box;
}

@media (min-width: 780px) {
  .feature-box {
    width: 48%;
  }
}

.feature-left {
  background-image: url("./includes/images/feature-left.png");
}

.feature-right {
  background-image: url("./includes/images/feature-right.png");
}

.feature-content {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
  padding: 10px;
  max-width: 464px;
}

.feature-content h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  line-height: 32px;
  margin: 0;
}

.feature-content p {
  font-size: 16px;
  font-weight: 400;
  color: var(--vId-color-token-d);
  line-height: 32px;
  margin: 0 0 10px 0;
}







/* Stats Section Layout */
.stats-section {
  padding: 50px 16px 50px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9;
  font-family: "Raleway", sans-serif;
}

/* Stats Container handled by Bootstrap grid */
.stats-container {
  max-width: 1170px;
  width: 100%;
}

/* Individual Stat Cards */
.stat-card {
  width: 100%;
  min-width: 200px;
  padding: 40px;
  border: 1px solid #DDDDDD;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
}

/* Stat Number */
.stat-card h3 {
  font-size: 56px;
  font-weight: 700;
  color: #333;
  line-height: 64px;
  margin: 0;
  text-align: center;
}

/* Stat Description */
.stat-card p {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  line-height: 32px;
  margin-top: 10px;
  text-align: center;
}


/* service  section */

.service-wrap {
    font-family: "Raleway", sans-serif;
    display: flex;
    margin: 0px auto;
    height: auto;
    width: 100%;
    max-width: 1980px;
    position: relative;
    padding: 50px 16px 50px 16px;
    flex-direction: column;
    align-items: center;
    column-gap: 0px;
    row-gap: 0px;
}

.service-wrap .grid-layout {
    display: flex;
    margin: 0px auto;
    height: auto;
    width: 100%;
    max-width: 1170px;
    position: relative;
    padding: 0px 0px 250px 0px;
    flex-direction: row-reverse;
    justify-content: space-between;
    column-gap: 10px;
    row-gap: 10px;
}

.service-wrap .img-container{
    display: block;
    width: 100%;
    height: 580px;
    margin: 0px;
    position: relative;
    max-width: 570px;
    max-height: 600px;
}

.service-wrap .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px 10px 10px 10px;
    border-width: 0px 0px 0px 0px;
    border-color: transparent transparent transparent transparent;
    border-style: none none none none;
}

.service-wrap .service-content{
    display: flex;
    z-index: 1;
    width: 100%;
    max-width: 470px;
    height: auto;
    margin: 0px;
    min-height: 20px;
    position: relative;
    padding: 10px 10px 10px 10px;
    flex-direction: column;
    column-gap: 0px;
    row-gap: 0px;
}


/* .service-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  max-width: 100%;
  width: 100%;
} */

.service-image img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 300px;
  border-radius: 10px;
}

@media (min-width: 780px) {
  .service-image img {
    max-width: 570px;
    height: 580px;
    max-height: 600px;
  }
}

@media (min-width: 780px) {
  .service-content {
    max-width: 470px;
  }
}

.sub-heading {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 3px;
  color: #333;
  opacity: 0.5;
  margin-bottom: 20px;
}

.main-heading {
  font-size: 50px;
  font-weight: 700;
  color: #333;
  line-height: 64px;
  margin-bottom: 30px;
}

.description {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  line-height: 32px;
  opacity: 0.7;
  margin-bottom: 30px;
  text-align: left;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.feature-item p {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  line-height: 32px;
}


.icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #87CEEB;
  border-radius: 50%;
}


/* video section */

.work-process-section {
    display: flex;
    margin: 0px auto;
    height: auto;
    width: 100%;
    max-width: 1980px;
    position: relative;
    padding: 0px 0px 0px 0px;
    flex-direction: column;
    column-gap: 10px;
    row-gap: 10px;
    background-color: #000000;
    background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url("./includes/images/background.svg");
    background-position: 50% 50%, 50% 50%;
    background-size: cover, cover;
    background-repeat: no-repeat no-repeat, no-repeat no-repeat;
    background-attachment: scroll, fixed;
    background-clip: border-box, border-box;
    background-origin: padding-box, padding-box;
}

.video-block {
  margin-top: -250px; /* overlay effect */
  padding: 0 15px;
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  overflow: hidden;
}

.embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.content-block {
  padding: 80px 15px;
}

.sub-head {
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.main-head {
  font-family: "Raleway", sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
}

.descript {
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 32px;
  margin-top: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .video-block {
    margin-top: -100px;
  }
}

.feature-section2 {
  display: flex;
  margin: 0px auto;
  height: auto;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: 50px 16px 50px 16px;
  flex-direction: column;
  column-gap: 0px;
  row-gap: 0px;
  background-color: #fff;
  text-align: center;
  font-family: "Raleway", sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
}


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

.subheading {
  font-size: 16px;
  font-weight: 400;
  color: #6c757d;
  letter-spacing: 3px;
  opacity: 0.6;
  margin-bottom: 10px;
}

.mainheading {
  font-size: 56px;
  font-weight: 700;
  color: #222;
  line-height: 1.2;
  margin-bottom: 30px;
}

.feature-row {
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.feature-card {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  height: auto;
  margin: 0px;
  min-height: 20px;
  position: relative;
  padding: 0px 35px 0px 35px;
  row-gap: 30px;


}

.icon-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 50px;
  color: #4f46e5;
  transition: all 0.3s ease;
}

.icon-box:hover {
  background-color: #4f46e5;
  color: #fff;
  transform: translateY(-5px);
}

.feature-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
}

.feature-card p {
  font-size: 16px;
  color: #6c757d;
  line-height: 1.8;
}

.explore-more {
  margin-top: 30px;
}

.explore-more .btn {
  padding: 10px 25px;
  border-radius: 30px;
  font-weight: 600;
}


@media (max-width: 992px) {
  .feature-card {
    flex: 0 1 45%;
  }
}

@media (max-width: 780px) {
  .feature-card {
    flex: 0 1 100%;
  }
}




/* Footer Callout Section */
.footer-callout {
  margin: 0px auto;
  height: auto;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: 50px 16px 50px 16px;
  column-gap: 10px;
  row-gap: 10px;
  background-color: #000000;
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url("./includes/images/footer.svg");
  background-position: 50% 50%, 50% 50%;
  background-size: cover, cover;
  background-repeat: no-repeat no-repeat, no-repeat no-repeat;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Content Box */
.content-box {
  display: flex;
  flex-direction: row;
  padding: 10px;
  gap: 10px;
  max-width: 1170px;
  width: 100%;
}

/* Left Column */
.left-column {
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 60%;
}

/* Sub-heading */
.sub-heading1 {
  display: block;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 3px;
  line-height: 32px;
  margin-bottom: 10px;
}

/* Heading */
.heading0 {
  display: block;
  font-family: 'Arial', sans-serif;
  font-size: 56px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0px;
  line-height: 64px;
  margin-bottom: 30px;
}

/* Right Column */
.right-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 40%;
}

/* CTA Button */
.cta-button {
  padding: 10px 30px;
  min-width: 170px;
  min-height: 48px;
  background-color: #111111;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  border-radius: 8px;
  border: 1px groove rgba(255,255,255,0.3);
  cursor: pointer;
}






/* Base styles */
.team-section2 {
  padding: 100px 16px;
  background-color: #f8f9fa; /* fallback for var(--vId-color-token-c) */
  font-family: "Raleway", sans-serif;
  text-align: center;
}

.sub-heading2 {
  font-size: 16px;
  font-weight: 400;
  color: #6c757d;
  letter-spacing: 3px;
  opacity: 0.5;
  margin-bottom: 10px;
}

.main-heading2 {
  font-size: 56px;
  font-weight: 700;
  color: #222;
  line-height: 64px;
  margin-bottom: 20px;
}

.description2 {
  font-size: 20px;
  color: #222;
  line-height: 32px;
  max-width: 470px;
  margin: 0 auto 50px;
}

/* Team grid */
.team-grid2 {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.team-member2 {
  flex: 0 1 25%;
  max-width: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-image2 img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.team-info2 {
  padding-top: 20px;
  text-align: center;
}

.team-info2 h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
}

.team-info2 p {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.5;
  margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .team-member2 {
    flex: 0 1 45%;
  }
}

@media (max-width: 780px) {
  .team-member2 {
    flex: 0 1 100%;
  }

  .main-heading2 {
    font-size: 42px;
    line-height: 50px;
  }

  .description2 {
    font-size: 18px;
    line-height: 28px;
  }
}





/* FAQ Section */
.faq-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 16px;
  gap: 25px;
  background-color: #f5f5f5;
  width: 100%;
}

/* FAQ Container */
.faq-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 800px;
  width: 100%;
  padding: 1px;
}

/* FAQ Title */
.faq-title {
  font-size: 56px;
  font-weight: 700;
  color: #111111;
  text-align: center;
  line-height: 66px;
  margin-bottom: 20px;
}

/* Individual FAQ Item */
.faq-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(127,127,127,0.1);
}

/* FAQ Question */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Arial', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #111111;
  line-height: 32px;
  cursor: pointer;
}

/* FAQ Answer */
.faq-answer {
  display: none; 
  font-size: 16px;
  font-weight: 400;
  color: #111111;
  line-height: 26px;
  margin-top: 10px;
}

/* FAQ Icon */
.faq-question i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* Rotate the plus icon when the answer is shown */
.faq-question.active i {
    transform: rotate(45deg);
}



/* ===== Testimonials Section ===== */
.testimonials-section {
  font-family: "Raleway", sans-serif;
  max-width: 1170px;
  margin: 0 auto;
  padding: 60px 20px;
  color: #333;
}

/* Header */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.section-header .left {
  flex: 1 1 300px;
}

.sub-heading {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 3px;
  opacity: 0.6;
  margin-bottom: 10px;
}

.heading {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}

.section-header .right {
  flex: 1 1 300px;
}

.description {
  font-size: 16px;
  line-height: 1.8;
  opacity: 0.7;
}

/* Testimonials Grid */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

/* Individual Testimonial */
.testimonial-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  background: #fff;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.testimonial-text {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #444;
}

/* User Info */
.user {
  display: flex;
  align-items: center;
  gap: 15px;
}

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

.user-info {
  display: flex;
  flex-direction: column;
}

.user-info .name {
  font-weight: 600;
  color: #000;
}

.user-info .role {
  font-size: 14px;
  opacity: 0.6;
}

/* ===== Responsive Design ===== */
@media (max-width: 780px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .heading {
    font-size: 40px;
  }

  .testimonials-section {
    padding: 40px 15px;
  }

  .testimonial-text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .heading {
    font-size: 32px;
  }

  .testimonial-card {
    padding: 20px;
  }
}

/* Container */
.blog-section {
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  background-color: #f8f8f8; /* change as needed */
  font-family: "Raleway", sans-serif;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}

/* Heading */
.blog-heading {
  text-align: center;
}

.blog-heading .sub-head {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.8;
  opacity: 0.5;
  margin-bottom: 10px;
}

.blog-heading .main-head {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.blog-heading .descriptions {
  font-size: 20px;
  line-height: 1.6;
  color: #333;
}

/* Blog Items */
.blog-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  margin: 0px auto;
  height: auto;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: 50px 16px 50px 16px;
  flex-direction: column;
  row-gap: 0px;
  column-gap: 0px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.blog-item {
  display: flex;
  gap: 20px;
  max-width: 470px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.05);
  background-color: #fff;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.blog-item:hover {
  transform: translateY(-5px);
}

.blog-image {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 10px;
}

.blog-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.blog-content h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.blog-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

.blog-content .date {
  font-size: 14px;
  color: #888;
}

/* Link Section */
.blog-link {
  text-align: center;
  font-size: 16px;
  opacity: 0.7;
}


.newsletter {
    display: flex;
    margin: 0px auto;
    height: auto;
    width: 100%;
    max-width: 1980px;
    position: relative;
    padding: 50px 16px 50px 16px;
    flex-direction: column;
    column-gap: 0px;
    row-gap: 0px;
    background-color: var(--vId-color-token-c);
}

.newsletter-container {
    display: flex;
    width: 100%;
    height: fit-content;
    margin: 0px auto;
    max-width: 970px;
    position: relative;
    padding: 70px 40px 70px 40px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 50px;
    border-radius: 10px 10px 10px 10px;
    border-width: 1px 1px 1px 1px;
    border-style: solid solid solid solid;
    border-color: #DDDDDD #DDDDDD #DDDDDD #DDDDDD;
}

.newsletter-title {
    display: block;
    z-index: 1;
    margin: 0px;
    min-height: 10px;
    min-width: 16px;
    position: relative;
    font-size: 40px;
    font-weight: 700;
    color: #111;
    padding: 0px 0px 0px 0px;
    letter-spacing: 0px;
    line-height: 48px;
    opacity: 100%;
}

.newsletter-form {
    display: flex;
    z-index: 1;
    width: 100%;
    height: fit-content;
    margin: 0px;
    min-height: 20px;
    min-width: 20px;
    position: relative;
    max-width: 571px;
    padding: 3px 3px 3px 3px;
    justify-content: space-between;
    column-gap: 32px;
    background-color: #00000000;
    border-radius: 10px 10px 10px 10px;
}

.newsletter-form input {
    display: block;
    z-index: 1;
    margin: 0px;
    width: 65%;
    position: relative;
    min-height: 48px;
    max-width: none;
    padding: 10px 16px 10px 12px;
    font-size: 16px;
    color: #111;
    line-height: 32px;
    background-color: #7f7f7f33;
    border: 1px solid #cccccc;
    border-radius: 8px 8px 8px 8px;
    border-width: 1px 1px 1px 1px;
    border-style: solid solid solid solid;
    border-color: #DADADA #DADADA #DADADA #DADADA;
    box-shadow: 0px 0px 0px 0px #000000;
}

.newsletter-form input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 10px var(--brand);
}

.newsletter-form button {
    display: block;
    z-index: 1;
    margin: 0px;
    position: relative;
    min-width: 170px;
    min-height: 48px;
    padding: 10px 30px 10px 30px;
    background-color: #111;
    border-radius: 8px 8px 8px 8px;
    border-width: 1px 1px 1px 1px;
    border-style: groove groove groove groove;
    border-color: #1111114c #1111114c #1111114c #1111114c;
    font-size: 14px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 14px;
}

.newsletter-form button:hover {
    background-color: var(--brand-dark);
}

.newsletter-instagram {
    margin-top: 15px;
    font-size: 1rem;
    color: #888;
    font-weight: 500;
}

.newsletter-instagram a {
    color: var(--brand);
    text-decoration: none;
}

.newsletter-instagram a:hover {
    text-decoration: underline;
}

/* Newsletter sleek alert */
.newsletter-alert {
  position: fixed;
  right: 20px;
  bottom: 24px;
  min-width: 280px;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(6, 12, 34, 0.12);
  color: #fff;
  font-weight: 600;
  z-index: 1100;
  display: none;
}
.newsletter-alert.success { background: linear-gradient(90deg,#11998e,#38ef7d); }
.newsletter-alert.error { background: linear-gradient(90deg,#ff416c,#ff4b2b); }
.newsletter-alert .small { display:block; font-size:13px; opacity:0.95; font-weight:500 }
.newsletter-alert .dismiss { position:absolute; top:8px; right:10px; opacity:0.85; cursor:pointer }

/* Currency toggle styles */
.currency-toggle-btn {
  border: 1px solid transparent;
  background-clip: padding-box;
}
.currency-toggle-btn[disabled], .currency-toggle-btn.disabled {
  opacity: 0.6; pointer-events: none;
}

/* small input tweaks */
#currencyRate { text-align: right; }


.sliding-images {
    padding: 50px 0;
    background-color: #f4f4f4;
    text-align: center;
}

.slider-container {
    display: flex;
    overflow-x: auto;
    gap: 20px;
}

.slide img {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.get-started {
    padding: 80px 0;
    background-color: var(--brand-dark);
    color: white;
    text-align: center;
}

.get-started h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.get-started p {
    font-size: 1.25rem;
    margin-bottom: 30px;
}

.get-started button {
    padding: 12px 30px;
    font-size: 1.25rem;
    background-color: var(--brand);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.get-started button:hover {
    background-color: var(--brand-dark);
}

.footer {
    background-color: #222;
    color: white;
    padding: 40px 0;
}

.footer-container {
    text-align: center;
}

.footer-container h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

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

.footer-menu li {
    display: inline-block;
    margin: 0 15px;
}

.footer-menu li a {
    color: white;
    text-decoration: none;
}

.footer-social a {
    color: white;
    font-size: 20px;
    margin: 0 10px;
    transition: color 0.3s;
}

.footer-social a:hover {
    color: var(--brand);
}

.footer-bottom {
    background-color: #111;
    padding: 20px 0;
    text-align: center;
}

.footer-bottom p {
    margin-bottom: 10px;
}

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

.footer-bottom-menu li {
    display: inline-block;
    margin: 0 15px;
}

.footer-bottom-menu li a {
    color: white;
    text-decoration: none;
}

.footer-bottom-menu li a:hover {
    text-decoration: underline;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .blog-item {
    flex-direction: column;
    max-width: 100%;
  }

  .blog-image {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
  }

  .blog-content {
    padding: 10px;
  }
}

@media (max-width: 1098px) {

  .hero-container .row{
    flex-direction: column;
    align-items: center;
  }

  .hero-container .row .content{
    align-items: center;
    width: 100%;
  }

  .hero-container .display-3 {
    font-size: 50px;
    text-align: center;
  }

  .hero-container .lead {
    text-align: center;
  }
}

@media (max-width: 780px) {
  * {
    box-sizing: border-box;
  }

  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  #services .service-container .service-card-container {
    flex-direction: column;
    align-items: center;
  }
  #services .service-container .service-card-container .grid-layout {
    width: 100%;
  }
  #services .service-container .service-card-container .landing-pages-container {
    width: 90%;
  }
  .blog-heading .main-heading {
    font-size: 36px;
  }

  .blog-heading .description {
    font-size: 16px;
  }

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

  .blog-content p {
    font-size: 14px;
  }

  .feature-box {
    width: 100% !important;
    height: 348px;
  }
  .newsletter-container {
    flex-direction: column;
  }
  .service-wrap {
    padding: 0px 16px 50px 16px;
  }
}



/* Make image area keep aspect ratio on large screens */
@media (max-width: 992px) {
/* ===== Responsive Layout ===== */


  .about-section {
    flex-direction: column;
  }

  .about-left,
  .about-right {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
  }

  .about-right {
    padding: 60px 20px;
  }

  .heading {
    font-size: 40px;
    line-height: 48px;
  }
}

.collapse {
  visibility: visible !important;
}


@media (max-width: 780px) {
  .about-right {
    padding: 40px 15px;
  }

  .heading {
    font-size: 32px;
    line-height: 40px;
  }

  .service-wrap .grid-layout {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .service-wrap .service-content {
    align-items: center;
  }
  .team-section {
    flex-direction: column;
    padding: 30px 0;
  }

  .left-content {
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    padding: 20px 0;
  }

  .team-members {
    flex-direction: column;
    align-items: center;
    margin: 0;
  }

  .member {
    width: 80%;
    margin-bottom: 25px;
    align-items: center;
    text-align: center;
  }

  .image-block {
    height: auto;
  }

  .image-block img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .info h3 {
    font-size: 20px;
  }

  .info .role {
    font-size: 14px;
  }

  .right-content {
    width: 100%;
    margin-top: 20px;
    text-align: center;
    padding: 0 20px;
  }

  .text-block h2 {
    font-size: 26px;
  }

  .text-block .description {
    font-size: 15px;
    max-width: 90%;
    margin: 0 auto;
  }
}

@media (max-width: 992px) {
  .stats-section {
    padding: 50px 16px 50px 16px;
  }
  .stat-card h3 {
    font-size: 48px;
    line-height: 56px;
  }
  .stat-card p {
    font-size: 18px;
    line-height: 28px;
  }
}


@media (max-width: 780px) {
  .stats-section {
    padding: 50px 16px 50px 16px;
  }
  .stat-card h3 {
    font-size: 36px;
    line-height: 44px;
  }
  .stat-card p {
    font-size: 16px;
    line-height: 24px;
  }
}
@media (max-width: 992px) {
  .service-wrap {
    flex-direction: column-reverse;
    /* padding: 100px 16px 50px; */
  }

  .service-image img {
    max-width: 100%;
    height: auto;
  }
}

/* Solution Tab Styling */
.solution-tab {
  background-color: transparent;
  color: #616889;
  border: none;
  cursor: pointer;
  font-weight: 600;
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}

.solution-tab:hover {
  background-color: rgba(249, 250, 251, 1);
  color: #111218;
}

.solution-tab.active {
  color: #1337ec;
  background-color: rgba(249, 250, 251, 1);
  border-left: 4px solid #1337ec;
  padding-left: calc(1.5rem - 4px);
}

.solution-tab.active span:last-child {
  color: #1337ec !important;
}

/* Solution Content Display */
.solution-content {
  display: none;
  animation: fadeIn 0.3s ease-in;
}

.solution-content.active {
  display: block;
}

.solution-content.hidden {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mobile responsiveness for sidebar tabs */
@media (max-width: 768px) {
  .solution-tab {
    padding: 1rem;
    font-size: 0.95rem;
  }
  
  .solution-tab.active {
    border-left: 3px solid #1337ec;
    padding-left: calc(1rem - 3px);
  }
}