@media only screen and (min-width: 601px) {

}



@media only screen and (max-width:1830px){

    
}
@media only screen and (max-width:1780px){

}

@media only screen and (max-width:1720px){

}

@media only screen and (max-width:1680px){

}

@media only screen and (max-width:1600px){

}

@media only screen and (max-width:1599px){

}

@media only screen and (max-width:1460px){
   
   
}

@media only screen and (max-width:1440px){

    .newsletterSection h4, .ingeneersSection .newsletterSection h2, .newsletterSection .newsletterFormArea {
        max-width: 80%;
        margin: 0 auto 40px;
    }
    .ingeneersSection ul.aboutDescList li{
        font-size: 32px;
    }

    /* FAQ Cards - Desktop */
    .faqCard {
        padding: 40px 35px 35px 35px;
        min-height: 400px;
    }
    .faqQuestion p {
        font-size: 18px;
    }
    .faqAnswer p {
        font-size: 15px;
    }
    .faqIcon {
        width: 70px;
        height: 70px;
    }

    .highlightNewsArea .newsDescription h2{
        font-size: 26px;
    }
    .highlightNewsArea .newsDescription p{
        font-size: 14px;
        font-weight: 300;
    }
    .newsModal .bioDectiption .desctxt h4{
        font-size: 50px;
    }
    .newsModal .modal-body {
        padding: 50px 50px 50px 100px;
    }
    .newsModal .bioDectiption .desctxt .designation{
        font-size: 20px;
    }
    .newsModal .bioDectiption .desctxt p{
        font-size: 14px;
    }
    .newsModal .bioDectiption .desctxt{
        padding: 50px 0px 0 0px;
    }

    /* .aboutBanner ul.aboutDescList li, ul.aboutDescList li{
        font-size: 52px;
    } */
    .highlightNewsArea {
        width: 60%;
    }
    .latestNewsList li a{
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 20px 100px 20px 20px;
        border-radius: 15px 15px 30px 15px;
    }
    .container{
        width: 90%;
        max-width: 100%;
    }
    .stockCountSection ul{
        gap: 15px;
    }
    .videoSection .container{
        width: 80%;
    }
    .aboutBanner ul.aboutDescList, ul.aboutDescList{
        width: 60%;
    }
    .heroBannerSection ul.heroAnimeTexts, ul.heroAnimeTexts{
        width: 60%;
    }
    .videoSection h4{
        font-size: 52px;
    }
    .serviceVideo .serviceVideoContent{
        padding: 50px;
    }
    .serviceVideoContent .txtArea h4{
        font-size: 46px;
    }
    .newsletterSection {
        width: 100%;
    }   
    .serviceSection .serviceVideo{
        height: 350px;
    }
    #services.serviceSection.is-scroll-driven .serviceSectionStack{
        min-height: 100svh;
        height: 100svh;
    }
}

@media only screen and (max-width:1400px){
    
    
}

@media only screen and (max-width:1366px){
   
    /* Font Sizes for Typography */
    :root{
    --font-size-h1: 46px;
    --font-size-h2: 32px;
    --font-size-h3: 28px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-h6: 16px;
    --font-size-p: 14px;
    --font-size-li: 14px;
    --font-size-sm: 12px;
    --font-size-xs: 12px;
    }
    
    .aboutUnits .stockCountSection ul,
    .stockCountSection.oddUnits ul{
        flex-wrap: nowrap;
    }
    .introContent h2{
        font-size: 90px;
    }
    .introSection ul.aboutDescList li{
        margin: 0 0 20px 0;
        font-size: 40px;
    }
    .newsModal .bioDectiption .desctxt{
        padding: 0px 50px 0 0px;
    }
    .highlightNewsArea {
        width: 75%;
    }
    .latestNewsList li a h4{
        line-height: 120%;
    }
    .serviceVideoContent .txtArea h4 {
        font-size: 34px;
    }  
    .newsletterSection h4,
    .serviceAnalyzeSection h4{
        /* font-size: 32px; */
        line-height: 120%;
    }  
    .newsletterSection .newsletterFormArea .form-control{
        font-size: 18px;
    }
    .contactFormSection{
        width: 60%;
    }
    .footerContainer{
        padding: 30px;
        gap: 20px;
    }
    .serviceVideo .serviceVideoContent .bannerImage{
        width: 200px;
    }
    .miniStockCount span h4 {
        font-size: 46px;
        line-height: 100%;
    }

    .bannerWrapper{
        height: 550px;
    }
    .bannerSection h1,.bannerWrapper h4{
        font-size: 46px;
    }
    .newsletterSection h4, .serviceAnalyzeSection h4 {
        /* font-size: 24px; */
        line-height: 140%;
    }
    .stockCountSection ul{
        flex-wrap: wrap;
        gap: 15px;
    }
    .stockCountSection ul li, .miniStockCount {
        gap: 15px;
        width: 48%;
    }
    .keyparamArea .stockCountSection ul li{
        width: 100%;
    }
    .executionPanel .txtArea h4{
        font-size: 28px
    }
    .executionPanel .txtArea p{
        font-size: 16px;
        font-weight: 400;
    }
    .executionPanel .txtArea p{
        margin: 0;
    }
    .executionPanel .txtArea ul li{
        margin: 0 0 10px 0;
    }
    .executionDisplayArea{
        width: 100%;
    }
    /* .aboutBanner ul.aboutDescList li{
        font-size: 42px;
    } */
    .ingeneersSection ul.aboutDescList li{
        font-size: var(--font-size-h4);
    }
    .aboutBanner ul.aboutDescList{
        width: 70%;
        gap: 30px;
        padding-top: 0vh;
    }
    .ingeneersSection ul.aboutDescList {
        width: 100%;
    }
    /* .sectionHeader h4,
    .latestNewSection .sectionHeader h4{
        font-size: 42px;
    } */
    .teamSection{
        padding: 50px 0;
    }
    .teamMemberSection ul li {
        width: 30%;
        padding: 0;
    }
    .bioModal .modal-dialog {
        max-width: 90%;
    }
    .videoSection h4 {
        font-size: 40px;
    }
    .latestNewsList li a h4{
        font-size: 22px;
    }
    .videoSection .container {
        width: 90%;
    }
    .serviceTitleHeader{
        width: 80%;
        font-size: 46px;
        font-weight: 500;
    }
    .videoSection .bgOverlay2{
        top: -2px;
    }

}

@media only screen and (max-width:1300px){   
   
}

@media only screen and (max-width:1280px){

    
    
}
@media only screen and (max-width:1200px){
    .bannerContent {
        gap: 40px;
    }
    .bannerContent .txtArea {
        width: 48%;
    }
    .bannerContent .imgArea {
        width: 52%;
    }

    /* Timeline Section - Small Desktop */
    .tl-track {
        max-width: 1100px;
        padding: 0 40px;
    }
    .tl-line-bg, .tl-line {
        left: 40px;
        right: 40px;
    }
    .tl-items {
        gap: 0 6px;
    }
    .tl-label {
        font-size: 12px;
        max-width: 130px;
    }
    .tl-date {
        font-size: 12px;
    }
}
@media only screen and (max-width:1140px){
    .keyparametersWrapper{
        gap: 30px;
        flex-direction: column;
    }
    .kp-left, .kp-right{
        width: 100%;
    }
    /* .kp-left h2{font-size:36px}
    .kp-right h3{font-size:30px}
    .kp-txt{font-size:16px} */
}
@media only screen and (max-width:992px){

    /* Upload Section - Tablet */
    .uploadAttachSection label {
        font-size: 14px;
        margin-bottom: 14px;
    }
    .uploadDragDropZone {
        padding: 35px 25px;
        border-radius: 14px;
    }
    .uploadIcon {
        width: 52px;
        height: 52px;
    }
    .uploadMainText {
        font-size: 16px;
    }
    .uploadedFileInfo {
        padding: 18px;
        border-radius: 14px;
    }
    .fileInfoContent {
        gap: 14px;
    }
    .checkIcon {
        width: 38px;
        height: 38px;
    }
    .fileName {
        font-size: 14px;
    }
    .fileSize {
        font-size: 12px;
    }

    .keyparamArea .container {
        display: flex;
        gap: 20px;
        align-items: center;
        flex-direction: column;
    }
    .keyparamArea .serviceAnalyzeSection {
        flex-direction: column;
        padding: 0;
    }
    .keyparamArea .stockCountSection{
        padding: 0;
    }
    .keyparamArea .serviceAnalyzeSection h4 {
        width: 100%;
        margin-bottom: 15px;
        text-align: left;
    }
    .keyparamArea .serviceAnalyzeSection{
        gap: 0px;
    }

    .cardsGrid{
        gap: 20px;
    }
    .card{
        flex: 1 1 100%;
        padding: 30px;
    }
    /* .cardTitle{font-size:28px}
    .cardList li{font-size:16px} */

    /* FAQ Cards - Tablet */
    .sectionFaqs {
        padding: 80px 0;
    }
    .faqCardsGrid {
        gap: 20px;
    }
    .faqCard {
        flex: 1 1 100%;
        padding: 35px 30px 30px 30px;
        min-height: 350px;
    }
    /* .faqQuestion p {
        font-size: 18px;
    }
    .faqAnswer p {
        font-size: 15px;
    } */
    .faqIcon {
        width: 60px;
        height: 60px;
        margin-top: 20px;
    }
}
@media only screen and (max-width:1170px){
    
}
@media only screen and (max-width:1140px){

    .bannerSection.newsBanner {
        flex-direction: column;
        height: auto;
        overflow-y: hidden;
        display: flex;
        justify-content: space-between;
        min-height: auto;
    }
    .newsBanner .newsletterSection {
        padding: 50px 0;
    }
    .innerService.newsBanner .bottomGraphics {
        
        height: 100%;
        border-radius: 0;
    }
    .contactFormSection {
        width: 80%;
    }
    .NameDesc h4{
        font-size: 22px;
        font-weight: 500;
        line-height: 120%;
    }
}

@media only screen and (max-width:1140px){
    .newsletterSection h4,
    .ingeneersSection .newsletterSection h2,
    .newsletterSection .newsletterFormArea{
      max-width: 100%;
      margin: 0 auto 20px;
    }
}

@media only screen and (max-width:1024px){

    .aboutUnits .stockCountSection ul,
    .stockCountSection.oddUnits ul {
        flex-wrap: wrap;
    }
    .aboutUnits .stockCountSection ul li,
    .stockCountSection.oddUnits ul li {
        width: 100%;
    }
    .aboutBanner ul.aboutDescList, ul.aboutDescList {
        width: 80%;
    }
    .heroBannerSection ul.heroAnimeTexts, ul.heroAnimeTexts {
        width: 80%;
    }
    .highlightNewsArea {
        width: 90%;
    }
    .newsModal .modal-body {
        padding: 100px 50px 50px 100px;
    }
    .newsModal .bioDectiption{
        flex-direction: column-reverse;
    }
    .introSection ul.aboutDescList li {
        margin: 0 0 20px 0;
        font-size: 34px;
    }
    .heroBannerSection ul.heroAnimeTexts li, ul.heroAnimeTexts li {
        margin: 0 0 20px 0;
    }

    .AiplatformSection .aiPlatformBottom{
        gap: 40px;
    }
    .AiplatformSection .aiPlatformHeader h2{
        width: 85%;
    }

    .tradelifeCycleSection .tradeLifecycleHeader h2{
        width: 85%;
    }
    .tradelifeCycleSection .tradeLifecycleHeader p{
        width: 70%;
    }
    .tradelifeCycleSection .tradeLifecycleHeader{
        width: auto;
        flex: 1;
        max-width: 720px;
        margin-bottom: 0;
    }
    .lifeCycleTop{
        gap: 30px;
        margin-bottom: 30px;
    }
    .tradelifeCycleSection .tradeLifecycleCards{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .executionSection{
        padding: 80px 0;
    }
    .algos-page .executionSection .executionSectionHeader{
        max-width: 720px;
        margin-bottom: 36px;
    }
    .algos-page .executionSection .executionSectionHeader h2{
        font-size: 40px;
    }
    .algos-page .executionSection .executionSectionHeader p{
        max-width: 560px;
    }
    .executionSectionTop{
        gap: 30px;
        margin-bottom: 30px;
    }
    .executionSectionHeader h2{
        font-size: 40px;
    }
    .executionSection .executionSectionObject{
        width: 38%;
        max-width: 500px;
    }
    .executionSection .algo-icon{
        width: 80px;
        height: 80px;
    }
    .executionSection .algo-title{
        font-size: 28px;
    }

    .infrastructure-section{
        padding: 80px 0;
    }
    .infrastructureWrapper{
        gap: 40px;
    }
    .infrastructureHeader{
        width: 42%;
    }
    .infrastructureList{
        width: 58%;
    }
    .infrastructureHeader h2{
        font-size: 40px;
    }
    .infrastructureIcon{
        width: 80px;
        height: 80px;
    }
    .infrastructureContent h4{
        font-size: 26px;
    }

    .navMenu .menuSection ul, .navMenu .rightMenu ul{
        gap: 15px;
    }
    .teamMemberSection ul{
        gap: 15px;
    }
    .teamMemberSection ul li {
        width: 32%;
        padding: 0;
    }
    .about-page .stockAnalyzeSection {
        padding: 25px 0;
    }
    .bannerWrapper {
        height: 500px;
    }
    .introContent h2{
        font-size: 80px;
    }
    .footerContainer {
        padding: 20px;
        gap: 15px;
    }
    .footerCol h4{
        font-size: 14px;
    }
    .footerTop, .footerbottom{
        gap: 20px;
    }
    .footerTop .logoArea, .footerbottom .SocialArea {
        width: 20%;
    }
    .footerTop .contentArea, .footerbottom .otherLinkArea{
        width: 80%;
        gap: 10px;
    }

}
@media only screen and (max-width:1023px){

}
@media only screen and (max-width:1140px){
    .howitworkWrapper{flex-direction:column; gap:40px;}
    .how-left, .how-right{width:100%;}
    .how-left h2{font-size:48px; text-align:center}
    .how-item{padding:20px 0; gap:20px}
    .how-number{font-size:56px;line-height:56px; min-width:80px; -webkit-text-stroke:1.5px rgba(255,255,255,0.25);}
    .how-content p{font-size:15px; max-width:100%;}

    .missionContent .how-left h2{
        text-align: left;
    }

    /* Platform Section - Tablet */
    .platformWrapper{
        flex-direction: column;
        gap: 40px;
    }
    .platform-left, .platform-right{
        width: 100%;
    }
    .platformImage{
        max-width: 400px;
    }
    .platformTitle{
        font-size: 36px;
        text-align: center;
    }
    .platformStatsContainer{
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .platformStatCard{
        padding: 18px;
        gap: 18px;
    }
    .platformStatIcon{
        min-width: 50px;
        width: 50px;
        height: 50px;
    }
    .platformIconImage{
        width: 28px;
        height: 28px;
    }
    .platformStatValue{
        font-size: 28px;
    }
    .platformStatLabel{
        font-size: 13px;
    }
    .platformBasketsTitle{
        font-size: 24px;
    }
    .platformBasketsDescription{
        font-size: 15px;
    }
    .platformFeaturesList li{
        font-size: 14px;
    }

    /* Timeline Section - Tablet */
    /* .timelineSection{
        padding: 50px 0 0;
        margin-top: 50px;
    } */
    .timelineSection .titleArea h4{
        font-size: 18px;
    }
    .timelineSection .titleArea h2{
        font-size: 40px;
    }
    .tl {
        padding: 70px 0 60px;
    }
    .tl-header {
        margin-bottom: 50px;
    }
    .tl-eyebrow {
        font-size: 18px;
    }
    .tl-title {
        font-size: 40px;
    }
    .tl-track {
        padding: 0 32px;
        max-width: 100%;
    }
    .tl-line-bg, .tl-line {
        left: 32px;
        right: 32px;
    }
    .tl-items {
        grid-template-columns: repeat(3, 1fr);
        gap: 0 12px;
    }
    .tl-item {
        grid-template-rows: 110px 24px 130px;
    }
    .tl-top {
        padding-bottom: 18px;
        gap: 6px;
    }
    .tl-bot {
        padding-top: 18px;
        gap: 6px;
    }
    .tl-date {
        font-size: 12px;
    }
    .tl-label {
        font-size: 12px;
        max-width: 160px;
        line-height: 1.5;
    }
    .tl-dot {
        width: 10px;
        height: 10px;
    }
    .tl-item:last-child .tl-dot {
        width: 14px;
        height: 14px;
    }
}

@media only screen and (max-width:768px){


    /* Timeline Section - Mobile */
    /* .timelineSection{
        padding: 40px 0 0;
        margin-top: 40px;
    } */

    .pov-page .keyparamArea .container{
        gap: 30px;
      }
      .pov-page .keyparamArea .serviceAnalyzeSection,
      .pov-page .keyparamArea .stockCountSection{
        width: 100%;
      }

    .uploadAttachSection .uploadMainText{
        text-align: center;
    }
    .timelineSection .titleArea h4{
        font-size: 16px;
    }
    .timelineSection .titleArea h2{
        font-size: 32px;
    }
    .tl {
        padding: 60px 0 40px;
    }
    .tl-header {
        margin-bottom: 40px;
    }
    .tl-eyebrow {
        font-size: 16px;
    }
    .tl-title {
        font-size: 32px;
    }
    .tl-track { 
        padding: 0 16px; 
    }
    .tl-line-bg, .tl-line { 
        display: none; 
    }
    .tl-items { 
        grid-template-columns: 1fr; 
        grid-template-rows: none; 
        gap: 0;
    }
    .tl-item { 
        grid-template-rows: none; 
        grid-template-columns: 20px 1fr; 
        gap: 0 16px; 
        align-items: center; 
        padding: 20px 0; 
        border-left: none; 
    }
    .tl-dot { 
        grid-column: 1; 
        grid-row: 1;
        width: 10px;
        height: 10px;
    }
    .tl-top, .tl-bot { 
        grid-column: 2; 
        grid-row: 1; 
        align-items: flex-start; 
        padding: 0; 
        justify-content: center; 
        gap: 6px;
    }
    .tl-top { 
        padding-bottom: 0; 
    }
    .tl-bot { 
        padding-top: 0; 
    }
    .tl-label { 
        max-width: none; 
        text-align: left;
        font-size: 13px;
        line-height: 1.5;
    }
    .tl-date {
        font-size: 12px;
    }
    .tl-item:nth-child(odd) .tl-bot { 
        display: none; 
    }
    .tl-item:nth-child(even) .tl-top { 
        display: none; 
    }
    .tl-item:last-child .tl-dot {
        width: 14px;
        height: 14px;
    }
    /**/

    .how-left h2{font-size:36px}
    .how-number{font-size:44px;line-height:44px}
    .how-content h4{font-size:20px}
    .how-content p{font-size:14px}
    .howitworkSection{padding:60px 0}

    /* Platform Section - Mobile */
    .platformSection{
        padding: 60px 0;
    }
    .platformWrapper{
        flex-direction: column;
        gap: 30px;
    }
    .platform-left{
        width: 100%;
    }
    .platformImage{
        max-width: 100%;
        border-radius: 16px;
    }
    .platform-right{
        width: 100%;
        gap: 25px;
    }
    .platformTitle{
        font-size: 28px;
        text-align: left;
    }
    .platformStatsContainer{
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .platformStatCard{
        padding: 16px;
        gap: 16px;
    }
    .platformStatIcon{
        min-width: 48px;
        width: 48px;
        height: 48px;
    }
    .platformIconImage{
        width: 24px;
        height: 24px;
    }
    .platformStatValue{
        font-size: 24px;
    }
    .platformStatLabel{
        font-size: 12px;
    }
    .platformBasketsTitle{
        font-size: 22px;
    }
    .platformBasketsDescription{
        font-size: 14px;
    }
    .platformFeaturesList li{
        font-size: 13px;
        padding-left: 20px;
    }
}

@media only screen and (max-width:992px){

    .jobPostBanner, .bannerContent .jobPostBanner{
        flex-direction: column;
        gap: 30px;
    }
    .jobTitle{
        gap: 15px;
    }
    .SocialArea ul {
        gap: 20px;
    }
    .mobileMenuOpened .navMenu{
        background: #001f3e;
    }
    .hideOnMobile{
        display: none;
    }
    .executionSectionMobile{
        display: block;
    }

    .bannerSection h1,.bannerImgCaption p{
        width: 100%;
    }
    .newsletterSection,.contactFormSection{
        width: 100%;
    }
    .newsletterSection{
        min-height: 200px;
    }
    .bannerWrapper {
        height: 450px;
    }
    .footerCol {
        width: 100%;
    }
    .burgerMenu{
        display: flex;
    }  
    .navMenu .menuSection .desktopMenuItem,
    .navMenu .menuSection .contactBtn,
    .navMenu .rightMenu{
        display: none;
    } 
    .navMenu .menuSection{
        width: 100%;
        justify-content: space-between;
    }
    .navMenu{
        padding: 10px 0;
    }
    .mobieMenuWraper{
        top: 70px;
        height: calc(100vh - 57px);
        overflow-y: auto;
        border-radius: 0px 0px 0 0;
    }
    .mobieMenuWraper .SocialArea{
        padding: 0 15px;
    }
    .mobieMenuWraper .SocialArea ul li a{
        width: 34px;
        height: 34px;
    }
    .SocialArea ul{
        gap: 30px;
    }

    .footerContainer{
        padding: 30px;
        flex-direction: column;
    }
    .footerTop, .footerbottom{
        flex-direction: column;
    }
    .footerTop .logoArea, 
    .footerbottom .SocialArea,
    .SocialArea{
        width: 100%;
    }
    .footerTop .contentArea, .footerbottom .otherLinkArea {
        width: 100%;
        flex-direction: column;
    }
    .copyrightArea {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 15px 0;
        flex-direction: column;
        gap: 10px;
    }
    .copyrightArea p{
        margin: 0;
    }

}

@media only screen and (max-width:896px){}
@media only screen and (max-width:853px){

}
@media only screen and (max-width:850px){}
@media only screen and (max-width:847px){

    .bioModal .bioDectiption{
        flex-direction: column;
    }
    .bioModal.newsModal .bioDectiption {
        flex-direction: column-reverse;
    }

    
    .bioModal .modal-body {
        padding: 50px 20px 30px;
    }

    .bioModal.newsModal .modal-body {
        padding: 100px 30px 30px 70px;
    }
    .bioDectiption img {
        width: 100%;
        border-radius: 30px;
    }
    .bioDectiption .desctxt h4{
        font-size: 30px;
    }
    .bioModal .modal-dialog {
        max-width: 100%;
    }
    .videoSection h4 {
        font-size: 42px;
        font-weight: 500;
        line-height: 120%;
    }
    .introSection .introImage{
        height: 100vh;
    }
    .serviceSection .serviceVideo{
        height: 50vh;
        border-radius: 40px;
    }
    #services.serviceSection.is-scroll-driven .serviceSectionStack{
        min-height: 100svh;
        height: 100svh;
    }
    .serviceVideo .serviceVideoContent {
        padding: 30px;
        gap: 15px;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .serviceVideo .serviceVideoContent.alter{
        flex-direction: column-reverse;
    }
    .serviceVideo .videoScreen{
        border-radius: 40px;
    }
    .serviceVideo .serviceVideoContent .txtArea {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .serviceVideoContent .txtArea p{
        font-size: 16px;
        font-weight: 400;
        text-align: center;
    }
    .serviceVideo .serviceVideoContent.alter .txtArea h4, .serviceVideo .serviceVideoContent.alter .txtArea p {
        text-align: center;
    }
    .teamMemberSection ul li {
        width: 48%;
        padding: 0;
    }
    .serviceSection{
        min-height: auto;
    }
}
@media only screen and (max-width:824px){


}
@media only screen and (max-width:812px){}
@media only screen and (max-width:800px){
   
}
@media only screen and (max-width:768px){

    .keyparamArea {
        padding: 50px 0;
    }
    .jobListSection  ul.latestNewsList li h4,
    .jobListSection li a p{
        width: 100%;
    }
    .bannerContent {
        flex-direction: column;
        gap: 30px;
    }
    .bannerContent .txtArea {
        width: 100%;
        gap: 15px;
        align-items: center;
    }
    .bannerContent .txtArea h1{
        text-align: center;
    }
    .how-left{
        align-items: center;
        justify-content: center;
    }
    /* .bannerContent .txtArea h1 {
        font-size: 48px;
    }
    .bannerContent .txtArea h4 {
        font-size: 18px;
    } */
    .bannerContent .imgArea {
        width: 100%;
    }
    .keyparametersSection{padding:50px 0}
    /* .kp-left h2{font-size:30px}
    .kp-left p{font-size:16px} */
}
@media only screen and (max-width:767px){

    /* Font Sizes for Typography */
    :root{
    --font-size-h1: 40px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 16px;
    --font-size-h6: 14px;
    --font-size-p: 14px;
    --font-size-li: 14px;
    --font-size-sm: 12px;
    --font-size-xs: 12px;
    }

    /**/

    .missionContent .how-left h4,
    .missionContent .how-left h2,
    .missionContent .how-right p{
        text-align: center;
        width: 100%;
    }
    .career-page .how-number img {
        width: 60px;
        max-width: 100%;
    }
    .serviceAnalyzeSection{
        width: 100%;
    }
    .algos-page .executionSectionRailEdge--left{
        width: 6%;
    }
    .infrastructureItem.animatedIcon .infrastructureIcon{
        width: 60px;
    }
    .infrastructureItem.animatedIcon{
        padding: 15px 0 10px 80px;
    }
    .infrastructureList{
        gap: 10px;
    }

    .AiplatformSection{
        --dots-bg-dot-color: rgb(255 255 255 / 20%);
    }
    .dotsAnimation--dark{
        --dots-bg-dot-color: rgb(255 255 255 / 25%);
    }
    .whatAiDoesSection{
        background: var(--color-darker);
    }
    .how-number{
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
    }
    .platformBasketsSection{
        width: 100%;
    }
    .whatAiDoesSection .whatAiDoesStickyHeader{
        min-height: auto;
    }
    .whatAiDoesSection .whatAiDoesStickyHeader .floatingObject{
        display: none;
    }
    .whatAiDoesSection.is-scroll-driven{
        padding: 60px 0;
    }
    .whatAiDoesSection .container{
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .whatAiDoesSection .whatAiDoesStickyWrap{
        flex-direction: column;
        gap: 24px;
    }
    .whatAiDoesSection .whatAiDoesStickyHeader{
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .whatAiDoesSection .cardsStickyArea,
    .whatAiDoesSection .whatAiDoesMobileCarouselWrap{
        width: calc(100% + var(--mobile-card-rail-bleed, 30px));
        margin-left: calc(var(--mobile-card-rail-bleed, 30px) / -2);
        margin-right: calc(var(--mobile-card-rail-bleed, 30px) / -2);
    }
    .whatAiDoesSection .cardsStickyArea .cardsStickyStack,
    .whatAiDoesSection .cardsStickyStack{
        --stackGap: 0;
        --stackTop: 0;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: pan-x pan-y pinch-zoom;
        gap: var(--mobile-card-rail-gap, 16px);
        padding: 0 var(--mobile-card-rail-stage-padding, 15px) 4px;
        margin: 0;
        width: 100%;
        min-height: auto;
        height: auto;
        scrollbar-width: none;
        contain: layout style;
    }
    .whatAiDoesSection .cardsStickyStack::-webkit-scrollbar{
        display: none;
    }
    .whatAiDoesSection .cardsStickyStack .card,
    .whatAiDoesSection .cardsStickyStack.is-stack-ready .card,
    .whatAiDoesSection .cardsStickyStack .card:not(:first-child),
    .whatAiDoesSection .cardsStickyStack.is-stack-ready .card:not(:first-child){
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        flex: 0 0 var(--mobile-card-rail-slide-width, calc((100vw - 30px - var(--mobile-card-rail-gap, 16px)) * 0.94));
        min-width: var(--mobile-card-rail-slide-width, calc((100vw - 30px - var(--mobile-card-rail-gap, 16px)) * 0.94));
        max-width: var(--mobile-card-rail-slide-width, calc((100vw - 30px - var(--mobile-card-rail-gap, 16px)) * 0.94));
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        filter: none;
        will-change: auto;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        box-shadow: 0 -20px 100px rgba(0, 0, 0, 0.3);
    }
    .whatAiDoesSection .cardsStickyStack .card.is-stacked{
        filter: none;
    }
    .whatAiDoesSection .cardsStickyStack .card .cardHeader{
        gap: 20px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }
    .whatAiDoesSection .cardsStickyStack .card .cardHeader .cardNumber{
        font-size: var(--font-size-h2);
    }
    .whatAiDoesSection .cardsStickyStack .card .cardIcon svg{
        width: 72px;
        height: auto;
    }
    .whatAiDoesSection .cardsStickyStack .card{
        padding: 24px 24px 32px;
    }
    .whatAiDoesSection .whatAiDoesMobileCarouselWrap .mobileCardRailProgress{
        width: min(72%, 280px);
        height: 3px;
        margin: 24px auto 0;
        border-radius: 100px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.14);
    }
    .whatAiDoesSection .whatAiDoesMobileCarouselWrap .mobileCardRailProgressFill{
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: var(--color-highlight);
        transition-property: width;
        transition-timing-function: ease-out;
    }

    .heroContent h1{
        width: 100%;
    }
    .executionSection .algo-icon{
        margin-bottom: 0;
    }

    .jobApplyFormSection{
        padding:15px;
    }
    .jobApplyForm .form-group {
        margin-bottom: 10px;
    }
    .jobApplyForm .form-control {
        height: 50px;
    }
    
    /* Upload Section - Mobile */
    .uploadAttachSection label {
        font-size: 14px;
        margin-bottom: 12px;
    }
    .uploadDragDropZone {
        padding: 30px 20px;
        border-radius: 12px;
    }
    .uploadIconWrapper {
        margin-bottom: 12px;
    }
    .uploadIcon {
        width: 48px;
        height: 48px;
    }
    .uploadMainText {
        font-size: 16px;
    }
    .uploadHelpText {
        flex-direction: column;
        gap: 8px;
        font-size: 12px;
    }
    .supportedFormats,
    .maximumSize {
        width: 100%;
    }
    .uploadedFileInfo {
        padding: 16px;
        border-radius: 12px;
    }
    .fileInfoContent {
        gap: 12px;
    }
    .checkIcon {
        width: 36px;
        height: 36px;
    }
    .fileName {
        font-size: 13px;
    }
    .fileSize {
        font-size: 11px;
    }
    .removeFileBtn {
        padding: 6px;
    }
    .removeFileBtn svg {
        width: 18px;
        height: 18px;
    }
    
    .applyformSubArea{
        padding-top: 15px;
        margin-top: 15px;
        gap: 30px;
        flex-direction: column-reverse;
    }
    .career-detail-page .how-to-apply .applyformSubArea .backBtn,
    .career-detail-page .how-to-apply .applyformSubArea .ExploreBtn{
        width: 100%;
    }

    .keyparamArea .stockCountSection ul li img{
        width: 50px;
    }
    .keyparamArea .stockCountSection ul li span h4{
        font-size: var(--font-size-h4);
    }

    .teamSection.latestNewSection {
        padding: 50px 0;
    }

    .miniStockCount{
        justify-content: flex-start;
    }
    .graphArea{
        padding: 50px 0 0;
    }
    .CTAsection .newsletterSection p,
    .careerBriefs .newsletterSection p{
        max-width: 100%;
        margin: 0 auto 30px;
    }
    .CTAsection .newsletterSection h4{
        margin: 0 auto 20px;
    }

    .dy-vwap .bannerSection.scrollerAi {
        padding: 50px 0 0px;
    }
    .bannerSection.Aifontscroller {
        padding: 50px 0;
    }
    .bannerContent .txtArea h4,.bannerContent p{
        text-align: center;
    }

    /* .how-item,.AiHighlights .how-item{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    } */
    .how-item, .AiHighlights .how-item {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        display: flex;
    }
    .AiStats .platformStatIcon {
        width: 50px;
        height: 50px;
    }
    .platformIconImage{
        width: 100%;
        height: auto;
    }

    .introContent h2 span.shadowTxt{
        filter: blur(4px);
    }
    .introContent h2 {
        font-size: 54px;
        font-weight: 600;
    }
    .introContent .container{
        padding-top: 120px;
        gap: 15px;
    }
    .serviceTitleHeader {
        width: 100%;
        font-size: 30px;
        font-weight: 500;
    }
    .aboutBanner ul.aboutDescList, ul.aboutDescList {
        width: 100%;
    }
    ul.aboutDescList{
        gap: 15px;
    }
    .heroBannerSection ul.heroAnimeTexts, ul.heroAnimeTexts {
        width: 100%;
        gap: 15px;
    }
    .heroBannerSection ul.heroAnimeTexts li, ul.heroAnimeTexts li {
        margin: 0 0 0px 0;
        font-size: 20px;
        font-weight: 400;
        line-height: 130%;
    }
    .introSection ul.aboutDescList li {
        margin: 0 0 0px 0;
        font-size: 30px;
    }

    .stockAnalyzeSection .serviceAnalyzeSection{
        padding: 0 0;
    }
    .ingeneersSection .newsletterSection h4{
        margin-bottom: 30px;
    }
    .ingeneersSection ul.aboutDescList li{
        margin-bottom: 0px;
    }
    .bioDectiption .bioProfileImg {
        width: 100%;
        position: relative;
    }

    .starmarksTxt{
        justify-content: flex-start;
    }
    .newsModal .bioDectiption .desctxt h4{
        font-size: 24px;
        font-weight: 500;
        line-height: 120%;
        margin-bottom: 30px;
    }
    .newsModal .bioDectiption .TitleArea{
        width: 100%;
    }
    .newsModal .btn-close {
        position: absolute;
        right: initial;
        top: 20px;
        z-index: 100;
        left: 10px;
        background-color: var(--color-highlight);
        border-radius: 100px;
        /* padding: 10px; */
        width: 12px;
        height: 12px;
        padding: 8px;
    }
    .newsModal .bioDectiption .desctxt {
        padding: 0px 00px 0 0px;
    }
    .bioModal.newsModal .modal-body {
        padding: 50px 30px 30px 50px;
    }
    .newsModal .bioDectiption .desctxt .designation{
        font-size: 16px;
        font-weight: 500;
        line-height: 140%;
    }
    .latestNewSection .sectionHeader h4 {
        /* font-size: 26px; */
        width: 100%;
    }
    .latestNewsList li a{
        padding: 15px 50px 15px 15px;
    }
    .latestNewsList li a h4 {
        font-size: 18px;
    }
    .highlightNewsArea .newsCard{
        padding: 15px 15px 35px 15px;
        flex-direction: column;
    }
    
    .newsCard .newsImg img {
        width: 100%;
        border-radius: 15px;
        height: 150px;
        object-fit: cover;
    }
    .highlightNewsArea .newsDescription h2,
    .latestNewSection ul.latestNewsList li h4{
        font-size: 20px;
        line-height: 1.25;
    }
    .latestNewSection ul.latestNewsList li h4 span.description{
        font-size: 14px;
    }
    .container {
        width: 96%;
        max-width: 100%;
    }
    .footerTop{
        gap: 15px;
    }
    .footerCol h4{
        margin: 20px 0 10px;
    }
    .footerContainer {
        padding: 30px 20px;
        flex-direction: column;
    }
    .serviceSection{
        padding: 50px 0;
    }
    #services.serviceSection.is-scroll-driven{
        min-height: auto;
        padding: 0 0 60px;
    }
    #services.serviceSection.is-scroll-driven .serviceSectionStack{
        min-height: 100svh;
        height: 100svh;
        --stackTop: 16px;
        --stackStep: 12px;
    }

    .teamMemberSection ul li {
        width: 100%;
        padding: 0;
    }
    .NameDesc h4 {
        font-size: 24px;
        font-weight: 500;
        line-height: 120%;
    }
    .NameDesc p{
        font-size: 16px;
        font-weight: 500;
    }
    .teamMemberSection ul {
        gap: 30px;
    }

    .executionPanel{
        flex-direction: column;
        gap: 15px;
    }
    .executionPanel .symbolArea{
        width: 200px;
        height: 200px;
        border-radius: 100%;
        background-color: #fff;
        padding: 20px;
    }
    .executionPanel .symbolArea img{
        width: auto;
        height: 100%;
        margin: 0px auto;
    }
    .marketingSection{
        padding: 50px 0;
    }
    .executionPanel .txtArea h4 {
        font-size: 24px;
    }
    .executionPanel .txtArea{
        padding: 20px 30px 20px;
    }
    .executionDisplayArea{
        margin: 30px 0 0 0;
    }
    .executionPanel .txtArea p {
        font-size: 14px;
        font-weight: 400;
        line-height: 140%;
    }
    .serviceAnalyzeSection{
        align-items: center;
        justify-items: center;
        flex-direction: column;
        justify-content: center;
    }
    .newsletterSection h4, .serviceAnalyzeSection h4 {
        /* font-size: 24px; */
        line-height: 140%;
        text-align: center;
        margin-bottom: 20px;
        width: 100%;
    }
    .serviceAnalyzeSection{
        gap: 30px;
    }
    .miniStockCount span h4{
        text-align: left;
    }
    .executionSectionRailViewport{
        padding: 0 10px;
    }
    .stockCountSection ul {
        flex-wrap: wrap;
        gap: 30px;
    }
    .executionSectionRailEdge--left {
        background: linear-gradient(90deg, var(--color-scnd) 10%, rgba(231, 234, 248, 0.92) 0%, rgba(231, 234, 248, 0) 50%);
    }
    .stockCountSection ul li, .miniStockCount {
        gap: 20px;
        width: 100%;
    }
    .aboutBanner.bannerSection{
        padding: 100px 0 50px 0;
        min-height: auto;
        height: auto;
    }
    .bannerSection.Aifontscroller{
        min-height: initial;
    }
    .aboutBanner ul.aboutDescList {
        width: 100%;
        gap: 20px;
        padding-top: 0vh;
    }
    .heroBannerSection ul.heroAnimeTexts {
        width: 100%;
        gap: 20px;
        padding-top: 0vh;
    }
    .ingeneersSection .newsletterSection h4 {
        font-size: 20px;
    }

    .serviceVideoContent .txtArea h4,
    .bannerSection h1, .bannerWrapper h4,
    .videoSection h4,.aboutBanner ul.aboutDescList li,
    .heroBannerSection ul.heroAnimeTexts li,
    .sectionHeader h4,.ingeneersSection .newsletterSection h2,
    .ingeneersSection ul.aboutDescList li{
        /* font-size: 26px; */
        font-weight: 500;
    }
    .heroBannerSection{
        height: auto;
        min-height: 100dvh;
    }
    .heroContent .container{
        padding: 0 20px;
    }

    .AiplatformSection{
        padding: 60px 0;
    }
    .AiplatformSection .aiPlatformHeader{
        margin-bottom: 40px;
    }
    .AiplatformSection .aiPlatformHeader h2{
        width: 100%;
    }
    .AiplatformSection .aiPlatformBottom{
        flex-direction: column;
        gap: 40px;
    }
    .AiplatformSection .aiPlatformBottomLeft,
    .AiplatformSection .aiPlatformBottomRight{
        width: 100%;
    }
    .AiplatformSection .aiPlatformBottomLeft h4{
        margin-bottom: 30px;
    }
    .AiplatformSection .aiPlatformActions{
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .AiplatformSection .aiPlatformFeatureList{
        gap: 18px;
    }

    .tradelifeCycleSection{
        padding: 60px 0;
    }
    .lifeCycleTop{
        flex-direction: column;
        gap: 24px;
        margin-bottom: 30px;
    }
    .tradelifeCycleSection .tradeLifecycleHeader{
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }
    .tradelifeCycleSection .tradeLifecycleHeader h2{
        width: 100%;
        font-size: 34px;
    }
    .tradelifeCycleSection .tradeLifecycleHeader p{
        width: 100%;
    }
    .tradelifeCycleSection .lifeCycleTop .executionSectionCta{
        padding-top: 0;
        width: 100%;
    }
    .tradelifeCycleSection .tradeLifecycleCards{
        gap: 16px;
    }
    .tradelifeCycleSection .mobileCardRailWrap,
    .executionSection .mobileCardRailWrap{
        width: calc(100% + var(--mobile-card-rail-bleed, 30px));
        margin-left: calc(var(--mobile-card-rail-bleed, 30px) / -2);
        margin-right: calc(var(--mobile-card-rail-bleed, 30px) / -2);
    }
    .tradelifeCycleSection .mobileCardRail,
    .executionSection .mobileCardRail{
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: pan-x pan-y pinch-zoom;
        gap: var(--mobile-card-rail-gap, 12px);
        padding: 0 var(--mobile-card-rail-stage-padding, 15px) 4px;
        margin: 0;
        width: 100%;
        grid-template-columns: none;
        scrollbar-width: none;
        contain: layout style;
    }
    .tradelifeCycleSection .mobileCardRail::-webkit-scrollbar,
    .executionSection .mobileCardRail::-webkit-scrollbar{
        display: none;
    }
    .tradelifeCycleSection .mobileCardRail .tradeLifecycleCard,
    .executionSection .mobileCardRail .algo-card{
        flex: 0 0 var(--mobile-card-rail-slide-width, calc((100vw - 30px - var(--mobile-card-rail-gap, 12px)) * 0.98));
        min-width: var(--mobile-card-rail-slide-width, calc((100vw - 30px - var(--mobile-card-rail-gap, 12px)) * 0.98));
        max-width: var(--mobile-card-rail-slide-width, calc((100vw - 30px - var(--mobile-card-rail-gap, 12px)) * 0.98));
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .tradelifeCycleSection .tradeLifecycleCard,
    .tradelifeCycleSection .tradeLifecycleCardMedia img,
    .tradelifeCycleSection .tradeLifecycleHoverPanel{
        will-change: auto;
    }
    .mobileCardRailProgress{
        width: min(72%, 280px);
        height: 3px;
        margin: 24px auto 0;
        border-radius: 100px;
        overflow: hidden;
        background: rgba(4, 55, 242, 0.16);
    }
    .mobileCardRailWrap.is-dark .mobileCardRailProgress{
        background: rgba(255, 255, 255, 0.14);
    }
    .mobileCardRailProgressFill{
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: var(--color-highlight);
        transition-property: width;
        transition-timing-function: ease-out;
    }
    .tradelifeCycleSection .tradeLifecycleCardMedia{
        height: 400px;
    }
    .tradelifeCycleSection .tradeLifecycleHoverPanel{
        left: 14px;
        right: 14px;
        top: 14px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: none;
    }
    .tradelifeCycleSection .mobileCardRail .tradeLifecycleHoverPanel--chat{
        top: auto;
        bottom: 14px;
    }
    .tradelifeCycleSection .tradeLifecycleDataCardHeader{
        padding: 12px 14px;
        font-size: var(--font-size-xs);
    }
    .tradelifeCycleSection .tradeLifecycleDataCardBody{
        padding: 12px;
        gap: 10px;
    }
    .tradelifeCycleSection .tradeLifecycleChatPanel{
        padding: 16px 14px 14px;
    }
    .tradelifeCycleSection .tradeLifecycleChatQuestion{
        font-size: var(--font-size-sm);
        margin-bottom: 12px;
    }

    .executionSection{
        padding: 60px 0;
    }
    .algos-page .executionSection .executionSectionHeader{
        max-width: 100%;
        margin-bottom: 30px;
        padding: 0 4px;
    }
    .algos-page .executionSection .executionSectionHeader h2{
        font-size: 34px;
    }
    .algos-page .executionSection .executionSectionHeader p{
        max-width: 100%;
    }
    .executionSectionTop{
        flex-direction: column;
        gap: 24px;
        margin-bottom: 30px;
    }
    .executionSectionHeader{
        max-width: 100%;
    }
    .executionSectionHeader h2{
        font-size: 34px;
    }
    .executionSectionHeader p{
        max-width: 100%;
    }
    .executionSectionCta{
        padding-top: 0;
        width: 100%;
    }
    .executionSectionRailViewport{
        min-height: 0;
    }
    .executionSectionRailNav{
        width: 42px;
        height: 42px;
    }
    .executionSectionRailEdge{
        width: clamp(52px, 14vw, 88px);
    }
    .executionSectionRailProgress{
        width: min(100%, 320px);
    }
    .executionSectionRailNav--prev{
        left: 6px;
    }
    .executionSectionRailNav--next{
        right: 6px;
    }
    .executionSectionGrid.is-execution-rail{
        padding: 24px 0 36px;
    }
    .executionSection .executionSectionGrid.is-execution-rail .algo-card{
        padding: 22px 20px 42px;
        border-radius: 22px;
    }
    .executionSectionRailProgressWrap{
        margin-top: 6px;
    }
    .executionSectionRailProgress{
        width: min(100%, 320px);
        height: auto;
    }
    .executionSection .executionSectionObject{
        width: 50%;
        right: -10%;
        bottom: -5%;
        opacity: 0.85;
    }
    .executionSection .executionSectionGrid.is-execution-rail .algo-card{
        padding: 20px;
        padding-bottom: 40px;
    }
    .executionSection .algo-card-inner .cardTop{
        gap: 18px;
        padding-bottom: 16px;
    }
    .executionSection .algo-icon{
        width: 70px;
        height: 70px;
    }
    .executionSection .algo-title{
        font-size: 24px;
    }
    .executionSection .algo-description p,
    .executionSection .algo-description ul li{
        font-size: var(--font-size-sm);
    }

    .infrastructure-section{
        padding: 60px 0;
    }
    .infrastructureWrapper{
        flex-direction: column;
        gap: 40px;
    }
    .infrastructureHeader,
    .infrastructureList{
        width: 100%;
        max-width: 100%;
    }
    .infrastructureHeader h2{
        font-size: 34px;
    }
    .infrastructureItem{
        gap: 20px;
        padding: 28px 0;
    }
    .infrastructureItem:first-child{
        padding-top: 0;
    }
    .infrastructureIcon{
        width: 70px;
        height: 70px;
    }
    .infrastructureContent h4{
        font-size: var(--font-size-h4);
    }
    .infrastructureContent p{
        font-size: var(--font-size-sm);
        max-width: 100%;
    }

/* hero banner */
    .heroBannerSection{
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }
    .heroContent{
        height: auto;
        min-height: 100dvh;
    }
    .heroContent .container{
        height: auto;
        min-height: 80vh;
        justify-content: space-between;
        gap: 100px;
        padding-top: 110px;
        padding-bottom: 56px;
    }
    .heroBannerSection ul.heroAnimeTexts{
        width: 100%;
        gap: 18px;
        overflow: visible;
    }
    .heroBannerSection ul.heroAnimeTexts li{
        margin: 0;
        line-height: 130%;
        will-change: transform, opacity;
    }
/* hero banner */

}
@media only screen and (max-width:740px){}
@media only screen and (max-width:736px){}
@media only screen and (max-width:732px){}
@media only screen and (max-width:720px){}
@media only screen and (max-width:667px){}
@media only screen and (max-width:640px){

    .executionSectionGrid{
        scroll-snap-type: none;
    }
    .executionSection .executionSectionObject{
        display: none;
    }
    .algos-page .executionSection .executionSectionHeader{
        margin-bottom: 24px;
        padding: 0;
    }
    .algos-page .executionSection .executionSectionHeader h2{
        font-size: var(--font-size-h2);
    }
    .executionSectionHeader h2{
        font-size: var(--font-size-h2);
    }

    .infrastructureItem{
        gap: 16px;
        padding: 24px 0;
    }
    .infrastructureIcon{
        width: 60px;
        height: 60px;
    }

}

/* Algos Lists Responsive Styles */
@media only screen and (max-width:1600px){
    .algo-card {
        padding: 35px;
    }
    .algo-title {
        font-size: 30px;
    }
    .algo-subtitle {
        font-size: 15px;
    }
    .algo-icon {
        width: 85px;
        height: 85px;
    }
}

@media only screen and (max-width:1440px){

    .teamSection{
        padding: 50px 0 0;
    }
    .bannerSection.scrollerAi {
        padding: 50px 0;
    }
    .allAlgosSection{
        padding: 50px 0;
    }
    .algosLists {
        gap: 25px;
    }
    .algo-card {
        padding: 32px;
    }
    .algo-card-inner .cardTop {
        gap: 20px;
    }
    .algo-icon {
        width: 80px;
        height: 80px;
    }
    .algo-title {
        font-size: 28px;
    }
    .algo-subtitle {
        font-size: 15px;
    }
    .algo-description h4 {
        font-size: 17px;
    }
    .algo-description p,
    .algo-description ul li {
        font-size: 14px;
    }
}

@media only screen and (max-width:1200px){
    .algosLists {
        gap: 20px;
    }
    .algo-card {
        padding: 30px;
    }
    .algo-card-inner .cardTop {
        gap: 18px;
    }
    .algo-icon {
        width: 75px;
        height: 75px;
    }
    .algo-title {
        font-size: 26px;
    }
    .algo-subtitle {
        font-size: 14px;
    }
    .algo-description h4 {
        font-size: 16px;
    }
    .algo-description h5 {
        font-size: 15px;
    }
    .algo-description p,
    .algo-description ul li {
        font-size: 13px;
    }
}

@media only screen and (max-width:992px){
    .algosLists,.algosLists.twoCols{
        gap: 18px;
        grid-template-columns: repeat(1, 1fr);
    }
    .algo-card {
        padding: 28px;
    }
    .algo-card-inner .cardTop {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .algo-icon {
        width: 70px;
        height: 70px;
    }
    .algo-title {
        font-size: 24px;
    }
    .algo-subtitle {
        font-size: 14px;
    }
    .algo-description h4 {
        font-size: 16px;
    }
    .algo-description h5 {
        font-size: 15px;
    }
    .algo-description p,
    .algo-description ul li {
        font-size: 13px;
    }
}

@media only screen and (max-width:768px){
    .algosLists,.algosLists.twoCols{
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .algosLists.twoCols{
        margin-top: 14px;
    }
    .algo-card {
        padding: 25px;
    }
    .algo-card-inner .cardTop {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding-bottom: 15px;
    }
    .algo-icon {
        width: 65px;
        height: 65px;
    }
    /* .algo-title {
        font-size: 22px;
    }
    .algo-subtitle {
        font-size: 13px;
    }
    .algo-description h4 {
        font-size: 15px;
    }
    .algo-description h5 {
        font-size: 14px;
    }
    .algo-description p,
    .algo-description ul li {
        font-size: 13px;
    } */
    .view-details-btn {
        /* font-size: 12px; */
        padding: 10px 22px;
    }
}

@media only screen and (max-width:480px){
    .algosLists {
        padding: 0px 0;
        gap: 14px;
    }
    .algo-card {
        padding: 28px 18px 38px 18px;
        border-radius: 20px;
    }
    .algo-icon,.cardIcon {
        width: 70px;
        height: 70px;
        margin-bottom: 22px;
    }

    /* Timeline Section - Small Mobile */
    /* .timelineSection{
        padding: 30px 0 0;
        margin-top: 30px;
    } */
    .timelineSection .titleArea h4{
        font-size: 14px;
    }
    .timelineSection .titleArea h2{
        font-size: 28px;
    }
    .tl {
        padding: 50px 0 30px;
    }
    .tl-header {
        margin-bottom: 35px;
    }
    .tl-eyebrow {
        font-size: 14px;
    }
    .tl-title {
        font-size: 28px;
    }
    .tl-track {
        padding: 0 12px;
    }
    .tl-item {
        padding: 16px 0;
        gap: 0 12px;
    }
    .tl-dot {
        width: 8px;
        height: 8px;
    }
    .tl-top, .tl-bot {
        gap: 4px;
    }
    .tl-date {
        font-size: 11px;
    }
    .tl-label {
        font-size: 12px;
        line-height: 1.4;
    }
    .tl-item:last-child .tl-dot {
        width: 12px;
        height: 12px;
    }

    /* Upload Section - Small Mobile */
    .uploadAttachSection label {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .uploadDragDropZone {
        padding: 24px 16px;
        border-radius: 10px;
    }
    .uploadIconWrapper {
        margin-bottom: 10px;
    }
    .uploadIcon {
        width: 40px;
        height: 40px;
    }
    .uploadMainText {
        font-size: 14px;
        line-height: 20px;
    }
    .uploadChooseLink {
        display: block;
        font-weight: 700;
    }
    .uploadHelpText {
        flex-direction: column;
        gap: 6px;
        font-size: 11px;
        margin-top: 10px;
    }
    .supportedFormats,
    .maximumSize {
        width: 100%;
    }
    .uploadedFileInfo {
        padding: 14px;
        border-radius: 10px;
    }
    .fileInfoContent {
        gap: 10px;
    }
    .checkIcon {
        width: 32px;
        height: 32px;
    }
    .fileNameWrapper {
        gap: 2px;
    }
    .fileName {
        font-size: 12px;
        margin: 0 0 2px 0;
    }
    .fileSize {
        font-size: 10px;
    }
    .removeFileBtn {
        padding: 4px;
    }
    .removeFileBtn svg {
        width: 16px;
        height: 16px;
    }

    .algo-title {
        font-size: 22px;
    }
    .algo-subtitle {
        font-size: 13px;
    }
    .algo-description h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .algo-description h5 {
        font-size: 14px;
        margin: 16px 0 10px 0;
    }
    /* .algo-description p,
    .algo-description ul li {
        font-size: 12px;
    } */
    .view-details-btn {
        /* font-size: 11px; */
        padding: 9px 20px;
        margin-top: 18px;
    }
    .arrow-btn {
        width: 38px;
        height: 38px;
        bottom: 18px;
        right: 18px;
    }
    .arrow-btn img {
        width: 15px;
        height: 15px;
    }
}
@media only screen and (max-width:600px){
    /* Upload Section - Small Screen */
    .uploadAttachSection label {
        font-size: 13px;
        margin-bottom: 10px;
    }
    .uploadDragDropZone {
        padding: 28px 18px;
        border-radius: 12px;
    }
    .uploadIcon {
        width: 44px;
        height: 44px;
    }
    .uploadMainText {
        font-size: 15px;
    }
    .uploadHelpText {
        font-size: 11px;
    }
    .uploadedFileInfo {
        padding: 15px;
        border-radius: 12px;
    }
    .checkIcon {
        width: 34px;
        height: 34px;
    }
    .fileName {
        font-size: 13px;
    }
    .fileSize {
        font-size: 11px;
    }
    
    /* FAQ Cards - Mobile */
    .sectionFaqs {
        padding: 60px 0;
    }
    .faqCard {
        padding: 30px 25px 25px 25px;
        min-height: auto;
        border-radius: 24px;
    }
    .faqQuestion p {
        font-size: 16px;
    }
    .faqAnswer p {
        font-size: 14px;
    }
    .faqSeparator {
        margin: 20px 0;
    }
    .faqIcon {
        width: 50px;
        height: 50px;
    }

    /* Platform Section - Small Mobile */
    .platformSection{
        padding: 50px 0;
    }
    .platformTitle{
        font-size: 24px;
    }
    .platformStatsContainer{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .platformStatCard{
        padding: 15px 0;
        gap: 14px;
    }
    .platformStatIcon{
        min-width: 44px;
        height: auto;
    }
    .AiStats .platformStatIcon,
    .platformStatIcon {
        min-width: 44px;
        width: 50px;
        height: auto;
    }
    .platformIconImage{
        width: 100%;
        height: auto;
    }
    .platformStatValue{
        font-size: 22px;
    }
    .platformStatLabel{
        font-size: 11px;
    }
    .platformSeparator{
        margin: 8px 0;
    }
    .platformBasketsTitle{
        font-size: 20px;
        margin-bottom: 10px;
    }
    .platformBasketsDescription{
        font-size: 13px;
        margin-bottom: 12px;
    }
    .platformFeaturesList{
        gap: 10px;
    }
    .platformFeaturesList li{
        font-size: 12px;
        padding-left: 18px;
    }
}
@media only screen and (max-width:568px){

    
    .bannerSection img.bannerImage{
        border-radius: 30px;
        height: 50vh;
        object-fit: cover;
    }
    .stockCountSection ul li img, .miniStockCount img {
        border-radius: 0;
        width: 75px;
    }
    /* .serviceTitleHeader {
        width: 100%;
        font-size: 42px;
        font-weight: 500;
    } */

    /* System Status Responsive */
    .systemStatus {
        border-radius: 12px;
    }

    .systemStatusHeader {
        padding: 16px 20px;
        flex-direction: row;
        gap: 12px;
        text-align: center;
    }

    .statusTitle {
        font-size: 18px;
    }

    .statusGrid {
        padding: 20px;
        gap: 16px;
    }

    .statusRow {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-bottom: 16px;
    }

    .statusValue {
        text-align: left;
        font-size: 16px;
    }
}

@media only screen and (max-width:480px) {
    .systemStatusHeader {
        padding: 12px 16px;
    }

    .statusTitle {
        font-size: 16px;
    }

    .liveIndicator {
        font-size: 12px;
    }

    .statusGrid {
        padding: 16px;
        gap: 12px;
    }

    .statusRow {
        padding-bottom: 12px;
    }

    .statusLabel {
        font-size: 12px;
    }

    .statusValue {
        font-size: 14px;
    } */
    .serviceVideoContent .txtArea h4,
    .bannerSection h1, .bannerWrapper h4,
    .videoSection h4,.aboutBanner ul.aboutDescList li,
    .heroBannerSection ul.heroAnimeTexts li,
    .sectionHeader h4,.ingeneersSection .newsletterSection h2,
    .ingeneersSection ul.aboutDescList li{
        font-size: 26px;
        font-weight: 500;
    }
    .videoSection h4,.bannerSection h1{
        font-size: 36px;
        font-weight: 500;
        line-height: 120%;
    }
    .stockCountSection ul li span h4, .miniStockCount span h4{
        font-size: 24px;
    }
    .sectionHeader p{
        text-align: center;
    }

}
@media only screen and (max-width:520px){
    
}
@media only screen and (max-width:480px){

}
@media only screen and (max-width:479px){
 
}
@media only screen and (max-width:460px){}
@media only screen and (max-width:420px){
   
}
@media only screen and (max-width:414px){}
@media only screen and (max-width:412px){}
@media only screen and (max-width:400px){}
@media only screen and (max-width:380px){}
@media only screen and (max-width:375px){}
@media only screen and (max-width:360px){

}
@media only screen and (max-width:340px){}
@media only screen and (max-width:320px){
   
}


/*--------*/


@media only screen and (max-height:900px){
   
}

@media only screen and (max-height:800px){
   
}

@media only screen and (max-height:770px){
    
}

@media only screen and (max-width:1170px) and (max-height:840px){
   
}

@media only screen and (max-height:800px){
   
}



/*======== About page — responsive ========*/

@media only screen and (max-width: 991px) {
    .about-page .sectionHeader h4,
    .about-page .ingeneersSection .newsletterSection h2 {
        line-height: 1.15;
    }

    .aboutBanner ul.aboutDescList {
        width: 90%;
        gap: 22px;
    }
}

@media only screen and (max-width: 767px) {
    .about-page .sectionHeader h4,
    .about-page .ingeneersSection .newsletterSection h2 {
        font-weight: 500;
    }

    .aboutBanner.bannerSection {
        min-height: auto;
        height: auto;
        overflow: visible;
        padding: 110px 20px 60px;
    }

    .aboutBanner .container {
        height: auto;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .aboutBanner ul.aboutDescList {
        width: 100%;
        gap: 18px;
        overflow: visible;
        padding-top: 0;
    }

    .aboutBanner ul.aboutDescList li {
        margin: 0 0 12px;
        line-height: 130%;
        will-change: transform, opacity;
    }

    .about-page .teamSection {
        padding-top: 60px;
    }

    .about-page .stockAnalyzeSection.aboutUnits {
        padding: 40px 0;
    }

    .about-page .ingeneersSection ul.aboutDescList li {
        line-height: 130%;
    }
}

@media only screen and (max-width: 480px) {
    .aboutBanner ul.aboutDescList li {
        font-size: var(--font-size-h4);
        line-height: 135%;
    }
}