@media (max-width: 575.98px) {
  .text-span span {
    font-size: 14.6vw;
    line-height: 27vw;
  }

  .font-size-set {
    font-size: 16px;
  }

  .mob-next,
  .mob-prev {
    top: var(--swiper-navigation-top-offset, 38%) !important;
  }

  .gradientText {
    font-weight: 700;
    font-size: 1.8em;
  }

  .headingThree {
    font-size: 1.6rem;
    font-weight: 700;
  }

  .stats {
    width: 80%;
    height: auto;
  }

  .stats h4 {
    font-size: 26px;
    font-weight: 800;
  }

  .stats p {
    font-weight: 500;
    text-align: center;
  }

  .footer-option {
    font-weight: 600;
    color: var(--mobile-blue);
    padding-bottom: 20px;
  }

  .footer-nav-option a {
    padding-bottom: 18px;
  }
  .pin-spacer {
    height: 315svh;
    padding: 0 !important;
  }

  .icon-box {
    height: 270px;
  }

  /* images icons */
  .youtube,
  .store,
  .Kooliya,
  .orangebox,
  .byju,
  .excel,
  .power-point,
  .brave,
  .insta,
  .n-img,
  .canva,
  .duolingo,
  .test-book,
  .bgmi,
  .pw,
  .freefire,
  .subwaysurfer,
  .ms-word,
  .file-manager,
  .rozgaar {
    width: 48px;
  }

  .insta {
    position: absolute;
    top: 7%;
    left: 36%;
  }

  .youtube {
    position: absolute;
    top: 22%;
    left: 59%;
  }

  .store {
    position: absolute;
    top: 33%;
    left: 40%;
  }

  .Kooliya {
    position: absolute;
    top: 0;
    left: 25%;
  }

  .orangebox {
    position: absolute;
    top: 18%;
    left: 15%;
  }

  .byju {
    position: absolute;
    top: 35%;
    left: 0;
  }

  .excel {
    position: absolute;
    top: 33%;
    left: 0%;
  }

  .power-point {
    position: absolute;
    top: 10%;
    right: 9%;
  }

  .brave {
    position: absolute;
    bottom: 32%;
    right: 37%;
  }

  .n-img {
    position: absolute;
    top: 35%;
    right: 7%;
  }

  .canva {
    position: absolute;
    top: 59%;
    right: 2%;
  }

  .duolingo {
    position: absolute;
    bottom: 19%;
    right: 10%;
  }

  .test-book {
    position: absolute;
    bottom: 0;
    right: 21%;
  }

  .bgmi {
    position: absolute;
    bottom: 10%;
    right: 35%;
  }

  .pw {
    position: absolute;
    left: 34%;
    bottom: 22%;
  }

  .freefire {
    position: absolute;
    bottom: 0;
    left: 43%;
  }

  .subwaysurfer {
    position: absolute;
    bottom: 4%;
    left: 25%;
  }

  .ms-word {
    position: absolute;
    bottom: 15%;
    left: 7%;
  }

  .file-manager {
    position: absolute;
    bottom: 0;
    left: 1%;
  }

  .rozgaar {
    position: absolute;
    left: 10%;
    bottom: 36%;
  }

  .content-show {
    height: 200px;
  }

  .headingTwo {
    font-size: 2.4rem;
  }

  .swiper-x-padding {
    padding: 0 !important;
  }

  .swiper-slide {
    padding: 0 20px;
  }

  .desktop-prev-btn,
  .desktop-next-btn {
    top: var(--swiper-navigation-top-offset, 87%) !important;
  }

  .desktop-next-btn {
    right: 70% !important;
  }

  .padding-for-mob {
    padding-bottom: 80px !important;
  }

  .cost-effect-box div svg {
    width: 60px;
    height: 60px;
  }

  .cost-effect-box h5 {
    font-size: 1.5rem;
  }

  .cost-effect-box p {
    padding-top: 7px;
    color: var(--text-gray);
  }

  .mob-size-font {
    font-size: 1.2rem;
  }

  .headingFive {
    font-size: 14px;
    font-weight: 500;
  }

  .primary-btn {
    text-align: center;
    padding: 8px 20px;
  }

  .service-title {
    font-size: 36px;
  }

  .customer-support p {
    text-align: start !important;
  }

  .social-icons a svg {
    width: 38px;
    height: 38px;
  }

  .hero-section {
    height: 90vh;
  }

  .image-change-box {
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0) scale(0);
    transform-origin: center;
  }

  .swiper-button-prev-second {
    left: 65% !important;
  }

  #gurkha-suv {
    width: 100%;
    height: 260px;
  }

  .width-set {
    width: 85%;
  }

  .heroDiv {
    overflow: hidden !important;
  }

  #pinnedsection {
    transform: translateY(200%);
  }

  #scrollImage {
    width: 100%;
  }

  .text-change {
    height: 100vh;
  }

  .mob-bg {
    background: var(--grayish-white);
  }

  .custom-service-mobile {
    background: var(--gray) !important;
  }

  .custom-service-mobile > h3 {
    color: var(--white) !important;
  }

  .service-title {
    color: var(--white);
  }

  .service-content {
    color: #ffffffba;
  }

  .laptopImg-1 {
    width: 120%;
    height: 110%;
    transform: translateX(-65px);
  }

  .mobile_font .accordion-item h2 > button {
    font-size: 25px !important;
  }
  .tabcontent {
    height: 170px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .text-span span {
    font-size: 18vw;
    line-height: 27vw;
  }

  .font-size-set {
    font-size: 16px;
  }

  .text-change {
    height: 480px;
  }

  .gradientText {
    font-weight: 700;
    font-size: 1.8em;
  }

  .headingThree {
    font-size: 1.6rem;
    font-weight: 700;
  }

  .stats {
    width: 80%;
    height: auto;
  }

  .stats h4 {
    font-size: 26px;
    font-weight: 800;
  }

  .stats p {
    font-weight: 500;
    text-align: center;
  }

  .footer-option {
    font-weight: 600;
    color: var(--mobile-blue);
    padding-bottom: 20px;
  }

  .footer-nav-option a {
    padding-bottom: 18px;
  }

  .icon-box {
    height: 270px;
  }

  /* images icons */
  .youtube,
  .store,
  .Kooliya,
  .orangebox,
  .byju,
  .excel,
  .power-point,
  .brave,
  .insta,
  .n-img,
  .canva,
  .duolingo,
  .test-book,
  .bgmi,
  .pw,
  .freefire,
  .subwaysurfer,
  .ms-word,
  .file-manager,
  .rozgaar {
    width: 35px;
  }

  .youtube {
    position: absolute;
    top: 15%;
    left: 59%;
  }

  .store {
    position: absolute;
    top: 10%;
    left: 40%;
  }

  .Kooliya {
    position: absolute;
    top: 0;
    left: 25%;
  }

  .orangebox {
    position: absolute;
    top: 18%;
    left: 15%;
  }

  .byju {
    position: absolute;
    top: 35%;
    left: 0;
  }

  .excel {
    position: absolute;
    top: 33%;
    left: 0%;
  }

  .power-point {
    position: absolute;
    top: 3%;
    right: 9%;
  }

  .brave {
    position: absolute;
    bottom: 20%;
    right: 37%;
  }

  .insta {
    position: absolute;
    top: 30%;
    right: 0;
  }

  .n-img {
    position: absolute;
    top: 27%;
    right: 7%;
  }

  .canva {
    position: absolute;
    top: 52%;
    right: 2%;
  }

  .duolingo {
    position: absolute;
    bottom: 15%;
    right: 20%;
  }

  .test-book {
    position: absolute;
    bottom: 0;
    right: 21%;
  }

  .bgmi {
    position: absolute;
    bottom: 1%;
    right: 35%;
  }

  .pw {
    position: absolute;
    left: 34%;
    bottom: 22%;
  }

  .freefire {
    position: absolute;
    bottom: 0;
    left: 43%;
  }

  .subwaysurfer {
    position: absolute;
    bottom: 4%;
    left: 25%;
  }

  .ms-word {
    position: absolute;
    bottom: 5%;
    left: 18%;
  }

  .file-manager {
    position: absolute;
    bottom: 0;
    left: 1%;
  }

  .rozgaar {
    position: absolute;
    left: 5%;
    bottom: 28%;
  }

  .content-show {
    height: 200px;
  }

  .headingTwo {
    font-size: 2.4rem;
  }

  .swiper-x-padding {
    padding: 0 !important;
  }

  .swiper-slide {
    padding: 0 20px;
  }

  .desktop-prev-btn,
  .desktop-next-btn {
    top: var(--swiper-navigation-top-offset, 87%) !important;
  }

  .desktop-next-btn {
    right: 60% !important;
  }

  .padding-for-mob {
    padding-bottom: 80px !important;
  }

  .cost-effect-box div svg {
    width: 60px;
    height: 60px;
  }

  .cost-effect-box h5 {
    font-size: 1.5rem;
  }

  .cost-effect-box p {
    padding-top: 7px;
    color: var(--text-gray);
  }

  .mob-size-font {
    font-size: 1.2rem;
  }

  .headingFive {
    font-size: 14px;
    font-weight: 500;
  }

  .primary-btn {
    text-align: center;
    padding: 8px 20px;
  }

  .service-title {
    font-size: 36px;
  }

  .customer-support p {
    text-align: start !important;
  }

  .social-icons a svg {
    width: 38px;
    height: 38px;
  }

  .hero-section {
    height: 100vh;
  }

  .image-change-box {
    width: 100%;
  }

  .swiper-button-prev-second {
    left: 65% !important;
  }

  #scrollImage {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .text-span span {
    font-size: 7.4vh;
    line-height: 12vh;
  }
  .heroDiv {
    overflow: hidden !important;
  }

  .font-size-set {
    font-size: 20px;
  }

  .text-change {
    height: 50vh;
  }

  .headingThree {
    font-size: 2rem;
  }

  .gradientText {
    font-weight: 700;
    font-size: 4.6em;
    white-space: nowrap;
  }

  .stats {
    width: 180px;
    height: 180px;
  }

  .icon-box {
    height: 550px;
  }

  /* images icons */
  .youtube,
  .store,
  .Kooliya,
  .orangebox,
  .byju,
  .excel,
  .power-point,
  .brave,
  .insta,
  .n-img,
  .canva,
  .duolingo,
  .test-book,
  .bgmi,
  .pw,
  .freefire,
  .subwaysurfer,
  .ms-word,
  .file-manager,
  .rozgaar {
    width: 5vh;
  }

  .youtube {
    position: absolute;
    top: 4%;
    left: 54%;
  }

  .store {
    position: absolute;
    top: -10%;
    left: 40%;
  }

  .Kooliya {
    position: absolute;
    top: -3%;
    left: 12%;
  }

  .orangebox {
    position: absolute;
    top: 10%;
    left: 13%;
  }

  .byju {
    position: absolute;
    top: 35%;
    left: 0;
  }

  .excel {
    position: absolute;
    top: 30%;
    left: 22%;
  }

  .power-point {
    position: absolute;
    top: 19%;
    right: 38%;
  }

  .brave {
    position: absolute;
    top: 0;
    right: 5%;
  }

  .insta {
    position: absolute;
    top: 20%;
    right: 0;
  }

  .n-img {
    position: absolute;
    top: 35%;
    right: 23%;
  }

  .canva {
    position: absolute;
    top: 49%;
    right: 4%;
  }

  .duolingo {
    position: absolute;
    bottom: 30%;
    right: 20%;
  }

  .test-book {
    position: absolute;
    bottom: 7%;
    right: 8%;
  }

  .bgmi {
    position: absolute;
    bottom: 18%;
    right: 30%;
  }

  .pw {
    position: absolute;
    left: 40%;
    bottom: 32%;
  }

  .freefire {
    position: absolute;
    bottom: 0;
    left: 43%;
  }

  .subwaysurfer {
    position: absolute;
    bottom: 4%;
    left: 15%;
  }

  .ms-word {
    position: absolute;
    bottom: 21%;
    left: 28%;
  }

  .file-manager {
    position: absolute;
    bottom: 23%;
    left: 1%;
  }

  .rozgaar {
    position: absolute;
    left: 8%;
    bottom: 39%;
  }

  .content-show {
    height: 440px;
  }

  .headingTwo {
    font-size: 2.8rem;
  }

  .stats h4 {
    font-size: 26px;
    font-weight: 600;
  }

  .swiper-x-padding {
    padding: 0 30px !important;
  }

  .swiper-slide {
    padding: 0 35px;
  }

  .hero-section {
    height: 90vh;
  }

  .image-change-box {
    width: 130%;
  }

  .swiper-button-prev-second {
    left: 85% !important;
  }

  .service-title {
    font-size: 32px;
  }

  #scrollImage {
    width: 50vh;
  }

  #pinnedsection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(200%);
  }

  .text-change {
    height: 100vh;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .text-span span {
    font-size: 30vh;
    line-height: 25vh;
  }

  .font-size-set {
    font-size: 20px;
  }

  .text-change {
    height: 100vh;
  }

  .headingThree {
    font-size: 2rem;
  }

  .gradientText {
    font-weight: 700;
    font-size: 6.6em;
  }

  .stats {
    width: 180px;
    height: 180px;
  }

  .icon-box {
    height: 550px;
  }

  /* images icons */
  .youtube,
  .store,
  .Kooliya,
  .orangebox,
  .byju,
  .excel,
  .power-point,
  .brave,
  .insta,
  .n-img,
  .canva,
  .duolingo,
  .test-book,
  .bgmi,
  .pw,
  .freefire,
  .subwaysurfer,
  .ms-word,
  .file-manager,
  .rozgaar {
    width: 9vh;
  }

  .youtube {
    position: absolute;
    top: 0;
    left: 54%;
  }

  .store {
    position: absolute;
    top: 0;
    left: 40%;
  }

  .Kooliya {
    position: absolute;
    top: 0;
    left: 25%;
  }

  .orangebox {
    position: absolute;
    top: 10%;
    left: 10%;
  }

  .byju {
    position: absolute;
    top: 35%;
    left: 0;
  }

  .excel {
    position: absolute;
    top: 30%;
    left: 22%;
  }

  .power-point {
    position: absolute;
    top: 10%;
    right: 27%;
  }

  .brave {
    position: absolute;
    top: 0;
    right: 10%;
  }

  .insta {
    position: absolute;
    top: 30%;
    right: 0;
  }

  .n-img {
    position: absolute;
    top: 35%;
    right: 23%;
  }

  .canva {
    position: absolute;
    top: 44%;
    right: 10%;
  }

  .duolingo {
    position: absolute;
    bottom: 25%;
    right: 20%;
  }

  .test-book {
    position: absolute;
    bottom: 0;
    right: 21%;
  }

  .bgmi {
    position: absolute;
    bottom: 12%;
    right: 35%;
  }

  .pw {
    position: absolute;
    left: 40%;
    bottom: 22%;
  }

  .freefire {
    position: absolute;
    bottom: 0;
    left: 43%;
  }

  .subwaysurfer {
    position: absolute;
    bottom: 4%;
    left: 25%;
  }

  .ms-word {
    position: absolute;
    bottom: 28%;
    left: 28%;
  }

  .file-manager {
    position: absolute;
    bottom: 0;
    left: 1%;
  }

  .rozgaar {
    position: absolute;
    left: 11%;
    bottom: 28%;
  }

  .content-show {
    height: 440px;
  }

  .headingTwo {
    font-size: 2.8rem;
  }

  .stats h4 {
    font-size: 26px;
    font-weight: 600;
  }

  .swiper-x-padding {
    padding: 0 30px !important;
  }

  .swiper-slide {
    padding: 0 35px;
  }

  .swiper-button-prev-second {
    left: 90% !important;
  }

  .video-fluid {
    transform: translateY(-37px);
  }
}

@media (min-width: 1200px) {
  .text-span span {
    font-size: 30vh;
    line-height: 25vh;
  }

  .font-size-set {
    font-size: 20px;
  }

  .text-change {
    height: 100dvh;
  }

  .headingThree {
    font-size: 2rem;
  }

  .gradientText {
    font-weight: 700;
    font-size: 6.6em;
  }

  .stats {
    width: 180px;
    height: 180px;
  }

  .icon-box {
    height: 550px;
  }

  /* images icons */
  .youtube,
  .store,
  .Kooliya,
  .orangebox,
  .byju,
  .excel,
  .power-point,
  .brave,
  .insta,
  .n-img,
  .canva,
  .duolingo,
  .test-book,
  .bgmi,
  .pw,
  .freefire,
  .subwaysurfer,
  .ms-word,
  .file-manager,
  .rozgaar {
    width: 9vh;
  }

  .youtube {
    position: absolute;
    top: 0;
    left: 54%;
  }

  .store {
    position: absolute;
    top: 0;
    left: 40%;
  }

  .Kooliya {
    position: absolute;
    top: 0;
    left: 25%;
  }

  .orangebox {
    position: absolute;
    top: 10%;
    left: 10%;
  }

  .byju {
    position: absolute;
    top: 35%;
    left: 0;
  }

  .excel {
    position: absolute;
    top: 30%;
    left: 22%;
  }

  .power-point {
    position: absolute;
    top: 10%;
    right: 27%;
  }

  .brave {
    position: absolute;
    top: 0;
    right: 10%;
  }

  .insta {
    position: absolute;
    top: 30%;
    right: 0;
  }

  .n-img {
    position: absolute;
    top: 35%;
    right: 23%;
  }

  .canva {
    position: absolute;
    top: 44%;
    right: 10%;
  }

  .duolingo {
    position: absolute;
    bottom: 25%;
    right: 20%;
  }

  .test-book {
    position: absolute;
    bottom: 0;
    right: 21%;
  }

  .bgmi {
    position: absolute;
    bottom: 12%;
    right: 35%;
  }

  .pw {
    position: absolute;
    left: 40%;
    bottom: 22%;
  }

  .freefire {
    position: absolute;
    bottom: 0;
    left: 43%;
  }

  .subwaysurfer {
    position: absolute;
    bottom: 4%;
    left: 25%;
  }

  .ms-word {
    position: absolute;
    bottom: 28%;
    left: 28%;
  }

  .file-manager {
    position: absolute;
    bottom: 0;
    left: 1%;
  }

  .rozgaar {
    position: absolute;
    left: 11%;
    bottom: 28%;
  }

  .content-show {
    height: 440px;
  }

  .headingTwo {
    font-size: 2.8rem;
  }

  .stats h4 {
    font-size: 26px;
    font-weight: 600;
  }

  .swiper-x-padding {
    padding: 0 30px !important;
  }

  .swiper-slide {
    padding: 0 35px;
  }

  .swiper-button-prev-second {
    left: 90% !important;
  }

  .video-fluid {
    transform: translateY(-37px);
  }
}

@media (min-width: 1700px) {
  #scrollImage {
    width: 120vh;
  }
}