@media (max-width: 1920px) { 
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, -40px);
        right: auto;
    }
}

/* for laptop  */
@media (max-width: 1400px) { 
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 10px);
        right: auto;
    }
    .mycustomslders {
        max-width: 1176px;
        margin: 0 auto;
    }
    .nuestros::after {
        top: -850px;
    }
    .nuestrosservice::after {
        top: -750px;
    }
    /* .clickheader::after {
        background-size: contain;
     } */
    .clicklogoservice .poder {
        padding-top: 80px;
    }
    .balanceflexservice {
        gap: 40px;
    }
    .clickservice::after {
        background-size: contain !important;
    } 
    
}

 /* for the 991 screen  */
@media (max-width: 1280px) { 
    .software {
        padding: 0 40px;
    }
    .mycustomslders {
        max-width: 1120px;
        margin: 0 auto;
    }
    .balanceflexservice {
        gap: 40px;
        padding: 0 60px;
    }
    .solucionservicepadd {
        padding: 0 60px;
        padding-top: 179px;
    }
    .clicklogoservice .poder {
        padding-top: 80px;
        font-size: 44px;
    }
    .clickservice::after {
        top: 0px !important;
    }
    .solucionservice {
        padding-top: 15px;
    }
    .solucionlistservice {
        padding-top: 31px;
    }
    .reciblesection {
        padding: 0 40px;
        margin-top: 146px;
    }
    .recibleh2 {
        max-width: 780px;
        margin: 0 auto;
        color: #FFF;
        text-align: center;
        font-size: 34px;
        font-weight: 800;
        line-height: 105%;
    }
    .recible {
        max-width: 1164px;
        margin: 0 auto;
        background-color: #1480c1;
        border-radius: 25px;
        padding: 60px 0px;
    }
    .reciblemain .conoce {
        margin-top: 60px;
    }
    .nuestrosservice {
        padding-left: 40px !important;
        margin-top: 140px !important;
    }
    .nuestrosservice::after {
        top: -350px !important;
    }
    .clicktransform .transformheaderh3 {
        font-size: 34px;
    }
    .transformheader::after {
        background-size: contain;
        width: 530px;
    }
    .slidercontainer h3 {
        font-size: 38px;
        max-width: 835px;
    }
    .slidercontainer {
        padding-bottom: 110px;
    }
    }

 @media (max-width: 1200px) { 
    .software {
        padding: 0 40px;
    }
    .mycustomslders {
        max-width: 1120px;
        margin: 0 auto;
    }
    .clickheader::after {
        content: "";
        background-image: url(../images/rectangle.png);
        background-repeat: no-repeat;
        width: 490.469px;
        height: 1041.24px;
        position: absolute;
        top: -130px;
        right: 0;
        z-index: -1;
    }
    .clickcontainer {
        padding: 0 40px;
    }
    .clicklogo h3 {
        font-size: 58px;
    }
    .slidercontainer h3 {
        font-size: 38px;
    }
    .mycustomslders {
        max-width: 850px;
        margin: 0 auto;
    }
    .balanceflex {
        padding: 0 40px;
        gap: 40px;
    }   
    .balancegridgaps > img {
        width: 63%;
    } 
    .balancegridgap > img {
        width: 63%;
    } 
    .balance {
        height: 570px;
    }
    .balanceh5 {
        max-width: 305px;
        font-size: 20px;
    }
    .solucion {
        padding: 0 40px;
        padding-top: 179px;
    }
    .solucionh2 {
        font-size: 23px;
    }
    .solucionp {
        font-size: 16px;
    }
    .solucionlist {
        font-size: 14px;
    }
    .fiftyk {
        width: 290px;
    }
    .fiftykk {
        width: 290px;
        padding-left: 20px;
    }
    .fiftykmaintwo {
        width: 290px;
    }
    .solucionflex {
        gap: 30px;
    }
    .software {
        padding: 0 0px;
    }
    .softwarecard {
        height: 320px;
    }
    .proqueh3 {
        font-size: 32px;
    }
    .proque h4 {
        font-size: 12px;
    }
    .proqueflex {
        gap: 10px;
    }
    .proquep {
        font-size: 12px;
        line-height: 16px;
    }
    .proqueh2 {
        font-size: 20px;
    }
    .nuestros::after {
        content: "";
        position: absolute;
        background-image: url('../images/Rectangle2.png');
        background-repeat: no-repeat;
        width: 410px;
        height: 1591.235px;
        top: -900px;
        right: 0px;
    }
    .nuestros {
        padding-left: 40px;
        margin-top: 300px;
    }
    .custombgform {
        padding: 0 40px;
    }
    .customform {
        padding: 0 40px;
        padding-top: 150px;
    }
    .footerpara {
        max-width: 310px;
    }
    .footerflex {
        padding-bottom: 79px;
    }
    .clickservice::after {
        background-size: contain !important;
    }  
    .transformgrouplast .lastgroup {
        margin-top: -60px;
        height: 620px;
    }  
    .manwithbox {
        flex: initial !important; 
    }
 }

/* for tablet  */
 @media (max-width: 991px) { 
    .clicklogo h3 {
        font-size: 44px;
        padding-top: 100px;
    }
    .clicklogo p {
        font-size: 20px;
    }
    .clickheader::after {
            content: "";
            width: 300px;
            height: 1041px;
            position: absolute;
            top: -240px;
            right: 0;
            z-index: -1;
    }
    .slidercontainer h3 {
        font-size: 30px;
    }
    .mycustomslders {
        max-width: 610px;
        margin: 0 auto;
    }
    .balanceflex {
        padding: 0 20px;
        gap: 0px;
    }
    .balanceh2 {
        font-size: 34px;
    }
    .balancep {
        max-width: 350px;
        font-size: 16px;
    }
    .balanceh5 {
        max-width: 305px;
        font-size: 16px;
    }
    .balancegridgap {
        display: flex;
        gap: 10px;
        align-items: baseline;
        justify-content: flex-end;
    }
    .balancegridgaps {
        display: flex;
        gap: 10px;
        align-items: start;
        justify-content: flex-end;
    }
    .balancegridgap > img {
        width: 60%;
    }
    .balancegridgaps > img {
        width: 60%;
    }
    .balancegridgap .customimg2 {
        width: 30%;
    }
    .balancegridgaps .customimg3 {
        width: 30%;
    }
    .balance {
        height: 470px;
    }
    .balancegrid {
        margin-top: -25px;
    }
    .proque {
        padding: 0 20px;
    }
    .proquegrid {
        row-gap: 20px;
        column-gap: 10px;
    }
    .nuestros {
        padding-left: 20px;
    }
    .nuestrosh2 {
        font-size: 40px;
        width: 322px;
    }
    .nuestrosh3 {
        font-size: 22px;
    }
    .mySwiper2 {
        padding: 40px 0px;
        padding-left: 20px;
    }
    .custombgh2 {
        font-size: 44px;
    }
    .footerflex {
        padding: 0 20px;
        padding-bottom: 50px;
    }
    .iconflex {
        margin-top: 40px;
        gap: 6px;
    }
    .footerrutes {
        font-size: 12px;
    }
    .footerpara {
        max-width: 240px;
        font-size: 12px;
    }
    .footeryoutube {
        width: 40px;
        height: 40px;
    }
    .solucion {
        padding: 0 20px;
        padding-top: 179px;
    }
    .fiftyk {
        width: 220px;
    }
    .fiftykk {
        width: 220px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .fiftykmaintwo {
        width: 250px;
    }
    .software {
        margin-top: 226px;
        display: flex;
        gap: 30px;
        justify-content: center;
    }
    .softwarecard {
        padding: 0px 40px;
        width: 350px;
        height: 250px;
        align-items: start;
    }
    .softwareul li {
        font-size: 14px;
    }
    .softwareul {
        padding: 0 18px;
        padding-top: 20px;
    }
    .softwareone {
        gap: 30px;
    }
    .softwareh2 {
        padding-top: 35px;
        color: #343434;
        font-size: 23px;
        font-style: normal;
        font-weight: 800;
        line-height: 93%;
        max-width: 343px;
	margin:0!important;
    }
    .solucionh2 {
        font-size: 18px;
    }
    .solucionp {
        font-size: 14px;
    }
    .solucionflex {
        gap: 20px;
    }
    .Ellipsemain {
        padding: 0 15px;
    }
    .main {
        display: flex;
        gap: 10px;
    }
    .solucionlist {
        font-size: 12px;
        padding-top: 6px;
    }
    .clicklogoservice .poder {
        padding-top: 80px;
        font-size: 24px;
    }
    .clicknavservie {
        justify-content: start;
        padding-left: 20px;
    }
    .clickservice::after {
        top: 0px !important;
        width: 400px !important;
        height: 600px !important;
    }
    .slidercontainerservice {
        padding-top: 60px;
        padding-bottom: 0px;
    }
    .sectionmobileservice {
        padding-top: 120px;
        background-color: #F0F0F0;
    }
    .solucionlistsservice {
        padding-top: 20px;
    }
    .servicemain {
        margin-top: -40px;
    }
    .servicemain .lorembtn {
        width: 185px;
        height: 55px;
    }
    .recibleh2 {
        font-size: 24px;
        padding: 0px 20px;
    }
    .recible {
        padding: 40px 0px;
    }
    .reciblemain .conoce {
        margin-top: 40px;
    }
    .reciblesection {
        padding: 0 40px;
        margin-top: 90px;
    }
    .customformservice {
        padding-top: 90px;
    }
    .servicefooter {
        margin-top: 90px;
    }
    .balanceservice {
        height: auto !important;
    }
    .clicktransform .transformheaderh3 {
        font-size: 25px;
    }
    .transformheader::after {
        width: 400px;
    }
    .clicknav {
        justify-content: start;
        padding-left: 20px;
    }
    .slidercontainer h3 {
        max-width: 670px;
    }
    .transformpadd .transformbottom > img {
        height: 600px;
    }
    .transformpadd .solucionlistservice {
        padding-top: 20px;
    }
    .solucion .soluciontranforn {
        padding-top: 5px;
    }
    .solucion .soluciontranforn > p {
        font-size: 16px;
    }
    .solucion .soluciontranfornles > p {
        font-size: 16px;
    }
    .transformpadd .solucionh2 {
        font-size: 28px;
    }
    .transformgrouplast .lastgroup {
        height: 550px;
    }
    .transformgrouplast .solucionh2 {
        font-size: 24px;
    }
    .transformgroup .solucionh2 {
        font-size: 24px;
    }
    .transformgrouplast .solucionlistservice {
        padding-top: 20px;
    }
    .mylasrgroupfinal .solucionlistservice {
        padding-top: 20px;
    }
    .adaptamos .cardadapt {
        max-width: 330px;
    }
    .adaptamos .distrihp {
        font-size: 16px;
    }
    .adaptamos .distrihf {
        font-size: 28px;
    }
    .col-6 {
        flex: initial; /* or flex: 1 1 auto; or another appropriate value */
    }
    .manwithbox {
        flex: initial !important; 
    }
    .slidercontainer {
        padding-bottom: 110px;
    }
  }

  /* for sm   */
  @media (max-width: 767px) { 
    .clicklogo h3 {
        font-size: 32px;
        padding-top: 50px;
    }
    .clicklogo p {
        font-size: 16px;
        line-height: 120%;
    }
    .clicklogo {
        padding-top: 50px;
    }
    .clicknav h4 {
        font-size: 15px;
    }
    .clicknav {
        justify-content: start;
        padding-left: 20px;
        height: 50px;
    }
    .clickheader::after {
        content: "";
        width: 300px;
        height: 500px;
        position: absolute;
        top: 0px;
        right: 0;
        z-index: -1;
        background-size: contain;
    }
    .clickcontainer {
        padding: 0 20px;
    }
    .slidercontainer {
        padding-top: 40px;
        padding-bottom: 0px;
    }
    .slidercontainer h3 {
        font-size: 21px;
    }
    .mycustomslders {
        max-width: 445px;
        margin: 0 auto;
    }
    .balance {
        height: auto;
    }
    .solucion {
        padding: 0 20px;
        padding-top: 80px;
    }
    .solucionh2 {
        color: #343434;
        font-size: 35px;
        font-style: normal;
        font-weight: 800;
        line-height: 93%;
        max-width: 100%;
    }
    .solucionp {
        max-width: 100%;
        padding-top: 20px;
        color: #343434;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 93%;
    }
    .solucionlists {
        padding-top: 20px;
    }   
    .solucionlist {
        font-size: 14px;
        padding-top: 6px;
    } 
    .solucionflex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .fiftyk {
        width: 250px;
    }
    .fiftykk {
        width: 250px;
    }
    .fiftykmaintwo {
        width: 280px;
    }
    .solucionflex {
        gap: 20px;
    }
    .software {
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
    }
    .softwarecard {
        padding: 0px 40px;
        width: 350px;
        height: 250px;
        align-items: start;
    }
    .softwaretwo {
        gap: 30px;
        margin-top: 0px;
    }
    .nuestros::after {
        background-size: contain;
        width: 270px;
        height: 1591.235px;
        top: -150px;
        right: 0px;
    }
    .proque {
        margin-top: 60px;
    }
    .proquegrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        row-gap: 20px;
    }
    .proqueh3 {
        font-size: 24px;
    }
    .proqueflex {
        gap: 30px;
    }
    .nuestrosh2 {
        font-size: 26px;
        width: 190px;
    }
    .nuestrosh3 {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 93%;
        max-width: 190px;
        padding-top: 40px;
    }
    .mySwiper2 {
        padding: 40px 0px;
        padding-left: 0px;
    }
    footer {
        margin-top: 50px;
    }
    .footerflex {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 40px;
    }
    .footerbalacne {
        padding-bottom: 5px;
    }
    .nuestros {
        margin-top: 100px;
    }
    .customform {
        padding: 0 20px;
        padding-top: 50px;
    }
    .custombgform {
        padding: 0 20px;
    }
    .lorembtnform {
        margin-top: 47px;
        margin-bottom: 40px;
    }
    .custombgh2 {
        padding-top: 60px;
    } 
    .sectionmobile {
        padding-top: 80px;
        background-color: #F0F0F0;
    }
    .loremain button {
        width: 261px;
        margin-top: 70px;
    }
    .formpara {
        color: #FFF;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 105%;
    }
    .balanceflexservice {
        gap: 40px;
        padding: 0 40px;
        padding-top: 60px;
        flex-direction: column;
        align-items: start;
    }
    .secondbalancegrid {
        margin-top: 26px;
    }
    .clickservice::after {
        top: 0px !important;
        width: 300px !important;
        height: 550px !important;
    }
    .clickservice::after {
        top: 0px !important;
        width: 300px !important;
        height: 550px !important;
    }
    .clicklogoservice .poder {
        padding-top: 40px;
        font-size: 24px;
    }
    .lorembtnservices {
        margin-top: 40px;
    }
    .balancegridgapservice > img {
        width: 100%;
    }
    .balancegridgapsservice > img {
        width: 100%;
    }
    .transformheader::after {
        width: 300px;
        height: 500px;
    }
    .clicktransform .transformheaderh3 {
        font-size: 18px;
    }
    .transformbg .slidercontainer h3 {
        font-size: 21px;
        max-width: 400px;
    }
    .transformpadd {
        padding-top: 40px;
    }
    .sectionpadding {
        padding-top: 60px;
        background-color: #F0F0F0;
    }
    .transformpadd .transformbottom {
        margin-top: 0px;
    }
    .transformgrouplast .solucion {
        padding-top: 40px;
    }
    .transformgrouplas {
        margin-top: 40px;
    }
    .transformgrouplast .lastgroup {
        margin-top: 0px;
        height: 610px;
    }
    .trnsformrecible {
        margin-top: 60px;
        padding: 0 20px;
    }
    .transfornuestros {
        margin-top: 60px !important;
    }
    .mycustomslders .transformswiper {
        padding-top: 80px;
        margin-top: 0px;
    }
    .transformgrouplast {
        margin-top: 60px;
    }
    .balancegridgapservice > img {
        width: 68%;
    }
    .balancegridgapsservice > img {
        width: 68%;
    }
    .nuestrosservice {
        padding-left: 20px !important;
    }
   
  }

 /* for mobile  */
  @media (max-width: 575px) { 
    .clickheader::after {
        content: "";
        width: 300px;
        height: 500px;
        position: absolute;
        top: 0px;
        right: 0;
        z-index: -1;
        background-size: contain;
        display: none;
    }
    .clicknav h4 {
        font-size: 12px;
    }
    .clickflex {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }    
    .clicklogo h3 {
        font-size: 30px;
        padding-top: 30px;
    }
    .clicklogo p {
        font-size: 16px;
        line-height: 120%;
        padding-top: 20px;
    }
    .lorembtn {
        margin-top: 30px;
    }
    .smileywomen {
        padding-top: 40px;
    }
    .mycustomslders {
        max-width: 280px;
        margin: 0 auto;
    }
    .slidercontainer {
        padding-bottom: 50px;
    }
    .sectionmobile {
        padding-top: 20px;
        background-color: #F0F0F0;
    }
    .balanceflex {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        max-width: 1365px;
        margin: 0 auto;
        padding: 20px 20px;
    }
    .balancegrid {
        margin-top: 20px;
    }
    .balancep {
        max-width: 100%;
        padding-top: 20px;
    }
    .balanceh5 {
        max-width: 100%;
        font-size: 16px;
        padding-top: 20px;
    }
    .solucionh2 {
        font-size: 30px;
    }
    .main {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .fiftyk {
        width: 100%;
    }
    .fiftykk {
        width: 100%;
    }
    .fiftykmaintwo {
        width: 100%;
    }
    .proqueflex {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 25px;
    }
    .nuestros::after {
        background-size: contain;
        width: 270px;
        height: 1591.235px;
        top: -150px;
        right: 0px;
        display: none;
    }
    .nuestrosflex {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .footerflex {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .footerpara {
        max-width: 240px;
        font-size: 12px;
        padding-top: 20px;
    }
    .iconflex {
        margin-top: 20px;
        gap: 6px;
    }
    footer {
        padding-top: 20px;
    }
    .footerflex {
        padding: 0 20px;
        padding-bottom: 20px;
    }
    .custombgh2 {
        font-size: 28px;
    }
    .mySwiper2 {
        padding: 0px 0px;
        padding-left: 0px;
        width: 100%;
    }
    .mainslide {
        width: 355px;
        height: 340px;
        margin: 0 auto;
        padding: 0px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: contain;
    }
    .swiperlorem {
        font-size: 14px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .forpadding {
        padding: 0 20px;
        padding-top: 0px;
    }
    .nuestrosh2 {
        font-size: 26px;
        width: 100%;
    }
    .nuestrosh3 {
        max-width: 100%;
        padding-top: 20px;
    }
    .nuestros {
        margin-top: 50px;
    }
    .customform {
        padding: 0 20px;
        padding-top: 30px;
    }
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 6px);
        right: auto;
    }
    .swiper-button-next, .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 6px);
        left: auto;
    }
    .swiper-button-next, .swiper-button-prev {
        width: calc(var(--swiper-navigation-size) / 30* 24);
    }
    .staricon-main {
        padding-bottom: 30px;
    }
    .smileywomen {
        padding-top: 40px;
        max-width: 50%;
    }
    .balancegridgap > img {
        width: 65%;
    }
    .balancegridgap .customimg2 {
        width: 30%;
    }
    .balancegridgaps .customimg3 {
        width: 30%;
    }
    .balancegridgaps > img {
        width: 65%;
    }
    .servicemain {
        margin-top: 20px;
    }
    .balancegridgap {
        justify-content: flex-start;
    }
    .balancegridgaps {
        justify-content: flex-start;
    }
    .recibleh2 {
        font-size: 20px;
        padding: 0px 20px;
    }
    .slidercontainer h3 {
        font-size: 20px;
    }
    .balanceflexservice {
        align-items: start;
    }
    .nuestrosservice {
        padding-left: 20px !important;
        margin-top: 60px !important;
    }
    .solucionservicepadd {
        padding: 0 20px;
        padding-top: 60px;
    }
    .reciblesection {
        padding: 0 20px;
        margin-top: 60px;
    }
    .main {
        width: 100%;
    }
    /* page 3  */
    .transformheader::after {
        width: 0px;
        height:0px;
    }
    .clicktransform .transformheaderh3 {
        padding-top: 40px;
    }    
    .transformbtn {
        margin-top: 40px;
        width: 147px;
        height: 50px;
        border-radius: 9px;
        background: #1B2F54;
        border: none;
        color: #FFF;
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        line-height: 93%;
        position: relative;
        z-index: 999;
    }
    .transformheader  .smileywomen {
        padding-top: 40px;
        max-width: 70%;
    }
    .clicklogo {
        padding-top: 40px;
    }
    .transformbg .slidercontainer h3 {
        font-size: 18px;
        max-width: 400px;
    }
    .swipeauto .automatizelsidep {
        max-width: 217px;
        color: #343434;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        line-height: 15px;
    }
    .swipeauto .some {
        font-size: 14px;
        padding-top: 13px;
    }
    .transformpadd .transformbottom > img {
        height: auto;
    }
    .transformgrouplast .solucionh2 {
        font-size: 22px;
    }
    .transformgroup .solucionh2 {
        font-size: 22px;
    }
    .transformpadd .solucionh2 {
        font-size: 22px;
    }
    .solucion .soluciontranfornles > p {
        font-size: 14px;
    }
    .solucion .soluciontranforn > p {
        font-size: 14px;
    }
    .transformgrouplast .lastgroup {
        margin-top: 0px;
        height: auto;
    }
    .slidercontainer {
        padding-bottom: 10px;
    }
    .lorembtn {
        width: 160px;
        height: 55px;
    }
  }