:root {
   --accent-color: #01274e;
   --text-color: #1D1D27;
   --text--color-secondary: #888;
   --background-color: #FAFAFA;
   --bg-secondary-color: #f5f7fc;
   --grey: #e3e3e3;
}

* {
   margin: 0;
   box-sizing: border-box;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   /* color: var(--text-color); */
}

.footer p {
   font-size: 14px;
   font-weight: 400;
   color: #F7FAFF !important;
}

h5 {
   margin: 0;
}

.it-services-content {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 64px;
   padding: 0px 40px;
}

.isc-left {
   display: flex;
   flex-direction: column;
   gap: 24px;
   max-width: 800px;

   & h2 {
      font-size: 32px;
      font-weight: 600;
      color: #F7FAFF;
   }

   & p {
      font-size: 16px;
      font-weight: 400;
      color: #F7FAFF;
   }
}

.isc-right {
   display: flex;
   flex-direction: column;
   gap: 24px;

   & img {
      width: 100%;
      max-width: 400px;
      height: auto;
   }
}

.structured-approach {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 0px 150px 72px;
   gap: 48px;
   padding-bottom: 125px;

   & h4 {
      font-size: 20px;
      font-weight: 600;
   }
}

.approach-card-container {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   max-width: 1440px;
   justify-content: space-between;
   gap: 32px;
}

.acc-column {
   display: flex;
   flex-direction: column;
   gap: 32px;
   width: 100%;
   max-width: 350px;
}

.approach-card {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0;
   transition: all 200ms ease-in-out;
}

.approach-card-header {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   width: 350px;
   background-color: var(--grey);
   padding: 12px 28px;
   border-radius: 8px;
   cursor: pointer;

   & .icon-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 36px;
      height: 36px;
      min-width: 36px;
      z-index: 2;

      & img {
         width: 100%;
         height: 100%;
      }
   }

   & h5 {
      font-size: 18px;
      font-weight: 500;
      color: var(--accent-color);
      text-align: center;
      z-index: 2;
   }

   & .plus-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 24px;
      min-width: 24px;
      min-height: 24px;
      z-index: 2;

      & svg {
         width: 100%;
         height: 100%;
         transform-origin: 50% 50%;

         & path {
            fill: var(--accent-color) !important;
         }
      }
   }
}

.approach-card.is-open .plus-icon svg {
   animation: plus-spin-open 350ms ease-out;
   transform: rotate(405deg);
}

.approach-card.is-closing .plus-icon svg {
   animation: plus-spin-close 350ms ease-out;
   transform: rotate(0deg);
}

@keyframes plus-spin-open {
   0% {
      transform: rotate(0deg);
   }

   70% {
      transform: rotate(360deg);
   }

   100% {
      transform: rotate(405deg);
   }
}

@keyframes plus-spin-close {
   0% {
      transform: rotate(405deg);
   }

   70% {
      transform: rotate(45deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

.approach-card-header:hover {
   transform: scale(1.01);
}

.approach-card-header:active {
   transform: scale(0.98);
   transition: all 50ms ease-in-out;
}

.approach-card-dropdown {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   width: 100%;
   background-color: var(--grey);
   border-radius: 8px;
   max-height: 0;
   padding: 0;
   opacity: 0;
   overflow: hidden;
   transition: all 300ms ease-in-out;

   & h6 {
      font-size: 16px;
      font-weight: 500;
      color: var(--accent-color);
   }

   & .acd-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      list-style-type: none;
      padding: 0;

      & li {
         font-size: 14px;
         font-weight: 400;
         color: var(--accent-color);
         cursor: pointer;
      }
   }
}

.approach-card.is-open .approach-card-dropdown {
   max-height: 1000px;
   padding: 28px;
   opacity: 1;
}

/* Checkbox Styles */
.checkbox-wrapper-33 {
   --s-xsmall: 0.625em;
   --s-small: 1.2em;
   --border-width: 2px;
   --c-primary: rgb(1, 39, 78);
   --c-primary-20-percent-opacity: rgb(1 39 78 / 20%);
   --c-primary-10-percent-opacity: rgb(1 39 78 / 10%);
   --t-base: 0.4s;
   --t-fast: 0.2s;
   --e-in: ease-in;
   --e-out: cubic-bezier(0.11, 0.29, 0.18, 0.98);
}

.checkbox-wrapper-33 .visuallyhidden {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
}

.checkbox-wrapper-33 .checkbox {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   color: white;
}

.checkbox-wrapper-33 .checkbox+.checkbox {
   margin-top: var(--s-small);
}

.checkbox-wrapper-33 .checkbox__symbol {
   display: inline-block;
   display: flex;
   margin-right: calc(var(--s-small) * 0.7);
   border: var(--border-width) solid var(--c-primary);
   position: relative;
   border-radius: 100%;
   width: 1.5em;
   height: 1.5em;
   transition: box-shadow var(--t-base) var(--e-out),
      background-color var(--t-base);
   box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity);
}

.checkbox-wrapper-33 .checkbox__symbol:after {
   content: "";
   position: absolute;
   top: 0.5em;
   left: 0.5em;
   width: 0.25em;
   height: 0.25em;
   background-color: var(--c-primary-20-percent-opacity);
   opacity: 0;
   border-radius: 3em;
   transform: scale(1);
   transform-origin: 50% 50%;
}

.checkbox__symbol {
   min-width: 21px;
}

.checkbox-wrapper-33 .checkbox .icon-checkbox {
   width: 1em;
   height: 1em;
   margin: auto;
   fill: none;
   stroke-width: 3;
   stroke: currentColor;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 10;
   color: var(--c-primary);
   display: inline-block;
}

.checkbox-wrapper-33 .checkbox .icon-checkbox path {
   transition: stroke-dashoffset var(--t-fast) var(--e-in);
   stroke-dasharray: 30px, 31px;
   stroke-dashoffset: 31px;
}

.checkbox-wrapper-33 .checkbox__textwrapper {
   margin: 0;
   font-size: 15px;
   font-weight: 500;
   color: var(--accent-color);
}

.checkbox-wrapper-33 .checkbox__trigger:checked+.checkbox__symbol:after {
   -webkit-animation: ripple-33 1.5s var(--e-out);
   animation: ripple-33 1.5s var(--e-out);
}

.checkbox-wrapper-33 .checkbox__trigger:checked+.checkbox__symbol .icon-checkbox path {
   transition: stroke-dashoffset var(--t-base) var(--e-out);
   stroke-dashoffset: 0px;
}

.checkbox-wrapper-33 .checkbox__trigger:focus+.checkbox__symbol {
   box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity);
}

@-webkit-keyframes ripple-33 {
   from {
      transform: scale(0);
      opacity: 1;
   }

   to {
      opacity: 0;
      transform: scale(20);
   }
}

@keyframes ripple-33 {
   from {
      transform: scale(0);
      opacity: 1;
   }

   to {
      opacity: 0;
      transform: scale(20);
   }
}

/* End of Checkbox Styles */

/* Selected Services Styles */
.selected-services {
   position: fixed;
   bottom: 12px;
   left: 12px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 350px;
   padding: 20px;
   border-radius: 8px;
   background-color: var(--background-color);
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
   z-index: 50;
   opacity: 0;
   transform: translateY(12px);
   pointer-events: none;
   visibility: hidden;
   transition: opacity 220ms ease, transform 220ms ease, padding 200ms ease, gap 200ms ease;
}

.selected-services.has-items {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
   visibility: visible;
}

.ss-modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-block: 8px;
   cursor: pointer;

   & h5 {
      color: var(--accent-color);
   }
}

.minimize-icon {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 24px;
   height: 24px;
   padding: 2px;
   transition: all 200ms ease-out;

   & svg {
      width: 100%;
      height: 100%;

      path {
         fill: var(--accent-color) !important;
      }
   }
}

.ss-modal-body {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 100%;
   max-height: 0;
   opacity: 0;
   transform: translateY(-6px);
   overflow: hidden;
   transition: max-height 200ms ease, opacity 200ms ease, transform 200ms ease;

   & p {
      margin: 0;
   }
}

.selected-services.has-items .ss-modal-body {
   max-height: 300px;
   opacity: 1;
   transform: translateY(0);
}

.ssmb-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   list-style-type: none;
   padding: 0;
   margin: 0;
   max-height: 280px;
   overflow-y: auto;

   & .ss-item {
      position: relative;
      padding: 8px 12px;
      background-color: var(--grey);
      border-radius: 4px;
      color: var(--accent-color);
      list-style-type: none;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 200ms ease, transform 200ms ease;

      & p {
         margin-right: 20px;
      }
   }
}

.ssmb-list::-webkit-scrollbar {
   display: none;
}

.ss-item.is-entering {
   opacity: 0;
   transform: translateY(6px);
}

.ss-item.is-exiting {
   opacity: 0;
   transform: translateY(-6px);
}

.ssmb-remove-item {
   position: absolute;
   right: 0;
   top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 24px;
   height: 24px;
   padding: 2px;
   cursor: pointer;

   & svg {
      width: 100%;
      height: 100%;
      transform: rotate(45deg);

      path {
         fill: var(--accent-color) !important;
      }
   }
}

.ss-modal-footer {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   padding-block: 8px;
   max-height: 120px;
   opacity: 1;
   transform: translateY(0);
   overflow: hidden;
   transition: max-height 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.selected-services.is-minimized .ss-modal-body,
.selected-services.is-minimized .ss-modal-footer {
   max-height: 0;
   opacity: 0;
   padding: 0;
   transform: translateY(-6px);
   pointer-events: none;
   visibility: hidden;
}

.ssmb-text-container {
   display: flex;
   flex-direction: column;
}

.ssmb-text-small {
   font-size: 12px;
   color: var(--text--color-secondary) ;
}

.selected-services.is-minimized {
   gap: 0;
   padding: 12px 20px;
}

.selected-services.is-minimized .minimize-icon {
   transform: rotate(180deg);
}
.ssmb-clear-btn {
   background-color: transparent;
   color: var(--accent-color);
   border: 1px solid var(--accent-color);
   padding: 8px 16px;
   cursor: pointer;
   color: var(--accent-color);
}

.ssmb-clear-btn:hover {
   background-color: var(--accent-color);
   color: #fff;
}

.interested-service-modal {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.96);
   z-index: 1060;
   width: min(92vw, 680px);
   background: #ffffff;
   border-radius: 14px;
   padding: 26px;
   box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55), 0 20px 45px rgba(0, 0, 0, 0.2);
   display: grid;
   gap: 18px;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.interested-service-modal.active {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transform: translate(-50%, -50%) scale(1);
}

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

.ism-header h3 {
   margin: 0;
   font-size: 1.2rem;
   font-weight: 700;
   color: var(--accent-color);
   line-height: 1.35;
}

.interested-service-text {
   color: #1f2a36;
}

.ism-selected-services {
   display: flex;
   flex-direction: column;
   gap: 8px;
   max-height: 160px;
   overflow-y: auto;
   padding-right: 4px;
}

.ism-selected-item {
   display: flex;
   align-items: center;
   gap: 10px;
   background-color: #f5f7fc;
   border-radius: 10px;
   padding: 8px 10px;
}

.ism-selected-item img {
   width: 22px;
   height: 22px;
   object-fit: contain;
   flex: 0 0 22px;
}

.ism-selected-copy {
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.ism-selected-main {
   font-size: 0.74rem;
   font-weight: 600;
   color: #5f6f80;
}

.ism-selected-service {
   font-size: 0.9rem;
   font-weight: 500;
   color: #1f2a36;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.ism-body {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
}

.ismb-input-container {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.ismb-input-container label {
   font-size: 0.86rem;
   font-weight: 600;
   color: #3d4b59;
   margin: 0;
}

.ismb-input-container input {
   width: 100%;
   border: 1px solid #d8e0ea;
   border-radius: 10px;
   padding: 11px 12px;
   font-size: 0.95rem;
   color: #1f2a36;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ismb-input-container input::placeholder {
   color: #97a6b4;
}

.ismb-input-container input:focus {
   border-color: #0d6efd;
   box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.ism-footer {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   padding-top: 6px;
   border-top: 1px solid #eef2f7;
}

.ism-footer .btn {
   min-width: 120px;
   padding: 9px 16px;
   font-weight: 600;
   border-radius: 10px;
}

body.ism-modal-open {
   overflow: hidden;
}

#ismCancelBtn {
   background-color: transparent !important;
   border: 1px solid #d8e0ea;
   color: #1f2a36;
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (max-width: 767.98px) {
   .interested-service-modal {
      padding: 18px;
      gap: 14px;
   }

   .ism-body {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .ism-footer {
      justify-content: stretch;
   }

   .ism-footer .btn {
      flex: 1;
      min-width: 0;
   }
}

/* Consultancy modal button overrides */
.ism-footer .btn.btn-primary {
  background: var(--bg-brand-primary) !important;
  border-color: var(--bg-brand-primary) !important;
  color: #fff !important;
}
.ism-footer .btn.btn-primary:hover,
.ism-footer .btn.btn-primary:focus,
.ism-footer .btn.btn-primary:active {
  background: var(--bg-brand-secondary) !important;
  border-color: var(--bg-brand-secondary) !important;
  color: #fff !important;
}
.ism-footer .btn.btn-secondary {
  background: #fff !important;
  border-color: var(--bg-brand-primary) !important;
  color: var(--bg-brand-primary) !important;
}
.ism-footer .btn.btn-secondary:hover,
.ism-footer .btn.btn-secondary:focus,
.ism-footer .btn.btn-secondary:active {
  background: var(--bg-brand-secondary) !important;
  border-color: var(--bg-brand-secondary) !important;
  color: #fff !important;
}