@font-face {
    font-family: 'Muli-Regular';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Muli-Regular.ttf') format('woff');
}

@font-face {
    font-family: 'Muli-Bold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Muli-Bold.ttf') format('woff');
}

@font-face {
    font-family: 'sansserif-bold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/sansserif-bold.ttf') format('woff');
}

@font-face {
    font-family: 'arial';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/arial.ttf') format('woff');
}

@font-face {
    font-family: 'arialbd';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/arialbd.ttf') format('woff');
}
@font-face {
    font-family: 'FuturaPT-Medium';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/FuturaPT-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Tungsten-SemiBold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Tungsten-SemiBold.ttf') format('woff');
}
@font-face {
    font-family: 'Sequel-Sans-Bold-Head';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Sequel-Sans-Bold-Head.otf') format('woff');
}
@font-face {
    font-family: 'Sequel-Sans-Medium-Body';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Sequel-Sans-Medium-Body.otf') format('woff');
}
@font-face {
    font-family: 'TestSöhne-Buch';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/TestSöhne-Buch.otf') format('woff');
}
@font-face {
    font-family: 'MYRIADPRO-REGULAR';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/MYRIADPRO-REGULAR.OTF') format('woff');
}
:root {
    --FuturaPT-Medium:'FuturaPT-Medium';
    --MYRIADPRO-SEMIBOLD: 'MYRIADPRO-SEMIBOLD';
    --MYRIADPRO-REGULAR: 'MYRIADPRO-REGULAR';
    --TestSöhne-Buch: 'TestSöhne-Buch';
    --Tungsten-SemiBold: 'Tungsten-SemiBold';
    --sequel-head: 'Sequel-Sans-Bold-Head';
    --sequel-body:  'Sequel-Sans-Medium-Body';
    --blue-color: #3413D8;
    --white-color: #fff;
    --black-color: #000;
    --black-heading-para: #1c1c1c;
    --para-color: #151830;
    --yellow-color: rgba(255, 247, 0, 1);
    --orange-color: rgb(255, 123, 0);
    --mid-orange: rgb(248, 156, 7);
    --yellow-shade: rgb(225, 169, 29);
    --sansbold-font: 'sansserif-bold';
    --arial-font: 'arial';
    --arialbold-font: 'arialbd';
    --mulireg-font: 'Muli-Regular';
    --mulibold-font: 'Muli-Bold';
    --solution-blue-color: #0D2A3C;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.hero-content h4 {
    font-family: var(--sequel-head);
    color: var(--white-color);
    font-size: 20px;
}
.hero-content h2{
    font-family: var(--sequel-head);
    color: var(--white-color);
    font-size: 25px;
}
.hero-content p{
    font-family: var(--sequel-body);
    color: var(--white-color);
    font-size: 12px;
}

.hero-content .autoparamanage, .threeservices figcaption {
    font-family: var( --MYRIADPRO-REGULAR);
    font-size: 14px;
}
.overview h2, .rightsection h5, .rightsection-h1, .suite-h1, .focuses h5,
.looking h1, .genBenefit h5{
    font-family: var( --Tungsten-SemiBold);
    letter-spacing: 1px;
}
.overviewWr h2,
    .mainsection h5 {
        font-size: 30px;
    }
.heading-service{
    font-family: var( --Tungsten-SemiBold) !important;
}

.mainsection h2 {
    font-family: var(--mulibold-font);
    font-size: 16px;
    color: var(--black-color);
}

.mainsection h6 {
    font-family: var(--arialbold-font);
    font-size: 16px;
    color: var(--black-color);
}

.overviewWr p,
.mainsection p {
    font-family: var( --MYRIADPRO-REGULAR);
    font-size: 14px;
    }
.autopara,
.autoparamanage {
    font-family: var(--mulireg-font);
}
.focuses h3 {
    font-family: var(--sansbold-font);
    color: #0A2E45;
}
.overviewWr h6 {
    font-family: var(--MYRIADPRO-REGULAR);
    color: var(--black-heading-para);
    font-weight: 600;
}
.container-video {
    position: absolute;
    top: 60px;
    width: 100%;
    display: flex;
    justify-content: end;
}

#background-video {
    width: 38vw;
    height: 50.1vh;
    object-fit: cover;
    z-index: 0;
    position: relative;
}
.automation-solvideo{
    width: 100% !important;
}
.manage_backvideo{
    width: 55vw !important;
}
.overlaymanage {
    position: relative;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(to left, rgb(158 171 185 / 26%) 0%, rgb(48 75 106 / 74%) 0%, rgb(20 50 86 / 122%) 50%, rgb(0 33 72) 75%);
    width: 100%;
    height: 50.4vh;
    display: flex;
    align-items: center;
    margin-top: 59px;
}
.overlayapplication {
    position: relative;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(to left, rgb(171 26 196 / 0%) -40%, rgb(127 24 164 / 48%) 5%, rgb(127, 21, 165) 38%, #350B70 100%);
    width: 100%;
    height: 50.4vh;
    display: flex;
    align-items: center;
    margin-top: 59px;
}

.overlayautomation {
    position: relative;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(to left, rgb(249 223 21 / 26%) 3%, rgb(249 223 21 / 74%) 32%, rgb(249 223 21 / 74%) 44%, rgb(255 139 0) 65%);
    width: 100%;
    height: 50.4vh;
    display: flex;
    align-items: center;
    margin-top: 59px;
}
.overlaycyber {
    position: relative;
    left: 0;
    z-index: 1;
    background-image: linear-gradient(to left, rgb(85 223 215 / 29%) 0%, rgb(20 225 245) 39%, rgb(20 225 245 / 85%) 59%, rgb(1 174 238) 93%);
    /* background-image: linear-gradient(to left, rgba(146, 140, 172, 0.29) 0%, rgb(69, 24, 153) 39%, rgba(2, 15, 153) 59%, rgb(2, 15, 153) 93%); */
    width: 100%;
    height: 50.4vh;
    display: flex;
    align-items: center;
    margin-top: 59px;
    /* background-image: url(../images/service/cybersecurityoverlay.jpg);
    background-position: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat; */
}
.hero-content {
    width: 77%;
    margin-left: 1rem;
    height: 36vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.lock {
    width: 20%;
    display: flex;
    justify-content: start;
    margin-top: 94px;
}
.managearrow img,
.apparrow img,
.automationarrow img,
.cyberarrow img {
    width: 68px;
}
.overview,
.subsection {
    width: 88%;
    margin: 0 auto;
    margin-bottom: 15px;
}
.hero-content .autoparamanage {
    color: var(--white-color);
}
.girl-img {
    width: 280px;
}
.businessimg {
    text-align: center;
}
.suitebg p,
.suitebg h2 {
    color: #FFFFFF;
}
.bluebg-img{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bluebg1 {
    box-shadow: 0px 3px 30px #E4DADA7A;
    background-image: url(../images/service/RPAbg.png);
    background-size: 101% 112%;
    background-position: 100% 100%;
}
.bluebg1:hover {
    background: transparent linear-gradient(89deg, #6F3E83 0%, #381F42 100%) 0% 0% no-repeat padding-box;
}
.bluebg2 {
    box-shadow: 0px 3px 30px #E4DADA7A;
    background-image: url(../images/service/NLP.png);
    background-size: 101% 112%;
    background-position: 100% 100%;
}
.bluebg2:hover {
    background: transparent linear-gradient(89deg, #E90B59 0%, #950739 42%, #75062D 100%) 0% 0% no-repeat padding-box;
}

.bluebg3 {
    box-shadow: 0px 3px 30px #E4DADA7A;
    background-image: url(../images/service/OCR.png);
    background-size: 132% 112%;
    background-position: 100% 100%;
}
.bluebg3:hover {
    background: transparent linear-gradient(91deg, #3F6676 0%, #28404A 41%, #20333B 100%) 0% 0% no-repeat padding-box;
}
.bluebg4 {
    box-shadow: 0px 3px 30px #E4DADA7A;
    background-image: url(../images/service/MLDL.png);
    background-size: 125% 112%;
    background-position: 100% 100%;
}
.bluebg4:hover {
    background: transparent linear-gradient(90deg, #0F82B5 0%, #022230 57%, #011A25 100%) 0% 0% no-repeat padding-box;
}
.suite h5 span{
    color: #A8A8A8;
}
.suite h5{
    font-size: 25px;
}

.bluebg p, .bluedata1 ul li{
    color: #A5A5A5;
    font-family: var(--TestSöhne-Buch);
}
.suite h5{
    font-family: var(--Tungsten-SemiBold);
}
.genAI_benefit h5{
    font-family: var(--Tungsten-SemiBold);
    color: #fff;
}
.service-heading{
    font-family: var(--Tungsten-SemiBold);
}
.genAI_benefit p{
    color: #fff;
    font-size: 15px !important;
}
.bluebg h2, .suite h5{
    color: #FFFFFF;
}
.suitebg,
.bluebg {
    margin: 0.9rem 0;
}
.suitebg{
    padding: 1rem;
}
.bluecontent {
    padding: 1rem;
}

.suitecontent div img {
    width: 40px;
    margin-right: 10px;
}

.bluecontent div img {
    width: 30px;
}

.suite {
    margin: 1rem 0;
}
.main-suite{
    padding: 2rem 0;
    width: 100%;
    background-color: var( --solution-blue-color);
}

.overview h1 {
    padding-top: 1rem;
}

.app-dev-focus-manage {
    width: 100%;
}

.focuses {
    position: relative;
    margin-top: 2rem;
}
.focuses p {
    margin-bottom: 0;
    font-family: var(--arial-font);
}

.suite-image img {
    width: 100%;
}

.focus2 {
    display: flex;
    align-items: center;
}

.endarrows {
    width: 96%;
    margin: 1rem 0rem 1rem;

    display: flex;
    justify-content: end;
}

.endarrows img {
    width: 40px;
}   .threeservices figure {
    display: flex;
    align-items: center;
}

.threeservices figure img {
    width: 30px;
    margin-right: 10px;
}
.looking h3{
    margin: 2rem 0;
}
.bluedata1 {
    margin-top: 1.5rem;
}
.line-grad, .line{
    margin-right: 8px;
    display: inline-block;
    height: 22px;
    width: 3px;
}
.line{
    background-color: #fff;
    width: 2px !important;
}
.gen_AIline{
    display: flex;
    align-items: center;
}
.line-orange{
    background: transparent linear-gradient(180deg, #FFF700 0%, #FF611B 100%) 0% 0% no-repeat padding-box;
}
.line-purple{
    background: transparent linear-gradient(177deg, #F75C9B 0%, #A217E4D6 71%, #8D06F6 100%) 0% 0% no-repeat padding-box;
}
.line-blue{
    background: transparent linear-gradient(180deg, #00ADEE 0%, #1EFBF8 81%, #73F2EB 100%) 0% 0% no-repeat padding-box;
}
.serviceblue-sec{
    display: flex;
    align-items: center;
    margin-left: -11px;
}
.rightsection{
    margin-top: 2rem;
}
.genAI_benefit{
    background-image: url("../images/service/Gen_AIbgimg.png");
    background-attachment: fixed;
    background-size: 361% 90%;
    background-position: 83% 100%;
    background-repeat: no-repeat;
}
.genAI_card{
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-top: 2rem;
    padding: 2rem;
}
.genAI_cardBen{
    width: 100%;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #FFFFFF;

}
.genAI_cardBen p{
    font-family: var(--MYRIADPRO-REGULAR);
    margin-left: 11px;
    color: #dbd4d4;
}
.genAI_cardBen h2{
    color: #fff;
}
.genAI_benefit{
    margin: 1rem 0;
    padding: 10px 0;
}
.gen_img{
    width: 40%;

}
.genBenefit{
    text-align: center;
}
.AI_expert {
    background-image: url(../images/service/AI_expert.png);
    background-position: 0% 100%;
    background-size: 208% 100%;
    background-repeat: no-repeat;
}
.custom_AI{
    background-image: url(../images/service/Customize_AI.png);
    background-position: 0% 100%;
    background-size: 208% 100%;
    background-repeat: no-repeat;
}
.genAI_card  .content{
    width: 90%;
    margin-left: auto;
}
.genAI_card p, .genAI_card h2{
    color: #fff;
}
.genAI_card .content p{
    font-family: var(--TestSöhne-Buch);
    font-size: 13px;
}
.Gen_AIvideomain{
    width: 100% !important;
}
.Gen_AIvideo{
    width: 100vw !important;
}
.overlayapplication_genAI{
    background: none !important;
}
.genAI_cardBen{
    margin-top: 1rem;
}
.gen-ai-section{
  background-image: url(../images/service/Banner.png);
background-size: cover;
background-position: center;
width: 100%;
height: 300px;
padding: 25px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
}
  .gen-ai-section  button{
    border: none;
    background: white;
    border-radius: 20px;
     font-size: 20px;
    padding: 5px 10px;
    text-align: center;
    margin-top: 20px;
    color: #9310bc;
    font-family: var(--FuturaPT-Medium);
  }
  .gen-ai-section  button img{
    width: 20px;
    position: relative;
    top: -3px;
  }
  .gen-ai-section h2{
    font-size: 35px !important;
    color: white !important;
    text-align: center !important;
    font-family: var(--Tungsten-SemiBold);
}
@media (min-width: 375px) {
    .endarrows {
        margin: -0.5rem 0rem 1rem;
    }
}
@media (min-width: 375px) {
    .genAI_benefit {
        background-size: 300% 90%;
    }
}
@media (min-width: 768px) {
    .Gen_AIvideo{
        margin-top: 59px;
    }
    .overlayautomation,
    .overlayapplication,
    .overlaycyber,.overlaymanage {
        height: 70.8vh;
    }
    .AI_expert {
        background-image: url(../images/service/AI_expert.png);
        background-position: 100% 100%;
        background-size: 110% 100%;
        background-repeat: no-repeat;
    }
    .custom_AI{
        background-image: url(../images/service/Customize_AI.png);
        background-position: 100% 100%;
        background-size: 110% 100%;
        background-repeat: no-repeat;
    }
    .genAI_benefit{
        background-size: 155% 100%;
        background-position: 100% 100%;
      
    }
    .genAI_cardBen{
        width: 45%;
        padding: 10px;
    }
   .genAI_card .content p {
        font-size: 14px;
    }
    .genAI_card  .content{
        width: 60%;
    }
    .hero-content h2{
        font-size: 30px;
    }
    .mainsection .focuses h6{
        font-size: 14px;
    }
    .bluecontent {
        padding: 0rem;
        margin-left: 3rem;
    }
    
    .secarr-img1{
        height: 100%;
    }
    .mainherosection {
        position: relative;
        margin-top: 0px !important;
    }

    .overviewWr h2,
    .mainsection h5 {
        font-size: 35px;
    }
    .overviewWr h6 {
        font-size: 15px;
    }
    .hero-content {
        margin-left: 5rem;
        height: 42vh;
    }

    .hero-content div {
        width: 100%;
    }
    .autopara{
        width: 80%;
    }
    .hero-content h4 {
        font-size: 30px;
    }
    .hero-content .autoparamanage {
        font-size: 15px;
    }

    .mainsection h2 {
        font-size: 17px;
        margin: 0.7rem 0;
    }

    .overviewWr p,
    .mainsection p {
        font-size: 14px;
        text-align: justify;
    }

    .overviewWr1 {
        background-image: url("../images/service/RepeatGrid.svg");
        background-repeat: no-repeat;
        background-size: 115%;
    background-position: 100% 0%;
        width: 100%;
    }

    .overviewWr2{
        background-image: url("../images/service/RepeatGrid.svg");
        background-repeat: no-repeat;
        background-size: 135%;
    background-position: 100% 0%;
        width: 100%;
    }
    .manage_repeatGrid {
        background-image: url("../images/service/RepeatGrid.svg");
        background-repeat: no-repeat;
        background-size: 110%;
    background-position: 100% 0%;
        width: 100%; 
    }
   .container-video {
        top: 0px !important;
    }
    .threeservices {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .threeservices figure img {
        width: 10%;
    }

    .bluebg {
        display: flex;
    }

    .overviewWr {
        padding-bottom: 2rem;
    }

    .businessvalue {
        display: flex;
        justify-content: space-between;
    }

    .businessimg {
        width: 30%;
        position: relative;
    }
    .businessimg1{
        width: 20% !important;
    }
    .rightsection {
        width: 70%;
        z-index: 99;
        margin-top: 0rem;
    }
    .rightsection1{
        width: 80% !important;
    }
    .girl-img {
        width: 100%;
     }

    .girl-img1 {
        width: 100%;
    }

    .rightsectioncontentpara {
         padding:0.5rem 2rem 2rem 0rem;  
        background-color: #fff;
    }

    .rightsectioncontent {
        padding-right: 2rem;
    }

    .suite-img {
        display: flex;
        margin-bottom: 1.5rem;
    }

    .suite-image {
        width: 250px;
    }

    .suite-image img {
        width: 216px;
    }

    .suite-data {
        padding-left: 2rem;
    }

    .focuses {
        margin-top: 3rem;
    }

    .focus2 {
        width: 48%;
    }

    .focus1 {
        display: flex;
        justify-content: space-between;
    }

    .appfocus1 {
        margin: -1rem 0rem -1rem;
    }

    .overview h1 {
        padding-top: 2rem;
        padding-bottom: 0rem;
    }

    .suitebg {
        width: 48%;
    }

    .bluebg-sub {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .bluedata1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 0rem;
    }
    #background-video {
        height: 70.7vh;
    }
    .automation-solvideo{
        width: 69% !important;
    }
   
}

@media (min-width: 992px) {
    .gen-ai-section{
        align-items: start;
        padding: 25px 40px;
            justify-content:start;
    }
    .gen-ai-section h2{
        text-align: left !important;
               font-size: 45px !important;
    }
    .Gen_AIvideo{
        margin-top: 0px;
    }
    .overlayautomation,
    .overlayapplication,
    .overlaycyber, .overlaymanage {
        margin-top: 0px;
    }

    .overlayapplication .hero-content h4 {
        font-size: 47px;
    }
    .genAI_card .content p {
        font-size: 16px;
    }
    .hero-content h2{
        font-size: 35px;
    }
    .optical,
    .machine {
        margin-top: 1.5rem !important;
    }

    .overviewWr {
        padding-bottom: 1.5rem;
    }

    .suite h5 {
        margin-bottom: 1.5rem;
    }

    .mainherosection {
        margin-top: 0px;
    }
    .hero-content h4 {
        font-size: 52px;
    }

    .hero-content .autopara {
        font-size: 16px;
    }
    .hero-content .autoparamanage {
        font-size:19px;
    }
    .threeservices figcaption {
        font-size: 19px;
    }

    .overviewWr h2,
    .mainsection h5 {
        font-size: 33px !important;
    }

    .mainsection h2 {
        font-size: 19px;
    }

    .overviewWr p,
    .mainsection p {
        font-size: 16px;
    }

    .threeservices div {
        width: 32%;
    }

    .suitebg {
        width: 47%;
        padding: 2rem;
    }
    .suitecontent div img {
        width: 70px;
    }

    .mainsection .focuses h6 { 
        font-size: 17px;
    }
  
}

@media (min-width: 1200px) {
    .gen-ai-section h2{
        font-size: 45px !important;
        color: white !important;
    }
    .genAI_cardBen p{
        font-size: 17px !important;
    }
    .genAI_card{
        padding: 3rem;
    }
    
    .genAI_card .content p{
        font-size: 20px !important;
    }
    .hero-content h2{
        font-size: 40px;
    }
    .suite h5, .overviewWr h2, .mainsection h5 {
        font-size: 42px !important;
    }
    .overviewWr h2,
    .mainsection h5 {
        font-size: 45px;
    }
    .overviewWr h6 {
        font-size: 24px;
    }

    .mainsection h2 {
        font-size: 22px;
    }
    .overviewWr p,
    .mainsection p {
        font-size: 23px;
    }
    .suitecontent p, .bluecontent p{
        font-size: 18px;
    }
    .hero-content .autoparamanage {
        font-size: 24px;
    }
    .focuses p{
        font-size: 17px;
    }
}
@media print and (orientation: portrait)  {
        .overlayautomation, .overlayapplication, .overlaycyber, .overlaymanage{
          margin-top: -61px !important;
      }
      /* #background-video {
        height: 60.7vh;
    } */
    .genAI_benefit{
        background-attachment: inherit;
    }
    .custom_AI{
        background-size: 157% 100%;
    }
    .AI_expert{
        background-size: 130% 100%;
    }
  }
  @media print and (orientation: landscape)  {
          .overlayautomation{
              margin-top: 0px !important;
          }
          .overlayautomation, .overlayapplication, .overlaycyber, .overlaymanage{
              margin-top: -97px !important;
          }
          .genAI_benefit{
            background-attachment: inherit;
        }
        .custom_AI{
            margin-top: 200px;
        }
    }