:root {
    --primary: #605DBA;
    --dark-grey: #343F52;
    --light-silver: #F7F7F7;
}
.bg-dark-grey{
    background-color: var(--dark-grey);
}
.bg-primary{
    background-color: var(--primary)!important;
}
@font-face {
    font-family: 'THICCCBOI';
    src: url('/fonts/THICCCBOI-Regular.woff2') format('woff2'),
         url('/fonts/THICCCBOI-Bold.woff2') format('woff2'),
         url('/fonts/THICCCBOI-ThicccAF.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
.navbar-nav .nav-link {
    font-weight: bold;
}
body {
    font-family: 'THICCCBOI', sans-serif;
    color: var(--dark-grey);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#content-wrap {
    flex: 1 0 auto; /* This will ensure that the content section takes up all the available space and pushes the footer to the bottom */
}

.pagehead {
    background-image: url('/img/hero.jpg');
    background-size: cover;
    background-position: center center;
    color: #fff;
    padding: 35px;
}
.pagehead h1{
    font-size: 38px;
    font-weight: 950;
    margin-bottom: 0;
}
.pagehead span{
    margin-top: 0;
    font-size: 19px;
}
.footer {
    background-color: var(--dark-grey);
    color: var(--light-silver);
    padding: 40px 0;
    flex-shrink: 0;
}
.footer .social i {
    margin-left: 10px;
}
.footer .industries{
    list-style: none;
    padding: 0;
}
.footer .industries li a{
    color: var(--light-silver);
    text-decoration: none;
}
.footer .industries li a:hover{
    color: #d0d0d0;
}
.secthead{
    text-align: center;
}
.secthead h2{
    font-weight: 950;
}
.sectbox{
    background: var(--light-silver);
    border-radius: 5px;
    padding: 25px;
    text-align: center;
}
.sectbox h3{
    text-align: center;
}
.sectbox .icon-wrapper {
    display: inline-block;
    background-color: var(--primary);
    border-radius: 50%; /* This will make it circular */
    padding: 20px;
    transition: background-color 0.3s ease; /* This will animate the color change */
    line-height: 0;
    margin-bottom: 15px;
}

.sectbox .icon-wrapper:hover {
    background-color: var(--dark-grey);
}

.sectbox .icon-wrapper .fa {
    color: white;
    font-size: 2rem;
    margin: 0;
    padding: 0;
}

/* Light Button */
.btn-light {
    background-color: var(--light-silver);
    border: none;
    color: var(--dark-grey);
    /* padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px; */
    transition: all 0.5s;
    cursor: pointer;
}

.btn-light:hover {
    background-color: var(--primary);
    color: var(--light-silver);
}

/* Dark Button */
.btn-dark {
    background-color: var(--dark-grey);
    border: none;
    color: var(--light-silver);
    /* padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px; */
    transition: all 0.5s;
    cursor: pointer;
}

.btn-dark:hover {
    background-color: var(--primary);
    color: #fff;
}

.managed-services-intro,
.managed-services-others {
    color: var(--dark-grey);
}

.managed-services-item {
    text-align: center;
    padding: 15px;
    color: var(--dark-grey);
}

.managed-services-item h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.managed-services-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.managed-services-icon:hover {
    color: var(--dark-grey);
    transition: all 0.5s;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 950;
}

.subfoot{
    color: var(--light-silver);
}

.it-staffing {
    padding: 60px 0;
}

.it-staffing h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.it-staffing .lead {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.it-staffing h2 {
    font-size: 2rem;
    margin-top: 40px;
    margin-bottom: 20px;
}

.it-staffing p {
    margin-bottom: 20px;
}

.it-staffing ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 40px;
}

.it-staffing .card {
    border: none;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.it-staffing .form-control {
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 20px;
}

/* .it-staffing .btn {
    background-color: #7141B1;
    color: #fff;
} */

.diahco {
    padding: 60px 0;
}

.diahco h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.diahco .lead {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.diahco h2 {
    font-size: 2rem;
    margin-top: 40px;
    margin-bottom: 20px;
}

.diahco p {
    margin-bottom: 20px;
}

.diahco ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 40px;
}

.diahco .card {
    border: none;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.diahco .form-control {
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 20px;
}

/* .diahco .btn {
    background-color: #7141B1;
    color: #fff;
} */

.managed-services {
    padding: 60px 0;
}

.managed-services h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.managed-services .lead {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.managed-services h2 {
    font-size: 2rem;
    margin-top: 40px;
    margin-bottom: 20px;
}

.managed-services p {
    margin-bottom: 20px;
}

.managed-services ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 40px;
}

.managed-services .card {
    border: none;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.managed-services .form-control {
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 20px;
}

/* .managed-services .btn {
    background-color: #7141B1;
    color: #fff;
} */

.about-us {
    padding: 60px 0;
}

.about-us h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-us .lead {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.about-us h2 {
    font-size: 2rem;
    margin-top: 40px;
    margin-bottom: 20px;
}

.about-us p {
    margin-bottom: 20px;
}

.about-us .card {
    border: none;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.about-us .form-control {
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 20px;
}

/* .about-us .btn {
    background-color: #7141B1;
    color: #fff;
} */

.contact-us {
    padding: 60px 0;
}

.contact-us h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.contact-us .lead {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.contact-us .form-group {
    margin-bottom: 20px;
}

.contact-us .form-control {
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
}

/* .contact-us .btn {
    background-color: #7141B1;
    color: #fff;
} */

.services-page {
    padding: 60px 0;
}

.services-page h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.services-page .lead {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.page-index{
    .about-us, .why-choose-us, .testimonials, .contact-us {
        padding: 60px 0;
    }
    
    .about-us p, .why-choose-us p, .testimonials p, .contact-us p {
        font-size: 18px;
        color: #666;
        line-height: 1.6;
    }
        
    @media (max-width: 768px) {
        .about-us .row, .testimonials .row {
            flex-direction: column-reverse;
        }
    }
}


.industry {
    padding: 60px 0;
}

.industry h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.industry .lead {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.industry h2 {
    font-size: 2rem;
    margin-top: 40px;
    margin-bottom: 20px;
}

.industry p {
    margin-bottom: 20px;
}

.industry ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 40px;
}

.industry .card {
    border: none;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.industry .form-control {
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 20px;
}

#sidebarMenu {
    position: relative;  /* establish a new positioning context for the pseudo-element */
}

#sidebarMenu::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;  /* move it to the left by the full width of the viewport */
    width: 100vw;  /* make it as wide as the viewport */
    background-color: inherit;  /* use the same background color as the sidebar */
    z-index: -1;  /* place it behind the sidebar content */
}

.sidebar .nav-link {
    background: var(--dark-grey);
    color: var(--light-silver);
    margin-left: 10px;
    border-radius: 8px;
    transition: all 0.5s;
    margin-bottom: 5px;
}
.sidebar .nav-link:hover{
    background-color: var(--primary);
}
.sidebar .active{
    background-color: var(--primary);
}
main{
    flex-grow: 1;
}
@keyframes flash {
    0% { background-color: #ffffff; }
    50% { background-color: #198754; color: #fff;}
    100% { background-color: #ffffff; color: var(--dark-grey);}
}

.flash {
    animation-name: flash;
    animation-duration: 2s;
}

.devicecard a{
    text-decoration: none;
    color: var(--dark-grey);
}
.devicecard a:hover{
    color: var(--primary);
}
.cell-content-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}
.width-fifteen{
    width: 15%;
}
a{
    color: var(--dark-grey);
}
a:hover{
    color: var(--primary);
}

.uha-computing {
    padding: 60px 0;
}

.uha-computing h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.uha-computing .lead {
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.uha-computing h2 {
    font-size: 2rem;
    margin-top: 40px;
    margin-bottom: 20px;
}

.uha-computing p {
    margin-bottom: 20px;
}

.uha-computing ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 40px;
}

.uha-computing .card {
    border: none;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.uha-computing .form-control {
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    margin-bottom: 20px;
}
.btn-group {
    display: flex;
    gap: 5px; /* Adjust the value as needed */
}