@font-face {
    font-family: 'LemonMilkBold';
    src: url(/font/Lemon-Milk/Lemon\ Milk\ Pro\ Medium.otf) format('opentype');
    ;
}

@font-face {
    font-family: 'ExtraLemonMilkBold';
    src: url(/font/Lemon-Milk/Lemon\ Milk\ Pro\ Bold.otf) format('opentype');
    ;
}

@font-face {
    font-family: 'LemonMilk';
    src: url(/font/Lemon-Milk/Lemon\ Milk\ Pro\ Regular.otf) format('opentype');
    ;
}

@font-face {
    font-family: 'LemonMilkLight';
    src: url(/font/Lemon-Milk/Lemon\ Milk\ Pro\ Ultra\ Light.otf) format('opentype');
    ;
}
@font-face {
    font-family: 'Gilroy-Medium';
    src: url(/font/Gilroy-Medium.ttf) format('opentype');
    ;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins: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=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    --orange: #f5a55b;
}
body{
    background-color: #fff;
}
.genai .home-container {
    background-color: #fff;
    height: max-content;
    min-height: 100vh;
}

.genai .home-container-intial {
    background-color: #fff;
    height: max-content;
    min-height: 90vh;
}

.genai.banner-headsub {
    height: 40vh;
    background-image: url("/images/scaleitem1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}

.automation .genai.banner-headsub {
    background-image: url("/images/automation\ banner.jpg");
}
.cloud .genai.banner-headsub {
    background-image: url("/images/Cloud\ transformation\ banner.jpg");
}

.analytics .genai.banner-headsub {
    background-image: url("/images/analytics.jpg");
}

.ai .genai.banner-headsub {

    background-image: url("/images/generative\ ai\ banner.jpg");
}

.manage .genai.banner-headsub {
    background-image: url("/images/generative\ ai\ banner.jpg");
}

.Offshore .genai.banner-headsub {
    background-image: url("/images/abt.jpg");
}

.STRATEGIC .genai.banner-headsub {
    background-image: url("/images/STRATEGIC\ SECURITY.jpg");
}

.COGNITIVE .genai.banner-headsub {
    background-image: url("/images/COGNITIVE.jpg");

}

.webdev .genai.banner-headsub {
    background-image: url("/images/web\ devevelopment.jpg");

}

.mobdev .banner-headsub {
    background-image: url("/images/mobile\ develpment.jpg");
}
.boundlessPossibilities .banner-headsub {
    background-image: url("/images/BOUNDLESS\ POSSIBLITIES\ Banner.jpg");
}

.innovation .banner-headsub{
    background-image: url("/images/INNOVATION\ banner.jpg");
}

.top-genai .banner-headsub{
    background-image: url("/images/TOP\ GEN\ AI\ banner.jpg");
}

.Pulse-Change .banner-headsub{
    background-image: url("/images/CASE\ STUDY\ Banner.jpg");
}
.privacy-matters .banner-headsub{
    background-image: url("/images/YOUR\ PRIVACY\ MATTERS\ Banner.jpg");
}
.genai .banner-head2 {
    min-height: 62vh;
    background-color: #fff;
    height: max-content
}

.subnavitems {
    /* background-color: red; */
    height: 80px;

    overflow-x: auto;
    /* Enable horizontal scrolling */
    white-space: nowrap;
    /* Ensure items stay in a single line */
    -webkit-overflow-scrolling: touch;
    /* Enable smooth scrolling on iOS */
    -ms-overflow-style: none;
    /* Hide scrollbar on IE and Edge */
    scrollbar-width: none;
    /* Hide scrollbar on Firefox */
}

.subnavitems::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar on Chrome and Safari */
}

.subnavitems a {
    color: #000;
}

.subnavitems i {
    color: var(--orange);
}

.subnavitems a,
.subnavitems span {
    display: inline-block;
    /* Ensure items display in a line */
    vertical-align: middle;
    /* Align items vertically in the middle */
    white-space: nowrap;
    /* Prevent line break within items */
}

.subnavitems a {
    padding: 0 10px;
    /* Add padding to each item */
}

.genai .description img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover;

}


.genai .description .detail {
    color: #000;
    font-family: Gilroy-Medium;
    min-height: 45vh;
}



.banner-headsub h1,
.enquiry-contaier h1 {
    text-transform: uppercase;
    font-size: calc(2.5em + 1vw);
    font-family: "LemonMilkBold";

}

.des-container {
    color: #000;
    width: 90%;
    height: 100%;
    font-family: Gilroy-Medium;
    margin: auto;
}

.des-content {

    width: 100%;
    height: 100%;
    margin: auto;
}

.genai .enquiry-contaier {
    height: 30vh;
    height: max-content;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    position: relative;
    font-family: Gilroy-Medium;

}

.genai .enquiry-contaier img {
    height: 100%;
    width: 100%;
    z-index: -1;
    position: absolute;
    /* filter: blur(3px); */
    object-fit: cover;
}

.genai .enquiry-contaier .newcontainer {
    height: 30vh;
    height: max-content;
    text-transform: uppercase;
    font-family: 'LemonMilk';
}


.genai .card-container {
    color: #000;
    font-family: Gilroy-Medium;
    min-height: 60vh;
    background-color: #fff;
    word-break: break-all;
}

.genai .card-container .container-carrier {
    width: 90%;
    margin: auto
}

.genai .card-container .container-carrier .card-items {
    gap: 5rem;

}

.genai .card-container .container-carrier .card-items .card {
    height: 50vh;
}

.genai .card-container .container-carrier .card-items .card {
    max-width: 100%;
    max-height: 60vh;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: 0%;
}

/* .genai .card-container .container-carrier .card-items .card-item{
   width:48% 
}*/
.genai .enquiry-contaier {
    min-height: 30vh;
    height: max-content;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    position: relative;
    font-family: Gilroy-Medium;
    background-color: #fff;

}

.genai .enquiry-contaier img {
    height: 100%;
    width: 100%;
    z-index: -1;
    position: absolute;
    filter: blur(3px);
}

.genai .enquiry-contaier .newcontainer {
    min-height: 30vh;
    height: max-content;
}

.genai .card-container .container-carrier .card-items .card {
    height: max-content;
}

.genai .card-container .container-carrier .card-items .card img {
    object-fit: cover;
    width: 100%;
    height: 100%;

}

.genai .card-container .container-carrier .card-items .card .card-info-wrapper {
    width: 90%;
    word-break: keep-all;
    background-color: #fff;
    min-height: 60vh;
    color: #000;
    position: absolute;
    /* transform: translateY(450px);
    -webkit-transform: translateY(450px);
    
    -webkit-transition: all .7s ease-in-out; */
    top: 78%;
    transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
}

.genai .card-container .container-carrier .card-items .card .card-img-overlay:hover {
    border: 0;
}

.genai .card-container .container-carrier .card-items .card .card-img-overlay {
    display: flex;
    justify-content: center;
}

.genai .card-container .container-carrier .card-items .card:hover .card-info-wrapper {
    top: calc(50% - 10px);
}

.upword-arrow {
    position: absolute;
    top: 9%;
    left: 95%;
    font-size: 18px
}

.genai .card-container .container-carrier .card-items .card:hover .card-info-wrapper .upword-arrow {
    display: none
}

.bounce {
    animation: bounce 2s ease infinite;
}


.divider {
    width: 2px;
    height: 100%;
    background-color: #808080;
}



.genai .join-us-container {
    min-height: 30vh;
    background-color: #fff;
    color: #000;
}

.genai .join-us-container h1 {
    text-transform: uppercase;
    text-align: center;
    font-family: 'LemonMilk';
}

.genai .join-us-container h4 {
    font-family:Gilroy-Medium;
}


.imagelist {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 20px;


}

.imagelist .boximageslist {
    /* background-color: #1C242C; */
    height: 450px;
    width: 100%;
    overflow: hidden;
    position: relative;

}

.imagelist .boximageslist img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.boximageslist .listimagepopup {
    width: 100%;
    height: 100%;
    /* background-color: #090a0a91; */
    position: absolute;
    top: 80%;
    left: 0;
    z-index: 1;
    color: #fff;
    text-align: center;
    padding: 15px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    cursor: pointer;

    transition: 0.3s;
    transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;

}

.boximageslist .listimagepopup h1 {
    font-size: 17px;
    font-family: Gilroy-Medium;
    font-weight: 600;
}

.boximageslist:hover .listimagepopup {
    top: 0%;
}

.imagelist .boximageslist:hover img {
    filter: blur(2px)
}

.listimagepopup .bold {
    font-weight: 600;
}

.med-font {
    font-weight: 600;
}

.join-us-container h2 {
    font-family: Gilroy-Medium;
}
.join-us-container h5{
    font-family: Gilroy-Medium;
}
.join-us-container{
    font-family: Gilroy-Medium;
}

.subnavitems .headeritem h5{
    font-family: Gilroy-Medium;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0)
    }

    40% {
        transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
    }
}

@media only screen and (max-width: 767px) {
    .genai .card-container .container-carrier {
        width: 100%;
        margin: auto
    }

    .genai .card-container .container-carrier .info {
        width: 90%;
        margin: auto
    }

    .genai .card-container .container-carrier .card-items {
        gap: 3rem;
    }

    .genai .card-container .container-carrier .card-items .card-item {
        width: 100%
    }

    .genai .card-container .container-carrier .card-items .card:hover .card-info-wrapper {
        top: 38%
    }
}

@media only screen and (max-width: 992px) {
    .genai .card-container .container-carrier .card-items .card-item {
        width: 100%;
    }

    .genai .card-container .container-carrier .card-items .card:hover .card-info-wrapper {
        top: 45%
    }
}

@media only screen and (max-width: 1300px) {
    .genai .card-container .container-carrier .card-items .card:hover .card-info-wrapper {
        top: 35%
    }


}


@media only screen and (max-width: 950px) {
    .subnavitems {
        display: flex;
        justify-content: left !important;

    }


}

@media only screen and (max-width: 1250px) {

    .automation .subnavitems,
    .dataanalytics .subnavitems {
        display: flex;
        justify-content: left !important;

    }


}

@media only screen and (max-width: 1350px) {
    .web-dev .subnavitems {
        display: flex;
        justify-content: left !important;

    }


}

@media only screen and (max-width: 767px) {
    .des-container {
        width: 100%;
        height: 100%;
        margin: auto;
    }

    .des-content {

        width: 90%;
        height: 100%;
        margin: auto;
    }

    .imagelist {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 10px;


    }
}

@media only screen and (min-width: 992px) {
    .card-items .content1 {
        padding-right: 50px;
        border-right: 2px solid #808080;
    }

    .card-items .content2 {
        padding-left: 50px;
        border-left: 2px solid #808080;

    }

    .web-dev .card-items .content1 {
        padding-right: 50px;
        border-right: 4px solid #808080;
    }

    .web-dev .card-items .content2 {
        padding-left: 50px;
        border-left: 0px solid #808080;

    }

    .genai .dta {
        min-height: content;
        min-height: 20vh;
    }
}


@media only screen and (max-width: 573px) {
    .genai.banner-headsub {
        height: 20vh;
        
    }

  
}

@media only screen and (max-width: 573px) {
 .genai .enquiry-contaier{
        min-height:25vh;
    }
.genai .enquiry-contaier .newcontainer {
  min-height:25vh
}
}

