/* Fonts */
@font-face {
  font-family: "Montserrat-Light";
  src: url("./static/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat-Regular";
  src: url("./static/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat-Medium";
  src: url("./static/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat-SemiBold";
  src: url("./static/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat-Bold";
  src: url("./static/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

html, body {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

/* Base navbar styles */
.navheader .navbar { 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 90px;
  background-color: #E5E0F8; 
  box-shadow: 0px 2px 12px #00000020;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
} 

.navheader .navbar-logo { 
  width: 100px; 
  height: 62px;
  flex-shrink: 0;
} 

.navheader .navbar-brand { 
  flex-shrink: 0;
  margin-left: 20px;
} 

.navheader .navbar-title { 
  display: block;
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  color: #10266a; 
  font-size: 36px; 
  letter-spacing: 1.32px; 
  line-height: 1.2;
  white-space: nowrap; 
  margin: 0;
} 

.navheader .navbar-subtitle { 
  display: block;
  font-family: "Montserrat-SemiBold", Helvetica; 
  font-weight: 600; 
  color: #10266a; 
  font-size: 20px; 
  letter-spacing: 0.72px; 
  line-height: 1.2; 
  white-space: nowrap;
  margin: 0;
} 

/* Hamburger menu - hidden on desktop */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  z-index: 1001;
  padding: 0;
}

.hamburger-line {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #10266a;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Desktop Navigation Links */
.nav-links-container {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.navheader .nav-link {
  background: none;
  border: none;
  outline: none;
  padding: 8px 16px;
  color: #10266a;
  font-family: "Montserrat-Medium", Helvetica;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.84px;
  line-height: 30px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  border-radius: 16px;
}

.navheader .nav-link:hover,
.navheader .nav-link.active-nav {
  font-weight: 700;
  color: #ca4a9a;
  box-shadow: 0 4px 16px #ca4a9a33;
}

/* MEDIA QUERIES */

/* Large Desktop - 1200px and below */
@media screen and (max-width: 1280px) {
  .nav-links-container {
    gap: 20px;
  }
  
  .navheader .nav-link {
    font-size: 20px;
    padding: 6px 12px;
  }
  
  .navheader .navbar-title {
    font-size: 32px;
  }
  
  .navheader .navbar-subtitle {
    font-size: 18px;
  }
}

/* Medium Desktop - 992px and below */
@media screen and (max-width: 1024px) {
  .navheader .navbar {
    padding: 0 15px;
  }
  
  .nav-links-container {
    gap: 15px;
  }
  
  .navheader .nav-link {
    font-size: 18px;
    padding: 4px 8px;
  }
  
  .navheader .navbar-title {
    font-size: 28px;
  }
  
  .navheader .navbar-subtitle {
    font-size: 16px;
  }
  
  .navheader .navbar-logo {
    width: 80px;
    height: 50px;
  }
}

/* Tablet and Mobile - 768px and below */
@media screen and (max-width: 768px) {
  .navheader .navbar {
    height: 70px;
    padding: 0 15px;
  }
  
  .navheader .navbar-title {
    font-size: 24px;
  }
  
  .navheader .navbar-subtitle {
    font-size: 14px;
  }
  
  .navheader .navbar-logo {
    width: 70px;
    height: 45px;
  }
  
  .navheader .navbar-brand {
    margin-left: 10px;
  }
  
  /* Show hamburger menu */
  .hamburger-menu {
    display: flex !important;
  }
  
  /* Mobile Navigation Menu */
  .nav-links-container {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 70px);
    background-color: #E5E0F8;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.15);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 20px 0;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
  }
  
  /* Show mobile menu when active */
  .nav-links-container.menu-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  /* Mobile navigation links styling */
  .navheader .nav-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 30px;
    font-size: 20px;
    font-weight: 500;
    color: #10266a;
    border-bottom: 1px solid rgba(16, 38, 106, 0.1);
    margin: 0;
    transition: all 0.2s ease;
  }
  
  .navheader .nav-link:last-child {
    border-bottom: none;
  }
  
  .navheader .nav-link:hover {
    background-color: rgba(202, 74, 154, 0.1);
    color: #ca4a9a;
    font-weight: 600;
  }
  
  /* Hamburger animation */
  .hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }
  
  .hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
}

/* Mobile Small - 480px and below */
@media screen and (max-width: 480px) {
  .navheader .navbar {
    height: 55px;
    padding: 0 8px;
  }
  
  .nav-links-container {
    top: 55px;
    max-height: calc(100vh - 55px);
    padding: 15px 0;
  }
  
  .navheader .navbar-title {
    font-size: 18px;
  }
  
  .navheader .navbar-subtitle {
    font-size: 11px;
  }
  
  .navheader .navbar-logo {
    width: 50px;
    height: 32px;
  }
  
  .hamburger-menu {
    width: 22px;
    height: 18px;
  }
  
  .hamburger-line {
    height: 2px;
  }
  
  .navheader .nav-link {
    font-size: 16px;
    padding: 15px 15px;
  }
}

@media screen and (max-width: 380px) {
  .navheader .navbar {
    height: 55px;
    padding: 0 8px;
  }
  
  .nav-links-container {
    top: 55px;
    max-height: calc(100vh - 55px);
    padding: 15px 0;
  }
  
  .navheader .navbar-title {
    font-size: 18px;
  }
  
  .navheader .navbar-subtitle {
    font-size: 11px;
  }
  
  .navheader .navbar-logo {
    width: 50px;
    height: 32px;
  }
  
  .hamburger-menu {
    width: 22px;
    height: 18px;
  }
  
  .hamburger-line {
    height: 2px;
  }
  
  .navheader .nav-link {
    font-size: 16px;
    padding: 15px 15px;
  }
}
@media screen and (max-width: 320px) {
  .navheader .navbar {
    height: 55px;
    padding: 0 8px;
  }
  
  .nav-links-container {
    top: 55px;
    max-height: calc(100vh - 55px);
    padding: 15px 0;
  }
  
  .navheader .navbar-title {
    font-size: 18px;
  }
  
  .navheader .navbar-subtitle {
    font-size: 11px;
  }
  
  .navheader .navbar-logo {
    width: 50px;
    height: 32px;
  }
  
  .hamburger-menu {
    width: 22px;
    height: 18px;
  }
  
  .hamburger-line {
    height: 2px;
  }
  
  .navheader .nav-link {
    font-size: 16px;
    padding: 15px 15px;
  }
}


/* Section 1 */
/* Base styles (Desktop first) */
.section_1 {
  background-color: rgba(255, 255, 255, 1.0); 
  background: linear-gradient(180deg, rgba(184, 171, 228, 1) 0%, rgba(254, 226, 213, 1) 100%);
  width: 100%;
  min-height: 650px;
} 

.section_1 .container { 
  background: none;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 650px; 
  position: relative; 
  padding-top: 90px;
  box-sizing: border-box;
} 

.section_1 .bytes-arena-logo { 
  position: absolute; 
  width: 587px; 
  height: 596px; 
  top: 17px;
  left: 15px; 
} 

.section_1 .headline { 
  position: absolute; 
  width: 792px; 
  top: 190px;
  left: 621px; 
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  color: transparent; 
  font-size: 70px; 
  letter-spacing: 2.10px; 
  line-height: 65.2px; 
} 

.section_1 .highlight { 
  color: #10266a; 
  letter-spacing: 1.47px; 
} 

.section_1 .accent { 
  color: #ca4a9a; 
  letter-spacing: 1.47px; 
} 

.section_1 .subheadline { 
  position: absolute; 
  top: 340px;
  left: 621px; 
  font-family: "Montserrat-Medium", Helvetica; 
  font-weight: 500; 
  color: transparent; 
  font-size: 32px; 
  text-align: center; 
  letter-spacing: 0.96px; 
  line-height: 37.8px; 
  white-space: nowrap; 
} 

.section_1 .subtext { 
  color: #10266a; 
  letter-spacing: 0.31px; 
} 

.section_1 .accent-1 { 
  color: #ca4a9a; 
  letter-spacing: 0.31px; 
} 

.section_1 .description { 
  position: absolute; 
  width: 772px; 
  top: 390px;
  left: 621px; 
  font-family: "Montserrat-Light", Helvetica; 
  font-weight: 400; 
  color: #10266a; 
  font-size: 20px; 
  letter-spacing: 0.60px; 
  line-height: 23.6px; 
}

.section_1 .btn-primary { 
  position: absolute; 
  width: 355px; 
  height: 67px; 
  top: 450px;
  left: 621px; 
  background-color: #11276a; 
  border-radius: 23px;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
} 

.section_1 .text-wrapper { 
  position: static;
  width: auto;
  top: auto;
  left: auto;
  font-family: "Montserrat-Regular", Helvetica; 
  font-weight: 400; 
  color: #e6e4ec; 
  font-size: 26px;
  letter-spacing: 0.3px; 
  line-height: 30.7px; 
  white-space: nowrap; 
  display: inline-block;
  margin: 0;
  padding: 0;
} 

.section_1 .arrow { 
  position: absolute; 
  width: 50px;
  height: 50px;
  top: 642px; 
  left: 700px; 
  color: #10266a; 
  animation: arrow-bounce 1.2s infinite;
} 

@keyframes arrow-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(10px);
  }
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(15px);
  }
  80% {
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */

/* Large tablets and small desktops (1200px and below) */
@media screen and (max-width: 1280px) {
  .section_1 .container {
    max-width: 1200px;
    padding: 70px 20px 0;
  }
  
  .section_1 .bytes-arena-logo {
    width: 450px;
    height: 510px;
    left: 20px;
  }
  
  .section_1 .headline {
    width: 600px;
    left: 500px;
    font-size: 52px;
    line-height: 42px;
    margin-top: -10px;
  }
  
  .section_1 .subheadline {
    left: 500px;
    font-size: 26px;
    line-height: 33px;
    margin-top: -60px;
  }
  
  .section_1 .description {
    width: 580px;
    left: 500px;
    font-size: 16px;
    line-height: 21px;
    margin-top: -70px;
  }
  
  .section_1 .btn-primary {
    left: 500px;
    margin-top: -70px;
    height: 50px;
    width: 280px;
  }

  .section_1 .text-wrapper { 
    font-size: 22px;
    letter-spacing: 0.3px; 
    line-height: 21px; 
  } 
  
  .section_1 .arrow {
    left: 50%;
    margin-left: -25px; /* Half of arrow width (50px/2) */
    top: 520px;
  }
}

/* Tablets (992px and below) */
@media screen and (max-width: 1024px) {
  .section_1 .container {
    height: auto;
    min-height: 600px;
    padding: 60px 20px 0px;
  }
  
  .section_1 .bytes-arena-logo {
    position: relative;
    width: 300px;
    height: 305px;
    top: 0;
    left: 0;
    margin: 0 auto 30px;
    display: block;
  }
  
  .section_1 .headline {
    position: relative;
    width: 100%;
    top: -50px;
    left: 0;
    font-size: 45px;
    line-height: 40px;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .section_1 .subheadline {
    position: relative;
    top: 10px;
    left: 0;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    margin-bottom: 20px;
    white-space: normal;
  }
  
  .section_1 .description {
    position: relative;
    width: 100%;
    top: 70px;
    left: 0;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    margin-bottom: 30px;
  }
  
  .section_1 .btn-primary {
    position: relative;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 30px;
    height: 40px;
    width: 280px;
  }
  
  .section_1 .text-wrapper { 
    font-size: 22px;
  } 

  .section_1 .arrow {
    position: relative;
    top: 140px;
    left: 50%;
    margin-left: -25px; /* Half of arrow width */
    display: block;
    margin-bottom: 0;
  }
}

/* Small tablets and large phones (768px and below) */
@media screen and (max-width: 768px) {
  .section_1 .container {
    padding: 40px 15px 30px;
    min-height: 500px;
  }
  
  .section_1 .bytes-arena-logo {
    width: 250px;
    height: 254px;
    margin-bottom: 25px;
  }
  
  .section_1 .headline {
    font-size: 36px;
    line-height: 36px;
    margin-bottom: 15px;
  }
  
  .section_1 .subheadline {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 20px;
  }
  
  .section_1 .description {
    font-size: 18px;
    line-height: 18px;
    margin-bottom: 35px;
  }
  
  .section_1 .btn-primary {
    width: 240px;
    height: 40px;
    margin-bottom: 30px;
  }
  .section_1 .text-wrapper { 
    font-size: 18px;
  } 
  
  .section_1 .arrow {
    position: relative;
    top: 180px;
    left: 50%;
    margin-left: -25px;
    display: block;
    margin-bottom: 0;
  }
}


/* Very small phones (480px and below) */
@media screen and (max-width: 480px) {
  .section_1 .container {
    height: 700px;
  }
  .section_1 .headline {
    font-size: 24px;
    line-height: 26px;
  }
  
  .section_1 .subheadline {
    font-size: 16px;
    line-height: 20px;
  }
  
  .section_1 .description {
    font-size: 14px;
    line-height: 15px;
  }
  
  .section_1 .btn-primary {
    width: 200px;
    height: 30px;
  }
  
  .section_1 .text-wrapper {
    font-size: 16px;
    line-height: 22px;
  }
  .section_1 .arrow {
    width: 40px;
    height: 40px;
    margin-left: -20px; /* Keep centered with new width */
  }
}
@media screen and (max-width: 380px) {
  .section_1 {
    padding: 20px 10px;
    min-height: 600px;
  }
  .section_1 .container {
    height: 600px;
  }
  .section_1 .headline {
    font-size: 24px;
    line-height: 26px;
  }
  
  .section_1 .subheadline {
    font-size: 16px;
    line-height: 20px;
  }
  
  .section_1 .description {
    font-size: 14px;
    line-height: 15px;
  }
  
  .section_1 .btn-primary {
    width: 200px;
    height: 30px;
  }
  
  .section_1 .text-wrapper {
    font-size: 16px;
    line-height: 22px;
  }
  .section_1 .arrow {
    top: 150px;
    width: 40px;
    height: 40px;
    margin-left: -20px; /* Keep centered with new width */
  }
}

@media screen and (max-width: 320px) {
  .section_1 {
    padding: 20px 10px;
    min-height: 600px;
  }
  .section_1 .container {
    height: 600px;
  }
  .section_1 .bytes-arena-logo { 
    margin-top: -30px;
  } 
  .section_1 .headline {
    font-size: 24px;
    line-height: 26px;
  }
  
  .section_1 .subheadline {
    font-size: 16px;
    line-height: 20px;
  }
  
  .section_1 .description {
    font-size: 14px;
    line-height: 15px;
  }
  
  .section_1 .btn-primary {
    width: 200px;
    height: 30px;
  }
  
  .section_1 .text-wrapper {
    font-size: 16px;
    line-height: 22px;
  }
  .section_1 .arrow {
    top: 150px;
    width: 40px;
    height: 40px;
    margin-left: -20px; /* Keep centered with new width */
  }
}

/* Section 2 */
.section_2 {
  background: linear-gradient(180deg, rgba(254, 227, 214, 1) 0%, rgba(228, 224, 240, 1) 100%);
  width: 100%;
  padding-top: 130px;
}

.section_2 .container {
  background: none;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 1050px;
  position: relative;
  box-sizing: border-box;
}

.section_2 .section-title {
  position: absolute;
  top: -14px;
  left: 511px;
  font-family: "Montserrat-Bold", Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 70px;
  text-align: center;
  letter-spacing: 2.10px;
  line-height: 65.2px;
  white-space: nowrap;
}

.section_2 .highlight {
  color: #ca4a9a;
  letter-spacing: 1.47px;
  margin-right: 10px;
}

.section_2 .subtext {
  color: #11276a;
  letter-spacing: 1.47px;
}

.section_2 .tagline {
  position: absolute;
  top: 69px;
  left: 381px;
  font-family: "Montserrat-Medium", Helvetica;
  font-weight: 500;
  color: #10266a;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0.96px;
  line-height: 37.8px;
  white-space: nowrap;
}

.section_2 .section-description {
  position: absolute;
  width: 1240px;
  top: 126px;
  left: 114px;
  font-family: "Montserrat-Light", Helvetica;
  font-weight: 400;
  color: #10266a;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.62px;
  line-height: 23.4px;
}

.section_2 .accent {
  font-weight: 300;
  letter-spacing: 0.17px;
}

.section_2 .highlight-1 {
  font-family: "Montserrat-SemiBold", Helvetica;
  font-weight: 600;
  letter-spacing: 0.17px;
}

.section_2 .section-subtitle {
  position: absolute;
  top: 377px;
  left: 142px;
  font-family: "Montserrat-SemiBold", Helvetica;
  font-weight: 500;
  color: transparent;
  font-size: 45px;
  letter-spacing: 1.35px;
  line-height: 53.2px;
  white-space: nowrap;
}

.section_2 .features-list {
  position: absolute;
  width: 470px;
  top: 455px;
  left: 197px;
  font-family: "Montserrat-Medium", Helvetica;
  font-weight: 400;
  color: #11276a;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.72px;
  line-height: 120%;
}

.section_2 .text-wrapper {
  font-weight: 500;
  letter-spacing: 0.17px;
}

.section_2 .text-wrapper-1 {
  font-family: "Montserrat-Light", Helvetica;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.12px;
  line-height: 21.9px;
}

.section_2 .tables-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 40px;
  padding: 60px 150px;
  margin-left: 700px;
}

.section_2 .offer-table {
  margin-top: 320px;
  background: transparent;
  border-collapse: collapse;
  text-align: center;
  top: 365px;
  left: 760px;
  width: 720px;
}

.section_2 .offer-title {
  font-family: "Montserrat-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 45px;
  line-height: 53.2px;
  letter-spacing: 1.35px;
  color: transparent;
  white-space: nowrap;
}

.section_2 .offer-list {
  font-family: "Montserrat-Light", Helvetica;
  font-size: 24px;
  color: #11276a;
  letter-spacing: 0.72px;
  line-height: 155%;
  padding-top: 20px;
}

.section_2 .highlight-2 {
  color: #11276a;
}

.section_2 .accent-1 {
  color: #ca4a9a;
}

.section_2 .transformation {
  position: absolute;
  top: 870px;
  left: 105px;
  font-family: "Montserrat-SemiBold", Helvetica;
  font-weight: 500;
  color: transparent;
  font-size: 45px;
  text-align: center;
  letter-spacing: 1.35px;
  line-height: 53.2px;
  white-space: nowrap;
}

.section_2 .highligh-3 {
  color: #11276a;
  letter-spacing: 0.69px;
}

.section_2 .accent-2 {
  color: #ca4a9a;
  letter-spacing: 0.69px;
}

.section_2 .description {
  position: absolute;
  width: 1003px;
  top: 930px;
  left: 218px;
  font-family: "Montserrat-Light", Helvetica;
  font-weight: 400;
  color: #10266a;
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.60px;
  line-height: 23.6px;
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */

/* Large tablets (1200px and below) */
@media screen and (max-width: 1280px) {
  .section_2 .container {
    padding: 0 20px;
    height: 1000px;
    margin-top: 10px;
  }
  
  .section_2 .section-title {
    left: 50%;
    transform: translateX(-50%);
    font-size: 52px;
    line-height: 42px;
    margin-top: -10px;
  }
  
  .section_2 .tagline {
    left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    line-height: 33px;
    margin-top: -30px;
  }
  
  .section_2 .section-description {
    width: 90%;
    left: 5%;
    font-size: 20px;
    line-height: 24px;
  }
  
  .section_2 .section-subtitle {
    left: 100px;
    font-size: 40px;
    line-height: 45px;
  }
  
  .section_2 .features-list {
    width: 400px;
    left: 160px;
    font-size: 20px;
  }
  
  .section_2 .text-wrapper-1 {
    font-size: 18px;
    line-height: 20px;
  }
  
  .section_2 .tables-wrapper {
    margin-left: 600px;
    padding: 60px 100px;
  }
  
  .section_2 .offer-table {
    width: 600px;
  }
  
  .section_2 .offer-title {
    font-size: 40px;
    line-height: 45px;
  }
  
  .section_2 .offer-list {
    font-size: 20px;
    line-height: 130%;
  }
  
  .section_2 .transformation {
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    line-height: 45px;
    margin-top: -70px;
  }
  
  .section_2 .description {
    width: 90%;
    left: 5%;
    font-size: 20px;
    line-height: 24px;
    margin-top: -70px;
  }
}

/* Tablets (992px and below) */
@media screen and (max-width: 1024px) {
  .section_2 {
    padding-top: 70px;
  }
  
  .section_2 .container {
    height: auto;
    min-height: 1180px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
  }
  
  .section_2 .section-title {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    font-size: 45px;
    line-height: 40px;
    text-align: center;
    margin-bottom: 30px;
    order: 1;
  }
  
  .section_2 .tagline {
    position: relative;
    top: 20px;
    left: 0;
    transform: none;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 2;
  }
  
  .section_2 .section-description {
    position: relative;
    top: 20px;
    left: 0;
    width: 100%;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 40px;
    order: 3;
  }
  
  .section_2 .section-subtitle {
    position: relative;
    top: 20px;
    left: 0;
    font-size: 36px;
    line-height: 42px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 4;
  }
  
  .section_2 .features-list {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    order: 5;
  }
  
  .section_2 .text-wrapper-1 {
    font-size: 20px;
    line-height: 24px;
  }
  
  .section_2 .tables-wrapper {
    position: relative;
    margin-left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    line-height: 24px;
    gap: 30px;
    margin-bottom: 40px;
    order: 6;
  }
  
  .section_2 .offer-table {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 0;
    width: 100%;
    max-width: 600px;
  }
  
  .section_2 .offer-title {
    font-size: 36px;
    line-height: 42px;
  }
  
  .section_2 .offer-list {
    font-size: 20px;
    line-height: 24px;
    padding: 8px 0;
  }
  
  .section_2 .transformation {
    position: relative;
    top: 70px;
    left: 0;
    transform: none;
    font-size: 36px;
    line-height: 42px;
    text-align: center;
    margin-bottom: 20px;
    white-space: normal;
  }
  
  .section_2 .description {
    position: relative;
    top: 100px;
    left: 0;
    width: 100%;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 40px;
  }
}

/* Small tablets and phones (768px and below) */
@media screen and (max-width: 768px) {
  .section_2 {
    padding-top: 40px;
  }
  
  .section_2 .container {
    height: auto;
    min-height: 1050px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
  }
  
  .section_2 .section-title {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    font-size: 36px;
    line-height: 36px;
    text-align: center;
    margin-bottom: 30px;
    order: 1;
  }
  
  .section_2 .tagline {
    position: relative;
    top: 20px;
    left: 0;
    transform: none;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 2;
  }
  
  .section_2 .section-description {
    position: relative;
    top: 20px;
    left: 0;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    margin-bottom: 40px;
    order: 3;
  }
  
  .section_2 .section-subtitle {
    position: relative;
    top: 20px;
    left: 0;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 4;
  }
  
  .section_2 .features-list {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    order: 5;
  }
  
  .section_2 .text-wrapper-1 {
    font-size: 18px;
    line-height: 18px;
  }
  
  .section_2 .tables-wrapper {
    position: relative;
    margin-left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 18px;
    line-height: 18px;
    gap: 30px;
    margin-bottom: 40px;
    order: 6;
  }
  
  .section_2 .offer-table {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 10px;
    width: 100%;
    max-width: 600px;
  }
  
  .section_2 .offer-title {
    font-size: 30px;
    line-height: 30px;
  }
  
  .section_2 .offer-list {
    font-size: 18px;
    line-height: 18px;
    padding: 8px 0;
  }
  
  .section_2 .transformation {
    position: relative;
    top: 20px;
    left: 0;
    transform: none;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  
  .section_2 .description {
    position: relative;
    top: 55px;
    left: 0;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
  }
}

/* Very small phones (480px and below) */
@media screen and (max-width: 480px) {
  .section_2 {
    padding-top: 40px;
  }
  
  .section_2 .container {
    height: auto;
    min-height: 1020px;
    padding: 0 20px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
  }
  
  .section_2 .section-title {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    font-size: 24px;
    line-height: 26px;
    text-align: center;
    margin-bottom: 30px;
    order: 1;
  }
  
  .section_2 .tagline {
    position: relative;
    top: 20px;
    left: 0;
    transform: none;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 2;
  }
  
  .section_2 .section-description {
    position: relative;
    top: 20px;
    left: 0;
    width: 100%;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
    margin-bottom: 40px;
    order: 3;
  }
  
  .section_2 .section-subtitle {
    position: relative;
    top: 20px;
    left: 0;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 4;
  }
  
  .section_2 .features-list {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
    order: 5;
  }
  
  .section_2 .text-wrapper-1 {
    font-size: 14px;
    line-height: 15px;
  }
  
  .section_2 .tables-wrapper {
    position: relative;
    margin-left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    line-height: 15px;
    gap: 30px;
    margin-bottom: 40px;
    order: 6;
  }
  
  .section_2 .offer-table {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 10px;
    width: 100%;
    max-width: 600px;
  }
  
  .section_2 .offer-title {
    font-size: 20px;
    line-height: 24px;
  }
  
  .section_2 .offer-list {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 0;
  }
  
  .section_2 .transformation {
    position: relative;
    top: 20px;
    left: 0;
    transform: none;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  
  .section_2 .description {
    position: relative;
    top: 55px;
    left: 0;
    width: 100%;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
  }
}

@media screen and (max-width: 380px) {
  .section_2 {
    padding-top: 40px;
  }
  
  .section_2 .container {
    height: auto;
    min-height: 1020px;
    padding: 0 20px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
  }
  
  .section_2 .section-title {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    font-size: 24px;
    line-height: 26px;
    text-align: center;
    margin-bottom: 30px;
    order: 1;
  }
  
  .section_2 .tagline {
    position: relative;
    top: 20px;
    left: 0;
    transform: none;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 2;
  }
  
  .section_2 .section-description {
    position: relative;
    top: 20px;
    left: 0;
    width: 100%;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
    margin-bottom: 40px;
    order: 3;
  }
  
  .section_2 .section-subtitle {
    position: relative;
    top: 20px;
    left: 0;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 4;
  }
  
  .section_2 .features-list {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
    order: 5;
  }
  
  .section_2 .text-wrapper-1 {
    font-size: 14px;
    line-height: 15px;
  }
  
  .section_2 .tables-wrapper {
    position: relative;
    margin-left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    line-height: 15px;
    gap: 30px;
    margin-bottom: 40px;
    order: 6;
  }
  
  .section_2 .offer-table {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 10px;
    width: 100%;
    max-width: 600px;
  }
  
  .section_2 .offer-title {
    font-size: 20px;
    line-height: 24px;
  }
  
  .section_2 .offer-list {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 0;
  }
  
  .section_2 .transformation {
    position: relative;
    top: 20px;
    left: 0;
    transform: none;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  
  .section_2 .description {
    position: relative;
    top: 55px;
    left: 0;
    width: 100%;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
  }
}
@media screen and (max-width: 320px) {
  .section_2 {
    min-height: 1240px;
    padding-top: 40px;
  }
  
  .section_2 .container {
    height: auto;
    min-height: 1020px;
    padding: 0 20px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
  }
  
  .section_2 .section-title {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    font-size: 24px;
    line-height: 26px;
    text-align: center;
    margin-bottom: 30px;
    order: 1;
  }
  
  .section_2 .tagline {
    position: relative;
    top: 20px;
    left: 0;
    transform: none;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 2;
  }
  
  .section_2 .section-description {
    position: relative;
    top: 20px;
    left: 0;
    width: 100%;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
    order: 3;
  }
  
  .section_2 .section-subtitle {
    position: relative;
    top: 20px;
    left: 0;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 30px;
    white-space: normal;
    order: 4;
  }
  
  .section_2 .features-list {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
    order: 5;
  }
  
  .section_2 .text-wrapper-1 {
    font-size: 14px;
    line-height: 15px;
  }
  
  .section_2 .tables-wrapper {
    position: relative;
    margin-left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    line-height: 15px;
    gap: 30px;
    margin-bottom: 40px;
    order: 6;
  }
  
  .section_2 .offer-table {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 10px;
    width: 100%;
    max-width: 600px;
  }
  
  .section_2 .offer-title {
    font-size: 20px;
    line-height: 24px;
  }
  
  .section_2 .offer-list {
    font-size: 14px;
    line-height: 15px;
    padding: 8px 0;
  }
  
  .section_2 .transformation {
    position: relative;
    top: 20px;
    left: 0;
    transform: none;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
  }
  
  .section_2 .description {
    position: relative;
    top: 55px;
    left: 0;
    width: 100%;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
  }
}


/* Section 3 */
/* ===== ORIGINAL DESKTOP STYLES (UNCHANGED) ===== */
.section_3 { 
  background: linear-gradient(180deg, rgba(228, 224, 241, 1) 0%, rgba(254, 226, 213, 1) 100%);
  width: 100%;
} 

.section_3 .container { 
  background: none;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 680px; 
  position: relative;
  box-sizing: border-box;
} 

.section_3 .section-title { 
  position: absolute; 
  top: 50px; 
  left: 380px; 
  font-family: "Montserrat-SemiBold", Helvetica; 
  font-weight: 600; 
  color: transparent; 
  font-size: 70px; 
  text-align: center; 
  letter-spacing: 2.10px; 
  line-height: 65.2px; 
  white-space: nowrap;
  scroll-margin-top: 110px;
} 

.section_3 .accent { 
  color: #10266a; 
  letter-spacing: 1.47px; 
} 

.section_3 .highlight { 
  color: #ca4a9a; 
  letter-spacing: 1.47px; 
} 

.section_3 .section-description { 
  position: absolute; 
  top: 140px; 
  left: 79px; 
  font-family: "Montserrat-Medium", Helvetica; 
  font-weight: 500; 
  color: transparent; 
  font-size: 32px; 
  text-align: center; 
  letter-spacing: 0.96px; 
  line-height: 37.8px; 
  white-space: nowrap; 
} 

.section_3 .tagline { 
  color: #ca4a9a; 
  letter-spacing: 0.31px; 
} 

.section_3 .subtext { 
  color: #11276a; 
  letter-spacing: 0.31px; 
}

.section_3 .expertise-block { 
  width: 294px; 
  height: 394px; 
  top: 220px; 
  left: 58px; 
  background-color: #f0ecfc; 
  position: absolute; 
  border-radius: 15px; 
  box-shadow: 0px 0px 21.7px #8e9cc8; 
} 

.section_3 .expertise-title { 
  top: 72px; 
  left: 56px; 
  font-family: "Montserrat-SemiBold", Helvetica; 
  font-weight: 600; 
  white-space: nowrap; 
  position: absolute; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 0.72px; 
  line-height: 26.2px; 
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0;
} 

.section_3 .expertise-img { 
  position: absolute; 
  width: 51px; 
  height: 51px; 
  top: 18px; 
  left: 121px; 
} 

.section_3 .expertise-list {
  position: absolute;
  top: 120px;
  left: 30px;
  width: 230px;
  margin: 0;
  padding-left: 18px;
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 16px;
  color: #10266a;
  line-height: 1.6;
  list-style-type: disc;
  margin-bottom: 6px;
}

.section_3 .expertise-block-1 { 
  width: 294px; 
  height: 394px; 
  top: 220px; 
  left: 401px; 
  background-color: #f0ecfc; 
  position: absolute; 
  border-radius: 15px; 
  box-shadow: 0px 0px 21.7px #8e9cc8; 
}

.section_3 .expertise-title-1 { 
  position: absolute; 
  top: 76px; 
  left: 110px; 
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 0.72px; 
  line-height: 26.2px; 
  white-space: nowrap; 
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0;
} 

.section_3 .expertise-img-1 { 
  position: absolute; 
  width: 53px; 
  height: 53px; 
  top: 16px; 
  left: 121px; 
} 

.section_3 .expertise-list-1 {
  position: absolute;
  top: 120px;
  left: 30px;
  width: 230px;
  margin: 0;
  padding-left: 18px;
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 16px;
  color: #10266a;
  line-height: 1.6;
  list-style-type: disc;
  margin-bottom: 6px;
}

.section_3 .expertise-block-2 { 
  width: 294px; 
  height: 394px; 
  top: 220px; 
  left: 745px; 
  background-color: #f0ecfc; 
  position: absolute; 
  border-radius: 15px; 
  box-shadow: 0px 0px 21.7px #8e9cc8; 
} 

.section_3 .expertise-title-2 { 
  width: 245px; 
  top: 76px; 
  left: 24px; 
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  position: absolute; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 0.72px; 
  line-height: 26.2px; 
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0;
} 

.section_3 .expertise-img-2 { 
  position: absolute; 
  width: 59px; 
  height: 59px; 
  top: 16px; 
  left: 117px; 
} 

.section_3 .expertise-list-2{
  position: absolute;
  top: 120px;
  left: 30px;
  width: 230px;
  margin: 0;
  padding-left: 18px;
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 16px;
  color: #10266a;
  line-height: 1.6;
  list-style-type: disc;
  margin-bottom: 6px;
}

.section_3 .expertise-block-3 { 
  width: 294px; 
  height: 394px; 
  top: 220px; 
  left: 1088px; 
  background-color: #f0ecfc; 
  position: absolute; 
  border-radius: 15px; 
  box-shadow: 0px 0px 21.7px #8e9cc8; 
} 

.section_3 .expertise-title-3 { 
  position: absolute; 
  top: 76px; 
  left: 106px; 
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 0.72px; 
  line-height: 26.2px; 
  white-space: nowrap; 
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0;
} 

.section_3 .expertise-img-3 { 
  position: absolute; 
  width: 59px; 
  height: 59px; 
  top: 12px; 
  left: 124px; 
}

.section_3 .expertise-list-3 {
  position: absolute;
  top: 120px;
  left: 30px;
  width: 230px;
  margin: 0;
  padding-left: 18px;
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 16px;
  color: #10266a;
  line-height: 1.6;
  list-style-type: disc;
  margin-bottom: 6px;
}

.section_3 .expertise-link { 
  width: 245px; 
  top: 360px; 
  left: 90px; 
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  position: absolute; 
  color: #10266a; 
  font-size: 12px; 
  text-align: center; 
  letter-spacing: 0.72px; 
  line-height: 26.2px; 
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0;
  text-decoration: none;
} 

/* ===== RESPONSIVE MEDIA QUERIES ===== */

/* Large tablets (1200px and below) */
@media screen and (max-width: 1280px) {
  .section_3 .container {
    padding: 0 20px;
  }
  
  .section_3 .section-title {
    left: 50%;
    transform: translateX(-50%);
    font-size: 52px;
    line-height: 42px;
  }
  
  .section_3 .section-description {
    left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    line-height: 33px;
    width: auto;
    margin-top: -30px;
  }
  
  .section_3 .expertise-block {
    width: 250px;
    height: 350px;
    left: 100px;
  }
  
  .section_3 .expertise-block-1 {
    width: 250px;
    height: 350px;
    left: 370px;
  }
  
  .section_3 .expertise-block-2 {
    width: 250px;
    height: 350px;
    left: 640px;
  }
  
  .section_3 .expertise-block-3 {
    width: 250px;
    height: 350px;
    left: 910px;
  }
  
  .section_3 .expertise-title,
  .section_3 .expertise-title-1,
  .section_3 .expertise-title-2,
  .section_3 .expertise-title-3 {
    font-size: 20px;
    line-height: 24px;
    top: 60px;
  }
  
  .section_3 .expertise-title {
    left: 45px;
  }
  
  .section_3 .expertise-title-1 {
    left: 90px;
  }
  
  .section_3 .expertise-title-2 {
    left: 20px;
    width: 200px;
  }
  
  .section_3 .expertise-title-3 {
    left: 85px;
  }
  
  .section_3 .expertise-img,
  .section_3 .expertise-img-1,
  .section_3 .expertise-img-2,
  .section_3 .expertise-img-3 {
    width: 45px;
    height: 45px;
    top: 15px;
  }
  
  .section_3 .expertise-img {
    left: 102px;
  }
  
  .section_3 .expertise-img-1 {
    left: 102px;
  }
  
  .section_3 .expertise-img-2 {
    left: 102px;
  }
  
  .section_3 .expertise-img-3 {
    left: 102px;
  }
  
  .section_3 .expertise-list,
  .section_3 .expertise-list-1,
  .section_3 .expertise-list-2,
  .section_3 .expertise-list-3 {
    top: 105px;
    left: 25px;
    width: 200px;
    font-size: 14px;
    padding-left: 15px;
  }
  
  .section_3 .expertise-link {
    top: 320px;
    left: 75px;
    width: 200px;
    font-size: 11px;
  }
}

/* Tablets (992px and below) */
@media screen and (max-width: 1024px) {
  .section_3 .container {
    height: 1150px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .section_3 .section-title {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    font-size: 52px;
    line-height: 42px;
    text-align: center;
    margin-bottom: 20px;
    white-space: normal;
  }
  
  .section_3 .section-description {
    position: relative;
    top: 30px;
    left: 0;
    transform: none;
    font-size: 26px;
    line-height: 33px;
    text-align: center;
    margin-bottom: 40px;
    white-space: normal;
    width: 100%;
    max-width: 600px;
  }
  
  .section_3 .expertise-block {
    position: relative;
    width: 300px;
    min-height: 417px;
    top: 30px;
    left: -200px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
  }
  .section_3 .expertise-block-1 {
    position: relative;
    width: 300px;
    min-height: 417px;
    top: -415px;
    left: 200px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
  }
  .section_3 .expertise-block-2 {
    position: relative;
    width: 300px;
    min-height: 417px;
    top: -410px;
    left: -200px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
  }
  .section_3 .expertise-block-3 {
    position: relative;
    width: 300px;
    min-height: 417px;
    top: -855px;
    left: 200px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .section_3 .expertise-title,
  .section_3 .expertise-title-1,
  .section_3 .expertise-title-2,
  .section_3 .expertise-title-3 {
    position: relative;
    top: 0;
    left: 0;
    font-size: 22px;
    line-height: 26px;
    text-align: center;
    margin-bottom: 20px;
    white-space: normal;
    width: 100%;
  }
  
  .section_3 .expertise-img,
  .section_3 .expertise-img-1,
  .section_3 .expertise-img-2,
  .section_3 .expertise-img-3 {
    position: relative;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }
  
  .section_3 .expertise-list,
  .section_3 .expertise-list-1,
  .section_3 .expertise-list-2,
  .section_3 .expertise-list-3 {
    position: relative;
    top: 0;
    left: 10px;
    width: 100%;
    font-size: 16px;
    padding-left: 20px;
    margin-bottom: 20px;
    text-align: left;
  }
  
  .section_3 .expertise-link {
    position: relative;
    top: 0;
    left: 70px;
    width: 100%;
    font-size: 12px;
    text-align: center;
    margin-top: auto;
  }
}

/* Small tablets and phones (768px and below) */
@media screen and (max-width: 768px) {
  .section_3 .container {
    height: 860px;
    padding: 30px 15px;
  }
  
  .section_3 .section-title {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 15px;
  }
  
  .section_3 .section-description {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 30px;
  }
  
  .section_3 .expertise-block {
    margin-left: 30px;
    width: 350px;
    min-height: 300px;
    margin-bottom: 25px;
    padding: 15px;
  }
  .section_3 .expertise-block-1 {
    margin-top: 120px;
    margin-right: 30px;
    width: 350px;
    min-height: 300px;
    margin-bottom: 25px;
    padding: 15px;
  }
  .section_3 .expertise-block-2 {
    margin-left: 30px;
    width: 350px;
    min-height: 300px;
    margin-bottom: 25px;
    padding: 15px;
  }
  .section_3 .expertise-block-3 {
    margin-right: 30px;
    margin-top: 120px;
    width: 350px;
    min-height: 300px;
    margin-bottom: 25px;
    padding: 15px;
  }
  
  .section_3 .expertise-title,
  .section_3 .expertise-title-1,
  .section_3 .expertise-title-2,
  .section_3 .expertise-title-3 {
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 15px;
  }
  
  .section_3 .expertise-img,
  .section_3 .expertise-img-1,
  .section_3 .expertise-img-2,
  .section_3 .expertise-img-3 {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
  }
  
  .section_3 .expertise-list,
  .section_3 .expertise-list-1,
  .section_3 .expertise-list-2,
  .section_3 .expertise-list-3 {
    font-size: 14px;
    padding-left: 18px;
    margin-bottom: 15px;
  }
  
  .section_3 .expertise-link {
    font-size: 12px;
  }
}

/* Very small phones (480px and below) */
@media screen and (max-width: 480px) {
  .section_3 .container {
    height: 1520px;
    padding: 20px 10px;
  }
  .section_3 .section-title {
    font-size: 24px;
    line-height: 26px;
  }
  
  .section_3 .section-description {
    font-size: 16px;
    line-height: 20px;
  }
  
  .section_3 .expertise-block {
    height: 300px;
    left: -10px;
    width: 300px;
  }
  .section_3 .expertise-block-1 {
    top: -80px;
    height: 300px;
    padding: 10px;
    width: 300px;
    left: 20px;
  }
  .section_3 .expertise-block-2 {
    top: -70px;
    height: 300px;
    padding: 10px;
    width: 300px;
    left: -10px;
  }
  .section_3 .expertise-block-3 {
    top: -180px;
    height: 300px;
    padding: 10px;
    width: 300px;
    left: 20px;
  }
  
  .section_3 .expertise-title,
  .section_3 .expertise-title-1,
  .section_3 .expertise-title-2,
  .section_3 .expertise-title-3 {
    font-size: 16px;
    line-height: 20px;
  }
  
  .section_3 .expertise-img,
  .section_3 .expertise-img-1,
  .section_3 .expertise-img-2,
  .section_3 .expertise-img-3 {
    width: 40px;
    height: 40px;
  }
  
  .section_3 .expertise-list,
  .section_3 .expertise-list-1,
  .section_3 .expertise-list-2,
  .section_3 .expertise-list-3 {
    font-size: 12px;
    padding-left: 14px;
  }
  
  .section_3 .expertise-link {
    font-size: 10px;
  }
}

@media screen and (max-width: 380px){
  .section_3 .container {
    height: 1520px;
    padding: 20px 10px;
  }
  .section_3 .section-title {
    font-size: 24px;
    line-height: 26px;
  }
  
  .section_3 .section-description {
    font-size: 16px;
    line-height: 20px;
  }
  
  .section_3 .expertise-block {
    height: 300px;
    left: -10px;
    width: 300px;
  }
  .section_3 .expertise-block-1 {
    top: -80px;
    height: 300px;
    padding: 10px;
    width: 300px;
    left: 20px;
  }
  .section_3 .expertise-block-2 {
    top: -70px;
    height: 300px;
    padding: 10px;
    width: 300px;
    left: -10px;
  }
  .section_3 .expertise-block-3 {
    top: -180px;
    height: 300px;
    padding: 10px;
    width: 300px;
    left: 20px;
  }
  
  .section_3 .expertise-title,
  .section_3 .expertise-title-1,
  .section_3 .expertise-title-2,
  .section_3 .expertise-title-3 {
    font-size: 16px;
    line-height: 20px;
  }
  
  .section_3 .expertise-img,
  .section_3 .expertise-img-1,
  .section_3 .expertise-img-2,
  .section_3 .expertise-img-3 {
    width: 40px;
    height: 40px;
  }
  
  .section_3 .expertise-list,
  .section_3 .expertise-list-1,
  .section_3 .expertise-list-2,
  .section_3 .expertise-list-3 {
    font-size: 12px;
    padding-left: 14px;
  }
  
  .section_3 .expertise-link {
    font-size: 10px;
  }
}

@media screen and (max-width: 320px) {
  .section_3 .container {
    height: 1530px;
    padding: 20px 10px;
  }
  .section_3 .section-title {
    font-size: 24px;
    line-height: 26px;
  }
  
  .section_3 .section-description {
    font-size: 16px;
    line-height: 20px;
  }
  
  .section_3 .expertise-block {
    height: 300px;
    left: -15px;
    width: 300px;
  }
  .section_3 .expertise-block-1 {
    top: -80px;
    height: 300px;
    padding: 10px;
    width: 300px;
    left: 15px;
  }
  .section_3 .expertise-block-2 {
    top: -70px;
    height: 300px;
    padding: 10px;
    width: 300px;
    left: -15px;
  }
  .section_3 .expertise-block-3 {
    top: -180px;
    height: 300px;
    padding: 10px;
    width: 300px;
    left: 15px;
  }
  
  .section_3 .expertise-title,
  .section_3 .expertise-title-1,
  .section_3 .expertise-title-2,
  .section_3 .expertise-title-3 {
    font-size: 16px;
    line-height: 20px;
  }
  
  .section_3 .expertise-img,
  .section_3 .expertise-img-1,
  .section_3 .expertise-img-2,
  .section_3 .expertise-img-3 {
    width: 40px;
    height: 40px;
  }
  
  .section_3 .expertise-list,
  .section_3 .expertise-list-1,
  .section_3 .expertise-list-2,
  .section_3 .expertise-list-3 {
    font-size: 12px;
    padding-left: 14px;
  }
  
  .section_3 .expertise-link {
    font-size: 10px;
  }
}


/* Section 4 */
/* Base Section 4 Styles */
.section_4 { 
  background: linear-gradient(180deg, rgba(254, 227, 214, 1) 0%, rgba(228, 224, 240, 1) 100%);
  width: 100%;
  padding: 80px 0;
  min-height: 680px;
} 

.section_4 .container { 
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  position: relative;
} 

.section_4 .section-title { 
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  font-size: 70px; 
  text-align: center; 
  letter-spacing: 2.10px; 
  line-height: 65.2px;
  margin: 0;
} 

.section_4 .highlight { 
  color: #ca4a9a; 
} 

.section_4 .accent { 
  color: #11276a; 
} 

.section_4 .section-description { 
  max-width: 1200px;
  font-family: "Montserrat-Light", Helvetica; 
  font-weight: 400; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 0.72px; 
  line-height: 26.4px;
  margin: 0;
} 

.section_4 .subtext { 
  font-weight: 300; 
} 

.section_4 .accent { 
  font-family: "Montserrat-SemiBold", Helvetica; 
  font-weight: 600; 
  letter-spacing: 0.17px;
} 

.section_4 .logo-row { 
  width: 100%;
  height: 120px; 
  background-color: #f0ecfd; 
  border-radius: 15px; 
  box-shadow: 0px 0px 30px rgba(142, 156, 200, 0.4); 
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
} 

.section_4 .company-logos-scroll {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 80px;
  animation: scroll-logos 40s linear infinite;
  height: 100%;
  padding: 0 40px;
  will-change: transform;
}

.section_4 .logo-item {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.section_4 .logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.section_4 .logo-label {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 24px;
  color: #10266a;
  white-space: nowrap;
  font-weight: 700;
}

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

.section_4 .tagline { 
  max-width: 1200px;
  font-family: "Montserrat-Medium", Helvetica; 
  font-weight: 500; 
  color: #10266a; 
  font-size: 32px; 
  text-align: center; 
  letter-spacing: 0.96px; 
  line-height: 37.8px;
  margin: 0;
}

/* Media Queries */

/* Large Desktop - 1200px and below */
@media screen and (max-width: 1280px) {
  .section_4 {
    padding: 60px 0;
    min-height: 550px;
  }
  
  .section_4 .container {
    gap: 30px;
    padding: 0 15px;
  }
  
  .section_4 .section-title {
    font-size: 52px;
    line-height: 42px;
  }
  
  .section_4 .section-description {
    font-size: 20px;
    max-width: 1000px;
    line-height: 21px;
    margin-top: -10px;
  }
  
  .section_4 .logo-row {
    height: 120px;
    border-radius: 15px;
  }
  
  .section_4 .company-logos-scroll {
    gap: 60px;
    padding: 0 30px;
  }
  
  .section_4 .logo-img {
    height: 46px;
  }
  
  .section_4 .logo-label {
    font-size: 20px;
  }
  
  .section_4 .tagline {
    font-size: 26px;
    max-width: 1000px;
  }
}

/* Medium Desktop - 992px and below */
@media screen and (max-width: 1024px) {
  .section_4 {
    padding: 50px 0;
    min-height: 520px;
  }
  
  .section_4 .container {
    gap: 30px;
  }
  
  .section_4 .section-title {
    font-size: 52px;
    line-height: 42px;
  }
  
  .section_4 .section-description {
    font-size: 20px;
    line-height: 24px;
    max-width: 800px;
  }
  
  .section_4 .logo-row {
    height: 100px;
    border-radius: 10px;
  }
  
  .section_4 .company-logos-scroll {
    gap: 50px;
    padding: 0 25px;
  }
  
  .section_4 .logo-img {
    height: 46px;
  }
  
  .section_4 .logo-label {
    font-size: 20px;
  }
  
  .section_4 .tagline {
    font-size: 24px;
    line-height: 24px;
    max-width: 800px;
  }
}

/* Tablet - 768px and below */
@media screen and (max-width: 768px) {
  .section_4 {
    padding: 40px 0;
    min-height: 480px;
  }
  
  .section_4 .container {
    gap: 30px;
    padding: 0 10px;
  }
  
  .section_4 .section-title {
    font-size: 36px;
    line-height: 42px;
  }
  
  .section_4 .section-description {
    font-size: 18px;
    max-width: 100%;
    line-height: 22px;
  }
  
  .section_4 .logo-row {
    height: 80px;
    border-radius: 8px;
    margin: 0 -10px;
  }
  
  .section_4 .company-logos-scroll {
    gap: 40px;
    padding: 0 20px;
  }
  
  .section_4 .logo-img {
    height: 40px;
  }
  
  .section_4 .logo-item {
    gap: 10px;
  }
  
  .section_4 .logo-label {
    font-size: 16px;
  }
  
  .section_4 .tagline {
    font-size: 24px;
    max-width: 100%;
    line-height: 24px;
  }
}

/* Mobile Small - 480px and below */
@media screen and (max-width: 480px) {
  .section_4 {
    min-height: 390px;
    padding: 25px 0;
  }
  
  .section_4 .container {
    height: 390px;
    gap: 20px;
    padding: 0 10px;
  }
  
  .section_4 .section-title {
    font-size: 24px;
    line-height: 26px;
  }
  
  .section_4 .section-description {
    font-size: 14px;
    line-height: 15px;
  }
  
  .section_4 .logo-row {
    height: 60px;
    border-radius: 5px;
  }
  
  .section_4 .company-logos-scroll {
    gap: 25px;
    padding: 0 10px;
  }
  
  .section_4 .logo-img {
    height: 28px;
  }
  
  .section_4 .logo-item {
    gap: 6px;
  }
  
  .section_4 .logo-label {
    font-size: 12px;
  }
  
  .section_4 .tagline {
    font-size: 16px;
    line-height: 20px;
  }
}

/* Extra Small Mobile - 360px and below */
@media screen and (max-width: 380px) {
  .section_4 {
    min-height: 390px;
    padding: 25px 0;
  }
  
  .section_4 .container {
    height: 390px;
    gap: 20px;
    padding: 0 10px;
  }
  
  .section_4 .section-title {
    font-size: 24px;
    line-height: 26px;
  }
  
  .section_4 .section-description {
    font-size: 14px;
    line-height: 15px;
  }
  
  .section_4 .logo-row {
    height: 60px;
    border-radius: 5px;
  }
  
  .section_4 .company-logos-scroll {
    gap: 25px;
    padding: 0 10px;
  }
  
  .section_4 .logo-img {
    height: 28px;
  }
  
  .section_4 .logo-item {
    gap: 6px;
  }
  
  .section_4 .logo-label {
    font-size: 12px;
  }
  
  .section_4 .tagline {
    font-size: 16px;
    line-height: 20px;
  }
}

@media screen and (max-width: 320px) {
  .section_4 {
    min-height: 390px;
    padding: 25px 0;
  }
  
  .section_4 .container {
    height: 390px;
    gap: 20px;
    padding: 0 10px;
  }
  
  .section_4 .section-title {
    font-size: 24px;
    line-height: 26px;
  }
  
  .section_4 .section-description {
    font-size: 14px;
    line-height: 15px;
  }
  
  .section_4 .logo-row {
    height: 60px;
    border-radius: 5px;
  }
  
  .section_4 .company-logos-scroll {
    gap: 25px;
    padding: 0 10px;
  }
  
  .section_4 .logo-img {
    height: 28px;
  }
  
  .section_4 .logo-item {
    gap: 6px;
  }
  
  .section_4 .logo-label {
    font-size: 12px;
  }
  
  .section_4 .tagline {
    font-size: 16px;
    line-height: 20px;
  }
}

/* Section 5 */
.section_5 { 
  background: linear-gradient( 180deg, rgba(228, 224, 241, 1) 0%, rgba(254, 226, 213, 1) 100% );
  width: 100%;
} 
.section_5 .container { 
  background: none;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 1010px; 
  position: relative; 
} 
.section_5 .section-subtitle { 
  position: absolute; 
  top: 0px; 
  left: 550px; 
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  color: transparent; 
  font-size: 70px; 
  text-align: center; 
  letter-spacing: 2.10px; 
  line-height: 65.2px; 
  white-space: nowrap; 
  scroll-margin-top: 110px;
} 
.section_5 .highlight-1 { 
  color: #11276a; 
  letter-spacing: 1.47px; 
}  
.section_5 .accent-1 { 
  color: #ca4a9a; 
  letter-spacing: 1.47px; 
} 
.section_5 .description { 
  position: absolute; 
  width: 1065px; 
  top: 90px; 
  left: 198px; 
  font-family: "Montserrat-Light", Helvetica; 
  font-weight: 400; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 0.60px; 
  line-height: 23.6px; 
} 
.section_5 .description-1 { 
  position: absolute; 
  width: 1420px; 
  top: 150px; 
  left: 50px; 
  font-family: "Montserrat-Medium", Helvetica; 
  font-weight: 500; 
  color: #10266a; 
  font-size: 32px; 
  text-align: center; 
  letter-spacing: 0.96px; 
  line-height: 27.8px; 
}
/* Hex grid for section_5 */
.section_5 .hex-grid {
  position: relative;
  width: 100%;
  height: 480px;
  margin: 0 auto;
}
.section_5 .hex {
  position: absolute;
  width: 115px;
  height: 100px;
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
  overflow: hidden;
  /* background: linear-gradient(180deg, rgba(228, 224, 241, 1) 0%, rgba(254, 226, 213, 1) 100%); */
  background: #F4E4E6;
}
.section_5 .hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section_5 .hex:nth-child(1)  { top: 220px;  left: 460px; }
.section_5 .hex:nth-child(2)  { top: 220px;  left: 660px; }
.section_5 .hex:nth-child(3)  { top: 220px;  left: 860px; }

.section_5 .hex:nth-child(4)  { top: 275px; left: 360px; }
.section_5 .hex:nth-child(5)  { top: 275px; left: 560px; }
.section_5 .hex:nth-child(6)  { top: 275px; left: 760px; }
.section_5 .hex:nth-child(7)  { top: 275px; left: 960px; }

.section_5 .hex:nth-child(8)  { top: 330px; left: 460px; }
.section_5 .hex:nth-child(9)  { top: 330px; left: 660px; }
.section_5 .hex:nth-child(10) { top: 330px; left: 860px; }

.section_5 .hex:nth-child(11) { top: 385px; left: 360px; }
.section_5 .hex:nth-child(12) { top: 385px; left: 560px; }
.section_5 .hex:nth-child(13) { top: 385px; left: 760px; }
.section_5 .hex:nth-child(14) { top: 385px; left: 960px; }

.section_5 .hex:nth-child(15) { top: 440px; left: 460px; }
.section_5 .hex:nth-child(16) { top: 440px; left: 860px; }

.section_5 .hex:nth-child(17) { top: 330px; left: 260px; }
.section_5 .hex:nth-child(18) { top: 330px; left: 1060px; }
.section_5 .hex:nth-child(19) { top: 440px; left: 660px; }

.section_5 .contact-info { 
  position: absolute; 
  width: 1338px; 
  height: 330px; 
  top: 650px; 
  left: 55px; 
  background-color: #f0ecfc; 
  border-radius: 30px; 
  box-shadow: 0px 0px 12px #8e9cc8; 
}
.section_5 .address { 
  position: absolute; 
  width: 584px; 
  top: 200px; 
  left: 0px; 
  font-family: "Montserrat-Medium", Helvetica; 
  font-weight: 500; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 1.20px; 
  line-height: 41.3px; 
} 
.section_5 .address-logo {
  position: absolute;
  left: 293px;
  top: 160px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform: translateX(-50%);
}
.section_5 .text-wrapper { 
  font-weight: 600; 
  letter-spacing: 0.48px; 
  color: #10266a; 
} 
.section_5 .span { 
  font-family: "Montserrat-Light", Helvetica; 
  font-weight: 400; 
  font-size: 18px; 
  letter-spacing: 0.17px; 
  line-height: 24.8px; 
} 
.section_5 .email { 
  position: absolute; 
  top: 200px; 
  left: 625px; 
  font-family: "Montserrat-Medium", Helvetica; 
  font-weight: 500; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 1.20px; 
  line-height: 41.3px; 
} 
.section_5 .email-logo {
  position: absolute;
  left: 727px;
  top: 160px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform: translateX(-50%);
}
.section_5 .contact-us { 
  position: absolute; 
  top: 5px; 
  left: 670px;
  transform: translateX(-50%);
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  color: transparent; 
  font-size: 36px; 
  text-align: center; 
  letter-spacing: 0.88px; 
  line-height: 95.0px; 
  white-space: nowrap; 
} 
.section_5 .description-2 {
  position: relative;
  top: 80px;
  left: 185px;
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 20px;
  font-weight: 300; 
  color: #10266a;
  text-align: center;
  line-height: 23.4px;
  letter-spacing: 0.62px; 
  max-width: 1000px;
}
.section_5 .highlight { 
  color: #ca4a9a; 
  letter-spacing: 2.76px; 
} 
.section_5 .accent { 
  color: #10266a; 
  letter-spacing: 2.76px; 
}
.section_5 .linkedin-logo {
  position: absolute;
  left: 1090px;
  top: 160px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform: translateX(-50%);
}
.section_5 .linkedin { 
  position: absolute; 
  top: 200px; 
  left: 1040px; 
  font-family: "Montserrat-Medium", Helvetica; 
  font-weight: 500; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 1.20px; 
  line-height: 41.3px; 
} 

@media screen and (max-width: 1280px) {
  .section_5 .container {
    max-width: 100%;
    padding: 0 40px;
    height: 960px;
  }

  /* Title positioning */
  .section_5 .section-subtitle {
    left: 50%;
    transform: translateX(-50%);
    font-size: 52px;
    line-height: 42px;
  }

  /* Description adjustments */
  .section_5 .description {
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    line-height: 21px;
    top: 80px;
  }

  .section_5 .description-1 {
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    line-height: 33px;
    top: 140px;
  }

  /* Hex grid repositioning */
  .section_5 .hex-grid {
    position: relative;
    top: 230px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    height: 240px; /* Reduce hex grid height */
  }

  .section_5 .hex {
    width: 90px;
    height: 80px;
  }

  /* Repositioned hex coordinates for better fit */
  .section_5 .hex:nth-child(1)  { top: 0px;   left: 200px; }
  .section_5 .hex:nth-child(2)  { top: 0px;   left: 360px; }
  .section_5 .hex:nth-child(3)  { top: 0px;   left: 520px; }

  .section_5 .hex:nth-child(4)  { top: 45px;  left: 120px; }
  .section_5 .hex:nth-child(5)  { top: 45px;  left: 280px; }
  .section_5 .hex:nth-child(6)  { top: 45px;  left: 440px; }
  .section_5 .hex:nth-child(7)  { top: 45px;  left: 600px; }

  .section_5 .hex:nth-child(8)  { top: 90px;  left: 200px; }
  .section_5 .hex:nth-child(9)  { top: 90px;  left: 360px; }
  .section_5 .hex:nth-child(10) { top: 90px;  left: 520px; }

  .section_5 .hex:nth-child(11) { top: 135px; left: 120px; }
  .section_5 .hex:nth-child(12) { top: 135px; left: 280px; }
  .section_5 .hex:nth-child(13) { top: 135px; left: 440px; }
  .section_5 .hex:nth-child(14) { top: 135px; left: 600px; }

  .section_5 .hex:nth-child(15) { top: 180px; left: 200px; }
  .section_5 .hex:nth-child(16) { top: 180px; left: 520px; }

  .section_5 .hex:nth-child(17) { top: 90px;  left: 40px; }
  .section_5 .hex:nth-child(18) { top: 90px;  left: 680px; }
  .section_5 .hex:nth-child(19) { top: 180px; left: 360px; }

  /* Contact section adjustments - FIXED */
  .section_5 .contact-info {
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    top: 320px; /* Reduced from 550px */
    height: auto;
    min-height: 300px; /* Increased min-height */
    padding: 30px 20px; /* Added top/bottom padding */
    display: flex; /* Add flexbox */
    flex-direction: column; /* Stack elements vertically */
    position: relative; /* Make it relative for better control */
  }

  .section_5 .contact-us {
    position: relative; /* Change from absolute */
    left: auto; /* Reset left */
    transform: none; /* Remove transform */
    font-size: 32px;
    text-align: center; /* Center the title */
    margin-bottom: 10px; /* Add spacing */
    margin-top: -20px;
  }

  .section_5 .description-2 {
    position: relative; /* Change from absolute */
    left: auto; /* Reset left */
    transform: none; /* Remove transform */
    max-width: 100%; /* Use full width */
    width: 100%; /* Ensure full width */
    font-size: 20px;
    top: auto; /* Reset top */
    margin-bottom: 30px; /* Add spacing */
    text-align: center;
    line-height: 21px; /* Improve line height */
  }

  /* Contact items - NEW APPROACH */
  .section_5 .contact-items {
    display: flex; /* Use flexbox for contact items */
    justify-content: space-around; /* Distribute evenly */
    align-items: flex-start; /* Align to top */
    flex-wrap: wrap; /* Allow wrapping */
    gap: 20px; /* Add gap between items */
  }

  .section_5 .contact-item {
    display: flex; /* Flex for each item */
    flex-direction: column; /* Stack icon and text */
    align-items: center; /* Center align */
    text-align: center; /* Center text */
    flex: 1; /* Equal width */
    min-width: 200px; /* Minimum width */
    max-width: 300px; /* Maximum width */
  }

  /* Reset all absolute positioning for contact elements */
  .section_5 .address-logo,
  .section_5 .email-logo,
  .section_5 .linkedin-logo {
    position: relative; /* Change from absolute */
    left: auto; /* Reset left */
    top: auto; /* Reset top */
    transform: none; /* Remove transform */
    margin-bottom: 10px; /* Add spacing */
  }
  
  .section_5 .address,
  .section_5 .email,
  .section_5 .linkedin {
    position: relative; /* Change from absolute */
    left: auto; /* Reset left */
    top: auto; /* Reset top */
    width: 100%; /* Full width of container */
    font-size: 20px; /* Slightly smaller font */
    line-height: 1.3; /* Better line height */
    margin: 0; /* Reset margins */
  }

  .section_5 .span {
    display: block; /* Make address text block level */
    font-size: 16px; /* Smaller font for address details */
    line-height:  20.8px;
    margin-top: 5px;
  }
}
/* Medium screens (max-width: 1024px) */
@media screen and (max-width: 1024px) {
  .section_5 .container {
    max-width: 100%;
    padding: 0 25px;
    height: auto;
    min-height: 810px; /* Reduced */
  }

  /* Title positioning */
  .section_5 .section-subtitle {
    left: 50%;
    transform: translateX(-50%);
    font-size: 52px; /* Reduced */
    line-height: 42px;
  }

  /* Description adjustments */
  .section_5 .description {
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px; /* Reduced */
    top: 65px;
    line-height: 24px;
  }

  .section_5 .description-1 {
    width: 98%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px; /* Reduced */
    top: 130px;
    line-height: 24px;
  }

  /* Hex grid repositioning */
  .section_5 .hex-grid {
    position: relative;
    top: 200px; /* Reduced */
    left: 280px;
    transform: translateX(-50%);
    width: 95%;
    max-width: 700px; /* Reduced */
    height: 170px; /* Reduced */
  }

  .section_5 .hex {
    width: 74px; /* Reduced */
    height: 68px; /* Reduced */
  }

  /* Repositioned hex coordinates - tighter layout */
  .section_5 .hex:nth-child(1)  { top: 0px;   left: 250px; }
  .section_5 .hex:nth-child(2)  { top: 0px;   left: 380px; }
  .section_5 .hex:nth-child(3)  { top: 0px;   left: 510px; }

  .section_5 .hex:nth-child(4)  { top: 40px;  left: 185px; }
  .section_5 .hex:nth-child(5)  { top: 40px;  left: 315px; }
  .section_5 .hex:nth-child(6)  { top: 40px;  left: 445px; }
  .section_5 .hex:nth-child(7)  { top: 40px;  left: 575px; }

  .section_5 .hex:nth-child(8)  { top: 80px;  left: 250px; }
  .section_5 .hex:nth-child(9)  { top: 80px;  left: 380px; }
  .section_5 .hex:nth-child(10) { top: 80px;  left: 510px; }

  .section_5 .hex:nth-child(11) { top: 120px;  left: 185px; }
  .section_5 .hex:nth-child(12) { top: 120px;  left: 315px; }
  .section_5 .hex:nth-child(13) { top: 120px;  left: 445px; }
  .section_5 .hex:nth-child(14) { top: 120px;  left: 575px; }

  .section_5 .hex:nth-child(15) { top: 160px; left: 250px; }
  .section_5 .hex:nth-child(16) { top: 160px; left: 510px; }

  .section_5 .hex:nth-child(17) { top: 80px;  left: 120px; }
  .section_5 .hex:nth-child(18) { top: 80px;  left: 640px; }
  .section_5 .hex:nth-child(19) { top: 160px; left: 380px; }

  /* Contact section - MUCH SMALLER */
  .section_5 .contact-info {
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    top: 300px; /* Reduced */
    height: auto;
    min-height: 200px; /* Much smaller */
    padding: 15px 10px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .section_5 .contact-us {
    font-size: 30px; /* Reduced */
    margin-bottom: 6px;
  }

  .section_5 .description-2 {
    font-size: 20px; /* Reduced */
    margin-bottom: 15px; /* Reduced */
    line-height: 24px;
    padding: 0 10px; /* Added padding to prevent overflow */
    margin-top: -15px;
  }

  .section_5 .contact-items {
    gap: 10px; /* Reduced */
  }

  .section_5 .contact-item {
    min-width: 150px; /* Reduced */
    max-width: 200px; /* Reduced */
  }

  .section_5 .address-logo,
  .section_5 .email-logo,
  .section_5 .linkedin-logo {
    width: 35px; /* Reduced */
    height: 35px; /* Reduced */
  }

  .section_5 .address,
  .section_5 .email,
  .section_5 .linkedin {
    font-size: 18px; /* Reduced */
    line-height: 18px;
  }

  .section_5 .span {
    font-size: 14px; /* Reduced */
    line-height:  20.8px;
  }
}


/* Tablet screens (max-width: 768px) */
@media screen and (max-width: 768px) {
  .section_5 .container {
    max-width: 100%;
    padding: 0 15px;
    height: auto;
    min-height: 880px; /* Much smaller */
  }

  .section_5 .section-subtitle {
    left: 50%;
    transform: translateX(-50%);
    font-size: 36px; /* Reduced */
    line-height: 42px;
  }

  .section_5 .description {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px; /* Reduced */
    top: 55px;
    line-height: 18px;
  }

  .section_5 .description-1 {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px; /* Reduced */
    top: 115px;
    line-height: 24px;
  }

  .section_5 .hex-grid {
    position: relative;
    top: 200px; /* Reduced */
    left: 250px;
    transform: translateX(-50%);
    width: 100%;
    max-width: 550px; /* Reduced */
    height: 250px; /* Reduced */
  }

  .section_5 .hex {
    width: 65px; /* Reduced */
    height: 58px; /* Reduced */
  }

  /* Tighter hex positioning */
  .section_5 .hex:nth-child(1)  { top: 0px;   left: 150px; }
  .section_5 .hex:nth-child(2)  { top: 0px;   left: 260px; }
  .section_5 .hex:nth-child(3)  { top: 0px;   left: 370px; }

  .section_5 .hex:nth-child(4)  { top: 33px;  left: 95px; }
  .section_5 .hex:nth-child(5)  { top: 33px;  left: 205px; }
  .section_5 .hex:nth-child(6)  { top: 33px;  left: 315px; }
  .section_5 .hex:nth-child(7)  { top: 33px;  left: 425px; }

  .section_5 .hex:nth-child(8)  { top: 66px;  left: 150px; }
  .section_5 .hex:nth-child(9)  { top: 66px;  left: 260px; }
  .section_5 .hex:nth-child(10) { top: 66px;  left: 370px; }

  .section_5 .hex:nth-child(11) { top: 99px;  left: 95px; }
  .section_5 .hex:nth-child(12) { top: 99px;  left: 205px; }
  .section_5 .hex:nth-child(13) { top: 99px;  left: 315px; }
  .section_5 .hex:nth-child(14) { top: 99px;  left: 425px; }

  .section_5 .hex:nth-child(15) { top: 132px;  left: 150px; }
  .section_5 .hex:nth-child(16) { top: 132px;  left: 370px; }

  .section_5 .hex:nth-child(17) { top: 66px;  left: 40px; }
  .section_5 .hex:nth-child(18) { top: 66px;  left: 480px; }
  .section_5 .hex:nth-child(19) { top: 132px;  left: 260px; }

  /* Contact section - VERY COMPACT */
  .section_5 .contact-info {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 180px; /* Much reduced */
    height: auto;
    min-height: 180px; /* Much smaller */
    padding: 12px 8px; /* Very compact */
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .section_5 .contact-us {
    font-size: 28px; /* Reduced */
    margin-bottom: 6px;
  }

  .section_5 .description-2 {
    font-size: 18px; /* Reduced */
    margin-bottom: 12px; /* Reduced */
    line-height: 18px;
    padding: 0 8px;
    margin-top: -20px;
  }

  .section_5 .contact-items {
    gap: 8px;
    flex-direction: column;
    align-items: center;
  }

  .section_5 .contact-item {
    min-width: 100%;
    max-width: 100%;
    margin-bottom: 8px; /* Reduced */
  }

  .section_5 .address-logo,
  .section_5 .email-logo,
  .section_5 .linkedin-logo {
    width: 30px; /* Reduced */
    height: 30px; /* Reduced */
  }

  .section_5 .address,
  .section_5 .email,
  .section_5 .linkedin {
    font-size: 16px; /* Reduced */
    line-height: 16px;
  }

  .section_5 .span {
    font-size: 12px; /* Reduced */
    line-height:  16px;
  }
}

/* Mobile Medium (max-width: 480px) */
@media screen and (max-width: 480px) {
  .section_5 .container {
    padding: 0 10px;
    min-height: 800px; /* Much reduced */
  }

  .section_5 .section-subtitle {
    font-size: 24px;
    line-height: 26px;
  }

  .section_5 .description {
    font-size: 14px;
    line-height: 15px;
    top: 40px;
  }

  .section_5 .description-1 {
    font-size: 16px;
    line-height: 20px;
    top: 115px;
  }

  .section_5 .hex-grid {
    top: 215px; /* Reduced */
    max-width: 500px;
    height: 170px; /* Reduced */
    left: 55%;
  }

  .section_5 .hex {
    width: 40px; /* Much smaller */
    height: 34px; /* Much smaller */
  }

  /* Ultra-tight positioning */
  .section_5 .hex:nth-child(1)  { top: 0px;   left: 90px; }
  .section_5 .hex:nth-child(2)  { top: 0px;   left: 160px; }
  .section_5 .hex:nth-child(3)  { top: 0px;   left: 230px; }

  .section_5 .hex:nth-child(4)  { top: 20px;  left: 55px; }
  .section_5 .hex:nth-child(5)  { top: 20px;  left: 125px; }
  .section_5 .hex:nth-child(6)  { top: 20px;  left: 195px; }
  .section_5 .hex:nth-child(7)  { top: 20px;  left: 265px; }

  .section_5 .hex:nth-child(8)  { top: 40px;  left: 90px; }
  .section_5 .hex:nth-child(9)  { top: 40px;  left: 160px; }
  .section_5 .hex:nth-child(10) { top: 40px;  left: 230px; }

  .section_5 .hex:nth-child(11) { top: 60px;  left: 55px; }
  .section_5 .hex:nth-child(12) { top: 60px;  left: 125px; }
  .section_5 .hex:nth-child(13) { top: 60px;  left: 195px; }
  .section_5 .hex:nth-child(14) { top: 60px;  left: 265px; }

  .section_5 .hex:nth-child(15) { top: 80px;  left: 90px; }
  .section_5 .hex:nth-child(16) { top: 80px;  left: 230px; }

  .section_5 .hex:nth-child(17) { top: 40px;  left: 20px; }
  .section_5 .hex:nth-child(18) { top: 40px;  left: 300px; }
  .section_5 .hex:nth-child(19) { top: 80px;  left: 160px; }

  /* Contact section - MINIMAL */
  .section_5 .contact-info {
    top: 210px; /* Much reduced */
    min-height: 140px; /* Much smaller */
    padding: 8px 5px; /* Minimal */
  }

  .section_5 .contact-us {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .section_5 .description-2 {
    font-size: 14px; /* Much reduced */
    margin-bottom: 8px; /* Much reduced */
    padding: 0 4px;
  }

  .section_5 .address-logo,
  .section_5 .email-logo,
  .section_5 .linkedin-logo {
    width: 22px; /* Much smaller */
    height: 22px; /* Much smaller */
  }

  .section_5 .address,
  .section_5 .email,
  .section_5 .linkedin {
    font-size: 14px; /* Much reduced */
  }
  .section_5 .email .span {
    font-size: 12px; /* Very small */
    line-height: 1.2;
  }
  .section_5 .address .span {
    font-size: 12px; /* Much reduced */
  }
}

/* Mobile Small (max-width: 360px) */
@media screen and (max-width: 380px) {
  .section_5 .container {
    padding: 0 10px;
    min-height: 800px; /* Much reduced */
  }

  .section_5 .section-subtitle {
    font-size: 24px;
    line-height: 26px;
  }

  .section_5 .description {
    font-size: 14px;
    line-height: 15px;
    top: 40px;
  }

  .section_5 .description-1 {
    font-size: 16px;
    line-height: 20px;
    top: 115px;
  }

  .section_5 .hex-grid {
    top: 215px; /* Reduced */
    max-width: 500px;
    height: 170px; /* Reduced */
    left: 50%;
  }

  .section_5 .hex {
    width: 40px; /* Much smaller */
    height: 34px; /* Much smaller */
  }

  /* Ultra-tight positioning */
  .section_5 .hex:nth-child(1)  { top: 0px;   left: 90px; }
  .section_5 .hex:nth-child(2)  { top: 0px;   left: 160px; }
  .section_5 .hex:nth-child(3)  { top: 0px;   left: 230px; }

  .section_5 .hex:nth-child(4)  { top: 20px;  left: 55px; }
  .section_5 .hex:nth-child(5)  { top: 20px;  left: 125px; }
  .section_5 .hex:nth-child(6)  { top: 20px;  left: 195px; }
  .section_5 .hex:nth-child(7)  { top: 20px;  left: 265px; }

  .section_5 .hex:nth-child(8)  { top: 40px;  left: 90px; }
  .section_5 .hex:nth-child(9)  { top: 40px;  left: 160px; }
  .section_5 .hex:nth-child(10) { top: 40px;  left: 230px; }

  .section_5 .hex:nth-child(11) { top: 60px;  left: 55px; }
  .section_5 .hex:nth-child(12) { top: 60px;  left: 125px; }
  .section_5 .hex:nth-child(13) { top: 60px;  left: 195px; }
  .section_5 .hex:nth-child(14) { top: 60px;  left: 265px; }

  .section_5 .hex:nth-child(15) { top: 80px;  left: 90px; }
  .section_5 .hex:nth-child(16) { top: 80px;  left: 230px; }

  .section_5 .hex:nth-child(17) { top: 40px;  left: 20px; }
  .section_5 .hex:nth-child(18) { top: 40px;  left: 300px; }
  .section_5 .hex:nth-child(19) { top: 80px;  left: 160px; }

  /* Contact section - MINIMAL */
  .section_5 .contact-info {
    top: 210px; /* Much reduced */
    min-height: 140px; /* Much smaller */
    padding: 8px 5px; /* Minimal */
  }

  .section_5 .contact-us {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .section_5 .description-2 {
    font-size: 14px; /* Much reduced */
    margin-bottom: 8px; /* Much reduced */
    padding: 0 4px;
  }

  .section_5 .address-logo,
  .section_5 .email-logo,
  .section_5 .linkedin-logo {
    width: 22px; /* Much smaller */
    height: 22px; /* Much smaller */
  }

  .section_5 .address,
  .section_5 .email,
  .section_5 .linkedin {
    font-size: 14px; /* Much reduced */
  }
  .section_5 .email .span {
    font-size: 12px; /* Very small */
    line-height: 1.2;
  }
  .section_5 .address .span {
    font-size: 12px; /* Much reduced */
  }
}

@media screen and (max-width: 320px) {
  .section_5 .container {
    padding: 0 10px;
    min-height: 800px;
    width: 300px;
  }

  .section_5 .section-subtitle {
    min-width: 300px;
    font-size: 24px;
    line-height: 26px;
  }

  .section_5 .description {
    font-size: 14px;
    line-height: 15px;
    top: 40px;
  }

  .section_5 .description-1 {
    font-size: 16px;
    line-height: 20px;
    top: 115px;
  }

  .section_5 .hex-grid {
    top: 215px; /* Reduced */
    max-width: 500px;
    height: 170px; /* Reduced */
    left: 36%;
  }

  .section_5 .hex {
    width: 40px; /* Much smaller */
    height: 34px; /* Much smaller */
  }

  /* Ultra-tight positioning */
  .section_5 .hex:nth-child(1)  { top: 0px;   left: 90px; }
  .section_5 .hex:nth-child(2)  { top: 0px;   left: 160px; }
  .section_5 .hex:nth-child(3)  { top: 0px;   left: 230px; }

  .section_5 .hex:nth-child(4)  { top: 20px;  left: 55px; }
  .section_5 .hex:nth-child(5)  { top: 20px;  left: 125px; }
  .section_5 .hex:nth-child(6)  { top: 20px;  left: 195px; }
  .section_5 .hex:nth-child(7)  { top: 20px;  left: 265px; }

  .section_5 .hex:nth-child(8)  { top: 40px;  left: 90px; }
  .section_5 .hex:nth-child(9)  { top: 40px;  left: 160px; }
  .section_5 .hex:nth-child(10) { top: 40px;  left: 230px; }

  .section_5 .hex:nth-child(11) { top: 60px;  left: 55px; }
  .section_5 .hex:nth-child(12) { top: 60px;  left: 125px; }
  .section_5 .hex:nth-child(13) { top: 60px;  left: 195px; }
  .section_5 .hex:nth-child(14) { top: 60px;  left: 265px; }

  .section_5 .hex:nth-child(15) { top: 80px;  left: 90px; }
  .section_5 .hex:nth-child(16) { top: 80px;  left: 230px; }

  .section_5 .hex:nth-child(17) { top: 40px;  left: 20px; }
  .section_5 .hex:nth-child(18) { top: 40px;  left: 300px; }
  .section_5 .hex:nth-child(19) { top: 80px;  left: 160px; }

  /* Contact section - MINIMAL */
  .section_5 .contact-info {
    top: 210px; /* Much reduced */
    min-height: 140px; /* Much smaller */
    padding: 8px 5px; /* Minimal */
  }

  .section_5 .contact-us {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .section_5 .description-2 {
    font-size: 14px; /* Much reduced */
    margin-bottom: 8px; /* Much reduced */
    padding: 0 4px;
  }

  .section_5 .address-logo,
  .section_5 .email-logo,
  .section_5 .linkedin-logo {
    width: 22px; /* Much smaller */
    height: 22px; /* Much smaller */
  }

  .section_5 .address,
  .section_5 .email,
  .section_5 .linkedin {
    font-size: 14px; /* Much reduced */
  }
  .section_5 .email .span {
    font-size: 12px; /* Very small */
    line-height: 1.2;
  }
  .section_5 .address .span {
    font-size: 12px; /* Much reduced */
  }
}


/* About Us Section */
/* Base Styles - Desktop First */
.about-section-1 { 
  background-color: rgba(255, 255, 255, 1.0); 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  width: 100%; 
  margin-top: 20px;
} 

.about-section-1 .container { 
  background: linear-gradient(180deg, rgba(254, 227, 214, 1) 0%, rgba(228, 224, 240, 1) 100%); 
  width: 100%; 
  height: 750px;
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: center;
} 

.about-section-1 .content-wrapper {
  max-width: 1400px;
  width: 100%;
  padding: 60px 20px;
  text-align: center;
}

.about-section-1 .about-us { 
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 500; 
  color: transparent; 
  font-size: 70px; 
  text-align: center; 
  letter-spacing: 2.10px; 
  line-height: 76.5px; 
  margin: 0 0 40px 0;
} 

.about-section-1 .text-wrapper-2 { 
  color: #10266a; 
  letter-spacing: 1.47px; 
} 

.about-section-1 .text-wrapper-3 { 
  color: #ca4a9a; 
  letter-spacing: 1.47px; 
}

.about-section-1 .about-description { 
  font-family: "Montserrat-Light", Helvetica; 
  font-weight: 400; 
  line-height: 28.8px; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 0.72px; 
  margin: 0 0 30px 0;
} 

.about-section-1 .text-wrapper-1 { 
  font-family: "Montserrat-Medium", Helvetica; 
  font-weight: 500; 
  letter-spacing: 0.17px; 
} 

.about-section-1 .company-history { 
  font-family: "Montserrat-Light", Helvetica; 
  font-weight: 400; 
  color: #10266a; 
  font-size: 24px; 
  letter-spacing: 0.60px; 
  line-height: 125%; 
  text-align: center;
  margin: 0 0 50px 0;
} 

.about-section-1 .our-promise { 
  font-family: "Montserrat-SemiBold", Helvetica; 
  font-weight: 500; 
  color: transparent; 
  font-size: 45px; 
  text-align: center; 
  letter-spacing: 1.35px; 
  line-height: 53.2px; 
  margin: 0 0 30px 0;
} 

.about-section-1 .text-wrapper-4 { 
  color: #10266a; 
  letter-spacing: 0.61px; 
} 

.about-section-1 .text-wrapper-5 { 
  color: #ca4a9a;
  letter-spacing: 0.61px; 
} 

.about-section-1 .about-value { 
  font-family: "Montserrat-Light", Helvetica; 
  font-weight: 400; 
  color: #10266a; 
  font-size: 24px; 
  letter-spacing: 0.60px; 
  line-height: 125%; 
  text-align: center;
  margin: 0;
} 

.about-section-1 .text-wrapper-6 { 
  font-weight: 400; 
  letter-spacing: 0.12px; 
} 

.about-section-1 .text-wrapper-7 { 
  font-family: "Montserrat-Medium", Helvetica; 
  font-weight: 500; 
  letter-spacing: 0.12px; 
} 

/* About Section 2 - Founders */
.about-section-2 { 
  background-color: rgba(255, 255, 255, 1.0); 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  width: 100%; 
  margin-top: -50px;
} 

.about-section-2 .container { 
  background: linear-gradient(180deg, rgba(228, 224, 241, 1) 0%, rgba(254, 226, 213, 1) 100%); 
  width: 100%; 
  min-height: 650px;
  position: relative; 
  display: flex;
  align-items: center;
  justify-content: center;
} 

.about-section-2 .content-wrapper {
  max-width: 1400px;
  width: 100%;
  padding: 60px 20px;
  text-align: center;
}

.about-section-2 .meet-founders { 
  font-family: "Montserrat-Bold", Helvetica; 
  font-weight: 700; 
  color: transparent; 
  font-size: 70px; 
  text-align: center; 
  letter-spacing: 2.10px; 
  line-height: 76.5px; 
  margin: 0 0 50px 0;
} 

.about-section-2 .accent { 
  color: #11276a; 
  letter-spacing: 1.47px; 
} 

.about-section-2 .highlight { 
  color: #ca4a9a; 
  letter-spacing: 1.47px; 
}

.about-section-2 .founders-grid {
  display: flex;
  gap: 30px;
  justify-content: space-between;
  align-items: stretch;
}

.about-section-2 .founder-card {
  flex: 1;
  background-color: #f0ecfd; 
  border-radius: 32px; 
  box-shadow: 0px 0px 29.2px 3px #00000040; 
  padding: 30px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.about-section-2 .founder-header {
  margin-bottom: 20px;
}

.about-section-2 .founder-name { 
  font-family: "Montserrat-SemiBold", Helvetica; 
  font-weight: 600; 
  color: #10266a; 
  font-size: 36px; 
  text-align: left; 
  letter-spacing: 0.96px; 
  line-height: 35.0px; 
  margin: 0 0 10px 0;
} 

.about-section-2 .founder-role { 
  font-family: "Montserrat-SemiBold", Helvetica; 
  font-weight: 600; 
  color: #ca4a9a; 
  font-size: 32px; 
  text-align: left; 
  letter-spacing: 0.96px; 
  line-height: 35.0px; 
  display: block;
} 

.about-section-2 .founder-content {
  display: flex;
  gap: 20px;
  flex: 1;
  align-items: flex-start;
}

.about-section-2 .founder-image-section {
  flex-shrink: 0;
}

.about-section-2 .founder-img { 
  width: 150px; 
  height: 150px; 
  object-fit: cover; 
  border-radius: 30px; 
  margin-bottom: 15px;
} 

.about-section-2 .linkedin-icon { 
  width: 50px;
  height: 50px;
  display: block;
} 

.about-section-2 .founder-text-section {
  flex: 1;
}

.about-section-2 .founder-desc { 
  font-family: "Montserrat-Regular", Helvetica; 
  font-weight: 400; 
  color: #11276a; 
  font-size: 20px; 
  letter-spacing: 0.60px; 
  line-height: 25.8px; 
  text-align: left;
  margin: 0;
} 


/* Large Desktop (max-width: 1200px) */
@media screen and (max-width: 1280px) {
    .about-section-1 .container {
      height: 550px;
      margin-top: 20px;
    } 
    .about-section-1 .about-us,
    .about-section-2 .meet-founders {
        font-size: 52px;
        line-height: 42px;
    }
    
    .about-section-1 .about-description,
    .about-section-1 .company-history,
    .about-section-1 .about-value {
        font-size: 20px;
        line-height: 21px;
    }
    
    .about-section-1 .our-promise {
        font-size: 36px;
        line-height: 21px;
    }
    .about-section-2 .founder-name {
        font-size: 26px;
        line-height: 35px;
    }
    .about-section-2 .founder-role { 
        font-size: 22px;
        line-height: 35px;
    }
    .about-section-2 .founders-grid {
        gap: 20px;
    }
    
    .about-section-2 .founder-card {
        padding: 25px;
    }
    .about-section-2 .founder-desc { 
        font-size: 20px;
        line-height: 24px;
    }
}

/* Medium screens (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .about-section-1 .container {
      height: 550px;
    } 
    .about-section-2 .container {
      height: auto;
    } 
    .about-section-1 .content-wrapper {
        padding: 30px 15px;
        margin-top: 30px;
    }
    .about-section-2 .content-wrapper {
        padding: 30px 15px;
    }
    
    .about-section-1 .about-us,
    .about-section-2 .meet-founders {
        font-size: 52px;
        margin-bottom: 52px;
    }
    
    .about-section-1 .about-description,
    .about-section-1 .company-history,
    .about-section-1 .about-value {
        font-size: 20px;
        margin-bottom: 25px;
    }
    
    .about-section-1 .our-promise {
        font-size: 35px;
        margin: 40px 0 25px 0;
    }
    
    .about-section-2 .founder-name {
        font-size: 22px;
        line-height: 26px;
    }
    .about-section-2 .founder-role { 
        font-size: 20px;
        line-height: 26px;
    }
    .about-section-2 .founders-grid {
        gap: 20px;
    }
    
    .about-section-2 .founder-card {
        padding: 25px;
    }
    .about-section-2 .founder-desc { 
        font-size: 18px;
        line-height: 24px;
    }
}

/* Small screens (max-width: 768px) */
@media screen and (max-width: 768px) {
    .about-section-1 .container {
      height: 600px;
      margin-top: -60px;
    } 
    .about-section-1 .content-wrapper {
        padding: 10px 15px;
    }
    .about-section-2 .content-wrapper {
        padding: 30px 15px;
    }
    
    .about-section-1 .about-us,
    .about-section-2 .meet-founders {
        font-size: 36px;
        line-height: 36px;
        margin-bottom: 25px;
    }
    
    .about-section-1 .about-description,
    .about-section-1 .company-history,
    .about-section-1 .about-value {
        font-size: 18px;
        line-height: 18px;
        margin-bottom: 20px;
    }
    
    .about-section-1 .our-promise {
        font-size: 36px;
        margin: 30px 0 20px 0;
    }

    .about-section-2 .founder-card {
        padding: 20px;
        min-height: auto;
    }
    
    .about-section-2 .founder-name {
        font-size: 20px;
        text-align: center;
        margin-bottom: 5px;
    }
    
    .about-section-2 .founder-role {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .about-section-2 .founder-content {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .about-section-2 .founder-image-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .about-section-2 .founder-img {
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
    }
    
    .about-section-2 .linkedin-icon {
        width: 40px;
        height: 40px;
    }
    
    .about-section-2 .founder-text-section {
        width: 100%;
    }
    
    .about-section-2 .founder-desc {
        font-size: 16px;
        line-height: 18px;
        text-align: center;
    }
}

/* Mobile screens (max-width: 480px) */
@media screen and (max-width: 480px) {
  .about-section-1 .container {
    height: 550px;
    margin-top: -60px;
  }
  .about-section-1 .content-wrapper,
  .about-section-2 .content-wrapper {
    padding: 20px 10px;
  }
  
  .about-section-1 .about-us,
  .about-section-2 .meet-founders {
    font-size: 24px;
    line-height: 26px;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  
  .about-section-1 .about-description,
  .about-section-1 .company-history,
  .about-section-1 .about-value {
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 18px;
  }
  
  .about-section-1 .our-promise {
    font-size: 20px;
    margin: 20px 0 18px 0;
  }

  .about-section-2 .founders-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .about-section-2 .founder-card {
    padding: 12px;
    width: 90%;
  }

  .about-section-2 .founder-card.founder-card-1 {
    padding: 12px;
  }

  .about-section-2 .founder-name {
    font-size: 18px;
    line-height: 1.2;
  }
  
  .about-section-2 .founder-role {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .about-section-2 .founder-img {
    width: 80px;
    height: 80px;
  }
  
  .about-section-2 .linkedin-icon {
    width: 30px;
    height: 30px;
  }
  
  .about-section-2 .founder-desc {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 380px) {
  .about-section-1 .container {
    height: 700px;
    margin-top: -100px;
  }
  .about-section-2 .container {
    height: 950px;
  }
  .about-section-1 .content-wrapper,
  .about-section-2 .content-wrapper {
    padding: 10px 10px;
  }
  
  .about-section-1 .about-us,
  .about-section-2 .meet-founders {
    font-size: 24px;
    line-height: 26px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .about-section-1 .about-description,
  .about-section-1 .company-history,
  .about-section-1 .about-value {
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 18px;
  }
  
  .about-section-1 .our-promise {
    font-size: 20px;
    margin: 20px 0 18px 0;
  }

  .about-section-2 .founders-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .about-section-2 .founder-card {
    padding: 12px;
    width: 90%;
  }

  .about-section-2 .founder-card.founder-card-1 {
    padding: 12px;
  }

  .about-section-2 .founder-name {
    font-size: 18px;
    line-height: 1.2;
  }
  
  .about-section-2 .founder-role {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .about-section-2 .founder-img {
    width: 80px;
    height: 80px;
  }
  
  .about-section-2 .linkedin-icon {
    width: 30px;
    height: 30px;
  }
  
  .about-section-2 .founder-desc {
    font-size: 14px;
    line-height: 1.5;
  }
}
@media screen and (max-width: 320px) {
  .about-section-1 .container {
    height: auto; /* allow container height to grow with content */
    margin-top: 0;
    flex-direction: column;
  }
  .about-section-2 .container {
    height: auto; /* allow container height to grow with content */
    margin-top: 0;
    padding-top: 60px;
    flex-direction: column;
  }

  .about-section-1 .content-wrapper,
  .about-section-2 .content-wrapper {
    padding: 10px 12px;
    text-align: center;
  }

  .about-section-1 .about-us,
  .about-section-2 .meet-founders {
    font-size: 24px;
    line-height: 26px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .about-section-1 .about-description,
  .about-section-1 .company-history,
  .about-section-1 .about-value {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 16px;
  }

  .about-section-1 .our-promise {
    font-size: 20px;
    line-height: 24px;
    margin: 20px 0 16px 0;
  }

  .about-section-2 .founders-grid {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .about-section-2 .founder-card {
    width: 90%;
    padding: 16px;
    min-height: auto; /* let content define height */
  }

  .about-section-2 .founder-name,
  .about-section-2 .founder-role {
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
  }

  .about-section-2 .founder-img {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
  }

  .about-section-2 .linkedin-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 10px;
  }

  .about-section-2 .founder-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-section-2 .founder-text-section {
    margin-top: 10px;
  }

  .about-section-2 .founder-desc {
    font-size: 14px;
    line-height: 1.5;
  }
}




/* Solutions Section */
/* ========================================
   SOLUTIONS SECTION 1 - DESKTOP FIRST
======================================== */

.solution_section_1 { 
  background-color: transparent; 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  width: 100%; 
} 

.solution_section_1 .div { 
  overflow: visible;
  background: linear-gradient( 180deg, rgba(214, 196, 239, 1) 0%, rgba(254, 226, 213, 1) 100% ); 
  width: 100%; 
  min-height: 100vh;
  height: auto;
  position: relative;
  padding-top: 350px; /* Space for heading and intro text */
  padding-bottom: 60px;
} 

.solution_section_1 .our-projects 
{ 
  position: absolute; 
  top: 130px; 
  left: 33%; 
  font-family: "Montserrat-Bold", Helvetica;
  font-weight: 500; 
  color: transparent; 
  font-size: 70px; 
  text-align: center; 
  letter-spacing: 2.10px; 
  line-height: 76.5px; 
  white-space: nowrap; 
} 

.solution_section_1 .text-wrapper { 
  color: #11276a; 
  letter-spacing: 0.69px; 
} 

.solution_section_1 .text-wrapper-1 { 
  color: #ca4a9a; 
  letter-spacing: 0.69px; 
} 

.solution_section_1 .text-wrapper-2 { 
  position: absolute; 
  width: 1200px; 
  top: 220px; 
  left: 26%; 
  font-family: "Montserrat-Light", Helvetica; 
  font-weight: 400; 
  color: #10266a; 
  font-size: 24px; 
  text-align: center; 
  letter-spacing: 0.72px; 
  line-height: 28.8px; 
}

.solutions-box-1 {
  position: relative;
  width: 1100px;
  height: 572px;
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent;
  border-radius: 12px;
  box-shadow: 0px 0px 15.1px #8e9cc8;
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
  left: unset;
  top: unset;
}

.solutions-box-1 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-1 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-1 .project-title-part1 {
  color: #10266a;
}

.solutions-box-1 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-1 .project-title-part3 {
  color: #10266a;
}

.solutions-box-1 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  min-height: 442px;
}

.solutions-box-1 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-1 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-1 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-1 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-1 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 20px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-1 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-1 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-1 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-1 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 442px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-1 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

.solutions-box-1 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-1 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-1 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}


.solutions-box-1.collapsed,
.solutions-box-2.collapsed,
.solutions-box-3.collapsed,
.solutions-box-4.collapsed,
.solutions-box-5.collapsed,
.solutions-box-6.collapsed,
.solutions-box-7.collapsed,
.solutions-box-8.collapsed,
.solutions-box-9.collapsed,
.solutions-box-10.collapsed {
  height: 40px; /* Adjust to fit only the header row */
  min-height: 0;
  padding-bottom: 0 !important;
  margin-bottom: 15px !important; /* Add gap when collapsed */
  overflow: hidden;
}

/* Add these new rules to handle collapsed state layout */
.solutions-box-1.collapsed .project-header-row,
.solutions-box-2.collapsed .project-header-row,
.solutions-box-3.collapsed .project-header-row,
.solutions-box-4.collapsed .project-header-row,
.solutions-box-5.collapsed .project-header-row,
.solutions-box-6.collapsed .project-header-row,
.solutions-box-7.collapsed .project-header-row,
.solutions-box-8.collapsed .project-header-row,
.solutions-box-9.collapsed .project-header-row,
.solutions-box-10.collapsed .project-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  position: relative;
  height: 40px !important; /* Match the collapsed box height */
}

.solutions-box-1.collapsed .project-title,
.solutions-box-2.collapsed .project-title,
.solutions-box-3.collapsed .project-title,
.solutions-box-4.collapsed .project-title,
.solutions-box-5.collapsed .project-title,
.solutions-box-6.collapsed .project-title,
.solutions-box-7.collapsed .project-title,
.solutions-box-8.collapsed .project-title,
.solutions-box-9.collapsed .project-title,
.solutions-box-10.collapsed .project-title {
  font-size: 20px !important; /* Slightly smaller font for collapsed state */
  line-height: 1.2 !important;
  text-align: left;
}


.solutions-box-2 { 
  position: relative;
  width: 1100px; 
  height: 680px; 
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent; 
  border-radius: 12px; 
  box-shadow: 0px 0px 15.1px #8e9cc8; 
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
  padding 0.4s, margin 0.4s; 
} 

.solutions-box-2 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-2 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:  0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-2 .project-title-part1 {
  color: #10266a;
}

.solutions-box-2 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-2 .project-title-part3 {
  color: #10266a;
}

.solutions-box-2 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  height: 550px;
}

.solutions-box-2 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-2 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-2 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-2 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-2 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 18px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-2 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-2 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-2 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-2 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 550px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-2 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

.solutions-box-2 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-2 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-2 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.solutions-box-3 { 
  position: relative;
  width: 1100px; 
  height: 654px; 
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent; 
  border-radius: 12px; 
  box-shadow: 0px 0px 15.1px #8e9cc8; 
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
  padding 0.4s, margin 0.4s; 
} 

.solutions-box-3 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-3 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:  0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-3 .project-title-part1 {
  color: #10266a;
}

.solutions-box-3 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-3 .project-title-part3 {
  color: #10266a;
}

.solutions-box-3 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  min-height: 526px;
}

.solutions-box-3 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-3 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-3 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-3 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-3 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 18px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-3 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-3 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-3 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-3 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 526px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-3 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

.solutions-box-3 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-3 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-3 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.solutions-box-4 { 
  position: relative;
  width: 1100px; 
  height: 581px; 
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent; 
  border-radius: 12px; 
  box-shadow: 0px 0px 15.1px #8e9cc8; 
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
  padding 0.4s, margin 0.4s; 
} 

.solutions-box-4 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-4 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:  0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-4 .project-title-part1 {
  color: #10266a;
}

.solutions-box-4 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-4 .project-title-part3 {
  color: #10266a;
}

.solutions-box-4 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  min-height: 451px;
}

.solutions-box-4 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-4 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-4 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-4 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-4 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 18px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-4 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-4 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-4 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-4 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 451px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-4 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

.solutions-box-4 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-4 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-4 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.solutions-box-5 { 
  position: relative;
  width: 1100px; 
  height: 682px; 
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent; 
  border-radius: 12px; 
  box-shadow: 0px 0px 15.1px #8e9cc8; 
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
  padding 0.4s, margin 0.4s; 
} 

.solutions-box-5 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-5 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:  0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-5 .project-title-part1 {
  color: #10266a;
}

.solutions-box-5 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-5 .project-title-part3 {
  color: #10266a;
}

.solutions-box-5 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  min-height: 552px;
}

.solutions-box-5 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-5 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-5 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-5 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-5 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 18px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-5 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-5 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-5 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-5 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 552px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-5 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

.solutions-box-5 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-5 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-5 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.solutions-box-6 { 
  position: relative;
  width: 1100px; 
  height: 623px; 
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent; 
  border-radius: 12px; 
  box-shadow: 0px 0px 15.1px #8e9cc8; 
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
  padding 0.4s, margin 0.4s; 
} 

.solutions-box-6 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-6 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:  0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-6 .project-title-part1 {
  color: #10266a;
}

.solutions-box-6 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-6 .project-title-part3 {
  color: #10266a;
}

.solutions-box-6 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  min-height: 493px;
}

.solutions-box-6 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-6 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-6 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-6 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-6 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 18px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-6 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-6 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-6 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-6 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 493px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-6 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

.solutions-box-6 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-6 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-6 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.solutions-box-7 { 
  position: relative;
  width: 1100px; 
  height: 627px; 
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent; 
  border-radius: 12px; 
  box-shadow: 0px 0px 15.1px #8e9cc8; 
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
  padding 0.4s, margin 0.4s; 
} 

.solutions-box-7 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-7 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:  0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-7 .project-title-part1 {
  color: #10266a;
}

.solutions-box-7 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-7 .project-title-part3 {
  color: #10266a;
}

.solutions-box-7 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  min-height: 497px;
}

.solutions-box-7 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-7 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-7 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-7 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-7 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 18px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-7 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-7 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-7 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-7 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 497px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-7 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

.solutions-box-7 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-7 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-7 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.solutions-box-8 { 
  position: relative;
  width: 1100px; 
  height: 682px; 
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent; 
  border-radius: 12px; 
  box-shadow: 0px 0px 15.1px #8e9cc8; 
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
  padding 0.4s, margin 0.4s; 
} 

.solutions-box-8 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-8 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:  0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-8 .project-title-part1 {
  color: #10266a;
}

.solutions-box-8 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-8 .project-title-part3 {
  color: #10266a;
}

.solutions-box-8 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  min-height: 552px;
}

.solutions-box-8 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-8 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-8 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-8 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-8 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 18px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-8 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-8 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-8 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-8 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 552px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-8 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

.solutions-box-8 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-8 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-8 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.solutions-box-9 { 
  position: relative;
  width: 1100px; 
  height: 606px; 
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent; 
  border-radius: 12px; 
  box-shadow: 0px 0px 15.1px #8e9cc8; 
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
  padding 0.4s, margin 0.4s; 
} 

.solutions-box-9 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-9 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:  0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-9 .project-title-part1 {
  color: #10266a;
}

.solutions-box-9 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-9 .project-title-part3 {
  color: #10266a;
}

.solutions-box-9 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  min-height: 476px;
}

.solutions-box-9 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-9 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-9 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-9 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-9 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 18px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-9 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-9 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-9 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-9 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 476px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-9 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

.solutions-box-9 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-9 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-9 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.solutions-box-10 { 
  position: relative;
  width: 1100px; 
  height: 596px; 
  margin: 0 auto 40px auto; /* Center and add space below each box */
  background-color: transparent; 
  border-radius: 12px; 
  box-shadow: 0px 0px 15.1px #8e9cc8; 
  transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
  padding 0.4s, margin 0.4s; 
} 

.solutions-box-10 .solutions-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.solutions-box-10 .project-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 22px;
  font-weight: 700;
  letter-spacing:  0.72px;
  line-height: 65.2px;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.solutions-box-10 .project-title-part1 {
  color: #10266a;
}

.solutions-box-10 .project-title-part2 {
  color: #ca4a9a;
}

.solutions-box-10 .project-title-part3 {
  color: #10266a;
}

.solutions-box-10 .solutions-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  background: none;
  position: relative;
  z-index: 1;
  min-height: 466px;
}

.solutions-box-10 .solutions-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}

.solutions-box-10 .solutions-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 150px;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.solutions-box-10 .solutions-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  margin-top: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.solutions-box-10 .solutions-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  font-weight: 700;
  color: #10266a;
  margin: 0;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.solutions-box-10 .solutions-desc {
  font-family: "Montserrat-Regular", Helvetica;
  font-size: 18px;
  color: #10266a;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  flex-grow: 1;
}

.solutions-box-10 .solutions-desc > span {
  display: block;
  margin-bottom: 12px;
}

.solutions-box-10 .solutions-desc ul {
  list-style: disc outside;
  margin-left: 5px;
  padding: 0;
  text-align: left;
}

.solutions-box-10 .solutions-desc li {
  font-size: 18px;
  color: #10266a;
  font-family: "Montserrat-Regular", Helvetica;
  margin-bottom: 8px;
  line-height: 1.4;
}

.solutions-box-10 .solutions-line {
  width: 3px;
  background: #10266a;
  opacity: 1;
  margin: 0;
  height: 466px;
  align-self: center;
  flex-shrink: 0;
}

.solutions-box-10 .project-header-row {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 0 0;
  height: 100px;
  position: relative;
}

/* Case Studies Button Styles */
.case-studies-link {
  margin-left: 190px;
  color: #ca4a9a;
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  outline: none;
  transition: color 0.2s;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

.case-studies-link:hover {
  color: #a13b7d;
}

/* Only show the button when the box is open (not collapsed) */
.solutions-box-1:not(.collapsed) .case-studies-link,
.solutions-box-2:not(.collapsed) .case-studies-link,
.solutions-box-3:not(.collapsed) .case-studies-link,
.solutions-box-4:not(.collapsed) .case-studies-link,
.solutions-box-5:not(.collapsed) .case-studies-link,
.solutions-box-6:not(.collapsed) .case-studies-link,
.solutions-box-7:not(.collapsed) .case-studies-link,
.solutions-box-8:not(.collapsed) .case-studies-link,
.solutions-box-9:not(.collapsed) .case-studies-link,
.solutions-box-10:not(.collapsed) .case-studies-link {
  display: inline-block !important;
  position: absolute;
  right: 90px; /* Fixed distance from right edge (toggle button is at right:32px) */
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  margin-right: 0;
  /* Prevents overlap with toggle button */
  z-index: 2;
}

/* When collapsed, revert to default (hidden) and remove absolute positioning */
.solutions-box-1.collapsed .case-studies-link,
.solutions-box-2.collapsed .case-studies-link,
.solutions-box-3.collapsed .case-studies-link,
.solutions-box-4.collapsed .case-studies-link,
.solutions-box-5.collapsed .case-studies-link,
.solutions-box-6.collapsed .case-studies-link,
.solutions-box-7.collapsed .case-studies-link,
.solutions-box-8.collapsed .case-studies-link,
.solutions-box-9.collapsed .case-studies-link,
.solutions-box-10.collapsed .case-studies-link {
  position: static;
  right: auto;
  top: auto;
  transform: none;
}

/* Only show (Case Study) when the box is collapsed */
.solutions-box-1:not(.collapsed) .project-title-part3,
.solutions-box-2:not(.collapsed) .project-title-part3,
.solutions-box-3:not(.collapsed) .project-title-part3,
.solutions-box-4:not(.collapsed) .project-title-part3,
.solutions-box-5:not(.collapsed) .project-title-part3,
.solutions-box-6:not(.collapsed) .project-title-part3,
.solutions-box-7:not(.collapsed) .project-title-part3,
.solutions-box-8:not(.collapsed) .project-title-part3,
.solutions-box-9:not(.collapsed) .project-title-part3,
.solutions-box-10:not(.collapsed) .project-title-part3 {
  display: none !important;
}
.solutions-box-1.collapsed .project-title-part3,
.solutions-box-2.collapsed .project-title-part3,
.solutions-box-3.collapsed .project-title-part3,
.solutions-box-4.collapsed .project-title-part3,
.solutions-box-5.collapsed .project-title-part3,
.solutions-box-6.collapsed .project-title-part3,
.solutions-box-7.collapsed .project-title-part3,
.solutions-box-8.collapsed .project-title-part3,
.solutions-box-9.collapsed .project-title-part3,
.solutions-box-10.collapsed .project-title-part3 {
  display: inline !important;
}

/* Modal Styles for Case Studies */
.case-studies-modal {
  display: none;
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgba(16, 38, 106, 0.25);
  justify-content: center;
  align-items: center;
}
.case-studies-modal.open {
  display: flex;
}
.case-studies-modal-content {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px #0002;
  height: 800px;
  max-width: 1200px;
  width: 90vw;
  padding: 36px 28px 24px 28px;
  position: relative;
  font-family: "Montserrat-Regular", Helvetica;
  color: #10266a;
  animation: modal-fade-in 0.2s;
}
@keyframes modal-fade-in {
  from { opacity: 0; transform: translateY(40px);}
  to { opacity: 1; transform: translateY(0);}
}
.case-studies-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 28px;
  color: #ca4a9a;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.2s;
  z-index: 1;
}
.case-studies-modal-close:hover {
  color: #10266a;
}
.case-studies-modal-title {
  font-family: "Montserrat-Bold", Helvetica;
  font-size: 26px;
  color: #ca4a9a;
  margin-bottom: 18px;
  text-align: left;
}
.case-studies-modal-body {
  font-size: 18px;
  color: #10266a;
  line-height: 1.6;
  margin-bottom: 0;
}

.solutions-box-10 .toggle-btn {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.solutions-box-10 .project-table-content {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.solutions-box-10 .project-table-content.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}
@media screen and (max-width: 1920px) {
  .solution_section_1 { 
    background-color: transparent; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    width: 100%; 
  } 

  .solution_section_1 .div { 
    overflow: visible;
    background: linear-gradient( 180deg, rgba(214, 196, 239, 1) 0%, rgba(254, 226, 213, 1) 100% ); 
    width: 100%; 
    min-height: 100vh;
    height: auto;
    position: relative;
    padding-top: 300px;
    padding-bottom: 50px;
  } 

  .solution_section_1 .our-projects { 
    position: absolute; 
    top: 120px; 
    /* left: 735px;  */
    left: 35%; 
    font-family: "Montserrat-Bold", Helvetica;
    font-weight: 500; 
    color: transparent; 
    font-size: 52px; 
    text-align: center; 
    letter-spacing: 2.10px; 
    line-height: 42px; 
    white-space: nowrap; 
  } 

  .solution_section_1 .text-wrapper-2 { 
    position: absolute; 
    width: 1000px; 
    top: 190px; 
    left: 23.5%; 
    font-family: "Montserrat-Light", Helvetica; 
    font-weight: 400; 
    color: #10266a; 
    font-size: 20px; 
    text-align: center; 
    letter-spacing: 0.72px; 
    line-height: 24px; 
  }
}

@media screen and (max-width: 1600px) {
  .solution_section_1 { 
    background-color: transparent; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    width: 100%; 
  } 

  .solution_section_1 .div { 
    overflow: visible;
    background: linear-gradient( 180deg, rgba(214, 196, 239, 1) 0%, rgba(254, 226, 213, 1) 100% ); 
    width: 100%; 
    min-height: 100vh;
    height: auto;
    position: relative;
    padding-top: 350px; /* Space for heading and intro text */
    padding-bottom: 60px;
  } 

  .solution_section_1 .our-projects 
  { 
    position: absolute; 
    top: 130px; 
    left: 24%; 
    font-family: "Montserrat-Bold", Helvetica;
    font-weight: 500; 
    color: transparent; 
    font-size: 70px; 
    text-align: center; 
    letter-spacing: 2.10px; 
    line-height: 76.5px; 
    white-space: nowrap; 
  } 

  .solution_section_1 .text-wrapper { 
    color: #11276a; 
    letter-spacing: 0.69px; 
  } 

  .solution_section_1 .text-wrapper-1 { 
    color: #ca4a9a; 
    letter-spacing: 0.69px; 
  } 

  .solution_section_1 .text-wrapper-2 { 
    position: absolute; 
    width: 1200px; 
    top: 220px; 
    left: 200px; 
    font-family: "Montserrat-Light", Helvetica; 
    font-weight: 400; 
    color: #10266a; 
    font-size: 24px; 
    text-align: center; 
    letter-spacing: 0.72px; 
    line-height: 28.8px; 
  }
}

@media screen and (max-width: 1440px) {
  .solution_section_1 { 
    background-color: transparent; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    width: 100%; 
  } 

  .solution_section_1 .div { 
    overflow: visible;
    background: linear-gradient( 180deg, rgba(214, 196, 239, 1) 0%, rgba(254, 226, 213, 1) 100% ); 
    width: 100%; 
    min-height: 100vh;
    height: auto;
    position: relative;
    padding-top: 350px; /* Space for heading and intro text */
    padding-bottom: 60px;
  } 

  .solution_section_1 .our-projects 
  { 
    position: absolute; 
    top: 130px; 
    left: 22%; 
    font-family: "Montserrat-Bold", Helvetica;
    font-weight: 500; 
    color: transparent; 
    font-size: 70px; 
    text-align: center; 
    letter-spacing: 2.10px; 
    line-height: 76.5px; 
    white-space: nowrap; 
  } 

  .solution_section_1 .text-wrapper { 
    color: #11276a; 
    letter-spacing: 0.69px; 
  } 

  .solution_section_1 .text-wrapper-1 { 
    color: #ca4a9a; 
    letter-spacing: 0.69px; 
  } 

  .solution_section_1 .text-wrapper-2 { 
    position: absolute; 
    width: 1200px; 
    top: 220px; 
    left: 140px; 
    font-family: "Montserrat-Light", Helvetica; 
    font-weight: 400; 
    color: #10266a; 
    font-size: 24px; 
    text-align: center; 
    letter-spacing: 0.72px; 
    line-height: 28.8px; 
  }
}

@media screen and (max-width: 1280px) {
  .solution_section_1 { 
    background-color: transparent; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    width: 100%; 
  } 

  .solution_section_1 .div { 
    overflow: visible;
    background: linear-gradient( 180deg, rgba(214, 196, 239, 1) 0%, rgba(254, 226, 213, 1) 100% ); 
    width: 100%; 
    min-height: 100vh;
    height: auto;
    position: relative;
    padding-top: 300px;
    padding-bottom: 50px;
  } 

  .solution_section_1 .our-projects { 
    position: absolute; 
    top: 120px; 
    left: 27%; 
    font-family: "Montserrat-Bold", Helvetica;
    font-weight: 500; 
    color: transparent; 
    font-size: 52px; 
    text-align: center; 
    letter-spacing: 2.10px; 
    line-height: 42px; 
    white-space: nowrap; 
  } 

  .solution_section_1 .text-wrapper-2 { 
    position: absolute; 
    width: 1000px; 
    top: 190px; 
    left: 145px; 
    font-family: "Montserrat-Light", Helvetica; 
    font-weight: 400; 
    color: #10266a; 
    font-size: 20px; 
    text-align: center; 
    letter-spacing: 0.72px; 
    line-height: 24px; 
  }

  .solutions-box-1 {
    position: relative;
    width: 1100px;
    height: 542px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }

  .solutions-box-1 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-1 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-1 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 412px;
  }

  .solutions-box-1 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-1 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-1 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-1 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-1 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-1 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 412px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-1 .project-header-row {
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-1 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }

  .solutions-box-1 .project-table-content {
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
  }

  .solutions-box-1.collapsed,
  .solutions-box-2.collapsed,
  .solutions-box-3.collapsed,
  .solutions-box-4.collapsed,
  .solutions-box-5.collapsed,
  .solutions-box-6.collapsed,
  .solutions-box-7.collapsed,
  .solutions-box-8.collapsed,
  .solutions-box-9.collapsed,
  .solutions-box-10.collapsed {
    height: 40px; /* Adjust to fit only the header row */
    min-height: 0;
    padding-bottom: 0 !important;
    margin-bottom: 15px !important; /* Add gap when collapsed */
    overflow: hidden;
  }

  /* Add these new rules to handle collapsed state layout */
  .solutions-box-1.collapsed .project-header-row,
  .solutions-box-2.collapsed .project-header-row,
  .solutions-box-3.collapsed .project-header-row,
  .solutions-box-4.collapsed .project-header-row,
  .solutions-box-5.collapsed .project-header-row,
  .solutions-box-6.collapsed .project-header-row,
  .solutions-box-7.collapsed .project-header-row,
  .solutions-box-8.collapsed .project-header-row,
  .solutions-box-9.collapsed .project-header-row,
  .solutions-box-10.collapsed .project-header-row {
    height: 40px !important; /* Match the collapsed box height */
  }

  .solutions-box-1.collapsed .project-title,
  .solutions-box-2.collapsed .project-title,
  .solutions-box-3.collapsed .project-title,
  .solutions-box-4.collapsed .project-title,
  .solutions-box-6.collapsed .project-title,
  .solutions-box-7.collapsed .project-title,
  .solutions-box-8.collapsed .project-title,
  .solutions-box-9.collapsed .project-title,
  .solutions-box-10.collapsed .project-title {
    font-size: 20px !important; /* Slightly smaller font for collapsed state */
    line-height: 1.2 !important;
    text-align: center;
  }
  
  .solutions-box-5.collapsed .project-title {
    font-size: 20px !important; /* Slightly smaller font for collapsed state */
    line-height: 1.2 !important;
    text-align: center;
  }

  .solutions-box-2 { 
    position: relative;
    width: 1100px; 
    height: 650px; 
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent; 
    border-radius: 12px; 
    box-shadow: 0px 0px 15.1px #8e9cc8; 
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
    padding 0.4s, margin 0.4s; 
  } 

  .solutions-box-2 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-2 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing:  0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-2 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    height: 520px;
  }

  .solutions-box-2 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    min-width: 0;
  }

  .solutions-box-2 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-2 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-2 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-2 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-2 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-2 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 520px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-2 .project-header-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title horizontally */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-2 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }

  .solutions-box-2 .project-table-content {
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
  }

  .solutions-box-3 { 
    position: relative;
    width: 1100px; 
    height: 624px; 
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent; 
    border-radius: 12px; 
    box-shadow: 0px 0px 15.1px #8e9cc8; 
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
    padding 0.4s, margin 0.4s; 
  } 

  .solutions-box-3 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-3 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing:  0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-3 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 496px;
  }

  .solutions-box-3 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    min-width: 0;
  }

  .solutions-box-3 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-3 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-3 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-3 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-3 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-3 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 496px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-3 .project-header-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title horizontally */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-3 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }

  .solutions-box-4 { 
    position: relative;
    width: 1100px; 
    height: 551px; 
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent; 
    border-radius: 12px; 
    box-shadow: 0px 0px 15.1px #8e9cc8; 
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
    padding 0.4s, margin 0.4s; 
  } 

  .solutions-box-4 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-4 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing:  0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-4 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 421px;
  }

  .solutions-box-4 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    min-width: 0;
  }

  .solutions-box-4 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-4 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-4 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-4 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-4 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-4 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 421px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-4 .project-header-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title horizontally */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-4 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }

  .solutions-box-5 { 
    position: relative;
    width: 1100px; 
    height: 652px; 
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent; 
    border-radius: 12px; 
    box-shadow: 0px 0px 15.1px #8e9cc8; 
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
    padding 0.4s, margin 0.4s; 
  } 

  .solutions-box-5 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-5 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing:  0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-5 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 522px;
  }

  .solutions-box-5 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    min-width: 0;
  }

  .solutions-box-5 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-5 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-5 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-5 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-5 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-5 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 522px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-5 .project-header-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title horizontally */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-5 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }

  .solutions-box-6 { 
    position: relative;
    width: 1100px; 
    height: 593px; 
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent; 
    border-radius: 12px; 
    box-shadow: 0px 0px 15.1px #8e9cc8; 
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
    padding 0.4s, margin 0.4s; 
  } 

  .solutions-box-6 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-6 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing:  0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-6 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 463px;
  }

  .solutions-box-6 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    min-width: 0;
  }

  .solutions-box-6 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-6 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-6 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-6 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-6 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-6 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 463px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-6 .project-header-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title horizontally */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-6 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }

  .solutions-box-7 { 
    position: relative;
    width: 1100px; 
    height: 597px; 
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent; 
    border-radius: 12px; 
    box-shadow: 0px 0px 15.1px #8e9cc8; 
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
    padding 0.4s, margin 0.4s; 
  } 

  .solutions-box-7 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-7 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing:  0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-7 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 467px;
  }

  .solutions-box-7 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    min-width: 0;
  }

  .solutions-box-7 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-7 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-7 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-7 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-7 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-7 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 467px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-7 .project-header-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title horizontally */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-7 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }

  .solutions-box-8 { 
    position: relative;
    width: 1100px; 
    height: 652px; 
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent; 
    border-radius: 12px; 
    box-shadow: 0px 0px 15.1px #8e9cc8; 
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
    padding 0.4s, margin 0.4s; 
  } 

  .solutions-box-8 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-8 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing:  0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-8 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 522px;
  }

  .solutions-box-8 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    min-width: 0;
  }

  .solutions-box-8 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-8 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-8 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-8 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-8 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-8 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 522px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-8 .project-header-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title horizontally */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-8 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }

  .solutions-box-9 { 
    position: relative;
    width: 1100px; 
    height: 576px; 
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent; 
    border-radius: 12px; 
    box-shadow: 0px 0px 15.1px #8e9cc8; 
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
    padding 0.4s, margin 0.4s; 
  } 

  .solutions-box-9 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-9 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing:  0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-9 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 446px;
  }

  .solutions-box-9 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    min-width: 0;
  }

  .solutions-box-9 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-9 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-9 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-9 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-9 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-9 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 446px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-9 .project-header-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title horizontally */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-9 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }

  .solutions-box-10 { 
    position: relative;
    width: 1100px; 
    height: 566px; 
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent; 
    border-radius: 12px; 
    box-shadow: 0px 0px 15.1px #8e9cc8; 
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), 
    padding 0.4s, margin 0.4s; 
  } 

  .solutions-box-10 .solutions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .solutions-box-10 .project-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 22px;
    font-weight: 700;
    letter-spacing:  0.72px;
    line-height: 65.2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .solutions-box-10 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 436px;
  }

  .solutions-box-10 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    min-width: 0;
  }

  .solutions-box-10 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-10 .solutions-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-10 .solutions-title {
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 26px;
    font-weight: 700;
    color: #10266a;
    margin: 0;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  }

  .solutions-box-10 .solutions-desc {
    font-family: "Montserrat-Regular", Helvetica;
    font-size: 18px;
    color: #10266a;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    flex-grow: 1;
  }

  .solutions-box-10 .solutions-desc li {
    font-size: 18px;
    color: #10266a;
    font-family: "Montserrat-Regular", Helvetica;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .solutions-box-10 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 436px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-10 .project-header-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Center title horizontally */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 0 0;
    height: 100px;
    position: relative;
  }

  .solutions-box-10 .toggle-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #10266a;
    transition: color 0.2s;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 3;
  }
}

@media screen and (max-width: 1024px) {
  .solution_section_1 {
    flex-direction: column;
    padding: 0 0px;
  }

  .solution_section_1 .div {
    padding-top: 40px;
    padding-bottom: 20px;
  }

  .solution_section_1 .our-projects {
    position: relative;
    top: unset;
    left: 0px;
    font-size: 52px;
    letter-spacing: 1px;
    line-height: 52px;
    text-align: center;
    white-space: normal;
    margin-top: 80px;
    margin-bottom: 25px;
  }

  .solution_section_1 .text-wrapper-2 {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    font-size: 20px;
    line-height: 20px;
    padding: 0 20px;
    text-align: center;
    margin-bottom: 22px;
  }

  .solutions-box-1 {
    position: relative;
    width: 90%;
    height: 618px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }
  .solutions-box-2 {
    position: relative;
    width: 90%;
    height: 686px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }
  .solutions-box-3 {
    position: relative;
    width: 90%;
    height: 623px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }
  .solutions-box-4 {
    position: relative;
    width: 90%;
    height: 547px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }
  .solutions-box-5 {
    position: relative;
    width: 90%;
    height: 698px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }
  .solutions-box-6 {
    position: relative;
    width: 90%;
    height: 614px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }
  .solutions-box-7 {
    position: relative;
    width: 90%;
    height: 618px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }
  .solutions-box-8 {
    position: relative;
    width: 90%;
    height: 723px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }
  .solutions-box-9 {
    position: relative;
    width: 90%;
    height: 597px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }
  .solutions-box-10 {
    position: relative;
    width: 90%;
    height: 569px;
    margin: 0 auto 40px auto; /* Center and add space below each box */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }

  .solutions-box-1 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 502px;
  }
  
  .solutions-box-2 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 570px;
  }
  .solutions-box-3 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 506px;
  }
  .solutions-box-4 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 431px;
  }
  .solutions-box-5 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 582px;
  }
  .solutions-box-6 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 499px;
  }
  .solutions-box-7 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 502px;
  }
  .solutions-box-8 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 607px;
  }
  .solutions-box-9 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 482px;
  }
  .solutions-box-10 .solutions-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    background: none;
    position: relative;
    z-index: 1;
    min-height: 453px;
  }

  .solutions-box-1 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 502px;
    align-self: center;
    flex-shrink: 0;
  }
  .solutions-box-2 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 570px;
    align-self: center;
    flex-shrink: 0;
  }
  .solutions-box-3 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 506px;
    align-self: center;
    flex-shrink: 0;
  }
  .solutions-box-4 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 431px;
    align-self: center;
    flex-shrink: 0;
  }
  .solutions-box-5 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 582px;
    align-self: center;
    flex-shrink: 0;
  }
  .solutions-box-6 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 499px;
    align-self: center;
    flex-shrink: 0;
  }
  .solutions-box-7 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 502px;
    align-self: center;
    flex-shrink: 0;
  }
  .solutions-box-8 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 607px;
    align-self: center;
    flex-shrink: 0;
  }
  .solutions-box-9 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 482px;
    align-self: center;
    flex-shrink: 0;
  }
  .solutions-box-10 .solutions-line {
    width: 3px;
    background: #10266a;
    opacity: 1;
    margin: 0;
    height: 453px;
    align-self: center;
    flex-shrink: 0;
  }

  .solutions-box-1 .solutions-header,
  .solutions-box-2 .solutions-header,
  .solutions-box-3 .solutions-header,
  .solutions-box-4 .solutions-header,
  .solutions-box-5 .solutions-header,
  .solutions-box-6 .solutions-header,
  .solutions-box-7 .solutions-header,
  .solutions-box-8 .solutions-header,
  .solutions-box-9 .solutions-header,
  .solutions-box-10 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 130px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-1 .solutions-desc,
  .solutions-box-2 .solutions-desc,
  .solutions-box-3 .solutions-desc,
  .solutions-box-4 .solutions-desc,
  .solutions-box-5 .solutions-desc,
  .solutions-box-6 .solutions-desc,
  .solutions-box-7 .solutions-desc,
  .solutions-box-8 .solutions-desc,
  .solutions-box-9 .solutions-desc,
  .solutions-box-10 .solutions-desc {
    font-size: 20px;
    text-align: center;
  }

  .solutions-box-1 .solutions-desc li,
  .solutions-box-2 .solutions-desc li,
  .solutions-box-3 .solutions-desc li,
  .solutions-box-4 .solutions-desc li,
  .solutions-box-5 .solutions-desc li,
  .solutions-box-6 .solutions-desc li,
  .solutions-box-7 .solutions-desc li,
  .solutions-box-8 .solutions-desc li,
  .solutions-box-9 .solutions-desc li,
  .solutions-box-10 .solutions-desc li {
    font-size: 18px;
    text-align: left;
  }

  .solutions-box-1 .solutions-title,
  .solutions-box-2 .solutions-title,
  .solutions-box-3 .solutions-title,
  .solutions-box-4 .solutions-title,
  .solutions-box-5 .solutions-title,
  .solutions-box-6 .solutions-title,
  .solutions-box-7 .solutions-title,
  .solutions-box-8 .solutions-title,
  .solutions-box-9 .solutions-title,
  .solutions-box-10 .solutions-title {
    font-size: 20px;
    min-height: unset;
  }

  .solutions-box-1 .project-title,
  .solutions-box-2 .project-title,
  .solutions-box-3 .project-title,
  .solutions-box-4 .project-title,
  .solutions-box-5 .project-title,
  .solutions-box-6 .project-title,
  .solutions-box-7 .project-title,
  .solutions-box-8 .project-title,
  .solutions-box-9 .project-title,
  .solutions-box-10 .project-title {
    font-size: 18px;
    line-height: 26px;
    text-align: center;
  }

  .solutions-box-1 .project-header-row,
  .solutions-box-2 .project-header-row,
  .solutions-box-3 .project-header-row,
  .solutions-box-4 .project-header-row,
  .solutions-box-5 .project-header-row,
  .solutions-box-6 .project-header-row,
  .solutions-box-7 .project-header-row,
  .solutions-box-8 .project-header-row,
  .solutions-box-9 .project-header-row,
  .solutions-box-10 .project-header-row {
    height: auto;
    padding: 20px 0px 30px 0px;
    flex-direction: column;
    margin-left: 0;
    display: flex;
    align-items: flex-start; 
    text-align: left;
    padding-left: 20px;
  }

  .solutions-box-1 .toggle-btn,
  .solutions-box-2 .toggle-btn,
  .solutions-box-3 .toggle-btn,
  .solutions-box-4 .toggle-btn,
  .solutions-box-5 .toggle-btn,
  .solutions-box-6 .toggle-btn,
  .solutions-box-7 .toggle-btn,
  .solutions-box-8 .toggle-btn,
  .solutions-box-9 .toggle-btn,
  .solutions-box-10 .toggle-btn {
    position: absolute;
    /* margin-top: 20px; */
    font-size: 1.5rem;
  }

  .solutions-box-1.collapsed,
  .solutions-box-2.collapsed,
  .solutions-box-3.collapsed,
  .solutions-box-4.collapsed,
  .solutions-box-5.collapsed,
  .solutions-box-6.collapsed,
  .solutions-box-7.collapsed,
  .solutions-box-8.collapsed,
  .solutions-box-9.collapsed,
  .solutions-box-10.collapsed {
    height: auto;
    padding: 0;
  }

  .solutions-box-1.collapsed .project-header-row,
  .solutions-box-2.collapsed .project-header-row,
  .solutions-box-3.collapsed .project-header-row,
  .solutions-box-4.collapsed .project-header-row,
  .solutions-box-5.collapsed .project-header-row,
  .solutions-box-6.collapsed .project-header-row,
  .solutions-box-7.collapsed .project-header-row,
  .solutions-box-8.collapsed .project-header-row,
  .solutions-box-9.collapsed .project-header-row,
  .solutions-box-10.collapsed .project-header-row {
    height: 40px !important;
    padding: 0px 5px 0px 5px
  }

  .solutions-box-1.collapsed .project-title,
  .solutions-box-2.collapsed .project-title,
  .solutions-box-3.collapsed .project-title,
  .solutions-box-4.collapsed .project-title,
  .solutions-box-5.collapsed .project-title,
  .solutions-box-6.collapsed .project-title,
  .solutions-box-7.collapsed .project-title,
  .solutions-box-8.collapsed .project-title,
  .solutions-box-9.collapsed .project-title,
  .solutions-box-10.collapsed .project-title {
    font-size: 18px !important;
    line-height: 26px !important;
    text-align: center;
  }
  
  .case-studies-link {
    margin-left: 0;
    color: #ca4a9a;
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 18px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
    padding-bottom: 10px;
    display: inline-block;
    vertical-align: middle;
  }
}



@media screen and (max-width: 768px) {
  .solution_section_1 {
    flex-direction: column;
    padding: 0 0px;
  }

  .solution_section_1 .div {
    padding-top: 30px;
    padding-bottom: 15px;
  }

  .solution_section_1 .our-projects {
    position: relative;
    top: unset;
    left: unset;
    font-size: 36px;
    letter-spacing: 1px;
    line-height: 36px;
    text-align: center;
    white-space: normal;
    margin-top: 60px;
    margin-bottom: 25px;
  }

  .solution_section_1 .text-wrapper-2 {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    font-size: 18px;
    line-height: 20px;
    padding: 0 20px;
    text-align: center;
    margin-bottom: 20px;
  }

  .solutions-box-1,
  .solutions-box-2,
  .solutions-box-3,
  .solutions-box-4,
  .solutions-box-5,
  .solutions-box-6,
  .solutions-box-7,
  .solutions-box-8,
  .solutions-box-9,
  .solutions-box-10 {
    width: 95%;
    height: auto;
    padding: 25px 20px;
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }

  .solutions-box-1 .solutions-row,
  .solutions-box-2 .solutions-row,
  .solutions-box-3 .solutions-row,
  .solutions-box-4 .solutions-row,
  .solutions-box-5 .solutions-row,
  .solutions-box-6 .solutions-row,
  .solutions-box-7 .solutions-row,
  .solutions-box-8 .solutions-row,
  .solutions-box-9 .solutions-row,
  .solutions-box-10 .solutions-row {
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: auto;
  }

  .solutions-box-1 .solutions-line,
  .solutions-box-2 .solutions-line,
  .solutions-box-3 .solutions-line,
  .solutions-box-4 .solutions-line,
  .solutions-box-5 .solutions-line,
  .solutions-box-6 .solutions-line,
  .solutions-box-7 .solutions-line,
  .solutions-box-8 .solutions-line,
  .solutions-box-9 .solutions-line,
  .solutions-box-10 .solutions-line {
    width: 38rem;
    height: 3px;
    background: #10266a;
    opacity: 1;
    margin: 25px auto;
    align-self: center;
    display: block;
  }

  .solutions-box-1 .solutions-desc,
  .solutions-box-2 .solutions-desc,
  .solutions-box-3 .solutions-desc,
  .solutions-box-4 .solutions-desc,
  .solutions-box-5 .solutions-desc,
  .solutions-box-6 .solutions-desc,
  .solutions-box-7 .solutions-desc,
  .solutions-box-8 .solutions-desc,
  .solutions-box-9 .solutions-desc,
  .solutions-box-10 .solutions-desc {
    font-size: 18px;
    text-align: center;
  }

  .solutions-box-1 .solutions-desc li,
  .solutions-box-2 .solutions-desc li,
  .solutions-box-3 .solutions-desc li,
  .solutions-box-4 .solutions-desc li,
  .solutions-box-5 .solutions-desc li,
  .solutions-box-6 .solutions-desc li,
  .solutions-box-7 .solutions-desc li,
  .solutions-box-8 .solutions-desc li,
  .solutions-box-9 .solutions-desc li,
  .solutions-box-10 .solutions-desc li {
    font-size: 17px;
    text-align: left;
  }

  .solutions-box-1 .solutions-title,
  .solutions-box-2 .solutions-title,
  .solutions-box-3 .solutions-title,
  .solutions-box-4 .solutions-title,
  .solutions-box-5 .solutions-title,
  .solutions-box-6 .solutions-title,
  .solutions-box-7 .solutions-title,
  .solutions-box-8 .solutions-title,
  .solutions-box-9 .solutions-title,
  .solutions-box-10 .solutions-title {
    font-size: 22px;
    min-height: unset;
  }

  .solutions-box-1 .project-title,
  .solutions-box-2 .project-title,
  .solutions-box-3 .project-title,
  .solutions-box-4 .project-title,
  .solutions-box-5 .project-title,
  .solutions-box-6 .project-title,
  .solutions-box-7 .project-title,
  .solutions-box-8 .project-title,
  .solutions-box-9 .project-title,
  .solutions-box-10 .project-title {
    font-size: 17px;
    line-height: 26px;
    text-align: center;
  }

  .solutions-box-1 .project-header-row,
  .solutions-box-2 .project-header-row,
  .solutions-box-3 .project-header-row,
  .solutions-box-4 .project-header-row,
  .solutions-box-5 .project-header-row,
  .solutions-box-6 .project-header-row,
  .solutions-box-7 .project-header-row,
  .solutions-box-8 .project-header-row,
  .solutions-box-9 .project-header-row,
  .solutions-box-10 .project-header-row {
    height: auto;
    padding: 15px 0;
    flex-direction: column;
    margin-left: 0;
  }

  .solutions-box-1 .toggle-btn,
  .solutions-box-2 .toggle-btn,
  .solutions-box-3 .toggle-btn,
  .solutions-box-4 .toggle-btn,
  .solutions-box-5 .toggle-btn,
  .solutions-box-6 .toggle-btn,
  .solutions-box-7 .toggle-btn,
  .solutions-box-8 .toggle-btn,
  .solutions-box-9 .toggle-btn,
  .solutions-box-10 .toggle-btn {
    position: static;
    margin-top: 30px;
    font-size: 1.4rem;
  }

  .solutions-box-1.collapsed,
  .solutions-box-2.collapsed,
  .solutions-box-3.collapsed,
  .solutions-box-4.collapsed,
  .solutions-box-5.collapsed,
  .solutions-box-6.collapsed,
  .solutions-box-7.collapsed,
  .solutions-box-8.collapsed,
  .solutions-box-9.collapsed,
  .solutions-box-10.collapsed {
    height: auto;
    padding: 5px 5px;
  }

  .solutions-box-1.collapsed .project-header-row,
  .solutions-box-2.collapsed .project-header-row,
  .solutions-box-3.collapsed .project-header-row,
  .solutions-box-4.collapsed .project-header-row,
  .solutions-box-5.collapsed .project-header-row,
  .solutions-box-6.collapsed .project-header-row,
  .solutions-box-7.collapsed .project-header-row,
  .solutions-box-8.collapsed .project-header-row,
  .solutions-box-9.collapsed .project-header-row,
  .solutions-box-10.collapsed .project-header-row {
    height: auto !important;
    padding: 0px 5px 0px 5px
  }

  .solutions-box-1.collapsed .project-title,
  .solutions-box-2.collapsed .project-title,
  .solutions-box-3.collapsed .project-title,
  .solutions-box-4.collapsed .project-title,
  .solutions-box-5.collapsed .project-title,
  .solutions-box-6.collapsed .project-title,
  .solutions-box-7.collapsed .project-title,
  .solutions-box-8.collapsed .project-title,
  .solutions-box-9.collapsed .project-title,
  .solutions-box-10.collapsed .project-title {
    font-size: 17px !important;
  }

  .solutions-box-1 .solutions-col,
  .solutions-box-2 .solutions-col,
  .solutions-box-3 .solutions-col,
  .solutions-box-4 .solutions-col,
  .solutions-box-5 .solutions-col,
  .solutions-box-6 .solutions-col,
  .solutions-box-7 .solutions-col,
  .solutions-box-8 .solutions-col,
  .solutions-box-9 .solutions-col,
  .solutions-box-10 .solutions-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 45px;
    min-width: 0;
  }

  .case-studies-link {
    margin-left: 0;
    color: #ca4a9a;
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    transition: color 0.2s;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
  }

  .solutions-box-1:not(.collapsed) .case-studies-link,
  .solutions-box-2:not(.collapsed) .case-studies-link,
  .solutions-box-3:not(.collapsed) .case-studies-link,
  .solutions-box-4:not(.collapsed) .case-studies-link,
  .solutions-box-5:not(.collapsed) .case-studies-link,
  .solutions-box-6:not(.collapsed) .case-studies-link,
  .solutions-box-7:not(.collapsed) .case-studies-link,
  .solutions-box-8:not(.collapsed) .case-studies-link,
  .solutions-box-9:not(.collapsed) .case-studies-link,
  .solutions-box-10:not(.collapsed) .case-studies-link {
    display: inline-block !important;
    position: absolute;
    right: 0px; /* Fixed distance from right edge (toggle button is at right:32px) */
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
}

@media screen and (max-width: 480px) {
  .solution_section_1 {
    flex-direction: column;
    padding: 0;
  }

  .solution_section_1 .div {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .solution_section_1 .our-projects {
    position: relative;
    top: unset;
    left: unset;
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 26px;
    text-align: center;
    white-space: normal;
    margin-top: 80px;
    margin-bottom: 20px;
  }
  
  .solution_section_1 .text-wrapper-2 {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    font-size: 14px;
    line-height: 15px;
    padding: 0 15px;
    text-align: center;
    margin-bottom: 18px;
  }

  /* Shared rules for all .solutions-box-* */
  .solutions-box-1,
  .solutions-box-2,
  .solutions-box-3,
  .solutions-box-4,
  .solutions-box-5,
  .solutions-box-6,
  .solutions-box-7,
  .solutions-box-8,
  .solutions-box-9,
  .solutions-box-10 {
    width: 90%;
    height: auto;
    padding: 20px 15px;
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }

  .solutions-box-1 .solutions-row,
  .solutions-box-2 .solutions-row,
  .solutions-box-3 .solutions-row,
  .solutions-box-4 .solutions-row,
  .solutions-box-5 .solutions-row,
  .solutions-box-6 .solutions-row,
  .solutions-box-7 .solutions-row,
  .solutions-box-8 .solutions-row,
  .solutions-box-9 .solutions-row,
  .solutions-box-10 .solutions-row {
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: auto;
  }

  .solutions-box-1 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-1 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-2 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-2 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-3 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-3 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-4 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-4 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-5 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-5 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-6 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-6 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-7 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-7 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-8 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-8 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-9 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-9 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-10 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }

  .solutions-box-10 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-1 .solutions-line,
  .solutions-box-2 .solutions-line,
  .solutions-box-3 .solutions-line,
  .solutions-box-4 .solutions-line,
  .solutions-box-5 .solutions-line,
  .solutions-box-6 .solutions-line,
  .solutions-box-7 .solutions-line,
  .solutions-box-8 .solutions-line,
  .solutions-box-9 .solutions-line,
  .solutions-box-10 .solutions-line {
    width: 20.0rem;         /* Horizontal length */
    height: 3px;          /* Line thickness */
    background: #10266a;
    opacity: 1;
    margin: 20px auto;    /* Center horizontally with spacing */
    align-self: center;
    flex-shrink: 0;
    display: block;       /* Ensure it's visible */
  }

  .solutions-box-1 .solutions-desc,
  .solutions-box-2 .solutions-desc,
  .solutions-box-3 .solutions-desc,
  .solutions-box-4 .solutions-desc,
  .solutions-box-5 .solutions-desc,
  .solutions-box-6 .solutions-desc,
  .solutions-box-7 .solutions-desc,
  .solutions-box-8 .solutions-desc,
  .solutions-box-9 .solutions-desc,
  .solutions-box-10 .solutions-desc {
    font-size: 16px;
    text-align: center;
  }

  .solutions-box-1 .solutions-desc li,
  .solutions-box-2 .solutions-desc li,
  .solutions-box-3 .solutions-desc li,
  .solutions-box-4 .solutions-desc li,
  .solutions-box-5 .solutions-desc li,
  .solutions-box-6 .solutions-desc li,
  .solutions-box-7 .solutions-desc li,
  .solutions-box-8 .solutions-desc li,
  .solutions-box-9 .solutions-desc li,
  .solutions-box-10 .solutions-desc li {
    font-size: 16px;
    text-align: left;
  }

  .solutions-box-1 .solutions-title,
  .solutions-box-2 .solutions-title,
  .solutions-box-3 .solutions-title,
  .solutions-box-4 .solutions-title,
  .solutions-box-5 .solutions-title,
  .solutions-box-6 .solutions-title,
  .solutions-box-7 .solutions-title,
  .solutions-box-8 .solutions-title,
  .solutions-box-9 .solutions-title,
  .solutions-box-10 .solutions-title {
    font-size: 20px;
    min-height: unset;
  }

  .solutions-box-1 .project-title,
  .solutions-box-2 .project-title,
  .solutions-box-3 .project-title,
  .solutions-box-4 .project-title,
  .solutions-box-5 .project-title,
  .solutions-box-6 .project-title,
  .solutions-box-7 .project-title,
  .solutions-box-8 .project-title,
  .solutions-box-9 .project-title,
  .solutions-box-10 .project-title {
    font-size: 14px;
    line-height: 24px;
    text-align: center;
  }

  .solutions-box-1 .project-header-row,
  .solutions-box-2 .project-header-row,
  .solutions-box-3 .project-header-row,
  .solutions-box-4 .project-header-row,
  .solutions-box-5 .project-header-row,
  .solutions-box-6 .project-header-row,
  .solutions-box-7 .project-header-row,
  .solutions-box-8 .project-header-row,
  .solutions-box-9 .project-header-row,
  .solutions-box-10 .project-header-row {
    height: auto;
    padding: 10px 0;
    flex-direction: column;
    margin-left: 0;
  }

  .solutions-box-1 .toggle-btn,
  .solutions-box-2 .toggle-btn,
  .solutions-box-3 .toggle-btn,
  .solutions-box-4 .toggle-btn,
  .solutions-box-5 .toggle-btn,
  .solutions-box-6 .toggle-btn,
  .solutions-box-7 .toggle-btn,
  .solutions-box-8 .toggle-btn,
  .solutions-box-9 .toggle-btn,
  .solutions-box-10 .toggle-btn {
    position: static;
    /* transform: none; */
    margin-top: 15px;
    font-size: 1.2rem;       /* ↓ Reduced from 1.5rem */
  }

  .solutions-box-1.collapsed,
  .solutions-box-2.collapsed,
  .solutions-box-3.collapsed,
  .solutions-box-4.collapsed,
  .solutions-box-5.collapsed,
  .solutions-box-6.collapsed,
  .solutions-box-7.collapsed,
  .solutions-box-8.collapsed,
  .solutions-box-9.collapsed,
  .solutions-box-10.collapsed {
    height: auto;
    padding: 0px 0px;
  }

  .solutions-box-1.collapsed .project-header-row,
  .solutions-box-2.collapsed .project-header-row,
  .solutions-box-3.collapsed .project-header-row,
  .solutions-box-4.collapsed .project-header-row,
  .solutions-box-5.collapsed .project-header-row,
  .solutions-box-6.collapsed .project-header-row,
  .solutions-box-7.collapsed .project-header-row,
  .solutions-box-8.collapsed .project-header-row,
  .solutions-box-9.collapsed .project-header-row,
  .solutions-box-10.collapsed .project-header-row {
    height: auto !important;
    padding: 0px 5px 0px 5px
  }

  .solutions-box-1.collapsed .project-title,
  .solutions-box-2.collapsed .project-title,
  .solutions-box-3.collapsed .project-title,
  .solutions-box-4.collapsed .project-title,
  .solutions-box-5.collapsed .project-title,
  .solutions-box-6.collapsed .project-title,
  .solutions-box-7.collapsed .project-title,
  .solutions-box-8.collapsed .project-title,
  .solutions-box-9.collapsed .project-title,
  .solutions-box-10.collapsed .project-title {
    font-size: 14px !important;
  }

  .case-studies-link {
    margin-left: 0;
    margin-top: 15px;
    color: #ca4a9a;
    font-family: "Montserrat-Bold", Helvetica;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
    display: inline-block;
    vertical-align: middle;
  }
}

@media screen and (max-width: 320px) {
  .solution_section_1 {
    flex-direction: column;
    padding: 0;
  }

  .solution_section_1 .div {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .solution_section_1 .our-projects {
    position: relative;
    top: unset;
    left: unset;
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 26px;
    text-align: center;
    white-space: normal;
    margin-top: 80px;
    margin-bottom: 20px;
  }
  
  .solution_section_1 .text-wrapper-2 {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    font-size: 14px;
    line-height: 15px;
    padding: 0 15px;
    text-align: center;
    margin-bottom: 18px;
  }

  /* Shared rules for all .solutions-box-* */
  .solutions-box-1,
  .solutions-box-2,
  .solutions-box-3,
  .solutions-box-4,
  .solutions-box-5,
  .solutions-box-6,
  .solutions-box-7,
  .solutions-box-8,
  .solutions-box-9,
  .solutions-box-10 {
    width: 90%;
    height: auto;
    padding: 20px 15px;
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0px 0px 15.1px #8e9cc8;
    transition: height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s, margin 0.4s;
    left: unset;
    top: unset;
  }

  .solutions-box-1 .solutions-row,
  .solutions-box-2 .solutions-row,
  .solutions-box-3 .solutions-row,
  .solutions-box-4 .solutions-row,
  .solutions-box-5 .solutions-row,
  .solutions-box-6 .solutions-row,
  .solutions-box-7 .solutions-row,
  .solutions-box-8 .solutions-row,
  .solutions-box-9 .solutions-row,
  .solutions-box-10 .solutions-row {
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: auto;
  }

  .solutions-box-1 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-1 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-2 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-2 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-3 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-3 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-4 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-4 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-5 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-5 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-6 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-6 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-7 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-7 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-8 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-8 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-9 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-9 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-10 .solutions-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .solutions-box-10 .solutions-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 18px;
    margin-top: 10px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .solutions-box-1 .solutions-line,
  .solutions-box-2 .solutions-line,
  .solutions-box-3 .solutions-line,
  .solutions-box-4 .solutions-line,
  .solutions-box-5 .solutions-line,
  .solutions-box-6 .solutions-line,
  .solutions-box-7 .solutions-line,
  .solutions-box-8 .solutions-line,
  .solutions-box-9 .solutions-line,
  .solutions-box-10 .solutions-line {
    width: 20.0rem;         /* Horizontal length */
    height: 3px;          /* Line thickness */
    background: #10266a;
    opacity: 1;
    margin: 20px auto;    /* Center horizontally with spacing */
    align-self: center;
    flex-shrink: 0;
    display: block;       /* Ensure it's visible */
  }

  .solutions-box-1 .solutions-desc,
  .solutions-box-2 .solutions-desc,
  .solutions-box-3 .solutions-desc,
  .solutions-box-4 .solutions-desc,
  .solutions-box-5 .solutions-desc,
  .solutions-box-6 .solutions-desc,
  .solutions-box-7 .solutions-desc,
  .solutions-box-8 .solutions-desc,
  .solutions-box-9 .solutions-desc,
  .solutions-box-10 .solutions-desc {
    font-size: 14px;
    text-align: center;
  }

  .solutions-box-1 .solutions-desc li,
  .solutions-box-2 .solutions-desc li,
  .solutions-box-3 .solutions-desc li,
  .solutions-box-4 .solutions-desc li,
  .solutions-box-5 .solutions-desc li,
  .solutions-box-6 .solutions-desc li,
  .solutions-box-7 .solutions-desc li,
  .solutions-box-8 .solutions-desc li,
  .solutions-box-9 .solutions-desc li,
  .solutions-box-10 .solutions-desc li {
    font-size: 14px;
    text-align: left;
  }

  .solutions-box-1 .solutions-title,
  .solutions-box-2 .solutions-title,
  .solutions-box-3 .solutions-title,
  .solutions-box-4 .solutions-title,
  .solutions-box-5 .solutions-title,
  .solutions-box-6 .solutions-title,
  .solutions-box-7 .solutions-title,
  .solutions-box-8 .solutions-title,
  .solutions-box-9 .solutions-title,
  .solutions-box-10 .solutions-title {
    font-size: 18px;
    min-height: unset;
  }

  .solutions-box-1 .project-title,
  .solutions-box-2 .project-title,
  .solutions-box-3 .project-title,
  .solutions-box-4 .project-title,
  .solutions-box-5 .project-title,
  .solutions-box-6 .project-title,
  .solutions-box-7 .project-title,
  .solutions-box-8 .project-title,
  .solutions-box-9 .project-title,
  .solutions-box-10 .project-title {
    font-size: 14px;
    line-height: 24px;
    text-align: center;
  }

  .solutions-box-1 .project-header-row,
  .solutions-box-2 .project-header-row,
  .solutions-box-3 .project-header-row,
  .solutions-box-4 .project-header-row,
  .solutions-box-5 .project-header-row,
  .solutions-box-6 .project-header-row,
  .solutions-box-7 .project-header-row,
  .solutions-box-8 .project-header-row,
  .solutions-box-9 .project-header-row,
  .solutions-box-10 .project-header-row {
    height: auto;
    padding: 10px 0;
    flex-direction: column;
  }

  .solutions-box-1 .toggle-btn,
  .solutions-box-2 .toggle-btn,
  .solutions-box-3 .toggle-btn,
  .solutions-box-4 .toggle-btn,
  .solutions-box-5 .toggle-btn,
  .solutions-box-6 .toggle-btn,
  .solutions-box-7 .toggle-btn,
  .solutions-box-8 .toggle-btn,
  .solutions-box-9 .toggle-btn,
  .solutions-box-10 .toggle-btn {
    position: static;
    /* transform: none; */
    margin-top: 15px;
    font-size: 1.2rem;       /* ↓ Reduced from 1.5rem */
  }

  .solutions-box-1.collapsed,
  .solutions-box-2.collapsed,
  .solutions-box-3.collapsed,
  .solutions-box-4.collapsed,
  .solutions-box-5.collapsed,
  .solutions-box-6.collapsed,
  .solutions-box-7.collapsed,
  .solutions-box-8.collapsed,
  .solutions-box-9.collapsed,
  .solutions-box-10.collapsed {
    height: auto;
    padding: 0px 0px;
  }

  .solutions-box-1.collapsed .project-header-row,
  .solutions-box-2.collapsed .project-header-row,
  .solutions-box-3.collapsed .project-header-row,
  .solutions-box-4.collapsed .project-header-row,
  .solutions-box-5.collapsed .project-header-row,
  .solutions-box-6.collapsed .project-header-row,
  .solutions-box-7.collapsed .project-header-row,
  .solutions-box-8.collapsed .project-header-row,
  .solutions-box-9.collapsed .project-header-row,
  .solutions-box-10.collapsed .project-header-row {
    height: auto !important;
    padding: 0px 5px 0px 5px
  }

  .solutions-box-1.collapsed .project-title,
  .solutions-box-2.collapsed .project-title,
  .solutions-box-3.collapsed .project-title,
  .solutions-box-4.collapsed .project-title,
  .solutions-box-5.collapsed .project-title,
  .solutions-box-6.collapsed .project-title,
  .solutions-box-7.collapsed .project-title,
  .solutions-box-8.collapsed .project-title,
  .solutions-box-9.collapsed .project-title,
  .solutions-box-10.collapsed .project-title {
    font-size: 14px !important;
  }
}

.sop_retrieval_section {
  background-color: rgba(255, 255, 255, 1.0); 
  background: linear-gradient(180deg, rgba(184, 171, 228, 1) 0%, rgba(254, 226, 213, 1) 100%);
  width: 100%;
  min-height: 100vh; /* Fill viewport height, no more */
} 

.sop_retrieval_section .container { 
  background: none;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative; 
  padding-top: 90px;
  padding-bottom: 40px; /* Prevent content from being hidden, but not too much */
  box-sizing: border-box;
}

/* Section Title and Subtitle */
.sop-retrieval-header {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 32px;
}

.sop-retrieval-title {
  position: relative;
  font-family: "Montserrat-Bold";
  font-size: 2.4rem;
  color: #10266a;
  width: 80%;
  margin: 0 0 10px 0;
  letter-spacing: 1px;
  text-align: center;
  left: 150px;
}

.sop-retrieval-header-logo-1 {
  position: absolute;
  top: 100px;
  left: 10px;
  height: 80px;
  width: 80px;
  background-color: #10266a;
  -webkit-mask-image: url('img_logos/case_study_arrow.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url('img_logos/case_study_arrow.png');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.sop-retrieval-header-logo-2 {
  position: absolute;
  top: 150px;
  left: 10px;
  height: 110px;
  width: 140px;
  background-color: #ca4a9a;
  -webkit-mask-image: url('img_logos/case_study.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url('img_logos/case_study.png');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.sop-retrieval-subtitle {
  font-family: "Montserrat-Medium";
  font-size: 1.5rem;
  color: #ca4a9a;
  margin: 0;
  letter-spacing: 0.5px;
  margin-top: 20px;
}

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

/* Toggle Boxes Section */
.toggle-boxes-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 30px 0 40px 0;
}

.toggle-boxes-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  width: 100%;
}

/* --- Toggle Box Card Improvements --- */
.toggle-box-1,
.toggle-box-2,
.toggle-box-3 {
  width: 1000px;
  max-width: 98vw;
  height: 40px;
  background: transparent;
  border-radius: 20px;
  box-shadow: 0 4px 24px #00000018, 0 1.5px 6px #b3a7e633;
  margin-bottom: 5px;
  overflow: hidden;
  transition: box-shadow 0.2s, border 0.2s, height 0.3s cubic-bezier(0.4,0,0.2,1), max-height 0.3s cubic-bezier(0.4,0,0.2,1);
}


/* Add for boxes 2-8 */
.toggle-box-1.open,
.toggle-box-2.open,
.toggle-box-3.open,
.toggle-box-4.open,
.toggle-box-5.open,
.toggle-box-6.open,
.toggle-box-7.open,
.toggle-box-8.open {
  height: auto;
  max-height: 1200px;
}

/* Header area for toggle boxes */
.toggle-box-1-content,
.toggle-box-2-content,
.toggle-box-3-content,
.toggle-box-4-content,
.toggle-box-5-content,
.toggle-box-6-content,
.toggle-box-7-content,
.toggle-box-8-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 36px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-box-1-content:hover,
.toggle-box-2-content:hover,
.toggle-box-3-content:hover,
.toggle-box-4-content:hover,
.toggle-box-5-content:hover,
.toggle-box-6-content:hover,
.toggle-box-7-content:hover,
.toggle-box-8-content:hover {
  background: transparent;
}

/* Title styling */

.toggle-box-1-title,
.toggle-box-2-title,
.toggle-box-3-title,
.toggle-box-4-title,
.toggle-box-5-title,
.toggle-box-6-title,
.toggle-box-7-title,
.toggle-box-8-title {
  font-family: "Montserrat-Bold";
  font-size: 1.35rem;
  color: #10266a;
  letter-spacing: 0.5px;
  margin-left: 40px;
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  margin-top: 10px;
}

.title-emoji {
  font-size: 1.2rem;
  position: absolute;
  left: -40px;
}


.toggle-box-1:not(.open) .title-emoji,
.toggle-box-2:not(.open) .title-emoji,
.toggle-box-3:not(.open) .title-emoji,
.toggle-box-4:not(.open) .title-emoji,
.toggle-box-5:not(.open) .title-emoji,
.toggle-box-6:not(.open) .title-emoji,
.toggle-box-7:not(.open) .title-emoji,
.toggle-box-8:not(.open) .title-emoji {
  font-size: 1.2rem;
  position: absolute;
  right: 650px;
}

/* Center title text when box is closed */
.toggle-box-1:not(.open) .toggle-box-1-title,
.toggle-box-2:not(.open) .toggle-box-2-title,
.toggle-box-3:not(.open) .toggle-box-3-title,
.toggle-box-4:not(.open) .toggle-box-4-title,
.toggle-box-5:not(.open) .toggle-box-5-title,
.toggle-box-6:not(.open) .toggle-box-6-title,
.toggle-box-7:not(.open) .toggle-box-7-title,
.toggle-box-8:not(.open) .toggle-box-8-title {
  width: 100%;
  text-align: left;
  margin-left: 260px;
  margin-top: 0;
}

.toggle-box-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transition: background 0.2s;
  margin-left: 19px;
  right: 200px;
  position: relative;
}

.toggle-box-1.open .toggle-box-toggle,
.toggle-box-2.open .toggle-box-toggle,
.toggle-box-3.open .toggle-box-toggle,
.toggle-box-4.open .toggle-box-toggle,
.toggle-box-5.open .toggle-box-toggle,
.toggle-box-6.open .toggle-box-toggle,
.toggle-box-7.open .toggle-box-toggle,
.toggle-box-8.open .toggle-box-toggle {
  right: 0; 
}

.toggle-box-toggle:hover {
  background: transparent;
}

.toggle-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #10266a;
  transition: color 0.2s;
  padding: 0 10px;
  height: 30px;
  display: flex;
  align-items: center;
  z-index: 3;
}

/* Rotate arrow when open */
.toggle-box-1.open .toggle-arrow,
.toggle-box-2.open .toggle-arrow,
.toggle-box-3.open .toggle-arrow,
.toggle-box-4.open .toggle-arrow,
.toggle-box-5.open .toggle-arrow,
.toggle-box-6.open .toggle-arrow,
.toggle-box-7.open .toggle-arrow,
.toggle-box-8.open .toggle-arrow {
  transform: rotate(90deg);
  top: 15%;
}

/* Details area improvements */
.toggle-box-1-details,
.toggle-box-2-details,
.toggle-box-3-details,
.toggle-box-4-details,
.toggle-box-5-details,
.toggle-box-6-details,
.toggle-box-7-details,
.toggle-box-8-details {
  background: transparent;
  padding: 24px 40px 24px 40px;
  font-family: "Montserrat-Regular";
  font-size: 1.08rem;
  color: #222;
  display: none;
  animation: fadeInToggleBox 0.2s;
  line-height: 1.7;
  transition: padding 0.2s;
}

.toggle-box-1.open .toggle-box-1-details,
.toggle-box-2.open .toggle-box-2-details,
.toggle-box-3.open .toggle-box-3-details,
.toggle-box-4.open .toggle-box-4-details,
.toggle-box-5.open .toggle-box-5-details,
.toggle-box-6.open .toggle-box-6-details,
.toggle-box-7.open .toggle-box-7-details,
.toggle-box-8.open .toggle-box-8-details {
  display: block;
}

.toggle-box-1-details span:first-of-type {
  display: block;
  font-family: "Montserrat-Bold";
  font-size: 1.15rem;
  color: #10266a;
  margin-bottom: 10px;
  margin-top: 0;
  letter-spacing: 0.5px;
}

.bullet-list-1 {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 22px;
  list-style-type: disc;
}

.bullet-list-1 li {
  margin-bottom: 6px;
  font-size: 1.06rem;
  list-style-type: disc;
}

.toggle-box-1-details span:nth-of-type(2) {
  display: block;
  font-family: "Montserrat-Regular";
  font-size: 1.02rem;
  color: #444;
  margin-top: 12px;
  margin-bottom: 0;
  letter-spacing: 0.1px;
}

/* Margin utility class */
.bullet-list-1 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.bullet-list-1,
.bullet-list-2,
.bullet-list-3,
.bullet-list-4,
.bullet-list-5,
.bullet-list-6,
.bullet-list-7,
.bullet-list-8 {
  margin: 12px 0 12px 0;
  padding-left: 22px;
}

.bullet-list-1 li,
.bullet-list-2 li,
.bullet-list-3 li,
.bullet-list-4 li,
.bullet-list-5 li,
.bullet-list-6 li,
.bullet-list-7 li,
.bullet-list-8 li {
  margin-bottom: 6px;
  font-size: 1.06rem;
}

.toggle-box-3-title {
  font-family: "Montserrat-Bold";
  font-size: 1.4rem;
  color: #10266a;
}
.toggle-box-3-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transition: background 0.2s;
  margin-left: 16px;
}
.toggle-box-3-toggle:hover {
  background: #ca4a9a22;
}
.toggle-box-3-details {
  background: transparent;
  padding: 18px 36px;
  font-family: "Montserrat-Regular";
  font-size: 1.08rem;
  color: #222;
  display: none;
  animation: fadeInToggleBox 0.2s;
}
.toggle-box-3-details table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #d1cbe7;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.toggle-box-3-details th,
.toggle-box-3-details td {
  border: 1px solid #d1cbe7;
  padding: 8px 12px;
  text-align: left;
}
.toggle-box-3-details th {
  background: #222;
  color: #fff;
  font-weight: bold;
}
.toggle-box-3-details td {
  background: #fff;
}

.bullet-list-3 {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 22px;
  list-style-type: disc;
}

.bullet-list-3 li {
  margin-bottom: 6px;
  font-size: 1.06rem;
  list-style-type: disc;
}

/* Box 4 */
.toggle-box-4 {
  width: 1000px;
  max-width: 98vw;
  height: 40px;
  background: transparent;
  border-radius: 24px;
  box-shadow: 0 2px 12px #0001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5px;
  transition: box-shadow 0.2s, height 0.3s cubic-bezier(0.4,0,0.2,1), max-height 0.3s cubic-bezier(0.4,0,0.2,1);
  max-height: 100px;
  overflow: hidden;
  position: relative;
}
.toggle-box-4.open {
  height: auto;
  max-height: 1200px;
}
.toggle-box-4-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 36px;
}
.toggle-box-4-title {
  font-family: "Montserrat-Bold";
  font-size: 1.35rem;
  color: #10266a;
}
.toggle-box-4-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transition: background 0.2s;
  margin-left: 16px;
}
.toggle-box-4-toggle:hover {
  background: #ca4a9a22;
}
.toggle-box-4-details {
  background: transparent;
  padding: 18px 36px;
  font-family: "Montserrat-Regular";
  font-size: 1.08rem;
  color: #222;
  display: none;
  animation: fadeInToggleBox 0.2s;
}

.toggle-box-4-details table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #10266a; /* Changed to blue */
  background: transparent; /* Made transparent */
  border-radius: 12px;
  overflow: hidden;
}

.toggle-box-4-details th,
.toggle-box-4-details td {
  border: 1px solid #10266a; /* Changed to blue */
  padding: 8px 12px;
  text-align: left;
}

.toggle-box-4-details th {
  background: #10266a;
  color: #fff;
  font-weight: bold;
}

.toggle-box-4-details td {
  background: transparent; /* Made transparent */
}

.bullet-list-4 {
  margin-top: 8px;
  margin-bottom: 8px;
}


/* Box 5 */
.toggle-box-5 {
  width: 1000px;
  max-width: 98vw;
  height: 40px;
  background: transparent;
  border-radius: 24px;
  box-shadow: 0 2px 12px #0001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5px;
  transition: box-shadow 0.2s, height 0.3s cubic-bezier(0.4,0,0.2,1), max-height 0.3s cubic-bezier(0.4,0,0.2,1);
  max-height: 100px;
  overflow: hidden;
  position: relative;
}
.toggle-box-5.open {
  height: auto;
  max-height: 1200px;
}
.toggle-box-5-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 36px;
}
.toggle-box-5-title {
  font-family: "Montserrat-Bold";
  font-size: 1.4rem;
  color: #10266a;
}
.toggle-box-5-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transition: background 0.2s;
  margin-left: 16px;
}
.toggle-box-5-toggle:hover {
  background: #ca4a9a22;
}
.toggle-box-5-details {
  background: transparent;
  padding: 18px 36px;
  font-family: "Montserrat-Regular";
  font-size: 1.08rem;
  color: #222;
  display: none;
  animation: fadeInToggleBox 0.2s;
}
.bullet-list-5 {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 22px;
  list-style-type: disc;
}

.bullet-list-5 li {
  margin-bottom: 6px;
  font-size: 1.06rem;
  list-style-type: disc;
}

/* Box 6 */
.toggle-box-6 {
  width: 1000px;
  max-width: 98vw;
  height: 40px;
  background: transparent;
  border-radius: 24px;
  box-shadow: 0 2px 12px #0001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5px;
  transition: box-shadow 0.2s, height 0.3s cubic-bezier(0.4,0,0.2,1), max-height 0.3s cubic-bezier(0.4,0,0.2,1);
  max-height: 100px;
  overflow: hidden;
  position: relative;
}
.toggle-box-6.open {
  height: auto;
  max-height: 1200px;
}
.toggle-box-6-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 36px;
}
.toggle-box-6-title {
  font-family: "Montserrat-Bold";
  font-size: 1.4rem;
  color: #10266a;
}
.toggle-box-6-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transition: background 0.2s;
  margin-left: 16px;
}
.toggle-box-6-toggle:hover {
  background: #ca4a9a22;
}
.toggle-box-6-details {
  background: transparent;
  padding: 18px 36px;
  font-family: "Montserrat-Regular";
  font-size: 1.08rem;
  color: #222;
  display: none;
  animation: fadeInToggleBox 0.2s;
}
.bullet-list-6 {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 22px;
  list-style-type: disc;
}

.bullet-list-6 li {
  margin-bottom: 6px;
  font-size: 1.06rem;
  list-style-type: disc;
}

/* Box 7 */
.toggle-box-7 {
  width: 1000px;
  max-width: 98vw;
  height: 40px;
  background: transparent;
  border-radius: 24px;
  box-shadow: 0 2px 12px #0001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5px;
  transition: box-shadow 0.2s, height 0.3s cubic-bezier(0.4,0,0.2,1), max-height 0.3s cubic-bezier(0.4,0,0.2,1);
  max-height: 100px;
  overflow: hidden;
  position: relative;
}
.toggle-box-7.open {
  height: auto;
  max-height: 1200px;
}
.toggle-box-7-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 36px;
}
.toggle-box-7-title {
  font-family: "Montserrat-Bold";
  font-size: 1.4rem;
  color: #10266a;
}
.toggle-box-7-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transition: background 0.2s;
  margin-left: 16px;
}
.toggle-box-7-toggle:hover {
  background: #ca4a9a22;
}
.toggle-box-7-details {
  background: transparent;
  padding: 18px 36px;
  font-family: "Montserrat-Regular";
  font-size: 1.08rem;
  color: #222;
  display: none;
  animation: fadeInToggleBox 0.2s;
}
.bullet-list-7 {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Box 8 */
.toggle-box-8 {
  width: 1000px;
  max-width: 98vw;
  height: 40px;
  background: transparent;
  border-radius: 24px;
  box-shadow: 0 2px 12px #0001;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5px;
  transition: box-shadow 0.2s, height 0.3s cubic-bezier(0.4,0,0.2,1), max-height 0.3s cubic-bezier(0.4,0,0.2,1);
  max-height: 100px;
  overflow: hidden;
  position: relative;
}
.toggle-box-8.open {
  height: auto;
  max-height: 1200px;
}
.toggle-box-8-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 36px;
}
.toggle-box-8-title {
  font-family: "Montserrat-Bold";
  font-size: 1.4rem;
  color: #10266a;
}
.toggle-box-8-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  transition: background 0.2s;
  margin-left: 16px;
}
.toggle-box-8-toggle:hover {
  background: #ca4a9a22;
}
.toggle-box-8-details {
  background: transparent;
  padding: 18px 36px;
  font-family: "Montserrat-Regular";
  font-size: 1.08rem;
  color: #222;
  display: none;
  animation: fadeInToggleBox 0.2s;
}
.bullet-list-8 {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 0;
  list-style: none;
}

.bullet-list-8 li {
  margin-bottom: 18px;
  font-size: 1.08rem;
  background: none;
  color: #222;
  border-radius: 0;
  padding: 0 0 0 0;
  box-sizing: border-box;
  line-height: 1.7;
}

.bullet-list-8 li:last-child {
  margin-bottom: 0;
}

.bullet8-title {
  font-weight: bold;
  font-size: 1.13em;
  display: inline-block;
  margin-bottom: 2px;
}

.bullet8 {
  color: #222;
}

.toggle-box-header {
  font-family: "Montserrat-Bold";
  font-size: 1.08rem;
  color: #10266a;
  display: block;
  margin-top: 16px;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
  font-weight: bold;
}

.toggle-box-subheader {
  font-family: "Montserrat-SemiBold";
  font-size: 1.04rem;
  color: #020202;
  display: block;
  margin-top: 14px;
  margin-bottom: 4px;
  letter-spacing: 0.1px;
}

.bullet-list-2 {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 22px;
  list-style-type: disc;
}

.bullet-list-2 li {
  margin-bottom: 6px;
  font-size: 1.06rem;
  list-style-type: disc;
}

@media screen and (max-width: 1440px) {
  .sop-retrieval-header-logo-1 {
    position: absolute;
    top: 110px;
    left: 40px;
    height: 60px;
    width: 60px;
  }

  .sop-retrieval-header-logo-2 {
    position: absolute;
    top: 145px;
    left: 35px;
    height: 90px;
    width: 110px;
  }
}

@media screen and (max-width: 1280px) {
  .sop-retrieval-title {
    position: relative;
    font-family: "Montserrat-Bold";
    font-size: 2.4rem;
    width: 80%;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    left: 100px;
  }

  .sop-retrieval-header-logo-1 {
    position: absolute;
    top: 110px;
    left: 40px;
    height: 60px;
    width: 60px;
  }

  .sop-retrieval-header-logo-2 {
    position: absolute;
    top: 145px;
    left: 35px;
    height: 90px;
    width: 110px;
  }
}

@media screen and (max-width: 1024px) {
  .sop-retrieval-header {
    text-align: center;
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .sop-retrieval-title {
    position: relative;
    font-family: "Montserrat-Bold";
    font-size: 1.8rem;
    width: 80%;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    left: 100px;
  }

  .sop-retrieval-subtitle {
    font-family: "Montserrat-Medium";
    font-size: 1.1rem;
    margin: 0;
    letter-spacing: 0.5px;
    margin-top: 20px;
  }

  .sop-retrieval-header-logo-1 {
    position: absolute;
    top: 110px;
    left: 40px;
    height: 40px;
    width: 40px;
  }

  .sop-retrieval-header-logo-2 {
    position: absolute;
    top: 135px;
    left: 35px;
    height: 70px;
    width: 90px;
  }

  .toggle-arrow {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 768px) {
  .sop_retrieval_section .container { 
    position: relative; 
    padding-top: 70px;
  }

  .sop-retrieval-title {
    position: relative;
    font-family: "Montserrat-Bold";
    font-size: 1.6rem;
    width: 80%;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    left: 100px;
  }

  .sop-retrieval-subtitle {
    font-family: "Montserrat-Medium";
    font-size: 0.9rem;
    margin: 0;
    letter-spacing: 0.5px;
    margin-top: 20px;
  }

  .sop-retrieval-header-logo-1 {
    position: absolute;
    top: 90px;
    left: 30px;
    height: 40px;
    width: 40px;
  }

  .sop-retrieval-header-logo-2 {
    position: absolute;
    top: 115px;
    left: 25px;
    height: 70px;
    width: 90px;
  }

  .toggle-box-1,
  .toggle-box-2,
  .toggle-box-3,
  .toggle-box-4,
  .toggle-box-5,
  .toggle-box-6,
  .toggle-box-7,
  .toggle-box-8 {
    height: 30px;
  }

  .toggle-box-1-content,
  .toggle-box-2-content,
  .toggle-box-3-content,
  .toggle-box-4-content,
  .toggle-box-5-content,
  .toggle-box-6-content,
  .toggle-box-7-content,
  .toggle-box-8-content {
    height: 30px;
  }

  .toggle-box-1-title,
  .toggle-box-2-title,
  .toggle-box-3-title,
  .toggle-box-4-title,
  .toggle-box-5-title,
  .toggle-box-6-title,
  .toggle-box-7-title,
  .toggle-box-8-title {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    margin-left: 30px;
  }

  .toggle-box-toggle {
    right: 140px;
  }

  .toggle-box-1-details,
  .toggle-box-2-details,
  .toggle-box-3-details,
  .toggle-box-4-details,
  .toggle-box-5-details,
  .toggle-box-6-details,
  .toggle-box-7-details,
  .toggle-box-8-details {
    font-size: 1.08rem;
  }

  .toggle-box-1-details span:first-of-type {
    font-size: 1rem;
  }
  .toggle-box-1-details span:nth-of-type(2) {
    font-size: 0.8rem;
  }

  .toggle-box-2-details span:first-of-type {
    font-size: 0.8rem;
  }
  .toggle-box-2-details span:nth-of-type(2) {
    font-size: 1rem;
  }

  .toggle-box-3-details {
    font-size: 0.8rem;
  }

  .toggle-box-header {
    font-size: 1rem;
  }
  .toggle-box-4-details {
    font-size: 0.9rem;
  }
  .toggle-box-5-details {
    font-size: 1rem;
  }
  .toggle-box-subheader {
    font-size: 1rem;
  }
  .bullet8-title {
    font-size: 0.9rem;
  }

  .bullet-list-1 li,
  .bullet-list-2 li,
  .bullet-list-3 li,
  .bullet-list-4 li,
  .bullet-list-5 li,
  .bullet-list-6 li,
  .bullet-list-7 li,
  .bullet-list-8 li {
    font-size: 0.9rem;
  }

  .toggle-arrow {
    font-size: 1rem;
  }

  .title-emoji {
    font-size: 1rem;
    position: absolute;
    left: -30px;
  }

  .toggle-box-1:not(.open) .title-emoji,
  .toggle-box-2:not(.open) .title-emoji,
  .toggle-box-3:not(.open) .title-emoji,
  .toggle-box-4:not(.open) .title-emoji,
  .toggle-box-5:not(.open) .title-emoji,
  .toggle-box-6:not(.open) .title-emoji,
  .toggle-box-7:not(.open) .title-emoji,
  .toggle-box-8:not(.open) .title-emoji {
    font-size: 1.1rem;
    position: absolute;
    right: 460px;
  }

  /* Center title text when box is closed */
  .toggle-box-1:not(.open) .toggle-box-1-title,
  .toggle-box-2:not(.open) .toggle-box-2-title,
  .toggle-box-3:not(.open) .toggle-box-3-title,
  .toggle-box-4:not(.open) .toggle-box-4-title,
  .toggle-box-5:not(.open) .toggle-box-5-title,
  .toggle-box-6:not(.open) .toggle-box-6-title,
  .toggle-box-7:not(.open) .toggle-box-7-title,
  .toggle-box-8:not(.open) .toggle-box-8-title {
    width: 100%;
    text-align: left;
    margin-left: 200px;
  }
}

@media screen and (max-width: 600px) {
  .toggle-box-toggle {
    right: 40px;
  }
  .toggle-box-1:not(.open) .title-emoji,
  .toggle-box-2:not(.open) .title-emoji,
  .toggle-box-3:not(.open) .title-emoji,
  .toggle-box-4:not(.open) .title-emoji,
  .toggle-box-5:not(.open) .title-emoji,
  .toggle-box-6:not(.open) .title-emoji,
  .toggle-box-7:not(.open) .title-emoji,
  .toggle-box-8:not(.open) .title-emoji {
    font-size: 1rem;
    position: absolute;
    right: 350px;
  }

  /* Center title text when box is closed */
  .toggle-box-1:not(.open) .toggle-box-1-title,
  .toggle-box-2:not(.open) .toggle-box-2-title,
  .toggle-box-3:not(.open) .toggle-box-3-title,
  .toggle-box-4:not(.open) .toggle-box-4-title,
  .toggle-box-5:not(.open) .toggle-box-5-title,
  .toggle-box-6:not(.open) .toggle-box-6-title,
  .toggle-box-7:not(.open) .toggle-box-7-title,
  .toggle-box-8:not(.open) .toggle-box-8-title {
    width: 100%;
    text-align: left;
    margin-left: 150px;
  }
}

@media screen and (max-width: 500px) {
  .toggle-box-toggle {
    right: 25px;
  }
  .toggle-box-1:not(.open) .title-emoji,
  .toggle-box-2:not(.open) .title-emoji,
  .toggle-box-3:not(.open) .title-emoji,
  .toggle-box-4:not(.open) .title-emoji,
  .toggle-box-5:not(.open) .title-emoji,
  .toggle-box-6:not(.open) .title-emoji,
  .toggle-box-7:not(.open) .title-emoji,
  .toggle-box-8:not(.open) .title-emoji {
    font-size: 1rem;
    position: absolute;
    right: 320px;
  }

  /* Center title text when box is closed */
  .toggle-box-1:not(.open) .toggle-box-1-title,
  .toggle-box-2:not(.open) .toggle-box-2-title,
  .toggle-box-3:not(.open) .toggle-box-3-title,
  .toggle-box-4:not(.open) .toggle-box-4-title,
  .toggle-box-5:not(.open) .toggle-box-5-title,
  .toggle-box-6:not(.open) .toggle-box-6-title,
  .toggle-box-7:not(.open) .toggle-box-7-title,
  .toggle-box-8:not(.open) .toggle-box-8-title {
    width: 100%;
    text-align: left;
    margin-left: 70px;
  }
}

@media screen and (max-width: 480px) {
  .sop_retrieval_section .container { 
    position: relative; 
    padding-top: 50px;
  }

  .sop-retrieval-title {
    position: relative;
    font-family: "Montserrat-Bold";
    font-size: 1.1rem;
    width: 80%;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    left: 60px;
  }

  .sop-retrieval-subtitle {
    font-family: "Montserrat-Medium";
    font-size: 0.7rem;
    margin: 0;
    letter-spacing: 0.5px;
    margin-top: 20px;
  }

  .sop-retrieval-header-logo-1 {
    position: absolute;
    top: 70px;
    left: 20px;
    height: 30px;
    width: 30px;
  }

  .sop-retrieval-header-logo-2 {
    position: absolute;
    top: 90px;
    left: 15px;
    height: 50px;
    width: 70px;
  }

  .toggle-box-toggle {
    right: 0;
    left: 10px;
  }

  .toggle-box-1-title,
  .toggle-box-2-title,
  .toggle-box-3-title,
  .toggle-box-4-title,
  .toggle-box-5-title,
  .toggle-box-6-title,
  .toggle-box-7-title,
  .toggle-box-8-title {
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin-left: 35px;
  }

  .title-emoji {
    font-size: 1rem;
    position: absolute;
    left: -35px;
  }

  .toggle-box-1:not(.open) .title-emoji,
  .toggle-box-2:not(.open) .title-emoji,
  .toggle-box-3:not(.open) .title-emoji,
  .toggle-box-4:not(.open) .title-emoji,
  .toggle-box-5:not(.open) .title-emoji,
  .toggle-box-6:not(.open) .title-emoji,
  .toggle-box-7:not(.open) .title-emoji,
  .toggle-box-8:not(.open) .title-emoji {
    font-size: 1rem;
    position: absolute;
    right: 280px;
  } 

  /* Center title text when box is closed */
  .toggle-box-1:not(.open) .toggle-box-1-title,
  .toggle-box-2:not(.open) .toggle-box-2-title,
  .toggle-box-3:not(.open) .toggle-box-3-title,
  .toggle-box-4:not(.open) .toggle-box-4-title,
  .toggle-box-5:not(.open) .toggle-box-5-title,
  .toggle-box-6:not(.open) .toggle-box-6-title,
  .toggle-box-7:not(.open) .toggle-box-7-title,
  .toggle-box-8:not(.open) .toggle-box-8-title {
    width: 100%;
    text-align: left;
    margin-left: 40px;
  }

  .toggle-box-4-details {
    font-size: 0.8rem;
  }

}

@media screen and (max-width: 380px) {
  .sop_retrieval_section .container { 
    position: relative; 
    padding-top: 40px;
  }

  .sop-retrieval-title {
    position: relative;
    font-family: "Montserrat-Bold";
    font-size: 1rem;
    width: 80%;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    left: 60px;
  }

  .sop-retrieval-subtitle {
    font-family: "Montserrat-Medium";
    font-size: 0.65rem;
    margin: 0;
    letter-spacing: 0.5px;
    margin-top: 20px;
  }

  .sop-retrieval-header-logo-1 {
    position: absolute;
    top: 65px;
    left: 17px;
    height: 25px;
    width: 25px;
  }

  .sop-retrieval-header-logo-2 {
    position: absolute;
    top: 85px;
    left: 15px;
    height: 40px;
    width: 60px;
  }

  .toggle-box-1,
  .toggle-box-2,
  .toggle-box-3,
  .toggle-box-4,
  .toggle-box-5,
  .toggle-box-6,
  .toggle-box-7,
  .toggle-box-8 {
    height: 30px;
  }

  .toggle-box-1-content,
  .toggle-box-2-content,
  .toggle-box-3-content,
  .toggle-box-4-content,
  .toggle-box-5-content,
  .toggle-box-6-content,
  .toggle-box-7-content,
  .toggle-box-8-content {
    height: 30px;
  }

  .toggle-box-4.open {
    height: auto;
    max-height: 1800px;
  }

  .toggle-box-1-title,
  .toggle-box-2-title,
  .toggle-box-3-title,
  .toggle-box-4-title,
  .toggle-box-5-title,
  .toggle-box-6-title,
  .toggle-box-7-title,
  .toggle-box-8-title {
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin-left: 35px;
  }

  .title-emoji {
    font-size: 1rem;
    position: absolute;
    left: -35px;
  }

  .toggle-box-1-details,
  .toggle-box-2-details,
  .toggle-box-3-details,
  .toggle-box-4-details,
  .toggle-box-5-details,
  .toggle-box-6-details,
  .toggle-box-7-details,
  .toggle-box-8-details {
    font-size: 1.08rem;
  }

  .toggle-box-1-details span:first-of-type {
    font-size: 1rem;
  }
  .toggle-box-1-details span:nth-of-type(2) {
    font-size: 0.8rem;
  }

  .toggle-box-2-details span:first-of-type {
    font-size: 0.8rem;
  }
  .toggle-box-2-details span:nth-of-type(2) {
    font-size: 1rem;
  }

  .toggle-box-3-details {
    font-size: 0.8rem;
  }

  .toggle-box-header {
    font-size: 1rem;
  }
  .toggle-box-4-details {
    font-size: 0.9rem;
  }
  .toggle-box-5-details {
    font-size: 1rem;
  }
  .toggle-box-subheader {
    font-size: 1rem;
  }
  .bullet8-title {
    font-size: 0.9rem;
  }

  .bullet-list-1 li,
  .bullet-list-2 li,
  .bullet-list-3 li,
  .bullet-list-4 li,
  .bullet-list-5 li,
  .bullet-list-6 li,
  .bullet-list-7 li,
  .bullet-list-8 li {
    font-size: 0.9rem;
  }

  .toggle-arrow {
    font-size: 0.8rem;
  }

  .toggle-box-toggle {
    right: 0;
    left: 20px;
  }

  .toggle-box-1:not(.open) .title-emoji,
  .toggle-box-2:not(.open) .title-emoji,
  .toggle-box-3:not(.open) .title-emoji,
  .toggle-box-4:not(.open) .title-emoji,
  .toggle-box-5:not(.open) .title-emoji,
  .toggle-box-6:not(.open) .title-emoji,
  .toggle-box-7:not(.open) .title-emoji,
  .toggle-box-8:not(.open) .title-emoji {
    font-size: 1rem;
    position: absolute;
    right: 230px;
  }
}

@media screen and (max-width: 320px) {
  .sop_retrieval_section .container { 
    position: relative; 
    padding-top: 40px;
  }

  .sop-retrieval-title {
    position: relative;
    font-family: "Montserrat-Bold";
    font-size: 1rem;
    width: 80%;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
    left: 60px;
  }

  .sop-retrieval-subtitle {
    font-family: "Montserrat-Medium";
    font-size: 0.65rem;
    margin: 0;
    letter-spacing: 0.5px;
    margin-top: 20px;
  }

  .sop-retrieval-header-logo-1 {
    position: absolute;
    top: 65px;
    left: 13px;
    height: 25px;
    width: 25px;
  }

  .sop-retrieval-header-logo-2 {
    position: absolute;
    top: 85px;
    left: 10px;
    height: 40px;
    width: 60px;
  }

  .toggle-box-1,
  .toggle-box-2,
  .toggle-box-3,
  .toggle-box-4,
  .toggle-box-5,
  .toggle-box-6,
  .toggle-box-7,
  .toggle-box-8 {
    height: 30px;
  }

  .toggle-box-1-content,
  .toggle-box-2-content,
  .toggle-box-3-content,
  .toggle-box-4-content,
  .toggle-box-5-content,
  .toggle-box-6-content,
  .toggle-box-7-content,
  .toggle-box-8-content {
    height: 30px;
  }

  .toggle-box-1-title,
  .toggle-box-2-title,
  .toggle-box-3-title,
  .toggle-box-4-title,
  .toggle-box-5-title,
  .toggle-box-6-title,
  .toggle-box-7-title,
  .toggle-box-8-title {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    margin-left: 35px;
  }

  .title-emoji {
    font-size: 1rem;
    position: absolute;
    left: -35px;
  }

  .toggle-box-1-details,
  .toggle-box-2-details,
  .toggle-box-3-details,
  .toggle-box-4-details,
  .toggle-box-5-details,
  .toggle-box-6-details,
  .toggle-box-7-details,
  .toggle-box-8-details {
    font-size: 1.08rem;
  }

  .toggle-box-1-details span:first-of-type {
    font-size: 1rem;
  }
  .toggle-box-1-details span:nth-of-type(2) {
    font-size: 0.8rem;
  }

  .toggle-box-2-details span:first-of-type {
    font-size: 0.8rem;
  }
  .toggle-box-2-details span:nth-of-type(2) {
    font-size: 1rem;
  }

  .toggle-box-3-details {
    font-size: 0.8rem;
  }

  .toggle-box-header {
    font-size: 1rem;
  }
  .toggle-box-4-details {
    font-size: 0.9rem;
  }
  .toggle-box-5-details {
    font-size: 1rem;
  }
  .toggle-box-subheader {
    font-size: 1rem;
  }
  .bullet8-title {
    font-size: 0.9rem;
  }

  .bullet-list-1 li,
  .bullet-list-2 li,
  .bullet-list-3 li,
  .bullet-list-4 li,
  .bullet-list-5 li,
  .bullet-list-6 li,
  .bullet-list-7 li,
  .bullet-list-8 li {
    font-size: 0.9rem;
  }

  .toggle-arrow {
    font-size: 0.8rem;
  }

  .toggle-box-1:not(.open) .title-emoji,
  .toggle-box-2:not(.open) .title-emoji,
  .toggle-box-3:not(.open) .title-emoji,
  .toggle-box-4:not(.open) .title-emoji,
  .toggle-box-5:not(.open) .title-emoji,
  .toggle-box-6:not(.open) .title-emoji,
  .toggle-box-7:not(.open) .title-emoji,
  .toggle-box-8:not(.open) .title-emoji {
    font-size: 1rem;
    position: absolute;
    right: 180px;
  }
}

.case_studies_section_1 {
  background-color: rgba(255, 255, 255, 1.0); 
  background: linear-gradient(180deg, rgba(184, 171, 228, 1) 0%, rgba(254, 226, 213, 1) 100%);
  width: 100%;
  min-height: 650px;
} 

.case_studies_section_1 .container { 
  background: none;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 950px; 
  position: relative; 
  padding-top: 90px;
  box-sizing: border-box;
}

/* Section Title and Subtitle */
.case-studies-header-1 {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 32px;
}

.case-studies-title-1 {
  font-family: "Montserrat-Bold";
  font-size: 4.4rem;
  color: #10266a;
  margin: 0 0 10px 0;
  letter-spacing: 1px;
}

.case-studies-subtitle-1 {
  position: relative;
  font-family: "Montserrat-Regular";
  font-size: 1.5rem;
  color: #10266a;
  margin: 0;
  letter-spacing: 0.5px;
  width: 80%;
  left: 10%;
}

/* Case Studies Grid and Boxes */
.case-studies-grid {
  gap: 32px;
  margin: 60px auto 0 auto;
  max-width: 1200px;
  width: 100%;
}

.case-study-box {
  border-radius: 12px;
  left: 405px;
  width: 400px;
  box-shadow: 0 2px 12px #0001;
  padding: 32px 16px 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}

.case-study-logo {
  display: block;
  height: 70px;
  width: auto;
  max-width: 180px;
  margin-bottom: 24px;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

.case-study-bg-sop {
  position: relative;
  background-size: cover;
  background-color: #c2185b;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.case-study-title-1 {
  font-family: "Montserrat-Bold";
  font-size: 1.4rem;
  color: #ff649f;
  margin-bottom: 18px;
  text-align: center;
}
.case-study-desc-1 {
  font-family: "Montserrat-Medium";
  font-size: 1.2rem;
  color: #fffaff;
  text-align: center;
  margin-top: 0;
}
.case-study-bg-sop-1 {
  position: relative;
  background-image: url('img_logos/social_network.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

@media screen and (max-width: 1024px) {
  .case_studies_section_1 .container { 
    height: 700px; 
  }

  /* Section Title and Subtitle */
  .case-studies-header-1 {
    text-align: center;
    margin-top: 24px;
    margin-bottom: 28px;
  }

  .case-studies-title-1 {
    font-family: "Montserrat-Bold";
    font-size: 3.4rem;
    color: #10266a;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
  }

  .case-studies-subtitle-1 {
    font-family: "Montserrat-Regular";
    font-size: 1.1rem;
    color: #10266a;
    margin: 0;
    letter-spacing: 0.5px;
  }

  .case-study-box {
    border-radius: 12px;
    left: 310px;
    width: 400px;
    box-shadow: 0 2px 12px #0001;
    padding: 32px 16px 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 200px;
    position: relative;
    overflow: hidden;
  }

  .case-study-logo {
    display: block;
    height: 70px;
    width: auto;
    max-width: 180px;
    margin-bottom: 24px;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
  }

  .case-study-bg-sop {
    position: relative;
    background-size: cover;
    background-color: #c2185b;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
  }

  .case-study-title-1 {
    font-family: "Montserrat-Bold";
    font-size: 1.4rem;
    color: #ff649f;
    margin-bottom: 18px;
    text-align: center;
  }
  .case-study-desc-1 {
    font-family: "Montserrat-Medium";
    font-size: 1.2rem;
    color: #fffaff;
    text-align: center;
    margin-top: 0;
  }
  .case-study-bg-sop-1 {
    position: relative;
    background-image: url('img_logos/social_network.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
  }
}

@media screen and (max-width: 768px) {
  .case_studies_section_1 .container { 
    height: 700px; 
  }

  /* Section Title and Subtitle */
  .case-studies-header-1 {
    text-align: center;
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .case-studies-title-1 {
    font-size: 2.8rem;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
  }

  .case-studies-subtitle-1 {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
  }

  .case-study-box {
    border-radius: 12px;
    left: 265px;
    width: 240px;
    height: 120px;
    min-height: 120px;
  }

  .case-study-logo {
    display: block;
    height: 70px;
    width: auto;
    max-width: 180px;
    margin-bottom: 24px;
  }

  .case-study-bg-sop {
    position: relative;
    background-size: cover;
    z-index: 1;
  }

  .case-study-title-1 {
    font-size: 0.8rem;
    margin-bottom: 18px;
  }
  .case-study-desc-1 {
    font-size: 0.6rem;
  }
  .case-study-bg-sop-1 {
    position: relative;
    background-image: url('img_logos/social_network.jpg');
    background-position: center;
    z-index: 1;
  }
  .case_studies_section_1 .container { 
    padding-top: 60px;
  }
}

@media screen and (max-width: 480px) {
  .case_studies_section_1 .container { 
    height: 700px; 
  }

  /* Section Title and Subtitle */
  .case-studies-header-1 {
    text-align: center;
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .case-studies-title-1 {
    font-size: 2.8rem;
  }

  .case-studies-subtitle-1 {
    font-size: 0.9rem;
  }

  .case-study-box {
    border-radius: 12px;
    left: 90px;
    width: 240px;
    height: 120px; 
    min-height: 120px;
  }

  .case-study-logo {
    display: block;
    height: 70px;
    width: auto;
    max-width: 180px;
    margin-bottom: 24px;
  }

  .case-study-bg-sop {
    position: relative;
    background-size: cover;
    z-index: 1;
  }

  .case-study-title-1 {
    font-size: 0.8rem;
    margin-bottom: 18px;
  }
  .case-study-desc-1 {
    font-size: 0.6rem;
  }
  .case-study-bg-sop-1 {
    position: relative;
    background-image: url('img_logos/social_network.jpg');
    background-size: contain;
    z-index: 1;
  }
  .case_studies_section_1 .container { 
    padding-top: 50px;
  }
  .case-studies-grid {
    gap: 32px;
    margin: 60px auto 0 auto;
    max-width: 480px;
    width: 100%;
  }
}

@media screen and (max-width: 380px) {
  .case_studies_section_1 .container { 
    height: 700px; 
  }

  /* Section Title and Subtitle */
  .case-studies-header-1 {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 28px;
  }

  .case-studies-title-1 {
    font-size: 2.5rem;
  }

  .case-studies-subtitle-1 {
    font-size: 0.75rem;
  }

  .case-study-box {
    border-radius: 12px;
    left: 65px;
    width: 240px;
    height: 120px; 
    min-height: 120px;
  }

  .case-study-logo {
    display: block;
    height: 70px;
    width: auto;
    max-width: 180px;
    margin-bottom: 24px;
  }

  .case-study-bg-sop {
    position: relative;
    background-size: cover;
    z-index: 1;
  }

  .case-study-title-1 {
    font-size: 0.8rem;
    margin-bottom: 18px;
  }
  .case-study-desc-1 {
    font-size: 0.6rem;
  }
  .case-study-bg-sop-1 {
    position: relative;
    background-image: url('img_logos/social_network.jpg');
    background-size: contain;
    z-index: 1;
  }
  .case_studies_section_1 .container { 
    padding-top: 50px;
  }
  .case-studies-grid {
    gap: 32px;
    margin: 60px auto 0 auto;
    max-width: 480px;
    width: 100%;
  }
}

@media screen and (max-width: 320px) {
  .case_studies_section_1 .container { 
    height: 700px; 
  }

  /* Section Title and Subtitle */
  .case-studies-header-1 {
    text-align: center;
    margin-top: 18px;
    margin-bottom: 28px;
  }

  .case-studies-title-1 {
    font-size: 2rem;
  }

  .case-studies-subtitle-1 {
    font-size: 0.75rem;
  }

  .case-study-box {
    border-radius: 12px;
    left: 40px;
    width: 240px;
    height: 120px; 
    min-height: 120px;
  }

  .case-study-logo {
    display: block;
    height: 70px;
    width: auto;
    max-width: 180px;
    margin-bottom: 24px;
  }

  .case-study-bg-sop {
    position: relative;
    background-size: cover;
    z-index: 1;
  }

  .case-study-title-1 {
    font-size: 0.8rem;
    margin-bottom: 18px;
  }
  .case-study-desc-1 {
    font-size: 0.6rem;
  }
  .case-study-bg-sop-1 {
    position: relative;
    background-image: url('img_logos/social_network.jpg');
    background-size: contain;
    z-index: 1;
  }
  .case_studies_section_1 .container { 
    padding-top: 50px;
  }
  .case-studies-grid {
    gap: 32px;
    margin: 60px auto 0 auto;
    max-width: 480px;
    width: 100%;
  }
}