.software-hero-container { background: var(--kal-grey);}
.software-hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; z-index: 0;}

/* Breadcrumb */
.sh-breadcrumb-wrapper{ position: absolute; top: 0; left: 0;right: 0; height: min-content; z-index: 9;}
.software-hero-container .breadcrumb-wrapper { position: relative;height: 60px; background: var(--kal-black); }
.software-hero-container .breadcrumb-wrapper::after { content: ''; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; background-color: var(--kal-black); z-index: 0; }
.software-hero-container .breadcrumb-icon { width: 60px; height: 60px; background-color: var(--kal-blue); position: absolute; left: 100%;padding: 12px;}

.software-hero-content-wrapper { padding-top: 60px; padding-right: 25px; }
.software-hero-content-wrapper::before { position: absolute; content: ''; top: 0; right: 100%; width: 50vw; height: 100%; background: inherit; }
.software-hero-content { max-width: 555px;padding: 50px 0; }
.sh-content-text{font-size: 20px;font-weight: 600;}
.sh-content-text h1 { font-size: 72px; line-height: 0.85; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 52px; }
.shc-btn-group { padding-top: 56px; gap: 60px; }

.sh-content-img { margin-right: -15px; padding: 75px 0 220px;}
.shc-img-group { width: 100%; height: 513px; padding-left: 20%; }
.shci-group-img-1 { padding-bottom: 58%; }
.shci-group-img-1 img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.shci-group-img-2-wrapper { position: absolute; bottom: 18%; left: 7%; width: 100%; max-width: 28%; }
.shci-group-img-2 { padding-bottom: 58%; width: 100%; }
.shci-group-img-2 img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.shci-group-img-3-wrapper { position: absolute; top: 100%; left: 38%; width: 100%; max-width: 33%; margin-top: -48px; }
.shci-group-img-3 { padding-bottom: 58%; width: 100%; }
.shci-group-img-3 img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

@media (max-width:1599.98px) { 
    .shc-btn-group { padding-top: 40px;  gap: 22px;}
}

/* ========================================== 
! Large devices (desktops, less than 1400px)
=========================================== */
@media (max-width:1399.98px) { 
    .software-hero-container .breadcrumb-wrapper { width: calc(100% + 30px);   }
    .software-hero-container .breadcrumb-icon {   }

    .software-hero-content-wrapper { width: calc(100% + 30px);}
    .sh-content-text h1 { font-size: 50px; margin-bottom: 24px; }
    .shc-btn-group { padding-top: 40px;  gap: 30px;}
    .shc-btn-group a { min-width: 184px;}
    .sh-content-img { padding: 40px 0 180px; }
    .shc-img-group { height: 339px; padding-left: 23%; }
    .shci-group-img-2-wrapper { left: 10%; }
    .shci-group-img-3-wrapper { left: 41%; margin-top: -30px; }
}

/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) { 
    .software-hero-container .breadcrumb-wrapper { width: 100%; }
    .software-hero-container .breadcrumb-icon { position: relative; inset: 0; }

    .software-hero-content-wrapper { padding-right: 0; width: 100%; }
    .software-hero-content-wrapper::after { position: absolute; content: ''; top: 0; left: 100%; width: 50vw; height: 100%; background-color: var(--kal-green); background: inherit; }
    .software-hero-content { max-width: 100%; padding: 77px 0 68px;}
    .sh-content-text h1 { font-size: 60px;  margin-bottom: 34px; }
    .shc-btn-group { padding-top: 30px; }

    .sh-content-img { margin: 0; padding: 55px 0 85px; }
    .shc-img-group { padding: 0 10%; height: 385px; margin-left: 25px; }
    .shci-group-img-2-wrapper { left: 4%; bottom: 0; top: 29%; }
    .shci-group-img-3-wrapper { left: 39%; margin-top: 0; top: 70%; }
}

/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) { 
    .software-hero-container .col-md-9:has(.software-hero-content-wrapper){margin: 0 auto;}
    .software-hero-content { padding: 61px 0 78px; }
    .sh-content-text h1 { font-size: 50px; margin-bottom: 12px; }
    .shc-btn-group { padding-top: 24px; }

    .sh-content-img { padding: 75px 0 105px; }
    .shc-img-group { padding: 0 13% 0 17%; margin-left: 0px; height: 301px; }
    .shci-group-img-2-wrapper { top: 20%; left: 5%; max-width: 24%; }
    .shci-group-img-3-wrapper { max-width: 29%; left: 44%; }
}

/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px) { 
  
 
    .software-hero-content { padding: 35px 0 38px; }
    .sh-content-text {font-size: 18px;}
    .sh-content-text h1 { font-size: 45px; margin-bottom: 24px; }
    .shc-btn-group { padding-top: 24px; }

    .sh-content-img { padding: 50px 0 110px; margin-right: -15px; }
    .shc-img-group { padding: 0 0 0 15%; height: 312px; }
    .shci-group-img-2-wrapper { max-width: 30%; left: 3%; }
    .shci-group-img-3-wrapper { max-width: 35%; left: 36%; top: 80%;}
  
    .software-hero-container .breadcrumb-wrapper { max-width: 80%; width: max-content;height: 50px; }

}

/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:575.98px) { 
    
    .shci-group-img-2-wrapper { max-width: 45%; }
    .shci-group-img-3-wrapper { max-width: 54%; top: 73%;}
}

/* ======================================================
! Extra small devices (portrait phones, less than 370px)
====================================================== */
@media (max-width:369.98px) { }