/*
    Google fonts
    Poetson one, Raleway, Barlow
    @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poetsen+One&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
*/

/*
    Google fonts
    Cabin
*/

@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}
/* Offset for fixed header */
section[id] {
    scroll-margin-top: 50px; /* Adjust based on your header height */
}

.test-border{
    border:5px solid red;
}

:root {
    --primary-color: #5e17eb;
    --secondary-color: #30124e;
    --light-color: #f4f4f9;
    --dark-color: #121212;
    --navy-color: #2E015C;
    --black-color: #0F0F0F;
    --brand-blue1: #394074;
    --brand-blue11: #4E5CA9;
    --brand-blue2: #003A74;
    --brand-blue22: #0D82AF;
    --brand-blue3: #4E5CA9;
    --brand-blue33: #BAD7FF;
    --ARCIS-blue1: #4E5CA9;
    --ARCIS-blue2: #01A7DC;
    --ARCIS-blue3: #221F53;
    --ARCIS-blue4: #BAD7FF;
    --ARCIS-Indigo: #2B2C6C;
    --ARCIS-Grey1: #B8B8B8;
    --ARCIS-Grey2: #E6E6E6;
    --ARCIS-Grey3: #EEEFF2;

    --Title-size:18px;
    --Subtitle-size:14px;
}

body {
    /*margin-bottom: 60px;*/
    /*/font-family: "Raleway", sans-serif;*/
    font-family: "Cabin", sans-serif;
    color: var(--dark-color);
    scroll-behavior: smooth;
   
}
/* ARCIS Blue 1 Gradient (Second one) */
.blue1b {
    background: linear-gradient(to bottom, #003A74 25%, #4E5CA9 100%);
}

.Arcisblue2G {
    background: linear-gradient(to bottom, #2B2C6C 0%, #4E5CA9 100%);
}

.bg-arcis-blue1{
    background-color:var(--ARCIS-blue1);
}
.bg-arcis-blue2 {
    background-color: var(--ARCIS-blue2);
}
.bg-arcis-blue4 {
    background-color: var(--ARCIS-blue4);
}
.bg-arcis-indigo {
    background-color: var(--ARCIS-Indigo);
}

.btn-arcis-indigo {
    color: #fff;
    background-color: var(--ARCIS-blue1);
    border-color: #0d6efd;
}
    .btn-arcis-indigo:hover {
        color: #fff;
        background-color: var(--ARCIS-blue3);
        border-color: #0a58ca;
    }


/*.glass-form {
    background: rgba(255, 255, 255, 0.15);*/ /* Semi-transparent white */
    /*backdrop-filter: blur(12px);*/ /* Frosted glass effect */
    /*-webkit-backdrop-filter: blur(12px);*/ /* Safari support */
    /*border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}*/

.glass-form {
    background: rgba(20, 20, 30, 0.45); /* Darker semi-transparent background */
    backdrop-filter: blur(16px); /* Stronger blur for better glass effect */
    -webkit-backdrop-filter: blur(16px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle bright border */
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), /* Deeper shadow */
    inset 0 1px 0 rgba(255, 255, 255, 0.15); /* Subtle inner highlight */
}

.glass-form-control {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
}

    .glass-form-control::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }

    .glass-form-control:focus {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.2);
        color: white;
    }

.glass-btn-submit {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-weight: 600;
}

    .glass-btn-submit:hover {
        background: white;
    }


a{
    text-decoration:none;
}
/* navbar */
.navbar {
    --bs-emphasis-color-rgb: 255,255,255;
    background-color: var(--brand-blue1);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 1);
}

.nav-link, .navbar-brand {
    color:#fff !important;
}

/* Responsiveness of navbar */
@media(max-width:240px){
    .nav-link, .navbar-brand{
        font-size:0.7rem !important;
    }
    .navbar {
        --bs-navbar-toggler-padding-y: 0.15rem;
        --bs-navbar-toggler-padding-x: 0.15rem;
        --bs-navbar-toggler-font-size: 0.8rem;
    }
}

@media(max-width:118px){
    .hide{
        display:none;
    }
}
@media(max-width:80px) {
    .nav-link {
        font-size: 0.5rem;
    }
}

/* Hero Section */

.hero{
    min-height:100vh;
    background:linear-gradient(135deg,var(--secondary-color),var(--primary-color));
    color:var(--light-color);
    padding-top:150px;
    display:flex;
    /*align-items:center;*/
}
.tv-hero {
    height: 100vh;
    background-image: url(../imgs/banner/Banner-5.jpg);
    /*background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(../imgs/banner/Banner3.jpg);*/
    background-position: center;
    background-size: cover;
    padding-block: 8rem;
    color: #fff;
    width:100%;
   position:relative;
}
.tv-hero-content{
    position:absolute;
    width:50%;
    left:20.5% !important;
    /*align-self:flex-start;*/
}
.tv-hero h1 {
    font-size: 3rem;
    font-weight: 700;
}
/*
.hero-content{
    max-width:800px;
}
*/
.tv-hero-pills {
   /* background-color: rgba(0, 0, 0, 0.25);*/
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}

    .custom-btn {
    background-color: var(--primary-color);
    color: #fff;
    padding: 0.25rem 0.50rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #fff;
}
    .custom-btn:hover {
        background-color: var(--secondary-color);
        transform: translateY(-3px);
    }

.contact-btn {
    background-color: transparent;
    border: 2px solid #fff;
}

    .contact-btn:hover {
        background-color: #fff;
        color: var(--secondary-color);
    }

.tv-custom-btn {
    background-color: var(--primary-color);
   /* color: #fff;*/
    padding: 0.25rem 0.50rem;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #fff;
}

    .tv-custom-btn:hover {
        /*background-color: var(--secondary-color);*/
        transform: translateY(-3px);
    }



.discuss-btn {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.8);
    padding: 8px 32px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 50px; /* Pill shape */
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.discuss-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.discuss-btn i {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
}

.discuss-btn:hover i {
    transform: translateX(6px);
}


.tv-contact-btn {
    background-color: transparent;
    border: 2px solid #fff;
}

    .tv-contact-btn:hover {
        background-color: #fff;
        color: var(--secondary-color);
    }


.request-btn {
    
    border-radius: 5px !important;
}
.custom-card-header{
    height:200px;
    background-color:var(--navy-color);
    color:var(--light-color);
    display:flex;
    justify-content:center;
    align-items:center;
}
.custom-card-body {
    min-height: 200px;
}

.staff-item {
    position: relative;
    height: 250px;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 48px 8px;
}

.staff-overlay {
    justify-content:start;
    
}
.staff-overlay:hover {
    background: #45187E !important;
    border-radius: 8px 48px;
    color: var(--light-color)
}
.industry-img{
    width:100%;
    height:100%;
    object-fit:fill;
}

.sol-img {
    display: inline-block;
    padding: 10px;
    background: #45187e;
    border-radius: 12px;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 400ms;
}
.benefitswrapper {
    border-radius: 48px 8px;
    border: 1px solid var(--neutral-n-700, #E2E2E2);
    background: var(--extremes-white, #FFF);
    box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.10);
    padding: 20px;
    display: flex;
    height: 100%;
    padding: 20px 24px 35px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    transition: all .5s ease-out;
    position: relative;
}



.btn-right {
    display: flex; 
    justify-content: flex-end; 
    gap: 16px; 
    padding: 16px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.profile-img{
    height:350px;
    width:350px;
    object-fit:cover;
    border: 5px solid rgba(255,255,255,0.3);
}

staffcard {
    width: 300px;
    height: 180px;
    margin: 50px auto;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-family: system-ui, sans-serif;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    /* Initial: top-left + bottom-right rounded */
    border-top-left-radius: 40px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 40px !important;
    border-bottom-left-radius: 0 !important;
    transition: border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease, box-shadow 0.4s ease;
}

.staffcard:hover {
    /* Hover: top-right + bottom-left rounded */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 40px !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 40px !important;
    transform: scale(1.06) translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

/* Responsiveness of Hero Section */
@media(max-width:868px) {
    .tv-hero-content {
        left: 10% !important;
        width: 70%;
    }

    .tv-hero-content h1 {
        font-size: 25px;
        margin-top: 0 !important;
        padding: 0px;
    }

    .all-pill {
        gap: 2rem !important;
    }

        .all-pill img {
            width: 20px;
            height: 20px;
        }

    .pill-text {
        font-size: 15px !important;
    }
}
    @media(max-width:787px) {
        .hero {
            text-align: center;
            padding-bottom: 2rem;
        }

        .column-flow {
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .tv-hero-content {
            left: 10% !important;
            width: 70%;
        }

            .tv-hero-content h1 {
                font-size: 25px;
                margin-top: 0 !important;
                padding: 0px;
            }

        .all-pill {
            gap: 1rem !important;
        }

            .all-pill img {
                width: 20px;
                height: 20px;
            }

        .pill-text {
            font-size: 10px !important;
        }
    }

@media(max-width:580px) {
    .tv-hero-content {
        left: 10% !important;
        width: 70%;
    }

        .tv-hero-content h1 {
            font-size: 25px;
            margin-top: 0 !important;
            padding: 0px;
        }

    .all-pill {
        gap: 2rem !important;
    }

        .all-pill img {
            width: 20px;
            height: 20px;
        }

    .pill-text {
        font-size: 8px !important;
    }
}

@media(max-width:576px) {
    .tv-hero-content {
        left: 10% !important;
        width: 70%;
    }

        .tv-hero-content h1 {
            font-size: 25px;
            margin-top: 0 !important;
            padding: 0px;
        }

    .all-pill {
        gap: 0.5rem !important;
        flex-direction: row !important;
    }

        .all-pill img {
            width: 20px;
            height: 20px;
        }

    .pill-text {
        font-size: 8px !important;
    }
    .benefit-pill {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        
    }
}


@media(max-width:448px) {
    .tv-hero-content {
        left: 10% !important;
        width: 70%;
    }

        .tv-hero-content h1 {
            font-size: 25px;
            margin-top: 0 !important;
            padding: 0px;
        }
        .tv-hero-content p {
            font-size: 14px !important;
            
        }
    .custom-btn {
        font-size: 10px;
        padding: 0.1rem;
        word-break: break-word !important;
    }
    .all-pill {
        gap: 0.5rem !important;
        flex-direction: row !important;
    }

        .all-pill img {
            width: 20px;
            height: 20px;
        }

    .pill-text {
        font-size: 8px !important;
    }

    .benefit-pill {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media(max-width:414px) {
    .all-pill {
        gap: 0.5rem !important;
        flex-direction: column !important;
        padding-top: 0.1rem !important;
        padding-bottom: 0.1rem !important;
       
    }
    .pill-section{
        height:20vh !important;
    }
}
@media(max-width:364px) {
    .column-flow {
        
        margin-bottom: 0.5rem;
    }
}

    @media(max-width:480px) {
        .profile-img {
            width: 180px;
            height: 180px;
        }
    }

    @media(max-width:340px) {
        .column-flow {
            flex-direction: column;
            justify-content: unset;
        }
    }
    /* Responsiveness of Hero section */
    @media (max-width: 250px) {
        .tv-hero h1, tv-hero p {
            font-size: 14px !important;
        }

        .tv-hero {
            padding-block: 4rem;
            /*min-height:unset;*/
        }

        #hero_pills {
            font-size: 10px;
        }
    }

    @media(max-width:220px) {
        .profile-img {
            width: 70px;
            height: 70px;
        }

        .display-4, .lead {
            font-size: 13px !important;
        }

        .custom-btn {
            font-size: 13px;
            padding: 0.3rem;
            word-break: break-word !important;
        }
    }

    @media(max-width:128px) {
        .profile-img {
            width: 50px;
            height: 50px;
        }

        .display-4, .lead {
            font-size: 12px !important;
        }

        .custom-btn {
            font-size: 10px;
            padding: 0.1rem;
            word-break: break-word !important;
        }
    }

    /* Universal Section title */
    .section-title {
        position: relative;
        margin-bottom: 3rem;
        font-weight: 700;
    }

        /* Purple line in each section */
        .section-title::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 4px;
            background: var(--primary-color);
            left: 0;
            bottom: -10px;
        }

    /* Responsiveness of Universal Section title */
    @media(max-width:767px) {
        .section-title::after {
            left: 50%;
            transform: translateX(-50%);
        }
    }

    @media(max-width:220px) {
        .section-title {
            font-size: 13px !important;
        }

        .row > * {
            font-size: 12px !important;
        }

        .cv-btn {
            padding: 0.3rem;
        }
    }

    .services-item {
        position: relative;
        height: 250px;
        margin-bottom: 1rem;
        border-radius: 8px;
        overflow: hidden;
    }

        .services-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .services-item:hover img {
            transform: scale(1.1);
        }


    /* Portfolio */
    .portfolio-item {
        position: relative;
        height: 250px;
        margin-bottom: 1rem;
        border-radius: 8px;
        overflow: hidden;
    }

    .stafftest {
        height: 250px;
        border-top-left-radius: 40px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 40px;
        border-bottom-left-radius: 0;
        transition: border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease, box-shadow 0.4s ease;
    }

    .staff-child-test {
        height: 40vh;
        border-radius: 20px;
        transition: all 0.25s ease;
    }

    .stafftest:hover {
        /*opacity: 1*/; /*This is used to show the overlay*/
        /*background-color: var(--navy-color);*/
        border-top-left-radius: 0;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 40px;
        /*background: linear-gradient(135deg, #667eea, #764ba2) !important;*/
        background-color: #6C93F0;
        color: #fff;
    }

    .staff-icon {
        border-radius: 10px;
        transition: all 0.25s ease;
        /*background: linear-gradient(135deg, #667eea, #764ba2) !important;*/
        background-color: #6C93F0;
    }

        .staff-icon img {
            filter: brightness(0) invert(1);
        }

    .stafftest:hover .staff-icon {
        /*background: linear-gradient(135deg, #667eea, #764ba2) !important;*/
        background-color: white;
    }

    .staff-icon:hover {
        background-color: #fff !important;
    }

    .stafftest:hover .staff-icon img {
        filter: invert(1) brightness(0);
    }



    .hire-item {
        /* Initial: top-left + bottom-right rounded */
        border-top-left-radius: 40px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 40px;
        border-bottom-left-radius: 0;
        transition: border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease, box-shadow 0.4s ease;
    }

        .hire-item:hover {
            /* Hover: top-right + bottom-left rounded */
            border-top-left-radius: 0;
            border-top-right-radius: 40px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 40px;
            /*transform: scale(1.06) translateY(-10px);*/
        }

    /* Responsiveness of Jquery Filter Hire IT and Non IT */

    @media (max-width: 1199px) {
        .hireStaff .filter-item .photo img {
            height: 190px;
        }

        .hireStaff .filter-item div.all-it {
            height: 190px;
        }
    }

    @media (max-width: 991px) {
        .hireStaff .filter-item .photo img {
            height: 140px;
        }

        .hireStaff .filter-item div.all-it {
            height: 140px;
        }
    }

    @media (max-width: 767px) {
        .hireStaff .filter ul {
            padding-left: 0;
        }

            .hireStaff .filter ul li {
                display: block;
                margin-bottom: 10px;
            }

        .hireStaff .filter-item {
            width: 100%;
        }

            .hireStaff .filter-item div.all-it, .hireStaff .filter-item div.all-nonit {
                height: 300px;
            }


            .hireStaff .filter-item .inner {
                padding: 4px;
            }
    }

    @media (max-width: 575px) {
        .hireStaff .filter-item div.all-it, .hireStaff .filter-item div.all-nonit {
            height: auto;
            object-fit: none;
        }
    }


    .portfolio-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .portfolio-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        color: var(--black-color);
        text-align: center;
        padding: 0.7rem;
        /*opacity:0;*/ /*This is used to hide the overlay*/
        transition: opacity 0.4s ease;
        /*transition: border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease, box-shadow 0.4s ease;*/
    }

    .portfolio-item:hover .portfolio-overlay {
        /*opacity: 1*/; /*This is used to show the overlay*/
        /*background-color: var(--navy-color);*/
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: #fff;
    }

    .portfolio-item:hover img {
        transform: scale(1.1);
    }


    /* Responsiveness of Portfolio */
    @media(max-width:180px) {
        .portfolio-overlay > * {
            font-size: 11px;
        }
    }



    /*This is for Marquree for Industries we serve */

    /* The magic: move exactly half the track width (because duplicated) */
    @keyframes scroll-left {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(calc(-50% - var(--gap) / 2));
        }
    }

    /* Responsive: show fewer items on smaller screens */
    @media (max-width: 992px) {
        .marquee-item {
            flex: 0 0 calc(100% / 3); /* ~3 visible */
        }
    }

    @media (max-width: 600px) {
        .marquee-item {
            flex: 0 0 calc(100% / 2); /* ~2 visible */
        }
    }


    /* Responsiveness of Contact */

    @media (max-width: 250px) {
        .tv-hero h1 {
            font-size: 10px !important;
            font-weight: 100;
        }
    }