:root {
    --SA-25:#f7fdf9;
    --SA-50:#F3FcF6;
    --SA-100:#DFF6E7;
    --SA-200:#b8eacb;
    --SA-300:#88D8AD;
    --SA-400:#54c08a;
    --SA-500:#25935F;
    --SA-600: #1B8354;
    --SA-700:#166a45;
    --SA-800:#14573A;
    --SA-900:#104631;
    
    --Gray-25:#fcfcfd;
    --Gray-50:#F9FAFB;
    --Gray-100:#f3f4f6;
    --Gray-200:#e5e7eb;
    --Gray-300:#D2D6Db;
    --Gray-400:#9da4ae;
    --Gray-700:#384250;
    --Gray-800:#1f2a37;
    
    --Success-25:#F6FEF9;
    --Success-50:#ECFDF3;
    --Success-600:#079455;
    --Success-700:#067647;
    --Success-800:#14573a;
    
    --Error-50:#fef3f2;
    --Error-100:#fee4e2;
    --Error-300:#fda29b;
    --Error-500:#f04438;
    --Error-700:#B42318;
    
    --Info-600:#1570EF;
    --secondary-color: #DBA102;
    --tertiary-color: #80519F;
    
    --text-default:#161616;
    --spacing-0: 0px;
    --spacing-0-5: 2px;
    --spacing-1:4px;
    --spacing-1-5: 6px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --spacing-32: 128px;
    --spacing-40: 160px;
    --spacing-48: 192px;
    --spacing-56: 224px;
    --spacing-64: 256px;
    --spacing-96: 384px;
    --spacing-80: 320px;
    --spacing-120: 480px;
    --spacing-140: 560px;
    --spacing-160: 640px;
    --spacing-180: 720px;
    --spacing-192: 768px;
    --spacing-256: 1024px;
    --spacing-320: 1280px;
    --spacing-360: 1440px;
    --spacing-400: 1600px;
    --spacing-480: 1920px;
    --width-xxs: var(--spacing-80);
    --width-xs: var(--spacing-96);
    --width-sm: var(--spacing-120);
    --width-md: var(--spacing-140);
    --width-lg: var(--spacing-160);
    --width-xl: var(--spacing-192);
    --width-2xl: var(--spacing-256);
    --width-3xl: var(--spacing-320);
    --width-4xl: var(--spacing-360);
    --width-5xl: var(--spacing-400);
    --width-6xl: var(--spacing-480);
    
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
    --shadow-2xl:0px 240px 48px -12px rgb(16 24 40 / 18%);
    --shadow-inset: inset 0px 0 4px 2px rgba(0, 0, 0, 0.05);
}
.hidden {
  display: none;
}
.social-media{
    flex-wrap:wrap;
}
.social-media .tooltip-container a,.social-media .tooltip-container button{
    border: 1px solid white;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-media .tooltip-container a svg,.social-media .tooltip-container button svg{
    width:20px;
    height:20px;
}
.custom-select {
 position: relative;
}
.custom-select .options {
 display: none;
 position: absolute;
 width: 100%;
 background: white;
 border: 1px solid var(--Gray-300);
 max-height: 200px;
 overflow-y: auto;
list-style: none;
padding: 8px;
border-radius: 4px;
margin-top: 5px;
z-index:1;
}
.custom-select.open .options {
 display: block;
}
.custom-select .options li svg{
    display:none;
}
.custom-select .options li.active {
 display: flex;
align-items: center;
justify-content: space-between;
}
.custom-select .options li.active svg{
    display:block;
}
.custom-select .options .check-icon {
 position: absolute;
 right: 8px;
 top: 50%;
 transform: translateY(-50%);
 width: 16px;
 height: 16px;
 color: #000; /* uses stroke="currentColor" */
}

.service-page {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 24px;
 align-items: start;
}
/* LEFT SIDE */
.main-content {
 background: white;
 padding: 24px;
 border-radius: 12px;
 
}
.hero {
 display: flex;
 justify-content: space-between;
 gap: 20px;
 margin-bottom: 30px;
}
.hero h1 {
 font-size: 32px;
 margin-bottom: 12px;
}
/*.tags {*/
/* display: flex;*/
/* gap: 10px;*/
/* margin-bottom: 12px;*/
/* flex-wrap: wrap;*/
/*}*/
/*.tags span {*/
/* background: #eef2ee;*/
/* padding: 6px 10px;*/
/* border-radius: 20px;*/
/* font-size: 14px;*/
/*}*/
.hero p {
 line-height: 1.7;
 color: #666;
}
.start-btn {
 background: #008a4e;
 color: white;
 border: none;
 padding: 14px 22px;
 border-radius: 8px;
 cursor: pointer;
 height: fit-content;
}
.sidebar {
 display: flex;
 flex-direction: column;
     background: white;
    border: 1px solid #d2d6db;
    padding: 32px;
    border-radius: 16px;
        margin-top: -140px;
}
.sidebar.contactus{
    margin-top: -140px;
}
.card {
 background: white;
 padding: 20px;
 border-radius: 12px;
}
.card h3 {
 margin-bottom: 8px;
 font-size: 16px;
}
.card p {
 color: #666;
}
/* RESPONSIVE */
@media (max-width: 991px) {
 .service-page {
   grid-template-columns: 1fr;
 }
 .hero {
   flex-direction: column;
 }
 .start-btn {
   width: 100%;
 }
 .sidebar {
   order: 2;
       margin-top: 0;
 }
 .sidebar.contactus{
     margin-top: 0;
 }
 .service-main-content{
     grid-column: span 12 !important;
 }
}
.service-hero-section{
    background-color: var(--SA-50);
    padding: 40px 0;
    width: 100%;
}
.service-grid{
    margin-top: 0px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
    align-items: start;
}
.service-main-content{
        grid-column: span 8;
}
.sidebar-list-title {
    color: var(--text-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
    padding: 0;
}
.sidebar-list-title svg{
    width: 24px;
    height: 24px;
}
.sidebar-list-link {
    color: var(--text-default, #161616);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    padding: 0;
}
.action-button {
    background-color: var(--SA-600);
    padding: 5px 15px;
    border-radius: 4px;
    color: white;
    border: none;
    width: fit-content;
    white-space: nowrap;
    height: 40px;
        display: flex;
    align-items: center;
}

    .action-button:hover {
        background-color: var(--SA-700);
    }
    .action-button:active{
        background-color:var(--SA-900);
    }
    .action-button:checked{
        background-color:var(--SA-900);
    }

    .action-button:focus {
        box-shadow: 0 0 0 3px black;
        outline:1.5px solid white !important;
    }
    .action-button.disabled,.action-button:disabled{
        background-color:var(--Gray-200);
        cursor:auto;
    }
.upload-area{
border:1px dashed var(--Gray-300);
border-radius:4px;
padding:30px;
text-align:center;
cursor:pointer;
transition:.3s;
background-color:var(--Gray-100);
}
.upload-area.dragover{
    border-width:2px;
border-color:var(--Success-700);
background:var(--Success-25);
}
.upload-area .main-text{
    color:var(--Gray-800);
    font-size:24px;
}
.upload-area p {
    color:var(--Gray-700);
    font-size:18px;
}
.upload-area.dragover p{
    color:var(--Success-700);
}
.upload-area.dragover img{
    filter: brightness(0) saturate(100%) invert(34%) sepia(11%) saturate(3612%) hue-rotate(107deg) brightness(96%) contrast(95%);
}
.upload-area .browse{
    background:transparent;
    border:none;
    height:32px;
    border-radius:4px;
    padding:0 12px;
}
.upload-area.dragover .browse{
    background:var(--Gray-200);
    color:var(--Gray-400);
}
.file-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 12px;
border:1px solid #eee;
border-radius:6px;
margin-bottom:8px;
font-size:14px;
background-color:var(--Gray-100);
}
.file-status{
font-size:12px;
color:gray;
margin-left:10px;
}
.remove-file{
    background-color: transparent;
    border: none;
}
.remove-file svg{
    pointer-event:none;
}
.input-line{
    position: relative;
}
.form-control:hover,.form-select:hover{
    border-color:black;
}
/*.form-control:active{*/
/*    border-color:black;*/
/*}*/
.form-control:focus,.form-select:focus{
    border-color:#dee2e6;
    box-shadow: none;
}
.input-line::before{
  content:"";
  position:absolute;
  bottom:0;
  right:50%;
  width:50%;
  height:2px;
  border-radius:0 0 0 6px;
  background-color:black;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s;
}
.input-line.has-danger::before{
    bottom: 25px;
    background-color:var(--Error-700);
}

.input-line:focus-within::before{
  transform:scaleX(1);
}
.input-line::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:50%;
  height:2px;
  border-radius:0 0 6px 0;
  background:black;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s;
}
.input-line.has-danger::after{
    bottom: 25px;
    background-color:var(--Error-700);
}
.input-line:focus-within::after {
    transform:scaleX(1);
}


/*.form-control:checked{*/
/*    border-color:blue;*/
/*}*/

.form-check-input[type=radio]{
    border-color:#6C737F;
    position:relative;
}
.form-check-input:hover[type=radio]{
        box-shadow: 0 0 0 8px var(--Gray-100);
        background-color: var(--Gray-100);
}
.form-check-input:active[type=radio]{
    background-color:#6C737F;
}
.form-check-input:checked[type=radio]{
    --bs-form-check-bg-image:none;
}
.form-check-input:focus[type=radio]{
    box-shadow:none;
}
.form-check-input:checked{
        background-color: var(--SA-600);
    border: 3px solid white;
    outline: 1px solid var(--SA-600);
}
.form-check-input:checked:hover{
    box-shadow: 0 0 0 8px var(--Gray-100);
    background-color:var(--SA-800);
    border-color:var(--Gray-100);
    outline-color:var(--SA-800);
}
.form-check-input:checked:active{
    box-shadow: 0 0 0 8px var(--Gray-100);
    background-color:var(--SA-900);
    border-color:var(--Gray-100);
    outline-color:var(--SA-900);
}
.radioFields .form-check-input.is-invalid ~ .form-check-label, .radioFields .form-check-input.is-valid ~ .form-check-label {
    color: black !important;
}

.radioFields .form-check-input.is-invalid, .radioFields .radioFields {
    border-color: var(--bs-border-color) !important;
}
textarea.form-control:active{
    background-color:var(--Gray-100);
}
input:active[type="text"]{
    background-color:var(--Gray-100);
}