:root {
     --bs-ivory-black: #231F20;
 }

 /*============================
   ##  1  Service Common Page Css
=============================*/
 .title-color {
     color: var(--bs-light-orange)
 }

 .title-orange {
     color: var(--bs-orange)
 }

 .title-width {
     width: fit-content
 }

 .title-boder::after {
     background: var(--bd-gray-border);
     width: 95%;
     height: 2px;
     position: absolute;
     content: "";
     display: block;
     bottom: 0;
     border-radius: 15px;
     margin: 0 auto;
     left: 0;
     right: 0
 }

 .common-aboutus-section h3.title-boder::after,
 .design-developemnt-common h3::after {
     width: 100%
 }

 .tegline-text::after {
     background: var(--bd-gray-border);
     width: 100%;
     height: 2px;
     position: absolute;
     content: "";
     display: block;
     top: -20px;
     border-radius: 15px
 }

 .common-aboutus-section {
     background: var(--bs-light-orange)
 }

 .bg-orange-primary {
     background: var(--bs-orange-primary)
 }

 .bg-orange-secondary {
     background: var(--bs-orange-secondary)
 }

 /*============================
       1.1    Header Background Fixed
=============================*/
 #header {
     background: var(--bs-black)
 }

 /*============================
   1.4 Service Info content Section
============================*/
 .service-info-section {
     background: var(--bs-black);
     /* padding-bottom: 90px*/
 }

 .service-info-content p {
     line-height: 32px
 }

 .service-info-background {
     width: 42%;
     position: absolute;
     right: 0;
     top: 0;
     object-fit: cover;
     height: 100%
 }

 /*============================
   1.5 Service Benefits Section
=============================*/
 .service-benefits-section {
     padding: 70px 0
 }

 .benefits-content-text {
     line-height: 30px
 }

 .benefits-row {
     width: 90%;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 48% 48%;
     gap: 85px 47px
 }

 .benefits-column {
     border: 2px solid var(--bs-service-gray)
 }

 .single-benefits-block {
     transition: 0.5s
 }

 .single-benefits-block:hover {
     transform: scale(1.02)
 }

 .benefits-top-head {
     display: flex;
     align-items: center;
     margin-left: 51px;
     margin-top: -60px
 }

 .inner-icon-benefit {
     background: var(--bs-light-orange);
     padding: 13px 5px 5px 5px;
     border-radius: 50%;
     width: 80px;
     height: 80px;
     display: block;
     text-align: center;
     font-size: 42px;
     margin-right: 15px;
     color: var(--bs-white);
     border: 3px solid var(--bs-white);
     box-shadow: 0px 9px 11px 2px var(--bd-gray-border);
     transition: 0.5s
 }

 .single-benefits-block:hover .inner-icon-benefit {
     background: var(--bs-white);
     color: var(--bs-light-orange)
 }

 .benefits-title {
     color: var(--bs-light-orange);
     top: -8px
 }

 .benefits-content-area {
     padding: 20px 43px
 }

 .benefits-content-area p {
     line-height: 24px
 }

 .benefits-column::after {
     font-size: 24px;
     color: var(--bs-light-orange);
     border: 2px solid var(--bd-gray-border);
     width: 40px;
     text-align: center;
     border-radius: 50%;
     height: 38px;
     display: inline-table;
     position: absolute;
     background: var(--bs-white);
     transition: 0.5s;
     left: -6px
 }

 .single-block1::after {
     content: " 1.";
     top: -5px
 }

 .single-block2::after {
     content: " 2.";
     top: -5px
 }

 .single-block3::after {
     content: " 3.";
     bottom: -5px
 }

 .single-block4::after {
     content: " 4.";
     bottom: -5px
 }


 .web-development3::after {
     content: " 3.";
     top: -5px
 }

 .web-development4::after {
     content: " 4.";
     top: -5px
 }

 .web-development5::after {
     content: " 5.";
     top: -5px
 }

 .web-development6::after {
     content: " 6.";
     top: -5px
 }

 .web-development7::after {
     content: " 7.";
     top: -5px
 }

 .benefits-column:hover::after {
     background: var(--bs-light-orange);
     color: var(--bs-white);
     border: 2px solid var(--bs-light-orange)
 }

 /*============================
  1.6  Development Services Section
=============================*/
 .development-service-section {
     background: var(--bs-light-orange);
     padding: 70px 0
 }

 .development-inner-block {
     display: flex;
     align-items: center;
     margin-bottom: 40px;
     transition: 0.5s
 }

 .development-inner-block:hover {
     transform: translateY(-11px)
 }

 .development-icons {
     margin-right: -50px;
     z-index: 1
 }

 .development-service-icon {
     font-size: 70px;
     background: linear-gradient(90deg, #c8c6c6 0%, var(--bs-white) 70%, var(--bs-white) 100%);
     border: 4px solid var(--bs-orange);
     border-radius: 50%;
     padding: 20px;
     box-shadow: 0px 0px 11px 2px var(--bs-shadow);
     transition: 0.5s;
     width: 118px;
     height: 118px
 }

 .development-inner-block:hover .development-service-icon {
     transform: rotate(360deg)
 }

 .development-service-name {
     background: var(--bg-gray);
     padding-left: 73px;
     width: 100%;
     height: 150px;
     align-items: center;
     display: flex;
     border-radius: 0 39px 39px 0;
     box-shadow: 0px 5px 7px 1px var(--bs-shadow);
     transition: 0.5s
 }

 .development-inner-block:hover .development-service-name {
     background: var(--bs-white)
 }

 .development-service-name p {
     font-size: 24px
 }

 .zequon-dynamic-website.development-service-icon {
     font-size: 53px;
     padding-top: 24px
 }

 .zequon-tour-travel.development-service-icon {
     font-size: 65px
 }

 .zequon-ecommerce-website.development-service-icon {
     font-size: 64px;
     padding-top: 16px
 }

 .zequon-hrems-website.development-service-icon {
     font-size: 35px;
     padding-top: 34px
 }

 .zequon-crm-software.development-service-icon {
     font-size: 59px;
     padding-top: 21px
 }

 .technologies-icons .zequon-dot-net,
 .technologies-icons .zequon-php {
     font-size: 82px;
     color: var(--bs-light-orange)
 }

 .web-development-list-points li {
     display: inline-block;
     padding-right: 15px
 }

 /*============================
   1.7 Technology Development Section
=============================*/
 .technologies-development-section {
     padding: 70px 0
 }

 .service-content-text p {
     line-height: 30px
 }

 .technologies-block {
     background: var(--bs-gray-primary);
     padding: 51px 30px;
     border-radius: 30px 30px 0 0;
     z-index: 1
 }

 .technologies-block::after {
     content: "";
     width: 0;
     height: 0;
     position: absolute;
     left: 1px;
     transition: height .3s ease-in-out, width .3s ease-in-out .3s;
     z-index: 1;
     top: 34%;
     transform: translate(-10px, 15px)
 }

 .technologies-block:hover::after {
     width: 45%;
     height: 65%;
     border-left: 3px dotted var(--bs-light-orange);
     border-bottom: 3px dotted var(--bs-orange);
     transition: height .3s ease-out, width .3s ease-out .3s, border-left .3s ease-out, border-bottom .3s ease-out .2s
 }

 .technologies-block::before {
     content: "";
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(50deg, var(--bs-orange) 0, var(--bs-light-orange) 46%);
     transition: height .3s ease-out, width .3s ease-out .3s;
     z-index: -1;
     margin: 0 auto;
     left: 0;
     right: 0
 }

 .technologies-block:hover::before {
     height: 62%
 }

 .technology-icon {
     width: 80px
 }

 .technologies-text p {
     font-size: 20px;
     color: var(--bs-black-gray);
     transition: 0.5s all ease-in-out
 }

 .technologies-block:hover p {
     color: var(--bs-white)
 }

 /*============================
  1.8  Hire Section
=============================*/
 .development-hire-bg {
     background: url("../image/background/development_bg.webp");
     padding: 70px 0;
     background-size: cover;
     background-position: center
 }

 .development-hire-bg::before {
     background: linear-gradient(90deg, var(--bs-black) 38%, transparent 100%, var(--bs-black) 100%);
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     content: "";
     opacity: 0.9
 }

 .hire-content p {
     line-height: 24px
 }

 .hire-btn {
     background: var(--bg-gray);
     padding: 15px;
     border-radius: 4px;
     color: var(--bs-light-orange);
     font-size: 40px
 }

 .hire-btn:hover {
     background: var(--bs-light-orange);
     color: var(--bs-white)
 }

 /*============================
  1.9  FEQs Section
=============================*/
 .feqs-multi-accordion {
     width: 100%;
     margin: auto
 }

 .feqs-multi-accordion .feqs-label-title {
     cursor: pointer;
     border: 3px solid var(--bs-orange);
     display: block;
     padding: 20px;
     box-sizing: border-box;
     font-size: 24px;
     border-radius: 19px;
     box-shadow: 1px 5px 5px 0px var(--bd-gray-border);
     background: var(--bs-white);
     position: relative;
     z-index: 1
 }

 .feqs-multi-accordion input {
     display: none
 }

 .feqs-multi-accordion .feqs-label-title::before {
     font-family: 'Zequon Icon';
     font-weight: bolder;
     float: right;
     content: "\ea3d"
 }

 .feqs-multi-accordion input:checked+.feqs-label-title {
     box-shadow: 0px 5px 7px 1px var(--bs-shadow)
 }

 .feqs-multi-accordion input:checked+.feqs-label-title:before {
     font-family: 'Zequon Icon';
     content: "\ea3e";
     transition: 0.5s
 }

 .feqs-multi-accordion input:checked~.feqs-content {
     height: auto;
     padding: 45px 40px 40px 22px;
     transition: 0.5s;
     color: var(--bs-white);
     font-size: 20px;
     border-radius: 0 0 15px 15px;
     box-shadow: 0px 5px 10px -2px var(--bd-gray-border);
     opacity: 1;
     background: linear-gradient(0deg, var(--bs-light-orange)0%, var(--bs-orange) 100%)
 }

 .feqs-content {
     width: calc(100% - 0px);
     height: 0;
     color: rgba(0, 0, 0, 0);
     line-height: 22px;
     padding: 0 20px;
     box-sizing: border-box;
     transition: 0.5s;
     margin-top: -15px;
     opacity: 0;
 }

 .feqs-list-points {
     display: none
 }

 .feqs-btn:checked~.feqs-content .feqs-list-points {
     display: block;
     padding-top: 16px
 }

 .feqs-list-points li {
     list-style: unset;
     color: var(--bs-white);
     padding: 5px 0;
     transition: 0.5s all ease-in-out
 }

 /*============================
    1.10 Form Section
=============================*/
 .development-form-section {
     background: var(--bg-gray);
     padding: 70px 0
 }

 .development-form-title.fw-regular {
     color: var(--bs-black-gray)
 }

 .web-development-form {
     border-top: 2px solid var(--bd-gray-border);
     padding-top: 50px
 }




 /*** ----------------------------------------
                  Mobile App Page Css
---------------------------------------------
==============  Mobile App Aboutus ===========***/
 .aboutus-service-page-section {
     padding: 30px 0 50px
 }

 .service-info-content-lists li {
     list-style: revert-layer;
     padding-bottom: 10px
 }

 .aboutus-service-content p {
     width: 96%
 }

 /*==============  Mobile App Aboutus ===========***/
 .service-info-secound-section {
     background: var(--bs-gray-dark-bg);
     padding-bottom: 90px
 }

 .service-info-secound-content p {
     line-height: 32px
 }

 .service-info-secound-background {
     width: 42%;
     position: absolute;
     left: 0;
     top: 0;
     object-fit: cover;
     object-position: left;
     height: 100%
 }

 /*============== innovative-technologies-section ===========***/
 .innovative-technologies-section {
     background: var(--bs-light-orange);
     padding: 70px 0
 }

 .main-title {
     color: #2d2d2d;
     text-align: center;
     text-transform: capitalize;
     padding: 0.7em 0
 }

 .innovative-content {
     position: relative;
     overflow: hidden;
     border-radius: 20px
 }

 .innovative-image {
     height: 443px;
     object-fit: cover;
     object-position: right
 }

 .innovative-content .innovative-overlay {
     background: var(--bs-black);
     position: absolute;
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
     opacity: 0;
     transition: all 0.4s ease-in-out 0s
 }

 .innovative-content:hover .innovative-overlay {
     opacity: 0.8
 }

 .innovative-details {
     position: absolute;
     text-align: center;
     padding-left: 1em;
     padding-right: 1em;
     width: 100%;
     top: 20%;
     left: 50%;
     opacity: 0;
     transform: translate(-50%, -50%);
     transition: all 0.3s ease-in-out 0s
 }

 .innovative-content:hover .innovative-details {
     top: 50%;
     left: 50%;
     opacity: 1
 }

 .innovative-blog-title {
     margin-bottom: 20px;
     text-transform: uppercase
 }

 .innovative-details p {
     color: var(--bs-white)
 }


 /*==============  Project Managment Section ===========***/
 .project-managment-section {
     background: var(--bs-light-orange);
     padding: 70px 0
 }

 .project-single-blog {
     background: var(--bg-gray);
     box-shadow: -3px 8px 8px 0px #a64d0a;
     transition: 0.5s all ease-in-out
 }

 .project-single-blog:hover {
     background: var(--bs-white);
     transform: translateY(-5px)
 }

 .project-wrap:nth-child(1) .project-single-blog:hover,
 .project-wrap:nth-child(2) .project-single-blog:hover,
 .project-wrap:nth-child(3) .project-single-blog:hover,
 .project-wrap:nth-child(4) .project-single-blog:hover,
 .project-wrap:nth-child(5) .project-single-blog:hover,
 .project-wrap:nth-child(6) .project-single-blog:hover,
 .project-wrap:nth-child(7) .project-single-blog:hover,
 .project-wrap:nth-child(8) .project-single-blog:hover,
 .project-single-blog:hover .project-icons {
     border-radius: 0
 }

 .project-icons {
     padding: 38px 10px;
     text-align: center;
     background: linear-gradient(90deg, #8c430c 0%, var(--bs-light-orange) 100%);
     margin-right: 15px;
     border-radius: 0 39px 39px 0;
     transition: 0.5s all ease-in-out
 }

 .project-icons .project-managment-icon {
     color: var(--bs-white);
     font-size: 40px;
     width: 40px;
     display: block;
     transition: 0.5s all ease-in-out
 }

 .project-single-blog:hover .project-managment-icon {
     transform: rotate(360deg) scale(1.2)
 }

 /*** ----------------------------------------
   Logo & Graphic Page Css 
---------------------------------------------
 ------------ Team Work Section  ------------*/
 .team-main-work {
     padding: 30px;
     border: 3px solid var(--bs-service-gray);
     border-radius: 50%;
     width: 380px;
     height: 380px
 }

 .team-main-work::after {
     content: "";
     position: absolute;
     height: 3px;
     width: 15%;
     background-color: var(--bs-service-gray);
     top: 50%;
     right: -15%
 }

 .work-content {
     border-radius: 50%;
     width: 100%;
     height: 100%;
     padding: 18px;
     box-shadow: 5px 5px 15px #b5b4b4, -5px -5px 15px #b5b4b4
 }

 .inner-work-content {
     background: var(--bs-light-orange);
     border-radius: 50%;
     height: 100%
 }

 .work-content::after {
     position: absolute;
     content: "";
     width: 22px;
     height: 30px;
     top: 45.7%;
     right: -28%;
     background-color: var(--bs-service-gray);
     clip-path: polygon(44% 0, 100% 50%, 44% 100%, 26% 100%, 81% 49%, 23% 0)
 }

 .remove-arrow .work-content::after {
     display: none
 }

 .remove-arrow .team-main-work::after {
     display: none
 }

 .work-content .work-title {
     font-size: 24px;
     padding: 5px 0;
     background: var(--bs-white)
 }

 .team-work-icons {
     padding: 24px 0 0;
     font-size: 64px
 }

 .work-text {
     padding: 24px 28px
 }

 .work-text p {
     margin: 0;
     line-height: 25px
 }

 .sr-no {
     position: absolute;
     top: 6%;
     right: 12%;
     border: 3px solid var(--bs-service-gray);
     border-radius: 50%;
     background: var(--bs-white);
     width: 40px;
     height: 40px;
     text-align: center
 }

 .sr-no::before {
     position: absolute;
     content: "";
     height: 143px;
     width: 18px;
     top: 64%;
     transform: rotate(337deg);
     border-top-left-radius: 10px;
     right: -112%;
     background-color: var(--bs-white)
 }

 /*** ====== SEO Digital Marketing Opstion Section ======***/
 .seo-type-section {
     background: var(--bs-gray-dark-bg);
     padding: 70px 0
 }

 .single-seo-type {
     background: var(--bs-white);
     border-radius: 28px;
     padding: 0px 50px 20px 80px;
     margin-left: 67px;
     margin-bottom: 78px
 }

 .single-seo-type:hover {
     background: var(--bs-light-orange)
 }

 .type-top-area {
     display: flex;
     align-items: center;
     position: relative;
     top: -38px;
     margin-bottom: -62px;
     margin-left: -138px
 }

 .type-inner-circle {
     width: 106px;
     height: 106px;
     box-sizing: content-box;
     border: 6px solid #f6671f;
     border-radius: 50%;
     padding: 10px;
     box-shadow: 0px 2px 3px 2px var(--bs-shadow)
 }

 .technology-icons i {
     font-size: 55px;
 }

 .single-seo-type:hover .type-inner-circle {
     border: 6px solid var(--bs-white)
 }

 .circle-icon {
     background: var(--bs-light-orange);
     box-sizing: border-box;
     border-radius: 50%;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     box-shadow: 0px 3px 3px 2px var(--bs-shadow)
 }

 .circle-icon span {
     font-size: 55px;
     color: var(--bs-white)
 }

 .single-seo-type:hover .circle-icon span {
     color: var(--bs-light-orange)
 }

 .text-line-shape {
     width: 100px;
     background: var(--bs-black);
     height: 4px
 }

 .text-line-shape span {
     width: 11px;
     height: 11px;
     background: var(--bs-light-orange);
     border-radius: 50%;
     display: block;
     position: absolute;
     right: -1px;
     margin-top: -3px
 }

 .type-heading {
     padding-left: 20px;
     transition: 0.5s all ease-in-out
 }

 .single-seo-type:hover .hover-text,
 .educt-hovo:hover .hover-text {
     color: var(--bs-white)
 }

 .seo-type-content p {
     line-height: 30px
 }

 .single-seo-type:hover .hover-text,
 .single-seo-type:hover p {
     color: var(--bs-white)
 }

 .single-seo-type,
 .type-inner-circle,
 .circle-icon,
 .circle-icon span,
 .text-line-shape,
 .text-line-shape span,
 .single-seo-type .hover-text,
 .single-seo-type p {
     transition: 0.5s all ease-in-out
 }

 .single-seo-type:hover .text-line-shape,
 .single-seo-type:hover .text-line-shape span,
 .single-seo-type:hover .circle-icon {
     background: var(--bs-white)
 }

 /*======= Project Managment Section ======***/
 .design-agency-section {
     background: var(--bs-light-orange);
     /*padding: 70px 0*/
 }

 .design-single-opstion {
     background: var(--bs-gray-secondary);
     border-radius: 30px;
     padding: 13px 0 25px;
     margin-bottom: 30px;
     box-shadow: 0px 5px 7px 1px var(--bs-shadow);
     border: 2px solid var(--bs-gray-secondary);
     transition: 0.5s all ease-in-out
 }

 .design-single-opstion:hover {
     background: var(--bs-white);
     border: 2px solid var(--bs-black);
     transform: translateY(-10px)
 }

 .design-icon {
     font-size: 55px;
     color: var(--bs-light-orange);
     transition: 0.5s all ease-in-out
 }

 .design-single-opstion:hover .design-icon {
     color: var(--bs-black)
 }

 .design-agency-name p {
     padding-top: 5px;
     transition: 0.5s all ease-in-out
 }

 .design-single-opstion:hover p {
     letter-spacing: 1.1px
 }

 /*** ----------------------------------------
    Cab-booking  Page Css
---------------------------------------------
======= Cab Booking Software Orange Top Section ======***/
 .cab-booking-section,
 .booking-solution-section {
     background: var(--bs-light-orange)
 }

 /* Cab Feature Section*/
 .feature-head-content {
     padding: 0px 0 50px
 }

 .feature-head-img img {
     width: auto;
     max-width: fit-content
 }

 .content-details p {
     line-height: 30px;
     color: var(--bs-black)
 }

 .single-cab-booking {
     border: 1px solid var(--bs-light-orange);
     border-radius: 28px;
     padding: 0px 25px;
     margin-bottom: 30px
 }

 .single-cab-booking:hover {
     border: 1px solid var(--bs-black)
 }

 .cab-opsiton-icons {
     background: var(--bs-light-orange);
     padding: 60px 10px;
     margin-right: 20px;
     transition: 0.5s all ease-in-out
 }

 .cab-opsiton-icons,
 .cab-opsiton-content .sub-heading {
     transition: 0.5s all ease-in-out
 }

 .single-cab-booking:hover .cab-opsiton-icons {
     background: var(--bs-black-gray);
     margin-left: 10px
 }

 .cab-opsiton-icons span {
     color: var(--bs-white);
     font-size: 60px
 }

 .single-cab-booking:hover .cab-opsiton-content .sub-heading {
     color: var(--bs-black-gray)
 }

 .cab-opsiton-content p {
     line-height: 30px
 }

 /* Essential Features for Driver */
 .cab-content p {
     line-height: 30px
 }

 .left-icon-part {
     margin-right: 20px
 }

 .essential-icons {
     width: 83px;
     height: 83px;
     font-size: 44px;
     color: var(--bs-white);
     background: var(--bs-light-orange);
     padding: 15px;
     border-radius: 50%;
     border: 5px solid var(--bs-white);
     box-shadow: 0px 19px 12px -3px var(--bd-gray-border)
 }

 .essential-content-details p {
     line-height: 27px
 }


 /*  Buy a Taxi Booking Software */
 .taxi-booking-software-section {
     padding: 70px 0
 }

 .zequon-add-people {
     font-size: 60px
 }

 .booking-software-inner {
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
     gap: 30px;
     width: 93%
 }

 .booking-content-text {
     font-size: 24px;
     line-height: 30px
 }

 .single-booking-software {
     background: var(--bs-light-orange);
     padding: 30px 15px;
     border-radius: 30px 30px 0 0;
     z-index: 1
 }

 .single-booking-software::before {
     content: "";
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 4px;
     background: var(--bs-black-gray);
     transition: height .3s ease-out, width .3s ease-out .3s;
     z-index: -1;
     margin: 0 auto;
     left: 0;
     right: 0
 }

 .single-booking-software:hover::before {
     height: 70%
 }

 .taxi-software-icon {
     font-size: 78px
 }

 .booking-software-text p {
     font-size: 20px;
     transition: 0.5s all ease-in-out
 }



 /*** ----------------------------------------
    Grocery Software Page Css
---------------------------------------------
======= solution-ordering-section ======***/
 .provide-grocery-software-section .zequon-live-inventory {
     font-size: 33px;
     padding-top: 22px
 }

 .provide-grocery-software-section .zequon-consistent-payment,
 .provide-grocery-software-section .zequon-offers-promotions {
     font-size: 40px
 }

 .provide-grocery-software-section {
     padding: 70px 0 30px
 }

 .solution-ordering-section {
     padding: 50px 0 90px
 }

 .inner-solution-ordering:hover,
 .inner-grocery-management:hover {
     transform: translateY(-10px)
 }

 .inner-solution-ordering {
     border: 1px solid var(--bs-black-gray);
     border-radius: 30px;
     overflow: hidden;
     transition: 0.5s all ease-in-out
 }

 .inner-solution-ordering .order-title {
     background: var(--bs-black-gray);
     padding: 33px 0;
     text-align: center
 }

 .inner-solution-ordering p,
 .inner-grocery-management p {
     line-height: 30px;
     padding: 20px 78px
 }


 /*======= grocery-management-section ======***/
 .grocery-management-section {
     padding-bottom: 70px
 }

 .inner-grocery-management {
     border: 1px solid var(--bs-light-orange);
     border-radius: 30px;
     overflow: hidden;
     transition: 0.5s all ease-in-out
 }

 .inner-grocery-management .order-title {
     background: var(--bs-light-orange);
     padding: 33px 0;
     text-align: center
 }


 /*** ----------------------------------------
   food-delivery-software
---------------------------------------------*/
 .cab-opsiton-icons .zequon-delivery-app {
     font-size: 43px
 }

 .left-icon-part .zequon-single-restaurants,
 .left-icon-part .zequon-cloud-kitchen {
     font-size: 36px;
     padding-top: 17px
 }

 .left-icon-part .zequon-food-aggregators {
     font-size: 40px
 }


 .food-delivery-app-section {
     padding: 70px 0
 }

 .single-food-icon {
     font-size: 60px
 }

 .single-food-delivery {
     background: var(--bs-light-orange);
     padding: 30px 15px;
     z-index: 1;
     margin-bottom: 30px
 }

 .single-food-delivery::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 4px;
     background: var(--bs-black-gray);
     transition: height .3s ease-out, width .3s ease-out .3s;
     z-index: -1;
     margin: 0 auto;
     left: 0;
     right: 0
 }

 .delivery-content p {
     transition: 0.5s all ease-in-out
 }

 /*** ----------------------------------------
   Hrms-software
---------------------------------------------*/
 .about-hrms {
     width: 370px;
     margin: 30px 20px 100px 30px
 }

 .inner-hrms-about p {
     line-height: 30px
 }

 /*** ----------------------------------------
        ecommerce-website-development
---------------------------------------------*/
 .main-opstion {
     border: 1px solid var(--bd-gray-border);
     padding: 0;
     border-radius: 30px 30px 0 0;
     width: 94%;
     margin: 0 auto 34px;
     transition: 0.5s all ease-in-out
 }

 .main-border {
     border-radius: 30px;
 }

 .main-opstion:hover {
     transform: translateY(-10px)
 }

 .heading-block {
     background: linear-gradient(90deg, var(--bs-light-orange) 50%, var(--bs-orange) 100%);
     padding: 20px;
     border-radius: 30px 30px 0 0
 }

 .multi-left-icons {
     background: var(--bs-white);
     padding: 17px;
     font-size: 60px;
     border-radius: 50%;
     color: var(--bs-light-orange);
     display: block;
     box-shadow: 0px 3px 10px -3px var(--bs-black);
     transition: 0.5s
 }

 .single-opstion-block:hover .multi-left-icons {
     transform: rotate(30deg);
     box-shadow: none
 }

 .heading-area {
     padding-left: 25px;
     line-height: 45px
 }

 .block-content {
     padding: 24px
 }

 .opstion-icon-area .zequon-understanding_b2c {
     width: 94px;
     height: 94px;
     text-align: center
 }

 /*** ----------------------------------------
        Loan Management Page
---------------------------------------------*/
 .deployment-icon {
     width: 94px;
     height: 94px
 }

 .zequon-executive-dashboard.design-development-icon.multi-left-icons {
     width: 95px;
     font-size: 51px;
     height: 95px;
     display: flex;
     align-items: center;
     text-align: center
 }

 /*** ----------------------------------------
        Hire A Dedicated Developer
---------------------------------------------*/
 .worries-single-blog {
     border: 1px solid var(--bs-light-orange);
     border-radius: 16px;
     margin-bottom: 30px;
     padding-top: 15px;
     transition: 0.5s all ease-in-out
 }

 .worries-single-blog:hover {
     border: 1px solid var(--bs-black);
     transform: translateY(-10px)
 }

 .worries-top-icons {
     background: var(--bs-light-orange);
     padding: 15px 0;
     text-align: center;
     transition: 0.5s all ease-in-out
 }

 .worries-single-blog:hover .worries-top-icons {
     background: var(--bs-black)
 }

 .worries-top-icons span {
     font-size: 55px;
     color: var(--bs-white);
     display: block;
     transition: 0.5s all ease-in-out
 }

 .worries-single-blog:hover .worries-top-icons span {
     transform: rotate(15deg);
     display: block
 }

 .worries-title {
     color: var(--bs-black-gray);
     padding: 15px 0 40px;
     transition: 0.5s all ease-in-out
 }

 /*** ----------------------------------------
        Technology Page
---------------------------------------------*/
 .technology-section .single-seo-type {
     box-shadow: 0px 7px 11px -9px rgba(0, 0, 0, 0.9);
 }

 .technology-icons img {
     width: auto
 }

 .technology-icons {
     background: var(--bs-white)
 }

 .technology-section .text-line-shape {
     background: var(--bs-light-orange)
 }

 /*** ----------------------------------------
       School Management Software Page
---------------------------------------------*/
 .slice-wrap .worries-title {
     color: var(--bs-black-gray);
     transition: 0.5s all ease-in-out
 }

 .experience-icon-area .multi-left-icons {
     background: transparent;
     padding: 0;
     font-size: 76px;
     border-radius: unset;
     color: var(--bs-white);
     box-shadow: none
 }

 /*** ***/
 .single-facets,
 .facet-content,
 .number-title,
 .count-dotline,
 .count-dotline span,
 .elearning-icon {
     transition: 0.5s all ease-in-out
 }

 .single-facets:hover {
     transform: translateY(-10px)
 }

 .count-area {
     background: linear-gradient(90deg, var(--bs-light-orange) 50%, var(--bs-orange) 100%);
     border-radius: 30px 30px 0 0;
     padding: 15px
 }

 .count-inner {
     left: 9px;
     top: 18px
 }

 .number-title {
     font-size: 18px;
     background: #c45706;
     padding: 5px;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     font-weight: 400;
     border: 2px solid #f7952c;
     color: var(--bs-light-orange)
 }

 .single-facets:hover .number-title {
     background: var(--bs-white)
 }

 .count-dotline {
     width: 3px;
     height: 35px;
     background: var(--bs-black);
     display: inline-block;
     bottom: -35px;
     left: 0;
     right: 0;
     margin: 0 auto
 }

 .single-facets:hover .count-dotline {
     background: var(--bs-white)
 }

 .single-facets:hover .count-dotline span {
     border: 3px solid var(--bs-white)
 }

 .count-dotline span {
     width: 18px;
     height: 18px;
     background: transparent;
     display: block;
     position: relative;
     border: 3px solid var(--bs-light-orange);
     border-radius: 50%;
     top: 32px;
     left: -8px
 }

 .count-area i {
     font-size: 50px;
     color: var(--bs-white)
 }

 .facet-content {
     background: var(--bs-white);
     border-radius: 0 0 30px 30px;
     padding: 40px 20px;
     margin-bottom: 50px
 }

 .single-facets:hover .facet-content {
     background: var(--bs-black)
 }

 .count-title {
     line-height: 22px;
     height: 67px
 }

 .single-seo-type:hover .elearning-icon {
     color: var(--bs-black-gray);
 }

 /*** ----------------------------------------
       Travel Booking Software Page
---------------------------------------------*/
 /* ==travel-portal css=== */
 .inner-travel-featur {
     border: 1px solid var(--bs-light-orange);
     border-radius: 21px;
     padding: 20px 0
 }

 .feature-title-icon span {
     font-size: 75px
 }

 .travel-tb {
     background: var(--bs-light-orange);
     border: 1px solid var(--bs-light-orange);
     border-radius: 20px;
     padding: 30px;
     margin-top: 20px;
     height: 164px;
     align-items: center;
     display: flex;
     line-height: 31px;
     transition: 0.5s all ease-in-out
 }

 .travel-tb:hover {
     background: var(--bs-black-gray);
     border: 1px solid var(--bs-black)
 }

 .travel-tb .educ-title {
     font-size: 30px;
     transition: 0.5s all ease-in-out
 }

 .poiner-content {
     background: linear-gradient(90deg, var(--bs-light-orange) 44%, rgba(255, 132, 41, 0.9) 154.18%);
     order: 1px solid var(--bs-light-orange);
     border-radius: 28px 28px 0px 0px;
     padding: 45px;
     margin-top: 18px;
     line-height: 33px
 }

 .trev-num {
     position: absolute;
     left: -30px
 }

 /*hire*/
 .hire-choose-content {
     background: linear-gradient(90deg, var(--bs-light-orange) 28%, var(--bs-orange) 154%);
     border: 1px solid var(--bs-light-orange);
     border-radius: 10px;
     margin-top: 20px
 }

 .travel-hire-points {
     line-height: 31px
 }

 .educt-hovo:hover .educ-back {
     background: var(--bs-white);
     border: var(--bs-white)
 }

 .educt-hovo:hover .educ-title {
     color: var(--bs-light-orange)
 }

 .single-travelling-solution span {
     width: 120px;
     height: 120px;
     display: grid;
     align-items: center
 }

 .single-travelling-solution .zequon-travel-hotel {
     font-size: 70px
 }

 .single-hire-travel-points {
     transition: 0.5s all ease-in-out
 }

 .single-hire-travel-points:hover {
     transform: translateY(-5px)
 }

 /*** ----------------------------------------
       employee-tracking-system-software
---------------------------------------------*/
 .monitoring-single-block {
     background: linear-gradient(90deg, var(--bs-light-orange) 44%, rgba(255, 132, 41, 0.9) 154.18%);
     border-radius: 28px 28px 0px 0px;
     padding: 30px 45px;
     display: flex;
     align-items: center;
     transition: 0.5s all ease-in-out
 }

 .monitoring-single-block:hover {
     box-shadow: 0px 11px 22px -11px var(--bs-gray);
     transform: translateY(-5px)
 }

 .monitoring-point {
     line-height: 33px
 }

 /*** ----------------------------------------
       Home Service Software Page
---------------------------------------------*/
 .single-block-panel {
     background: var(--bs-white);
     border-radius: 28px;
     padding: 0px 25px;
     margin-bottom: 30px;
     transition: 0.5s all ease-in-out
 }

 .panel-icons {
     background: var(--bs-light-orange);
     padding: 60px 10px;
     margin-right: 20px;
     transition: 0.5s all ease-in-out
 }

 .panel-icons span {
     color: var(--bs-white);
     font-size: 60px
 }

 .panel-icons,
 .panel-content-area .sub-heading {
     transition: 0.5s all ease-in-out
 }

 .single-block-panel:hover .panel-icons {
     background: var(--bs-dark);
     margin-left: 10px
 }

 .single-block-panel:hover .panel-content-area .sub-heading {
     color: var(--bs-black-gray)
 }

 .panel-content-area p {
     font-size: 24px;
     line-height: 30px
 }

 /**/
 .rivarse-block {
     text-align: right
 }

 .rivarse-single-block .panel-icons {
     background: var(--bs-black);
     margin-left: 20px;
     margin-right: 0;
     order: 1
 }

 .rivarse-single-block .panel-content-area {
     width: 91%
 }

 .rivarse-single-block:hover .panel-icons {
     background: var(--bs-dark);
     margin-left: 15px;
     margin-right: 10px
 }

 /**/
 .household-sub-title {
     font-size: 24px
 }

 .opstion-icon-area .zequon-integration-plugins {
     font-size: 47px;
     width: 94px;
     height: 94px;
     display: flex;
     align-items: center
 }



 /*** ----------------------------------------
       Gaming Software Page
---------------------------------------------*/
 .inner-gaming-wrap {
     display: flex;
     align-items: center;
     background: var(--bs-light-orange);
     border-radius: 0 30px 0 0;
     transition: 0.5s all ease-in-out
 }

 .inner-gaming-wrap:hover {
     background: var(--bs-dark)
 }

 .gaming-icons {
     background: var(--bs-black-gray);
     padding: 30px 10px;
     border-radius: 0 10px 11px 0;
     margin-right: 20px;
     transition: 0.5s all ease-in-out
 }

 .game-links:hover .gaming-icons {
     background: var(--bs-light-orange)
 }

 .gaming-icons img {
     width: 86px
 }

 .gaming-tittle {
     font-size: 24px
 }

 /**/
 .gaming-detail-section {
     padding: 130px 0 50px 0;
     background: var(--bs-orange-secondary)
 }
.fantasy-bg{
    background: url("../image/game-development/app_bg.webp");
    background-position: center;
    background-size: cover;
}
 .gaming-details.game-left {
     border-radius: 0 0 30px 30px
 }

 .gaming-details.game-right {
     border-radius: 0 0 30px 30px
 }

 .gaming-details {
     margin-bottom: 130px;
     background: var(--bs-white)
 }

 .game-icons-blog {
     background: var(--bs-black);
     padding: 10px;
     border: 18px solid #DE7F23;
     border-radius: 39px;
     width: fit-content;
     position: absolute;
     top: -70px;
     z-index: 1
 }

 .game-left .game-icons-blog {
     left: -76px
 }

 .game-right .game-icons-blog {
     right: -76px
 }

 .game-icons-blog img {
     width: 150px
 }

 .game-left .blank-div,
 .game-right .blank-div {
     padding: 0 0 60px;
     width: 100%
 }

 .game-left .blank-div {
     background: linear-gradient(-100deg, #E29C2F 0%, #DD7D22 50%, #DE7F23 98%);
     border-radius: 0 0 30px 0;
     box-shadow: 0px 9px 2px 0px #D9D9D9
 }

 .game-left .blank-div span,
 .game-right .blank-div span {
     width: 100%;
     padding: 7px 0;
     display: block
 }

 .game-left .blank-div span {
     background: linear-gradient(-100deg, #F7C246 0%, #EEBF4E 30%, #EA862E 99%)
 }

 .game-right .blank-div {
     background: linear-gradient(-100deg, #DE7F23 0%, #DD7D22 50%, #E29C2F 98%);
     border-radius: 0 0 0 30px;
     box-shadow: 0px 9px 2px 0px #D9D9D9
 }

 .game-right .blank-div span {
     background: linear-gradient(-100deg, #EA862E 0%, #EEBF4E 30%, #F7C246 99%)
 }

 .left-blog .bg-content,
 .right-blog .bg-content {
     height: 100%;
     background: linear-gradient(0deg, #E68211 0%, #DD7D22 50%, #DE7F23 100%);
     width: 50px;
     display: block;
     position: absolute;
     border-bottom: 9px solid #D25205
 }

 .left-blog .bg-content {
     border-radius: 0 0 0 21px;
     border-right: 10px solid var(--bg-gray)
 }

 .right-blog .bg-content {
     border-radius: 0 0 21px 0;
     border-left: 10px solid var(--bg-gray);
     right: 0
 }

 .left-blog .game-text,
 .right-blog .game-text {
     overflow: hidden
 }

 .game-left .game-text p {
     padding: 70px 50px 20px 70px;
     line-height: 30px
 }

 .game-right .game-text p {
     padding: 70px 70px 20px 50px;
     line-height: 30px
 }

 /* */

 .interface-single-panel {
     border-radius: 28px;
     padding: 12px 107px;
     margin-bottom: 40px;
     text-align: center;
     box-shadow: 0px 14px 19px -15px var(--bs-gray)
 }

 .user-heading-area,
 .admin-heading-area {
     padding: 30px 0;
     border-radius: 42px 42px 0 0;
     margin-bottom: 50px
 }

 .user-heading-area {
     background: var(--bs-light-orange)
 }

 .admin-heading-area {
     background: var(--bs-black-gray)
 }

 .interface-single-panel:hover {
     background: var(--bs-light-orange)
 }

 .interface-top-head {
     display: flex;
     align-items: center;
 }

 .interface-inner-circle {
     width: 95px;
     height: 95px;
     box-sizing: content-box;
     border-radius: 50%;
     padding: 5px;
     box-shadow: 0px 2px 3px 2px var(--bs-shadow)
 }

 .panel-circle-icon {
     box-sizing: border-box;
     border-radius: 50%;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     box-shadow: 0px 3px 3px 2px var(--bs-shadow)
 }

 .panel-circle-icon span {
     font-size: 50px;
     color: var(--bs-white)
 }

 .interface-single-panel:hover .panel-circle-icon span {
     color: var(--bs-light-orange)
 }

 .interface-line-shape {
     width: 60px;
     height: 4px
 }

 .interface-line-shape span {
     width: 11px;
     height: 11px;
     border-radius: 50%;
     display: block;
     position: absolute;
     margin-top: -3px
 }

 .interface-heading {
     padding-left: 20px
 }

 .interface-type-content p {
     font-size: 24px;
     line-height: 30px
 }

 .interface-single-panel:hover .admin-panel-title,
 .interface-single-panel:hover .user-panel-title,
 .interface-single-panel:hover p {
     color: var(--bs-white)
 }

 .admin-type-heading .admin-panel-title,
 .user-type-heading .user-panel-title {
     color: var(--bs-black-gray);
     line-height: 39px;
     padding-bottom: 14px
 }

 .interface-single-panel,
 .interface-inner-circle,
 .panel-circle-icon,
 .panel-circle-icon span,
 .interface-line-shape,
 .interface-line-shape span,
 .user-type-heading .user-panel-title,
 .interface-single-panel .admin-panel-title,
 .interface-single-panel p {
     transition: 0.5s all ease-in-out
 }

 .interface-single-panel:hover .interface-line-shape,
 .interface-single-panel:hover .interface-line-shape span,
 .interface-single-panel:hover .panel-circle-icon {
     background: var(--bs-white)
 }

 .user-panel {
     border: 1px solid var(--bs-light-orange)
 }

 .user-panel .interface-inner-circle {
     border: 4px solid var(--bs-light-orange)
 }

 .user-panel:hover .interface-inner-circle {
     border: 4px solid var(--bs-black-gray)
 }

 .user-panel .panel-circle-icon {
     background: var(--bs-black-gray)
 }

 .user-line-shape {
     background: var(--bs-light-orange)
 }

 .user-line-shape span {
     background: var(--bs-light-orange)
 }

 .user-type-heading .user-panel-title,
 .user-type p {
     color: var(--bs-light-orange)
 }

 .user-panel .interface-line-shape span {
     right: -1px
 }

 .admin-panel .interface-single-panel {
     margin-bottom: 78px
 }

 .admin-panel .interface-line-shape span {
     left: -1px
 }

 .admin-panel {
     border: 1px solid var(--bs-black-gray)
 }

 .admin-panel .interface-inner-circle {
     border: 4px solid var(--bs-black-gray)
 }

 .admin-panel:hover .interface-inner-circle {
     border: 4px solid var(--bs-light-orange)
 }

 .admin-panel .panel-circle-icon {
     background: var(--bs-light-orange)
 }

 .admin-line-shape {
     background: var(--bs-black-gray)
 }

 .admin-type-heading .sadmin-panel-title,
 .admin-type p {
     color: var(--bs-black-gray)
 }

 .admin-line-shape span {
     background: var(--bs-black-gray)
 }

 /*** ----------------------------------------
       CRM Software Page
---------------------------------------------*/
 .crm-service-software-section .multi-left-icons {
     width: 96px;
     text-align: center;
     height: 96px
 }

 .crm-service-software-section .zequon-crm-development {
     font-size: 44px;
     align-items: center;
     display: flex
 }

 /*** ----------------------------------------
       Fintech Page
---------------------------------------------*/
 .fintech-apis-wrap .zequon-cibil-score-api {
     font-size: 40px
 }

 .fintech-apis-wrap .zequon-pan-varofocatopm-api,
 .fintech-apis-wrap .zequon-driving-liense-verification-api,
 .fintech-apis-wrap .zequon-vehicle-rc-verifitation-api,
 .fintech-apis-wrap .zequon-voter-id-verification {
     font-size: 45px
 }


 /*** ----------------------------------------
       Fintech All Page
---------------------------------------------*/
 .package-banner-section {
     margin-top: 60px
 }

 .package-banner-section::after {
     display: none
 }

 .package-banner-section-text {
     position: relative
 }

 .package-heading-section {
     background-color: var(--bs-light-orange);
     padding: 10px
 }

 .package-heading {
     background-color: var(--bs-light-orange);
     padding: 10px
 }

 .orange-package {
     background: var(--bs-white);
     border: 1px solid var(--bs-light-orange);
     border-radius: 20px;
     padding: 30px 20px;
     margin-top: 20px;
     height: 100px;
     align-items: center;
     display: flex;
     transition: 0.5s all ease-in-out
 }

 .orange-package:hover {
     background: var(--bs-light-orange)
 }

 .orange-package .orange-package-title {
     transition: 0.5s all ease-in-out;
     margin: 0 auto;
     line-height: 1.2
 }

 .orange-package:hover .orange-package-title {
     color: var(--bs-white)
 }

 .benefits-package {
     background: var(--bs-gray-secondary)
 }

 .black-package {
     background: var(--bs-white);
     border: 1px solid var(--bs-black);
     border-radius: 20px;
     padding: 30px 20px;
     margin-top: 20px;
     height: 100px;
     align-items: center;
     display: flex;
     transition: 0.5s all ease-in-out
 }

 .black-package:hover {
     background: var(--bs-black)
 }

 .black-package .black-package-title {
     transition: 0.5s all ease-in-out;
     margin: 0 auto;
     line-height: 1.2
 }

 .black-package:hover .black-package-title {
     color: var(--bs-white)
 }

 .portal-heading-section {
     padding: 10px 0;
     background-color: var(--bs-light-orange)
 }

 .company-title {
     border-top: 1px solid var(--bs-gray)
 }

 .fill-orange-package {
     background: var(--bs-light-orange);
     border: 1px solid var(--bs-light-orange);
     border-radius: 20px;
     padding: 30px 20px;
     margin: 20px auto 0;
     align-items: center;
     display: flex;
     transition: 0.5s all ease-in-out
 }

 .fill-orange-package:hover {
     background: var(--bs-white)
 }

 .fill-orange-package p {
     margin: 0 auto;
     transition: 0.5s all ease-in-out
 }

 .fill-orange-package:hover p {
     color: var(--bs-light-orange)
 }




 .fintech-ordered-list li::marker {
     font-size: 22px;
     color: var(--bs-white)
 }

 .fintech-black-wrapper {
     border-radius: 15px
 }

 .feature-rows .poiner-content {
     display: flex;
     align-items: center
 }

 .deliver-tab {
     background: var(--bs-light-orange);
     border: 1px solid var(--bs-light-orange);
     border-radius: 20px;
     padding: 25px 17px;
     margin-top: 20px;
     height: 120px;
     align-items: center;
     display: flex;
     transition: 0.5s all ease-in-out
 }

 .deliver-tab:hover {
     background: var(--bs-black-gray);
     border: 1px solid var(--bs-black)
 }

 /*** ----------------------------------------
       Fintech AEPS Page
---------------------------------------------*/
 .inner-list-aeps li {
     color: var(--bs-black-gray);
     padding-bottom: 5px
 }

 .why-choose-aeps-list {
     background: var(--bs-gray-secondary);
     padding: 28px
 }

 .why-choose-aeps-list li {
     color: var(--bs-black-gray)
 }

 /*** ----------------------------------------
       Fintech AEPS Page
---------------------------------------------*/
 .multi-recharge-section {
     background: var(--bs-gray-secondary)
 }

 .bbps-panel.title-boder::after {
     width: 100%;
 }

 /*** ----------------------------------------
       Betting Sport Software Landing Page Css 
---------------------------------------------*/
 .fun-counter {
     display: grid;
     grid-template-columns: 45% 55%;
     text-align: center;
     box-shadow: 0px 3px 3px 1px var(--bd-gray-border);
     border-radius: 15px 15px 0px 0
 }

 .fun-counting {
     background: var(--bs-black-gray);
     border-top-left-radius: 15px;
     padding: 15px;
     text-align: center;
     font-size: 40px
 }

 .fun-title {
     background: linear-gradient(-114deg, var(--bs-orange) 0%, var(--bs-light-orange) 55%);
     align-items: center;
     display: grid;
     text-align: center;
     border-top-right-radius: 15px
 }

 .fun-heading::after {
     background: var(--bd-gray-border);
     width: 100%;
     height: 2px;
     position: absolute;
     content: "";
     display: block;
     bottom: 0;
     border-radius: 15px;
     margin: 0 auto;
     left: 0;
     right: 0
 }

 .fun-heading,
 .fun-content p {
     color: var(--bs-black-gray)
 }

 /**/
 .single-multi-panel {
     background: var(--bs-white);
     border-radius: 46px;
     transition: 0.5s all ease-in-out
 }

 .single-multi-panel:hover {
     transform: translateY(-10px)
 }

 .panel-title {
     padding: 15px 0;
     border-radius: 40px 40px 0 0
 }

 .panel-list {
     padding: 20px
 }

 .panel-list li {
     color: var(--bs-black-gray);
     padding-bottom: 20px;
     display: flex;
     overflow: hidden
 }

 .panel-list li span {
     padding-right: 15px;
     padding-top: 8px
 }

 /**/
 .varued-range-accord {
     width: 100%;
     margin: auto
 }

 .varued-range-accord .varued-range-lable-title {
     cursor: pointer;
     background: var(--bs-light-orange);
     display: block;
     padding: 10px 35px;
     box-sizing: border-box;
     font-size: 24px;
     border-radius: 9px;
     position: relative;
     z-index: 1
 }

 .varued-range-accord input {
     display: none
 }

 .varued-range-accord .varued-range-lable-title::before {
     font-family: 'Zequon Icon';
     font-weight: bolder;
     content: "\e992";
     left: 6px;
     position: absolute
 }

 .varued-range-accord input:checked+.varued-range-lable-title::before {
     font-family: 'Zequon Icon';
     transition: 0.5s;
     transform: rotateX(-180deg)
 }

 .varued-range-accord input:checked~.varued-range-content {
     padding: 30px 40px 30px 22px;
     transition: 0.5s;
     color: var(--bs-black-gray);
     opacity: 1;
     background: var(--bs-white);
     height: auto;
     line-height: 30px
 }

 .varued-range-content {
     width: calc(100% - 0px);
     height: 0;
     color: rgba(0, 0, 0, 0);
     line-height: 22px;
     padding: 0 20px;
     box-sizing: border-box;
     transition: 0.5s;
     margin-top: -15px;
     opacity: 0;
 }

 .varued-range-accord input:checked~.varied-range-img {
     height: auto;
     transition: 0.5s;
     opacity: 1
 }


 /*** ----------------------------------------
      Industray All Page Css
---------------------------------------------*/
 .insdustry-single-blog {
     margin-top: 45px;
     transition: 0.5s all ease-in-out;
 }

 .insdustry-single-blog:hover {
     transform: translateY(-10px);
 }

 .insdustry-sub-heading {
     width: fit-content;
     padding: 4px 20px;
     border-radius: 0 10px 10px 0;
     box-shadow: 2px 4px 6px 0px var(--bs-service-gray);
     position: relative;
     margin-bottom: -14px;
 }

 .insdustry-orange-title {
     background: var(--bs-light-orange);
     border-left: 5px solid var(--bs-black-gray);
 }

 .insdustry-gray-title {
     background: var(--bs-ivory-black);
     border-left: 5px solid var(--bs-light-orange);
 }

 .insdustry-text {
     padding: 20px;
     border-radius: 0 24px 24px 24px;
     background: var(--bg-gray)
 }





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

     /*** ----------------------------------------
   Service Common Css
---------------------------------------------     
-------- Service Awards Section -----***/
     .awards-content {
         width: 45%
     }

     /*== Hire Section =====*/
     .hire-content {
         width: 91%
     }

     /*** ----------------------------------------
     Mobile App Development Page Css
--------------------------------------------
-------  Service Awards Section-------***/
     .mobile-app-content h5 {
         width: 71%;
         margin: 0 auto
     }

     .mobile-app-content .app-development-hire {
         width: 71%;
         margin: 0 auto
     }

     .mobile-app-content {
         width: 97%
     }

     /* service-benefits-section */
     .mobile-app-skills {
         width: 85%
     }

     /*** ----------------------------------------
     Seo Degital Marketing Page Css
---------------------------------------------
-------  Business Growth Section-------***/
     .steps-content {
         width: 75%
     }


     /*** ----------------------------------------
   food-delivery-software
---------------------------------------------*/
     .delivery-content {
         height: 123px
     }

     .single-food-delivery:hover::before {
         height: 60%
     }

     /*** ----------------------------------------
   Hrms-software
---------------------------------------------*/
     .about-hrms {
         margin: 30px 20px 100px 30px
     }

     /*** ----------------------------------------
       School Management Software Page
---------------------------------------------*/
     .slice-wrap .worries-title {
         padding: 15px 29px 40px
     }

     /*** ----------------------------------------
       Travel Booking Page
---------------------------------------------*/
     /* hire*/
     .hire-choose-content {
         padding: 15px 13px
     }

     /*** ----------------------------------------
       fantasy-sport-software
---------------------------------------------*/
     .interface-single-panel {
         height: 300px
     }

     /*** ----------------------------------------
    Betting Sport Lading Page
---------------------------------------------*/
     .single-fun-blog {
         margin: 0 40px
     }
 }

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

     /*** ----------------------------------------
   Logo & Graphic Page Css 
---------------------------------------------
 ------------ Team Work Section  ------------*/
     .team-main-work {
         width: 335px;
         height: 335px
     }

     .team-work-icons {
         padding: 15px 0 0;
         font-size: 53px
     }

     .work-text {
         padding: 13px 37px
     }

     .sr-no::before {
         height: 123px;
         top: 64%;
         border-top-left-radius: 3px
     }

     .team-main-work::after {
         width: 13%;
         right: -13%
     }

     .work-content::after {
         top: 45.3%
     }

     /*** ----------------------------------------
   Hrms-software
---------------------------------------------*/
     .about-hrms {
         margin: 30px 20px 50px 30px
     }
 }

 @media (min-width:1280px) and (max-width:1399px) {
     /*** ----------------------------------------
       fantasy-sport-software
---------------------------------------------*/

 }

 @media (min-width:1200px) and (max-width:1399px) {

     /*** ----------------------------------------
    Service banner Section
    --------------------------------------*/
     .awards-content {
         width: 46%
     }

     /*** ----------------------------------------
    Mobile App Development Page Css
---------------------------------------------
------------Service Awards Section ----------***/
     .mobile-app-content h5 {
         width: 80%;
         margin: 0 auto
     }

     .mobile-app-content .app-development-hire {
         width: 80%;
         margin: 0 auto
     }

     /*service-benefits-section*/
     .mobile-app-skills {
         width: 89%
     }

     /*** ----------------------------------------
    Seo Degital Marketing Page Css
---------------------------------------------
-------  Business Growth Section-------***/
     .steps-content {
         width: 80%
     }

     /*taxi-booking-software-section*/
     .booking-software-inner {
         gap: 26px
     }

     .single-booking-software:hover::before {
         height: 74%
     }

     /*** ----------------------------------------
   food-delivery-software
---------------------------------------------*/
     .delivery-content {
         height: 145px
     }

     .single-food-delivery:hover::before {
         height: 64%
     }

     /*** ----------------------------------------
       School Management Software Page
---------------------------------------------*/
     .slice-wrap .worries-title {
         padding: 15px 13px 40px
     }

     /*** ----------------------------------------
       Travel Booking Page
---------------------------------------------*/

     /* Travel Booking Page*/
     .hire-choose-content {
         padding: 15px 13px
     }

     /*** ----------------------------------------
       fantasy-sport-software
---------------------------------------------*/
     .interface-commomn-section .row {
         width: 95%;
         margin: 0 auto
     }

     .interface-single-panel {
         height: 300px;
         padding: 12px 50px
     }

     /*** ----------------------------------------
    Betting Sport Lading Page
---------------------------------------------*/
     .single-fun-blog {
         margin: 0 10px
     }

 }

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

     /*** ----------------------------------------
    Seo Degital Marketing Page Css
---------------------------------------------    
-------  Digital Marketing Aboutus Section-------***/
     .marketing-content p {
         width: 86%
     }

     /*  Buy a Taxi Booking Software */
     .booking-content-text {
         width: 59%
     }

     /*** ----------------------------------------
       School Management Software Page
---------------------------------------------*/
     .exceptional-facets-row {
         display: grid;
         grid-template-columns: 20% 20% 20% 20% 20%
     }

     /*****/
     .justify-content-center.slice-row {
         display: grid;
         grid-template-columns: 20% 20% 20% 20% 20%
     }

     .slice-wrap:last-child {
         margin-left: 200%
     }

     .slice-wrap .worries-single-blog:hover {
         transform: translateY(0px)
     }

     .registration-blog .worries-title {
         padding: 15px 40px 40px
     }

     .slice-wrap .worries-single-blog {
         margin-bottom: 0
     }

     /*** ----------------------------------------
       Travel Booking Page
---------------------------------------------*/
     /*hire*/
     .travel-why-choose-row,
     .trvel-feature-row {
         width: 84%;
         margin: 0 auto
     }

     /*** ----------------------------------------
    fantasy-sport-software
---------------------------------------------*/
     .gaming-detail-section .row {
         width: 90%;
         margin: 0 auto
     }

     /*** ----------------------------------------
       Fintech AEPS Page
---------------------------------------------*/
     .inner-list-aeps {
         display: grid;
         grid-template-columns: 50% 50%
     }

     /*** ----------------------------------------
      Betting Sports Software Landing Page
---------------------------------------------*/
     .panel-groups {
         gap: 0 22px
     }
 }

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

     /*** ----------------------------------------
   Logo & Graphic Page Css 
---------------------------------------------
 ------------ Team Work Section  ------------*/
     .team-main-work {
         width: 300px;
         height: 300px;
         padding: 23px
     }

     .team-work-icons {
         font-size: 45px;
         padding: 15px 0 0 0
     }

     .work-content .work-title {
         font-size: 18px
     }

     .work-text {
         padding: 8px 18px
     }

     .sr-no {
         right: 10%;
         width: 35px;
         height: 35px
     }

     .sr-no::before {
         height: 107px;
         top: 74%;
         border-top-left-radius: 8px;
         right: -103%
     }

     .team-main-work::after {
         width: 10%;
         right: -10%
     }

     .work-content::after {
         top: 44.3%
     }

     /*** ----------------------------------------
           grocery-software Page Css 
---------------------------------------------*/
     .order-title {
         font-size: 30px
     }

     .inner-solution-ordering p,
     .inner-grocery-management p {
         padding: 20px 50px
     }

     /*** ----------------------------------------
   Hrms-software
---------------------------------------------*/
     .about-hrms {
         margin: 30px 20px 100px 30px
     }
 }


 @media (min-width:992px) and (max-width:1199px) {

     /*** ----------------------------------------
     Service awards Section
     --------------------------------------------*/
     .awards-content {
         width: 53%
     }

     /*** ----------------------------------------
    Mobile App Development Page Css
---------------------------------------------
------------- service-benefits-section -------*/
     .mobile-app-skills {
         width: 89%
     }

     /*** ----------------------------------------
    Mobile App Development Page Css
--------------------------------------------- -*/
     .work-content::after {
         right: -22%
     }

     /*** ----------------------------------------
    Seo Degital Marketing Page Css
---------------------------------------------
-------  Business Growth Section -------***/
     .steps-content {
         width: 80%
     }

     /*  Buy a Taxi Booking Software */
     .booking-content-text {
         width: 74%
     }

     /*taxi-booking-software-section*/
     .booking-software-inner {
         grid-template-columns: 50% 50%;
         width: 97%
     }

     .single-booking-software:hover::before {
         height: 64%
     }

     /*** ----------------------------------------
   food-delivery-app-section
---------------------------------------------***/
     .delivery-content {
         height: 172px
     }

     .single-food-delivery:hover::before {
         height: 68%
     }

     /*** ----------------------------------------
   Hrms-software
---------------------------------------------*/
     .about-hrms {
         margin: 30px 20px 40px 30px
     }

     /*** ----------------------------------------
       School Management Software Page
---------------------------------------------*/
     .slice-wrap .worries-title {
         padding: 15px 23px 40px
     }

     .registration-blog .worries-title {
         padding: 15px 40px 40px
     }

     /*** ----------------------------------------
       Travel Booking Page
---------------------------------------------*/
     /* hire*/
     .hire-choose-content {
         padding: 15px
     }

     /*** ----------------------------------------
    fantasy-sport-software
---------------------------------------------*/
     .gaming-detail-section .row {
         width: 87%;
         margin: 0 auto
     }

     .interface-single-panel {
         padding: 12px 54px;
         height: 320px
     }

     /*** ----------------------------------------
    Betting Sport Lading Page
---------------------------------------------*/
     .single-fun-blog {
         margin: 0 10px
     }

     .panel-groups {
         gap: 0 19px
     }

     .varied-range-according {
         position: relative
     }

 }

 @media (min-width:992px) and (max-width:1079px) {

     /*** ----------------------------------------
    fantasy-sport-software
---------------------------------------------*/
     .interface-commomn-section .row {
         width: 94%;
         margin: 0 auto
     }

     .interface-single-panel {
         height: 340px
     }

     .interface-line-shape {
         width: 40px
     }

     .interface-inner-circle {
         width: 80px;
         height: 80px
     }

     .panel-circle-icon span {
         font-size: 40px
     }
 }

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

     /*** ----------------------------------------
    Service Common Css
---------------------------------------------
/*== Benefits Section ==========*/
     .benefits-content-area {
         padding: 30px
     }
 }

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

     /*** ----------------------------------------
    Mobile App Development Page
---------------------------------------------
 ---- 2.1 Project Managment Section ------***/
     .project-wrap:nth-child(1) .project-single-blog,
     .project-wrap:nth-child(2) .project-single-blog,
     .project-wrap:nth-child(3) .project-single-blog,
     .project-wrap:nth-child(4) .project-single-blog {
         border-radius: 0 39px 0 0;
     }

     .project-wrap:nth-child(5) .project-single-blog,
     .project-wrap:nth-child(6) .project-single-blog,
     .project-wrap:nth-child(7) .project-single-blog,
     .project-wrap:nth-child(8) .project-single-blog {
         border-radius: 0 0 39px 0;
     }

     /*** ----------------------------------------
    Cab Booking  Page
---------------------------------------------
/* Cab Feature Section*/
     .feature-inner-wrap {
         margin: 0 auto;
         width: 95%
     }

     .feature-head-content {
         width: 96%;
         margin: 0 auto
     }

     .content-details p {
         padding-left: 50px
     }

     /* 3.3 cab-essential-section*/
     .essential-row-title {
         width: 96%;
         margin: 0 auto
     }

     .food-delivery-text {
         width: 88%
     }

     /*** ----------------------------------------
   food-delivery-software
---------------------------------------------*/
     .food-delivery-application {
         display: grid;
         grid-template-columns: 25% 25% 25% 25%;
     }

     .delivery-column1,
     .delivery-column2,
     .delivery-column3,
     .delivery-column4 {
         border-top-left-radius: 30px;
         border-top-right-radius: 30px
     }

     .delivery-column5,
     .delivery-column6,
     .delivery-column7,
     .delivery-column8 {
         border-bottom-left-radius: 30px;
         border-bottom-right-radius: 30px;
         display: grid
     }

     .delivery-column1::before,
     .delivery-column2::before,
     .delivery-column3::before,
     .delivery-column4::before {
         bottom: 0
     }

     .delivery-column5::before,
     .delivery-column6::before,
     .delivery-column7::before,
     .delivery-column8::before {
         top: 0
     }

     .delivery-column1 .delivery-icons,
     .delivery-column2 .delivery-icons,
     .delivery-column3 .delivery-icons,
     .delivery-column4 .delivery-icons {
         margin-bottom: 20px
     }

     .delivery-column5 .delivery-icons,
     .delivery-column6 .delivery-icons,
     .delivery-column7 .delivery-icons,
     .delivery-column8 .delivery-icons {
         order: 1
     }

     .delivery-column5 .delivery-content,
     .delivery-column6 .delivery-content,
     .delivery-column7 .delivery-content,
     .delivery-column8 .delivery-content {
         order: 0;
         margin-bottom: 20px
     }

     /*** ----------------------------------------
        ecommerce-website-development
---------------------------------------------*/
     .opstion-row {
         display: grid;
         grid-template-columns: 50% 50%
     }

     /*** ----------------------------------------
        Hire A Dedicated Developer
---------------------------------------------*/
     .professional-team-section .main-opstion:nth-child(3),
     .school-management-experience-section .main-opstion:nth-child(3) {
         margin-left: 50%
     }

     /*** ----------------------------------------
       employee-tracking-system-software
---------------------------------------------*/
     .monitoring-groups {
         display: grid;
         grid-template-columns: 50% 50%;
         gap: 15px;
         width: 98.7%
     }

     /*** ----------------------------------------
       Home Service Software Page
---------------------------------------------*/
     .choose-household-head-details h4 {
         width: 80%
     }

     /*** ----------------------------------------
       Fintech All Page
---------------------------------------------*/
     .feature-rows {
         display: grid;
         grid-template-columns: 32% 32% 32%;
         gap: 0 15px
     }

     /*** ----------------------------------------
      Mobile Recharge Software Page
---------------------------------------------*/
     .multi-recharge-row {
         display: grid;
         grid-template-columns: 50% 50%
     }

     .multi-recharge-row .main-opstion:nth-child(5),
     .multi-recharge-row .main-opstion:nth-child(5) {
         margin-left: 50%
     }

     /*** ----------------------------------------
     Betting Sports Landing Page 
---------------------------------------------*/
     .fun-groups {
         display: grid;
         grid-template-columns: 30% 30% 30%
     }

     .panel-groups {
         display: grid;
         grid-template-columns: 32% 32% 32%
     }
 }

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

     /*** ----------------------------------------
    Service Common Css
---------------------------------------------
 ------------ Banner  ------------***/
     /***===== service-info-section ========*/
     .service-info-section {
         padding-bottom: 0
     }

     .service-info-background {
         width: 100%;
         position: relative;
         object-fit: contain
     }

     /*== Development Service Section =====*/
     .development-service-name {
         padding-left: 56px;
         height: 123px
     }

     /*== Technology  Section =====*/
     .technologies-block {
         padding: 51px 32px
     }

     /*** ----------------------------------------
    Mobile App Page Css
---------------------------------------------    
 ------------ Mobile App Aboutus  ------------***/
     .aboutus-service-content p {
         width: 100%
     }

     /***=====service-info-secound-section ========*/
     .service-info-secound-section {
         padding-bottom: 0
     }

     .service-info-secound-background {
         width: 100%;
         position: relative;
         object-fit: contain
     }

     /*---- Project Managment Section ------***/
     .project-opsition-title {
         font-size: 21px
     }

     /*** ----------------------------------------
   Seo Digital Managment Page Css
---------------------------------------------***/
     .type-heading h4 {
         font-size: 30px
     }

     /*** ----------------------------------------
    Cab Booking  Page
---------------------------------------------    
/*  Cab Feature Section*/
     .feature-head-img {
         text-align: center;
         padding-bottom: 15px
     }

     /* 3.3 cab-essential-section*/
     .cab-img-blog {
         padding: 20px 0
     }

     /*** ----------------------------------------
   Hrms-software
---------------------------------------------*/
     .about-hrms {
         margin: 40px 30px 150px 30px
     }

     /*** ----------------------------------------
       Travel Booking Page
---------------------------------------------*/
     /* hire*/
     .hire-choose-content {
         padding: 15px
     }

     /*** ----------------------------------------
       employee-tracking-system-software
---------------------------------------------*/
     .monitoring-single-block {
         margin-top: 20px
     }

 }

 @media (min-width:768px) and (max-width:991px) {

     /*** ----------------------------------------
    Service Common Css
--------------------------------------------- */
     /*== Service awards Section =====*/
     .awards-content {
         width: 77%
     }

     .single-service-awards {
         padding: 2px
     }

     /*== Benefits Section =====*/
     .benefits-row {
         width: 100%;
         grid-template-columns: 48% 48%;
         gap: 85px 27px
     }

     .benefits-top-head {
         margin-left: 30px
     }

     .benefits-content-area {
         padding: 30px 15px 40px
     }

     .benefits-column::after {
         right: -5px;
         left: auto
     }

     /*== Development Service Section =====*/
     .development-inner-block {
         display: block;
         text-align: center
     }

     .development-icons {
         margin: 0 0 -18px 0;
         z-index: 1;
         position: relative
     }

     .development-service-name {
         padding: 45px 30px 30px 30px;
         text-align: center;
         display: block;
         border-radius: 0 0 15px 15px
     }

     /*** ----------------------------------------
    Cab Booking  Page
--------------------------------------------- 
/*  Cab Feature Section*/
     .cab-opsiton-icons {
         padding: 80px 10px
     }

     /* Buy a Taxi Booking Software */
     .booking-content-text {
         width: 90%
     }

     /*taxi-booking-software-section*/
     .booking-software-inner {
         grid-template-columns: 50% 50%;
         width: 97%
     }

     .single-booking-software:hover::before {
         height: 69%
     }

     /*** ----------------------------------------
   food-delivery-software
---------------------------------------------*/
     .delivery-column1,
     .delivery-column2,
     .delivery-column5,
     .delivery-column6 {
         border-top-left-radius: 30px;
         border-top-right-radius: 30px
     }

     .delivery-column3,
     .delivery-column4,
     .delivery-column7,
     .delivery-column8 {
         border-bottom-left-radius: 30px;
         border-bottom-right-radius: 30px;
         display: grid
     }

     .delivery-column1::before,
     .delivery-column2::before,
     .delivery-column5::before,
     .delivery-column6::before {
         bottom: 0
     }

     .delivery-column3::before,
     .delivery-column4::before,
     .delivery-column7::before,
     .delivery-column8::before {
         top: 0
     }

     .single-food-delivery:hover::before {
         height: 60%
     }

     .delivery-column3 .delivery-icons,
     .delivery-column4 .delivery-icons,
     .delivery-column7 .delivery-icons,
     .delivery-column8 .delivery-icons {
         order: 1;
         margin-top: 20px
     }

     .delivery-column1 .delivery-content,
     .delivery-column2 .delivery-content,
     .delivery-column5 .delivery-content,
     .delivery-column6 .delivery-content {
         margin-top: 20px
     }

     .delivery-column3 .delivery-content,
     .delivery-column4 .delivery-content,
     .delivery-column7 .delivery-content,
     .delivery-column8 .delivery-content {
         order: 0
     }

     .delivery-content {
         height: 115px
     }

     /*** ----------------------------------------
       School Management Software Page
---------------------------------------------*/
     .slice-wrap .worries-title {
         padding: 15px 17px 40px
     }

     .registration-blog .worries-title {
         padding: 15px 30px 40px
     }

     /*** ----------------------------------------
    fantasy-sport-software
---------------------------------------------*/
     .gaming-detail-section .row {
         width: 85%;
         margin: 0 auto
     }

     .interface-commomn-section .row {
         width: 94%;
         margin: 0 auto
     }

     /*** ----------------------------------------
       Fintech All Page
---------------------------------------------*/
     .feature-rows {
         display: grid;
         grid-template-columns: 49% 49%;
         gap: 0 15px
     }

     /*** ----------------------------------------
     Betting Sports Landing Page 
---------------------------------------------*/
     .fun-groups {
         display: grid;
         grid-template-columns: 50% 50%
     }

     .single-fun-blog {
         margin: 0 11px 25px;
         background: var(--bg-gray);
         border-radius: 10px
     }

     .fun-content {
         padding: 15px
     }

     .single-fun-blog:nth-child(3) {
         margin-left: 50%;
         width: 100%
     }

     .panel-groups {
         grid-template-columns: 48% 48%;
         display: grid;
         gap: 30px 28px
     }

     .single-multi-panel:nth-child(3) {
         margin-left: 50%;
         width: 100%
     }

     .varied-range-according {
         position: relative
     }
 }

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

     /*** ----------------------------------------
    Service Common Css
---------------------------------------------
 ------------Benefits Section  ------------*/
     .single-block1 {
         border-radius: 43px 43px 0 43px
     }

     .single-block2 {
         border-radius: 43px 43px 43px 0
     }

     .single-block3 {
         border-radius: 43px 0 43px 43px
     }

     .single-block4 {
         border-radius: 0 43px 43px 43px
     }

     .web-development3 {
         border-radius: 43px 0 43px 43px
     }

     .web-development4 {
         border-radius: 43px 43px 43px 43px
     }

     .web-development5 {
         border-radius: 43px 0 43px 43px
     }

     .web-development6 {
         border-radius: 43px 43px 43px 43px
     }

     .web-development7 {
         border-radius: 43px 43px 43px 43px
     }

     .single-block7.web-development7 {
         margin-left: 50%
     }

     /*** ----------------------------------------
    Logo Design Page
---------------------------------------------*/
     .number-work-points {
         display: none
     }

     /*** ----------------------------------------
   Hrms-software
---------------------------------------------*/
     .about-hrms {
         float: left
     }

     /*** ----------------------------------------
       Home Service Software Page
---------------------------------------------*/
     .choose-household-head-details .service-content-text {
         width: 98%;
         margin: 0 auto
     }

     /*** ----------------------------------------
      fantasy-sport-software
---------------------------------------------*/
     .left-side-title,
     .right-side-title {
         position: absolute;
         top: 20px
     }

     .left-side-title {
         left: 200px
     }

     .right-side-title {
         right: 200px
     }

     .user-panel .interface-top-head {
         left: -45px
     }

     .admin-panel .interface-top-head {
         right: -45px
     }

     .interface-top-head {
         position: absolute;
         top: -25px;
         margin-bottom: -62px
     }

     /*** ----------------------------------------
     Betting Sports Landing Page 
---------------------------------------------*/
     .varued-range-lable-title {
         float: right;
         width: 55%
     }

     .varued-range-content {
         float: right;
         width: 55%
     }

     .varied-range-img {
         width: calc(43% - 0px);
         height: 0;
         transition: 0.5s;
         opacity: 0;
         position: absolute;
         top: 0;
         left: 0
     }

     .varied-range-according {
         display: inline-block
     }

     .varued-range-accord input:checked~.varued-range-content {
         border-radius: 0 0 15px 15px;
         border: 1px solid var(--bs-black-gray)
     }
 }

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

     /*== Banner Section =====*/
     .benefits-row {
         width: 100%;
         grid-template-columns: 100%;
         gap: 85px 0
     }

     .benefits-column {
         border-radius: 0 43px 43px 43px
     }

     .benefits-column::after {
         right: -5px;
         left: auto;
         top: 0
     }

     .benefits-top-head {
         margin-left: 25px
     }

     /*== Development Service Section =====*/
     .development-service-icon {
         padding: 12px
     }

     /*== Technology  Section =====*/
     .technologies-block {
         padding: 51px 15px
     }

     /*** ----------------------------------------
   Logo & Graphic Page Css 
---------------------------------------------
 ------------ Team Work Section  ------------*/
     .team-main-work {
         margin-bottom: 60px;
         transform: rotate(90deg)
     }

     .inner-work-content,
     .sr-no span {
         transform: rotate(-90deg)
     }

     .sr-no span {
         display: none
     }

     .number-work-points {
         bottom: 241px;
         border: 3px solid var(--bs-service-gray);
         border-radius: 50%;
         width: 35px;
         height: 35px;
         line-height: 26px;
         right: 31px;
         transform: rotate(-90deg)
     }

     .sr-no {
         border: none
     }

     .sr-no::before {
         height: 146px;
         top: -31%;
         right: -58%;
         width: 28px
     }

     /*** ----------------------------------------
    SEO Digital Marketing  Css
---------------------------------------------  
 ------------ Common Heading Section  ------------*/
     .seo-type-section {
         padding: 100px 0 70px
     }

     .single-seo-type {
         padding: 50px 15px 15px 15px;
         margin-left: 0;
         margin-bottom: 90px
     }

     .type-top-area {
         top: 0;
         margin-bottom: 0;
         margin-left: 0;
         display: block;
         margin-top: -120px
     }

     .type-inner-circle {
         margin: 0 auto
     }

     .text-line-shape {
         width: 4px;
         height: 50px;
         margin: 0 auto
     }

     .text-line-shape span {
         right: -4px;
         bottom: -1px
     }

     .type-heading {
         padding-left: 0;
         text-align: center;
         margin-bottom: 10px
     }


     /*** ----------------------------------------
    Cab Booking  Page
---------------------------------------------        
/* Cab Feature Section*/
     .cab-opsiton-icons {
         padding: 132px 10px
     }

     .left-icon-part {
         margin: 50px 0 30px 0;
         text-align: center
     }

     .essential-content-details h5 {
         text-align: center
     }

     /*taxi-booking-software-section*/
     .booking-software-inner {
         grid-template-columns: 100%;
         width: 100%
     }

     .single-booking-software:hover::before {
         height: 58%
     }

     /*** ----------------------------------------
   Hrms-software
---------------------------------------------*/
     .inner-hrms-about {
         text-align: center
     }

     .about-hrms {
         margin: 30px auto 40px
     }

     /*** ----------------------------------------
    fantasy-sport-software
---------------------------------------------*/
     .game-left .game-icons-blog,
     .game-right .game-icons-blog {
         left: 0;
         right: 0;
         margin: 0 auto
     }

     .game-content-area h4 {
         color: var(--bs-orange);
         text-align: center;
         padding-top: 80px;
         position: absolute;
         left: 0;
         right: 0;
         z-index: 1
     }

     .game-left .game-text p {
         padding: 150px 50px 20px 70px
     }

     .game-right .game-text p {
         padding: 150px 70px 20px 50px
     }

     .user-heading-area,
     .admin-heading-area {
         margin-bottom: 80px
     }

     .interface-single-panel {
         margin-bottom: 80px;
         padding: 12px 30px
     }

     .interface-top-head {
         display: grid;
         margin-top: -70px
     }

     .interface-inner-circle {
         margin: 0 auto
     }

     .interface-line-shape {
         width: 4px;
         height: 45px;
         margin: 0 auto
     }

     .admin-panel .interface-line-shape {
         order: 1
     }

     .admin-panel .outer-circle-panel {
         order: 0
     }

     .user-panel .interface-line-shape span,
     .admin-panel .interface-line-shape span {
         right: -3px
     }

     .interface-type-content {
         padding-top: 20px
     }

     .interface-line-shape span {
         margin-top: 40px
     }

     .admin-panel .interface-line-shape span {
         left: auto
     }

     /*** ----------------------------------------
     Betting Sports Landing Page 
---------------------------------------------*/
     .single-fun-blog {
         background: var(--bg-gray);
         border-radius: 10px
     }

     .fun-content {
         padding: 10px;
         margin-bottom: 30px
     }

     .single-multi-panel {
         margin-bottom: 20px
     }

     .varied-range-img {
         width: calc(100% - 0px);
         height: 0;
         transition: 0.5s;
         opacity: 0;
         position: relative;
         top: 0;
         left: 0;
         border-radius: 0 0 15px 15px;
         overflow: hidden
     }

     .varied-range-according {
         border-radius: 0 0 15px 15px;
         margin-bottom: 24px;
         box-shadow: 0px 5px 10px -2px var(--bd-gray-border)
     }
 }

 @media (min-width:576px) and (max-width:767px) {

     /*** ----------------------------------------
       School Management Software Page
---------------------------------------------*/
     .slice-wrap .worries-title {
         padding: 15px 33px 40px
     }

     .registration-blog .worries-title {
         padding: 15px 40px 40px
     }

 }

 @media (min-width:576px) and (max-width:991px) {

     /*** ----------------------------------------
    Mobile App Development Page
---------------------------------------------
 ---- Project Managment Section ------***/
     .project-wrap:nth-child(1) .project-single-blog,
     .project-wrap:nth-child(2) .project-single-blog,
     .project-wrap:nth-child(5) .project-single-blog,
     .project-wrap:nth-child(6) .project-single-blog {
         border-radius: 0 39px 0 0;
     }

     .project-wrap:nth-child(3) .project-single-blog,
     .project-wrap:nth-child(4) .project-single-blog,
     .project-wrap:nth-child(7) .project-single-blog,
     .project-wrap:nth-child(8) .project-single-blog {
         border-radius: 0 0 39px 0
     }

     /*** ----------------------------------------
   food-delivery-software
---------------------------------------------*/
     .delivery-column1,
     .delivery-column2,
     .delivery-column5,
     .delivery-column6 {
         border-top-left-radius: 30px;
         border-top-right-radius: 30px
     }

     .delivery-column3,
     .delivery-column4,
     .delivery-column7,
     .delivery-column8 {
         border-bottom-left-radius: 30px;
         border-bottom-right-radius: 30px;
         display: grid
     }

     .delivery-column1::before,
     .delivery-column2::before,
     .delivery-column5::before,
     .delivery-column6::before {
         bottom: 0
     }

     .delivery-column3::before,
     .delivery-column4::before,
     .delivery-column7::before,
     .delivery-column8::before {
         top: 0
     }

     .single-food-delivery:hover::before {
         height: 64%
     }

     .delivery-column3 .delivery-icons,
     .delivery-column4 .delivery-icons,
     .delivery-column7 .delivery-icons,
     .delivery-column8 .delivery-icons {
         order: 1;
         margin-top: 20px
     }

     .delivery-column1 .delivery-content,
     .delivery-column2 .delivery-content,
     .delivery-column5 .delivery-content,
     .delivery-column6 .delivery-content {
         margin-top: 20px
     }

     .delivery-column3 .delivery-content,
     .delivery-column4 .delivery-content,
     .delivery-column7 .delivery-content,
     .delivery-column8 .delivery-content {
         order: 0
     }

     .delivery-content {
         height: 140px
     }
 }

 @media (min-width:376px) and (max-width:767px) {

     /*** ----------------------------------------
    Service Common Css
---------------------------------------------
 ------------ Service Pge Awards Section  ------------*/
     .service-inner-awards {
         display: inline-block
     }

     .single-service-awards {
         border-right: 1px solid var(--bs-service-gray);
         width: 50%;
         float: left;
         border-bottom: none
     }

     .single-service-awards:nth-child(5),
     .single-service-awards:nth-child(6) {
         border-bottom: 1px solid var(--bs-service-gray);
     }

     .single-service-awards:nth-child(2),
     .single-service-awards:nth-child(4),
     .single-service-awards:nth-child(6) {
         border-left: none
     }


 }

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

     /*** ----------------------------------------
    Service Common Css
---------------------------------------------*/
     .cab-opsiton-icons span {
         width: 70px;
         display: block;
         text-align: center
     }

     /*** ----------------------------------------
       Reseller Software Page
---------------------------------------------*/
     .factor-single-wrap {
         padding: 0px 25px;
         transition: 0.5s all ease-in-out
     }

     .factor-single-wrap .cab-opsiton-icons {
         background: var(--bs-black);
         padding: 0
     }

     .factor-single-wrap:hover .cab-opsiton-icons {
         background: var(--bs-light-orange)
     }

     .factor-single-wrap .cab-opsiton-icons span {
         padding: 28px 0px;
         background: var(--bs-light-orange);
         width: 100px;
         display: block;
         transition: 0.5s all ease-in-out
     }

     .factor-single-wrap:hover .cab-opsiton-icons span {
         background: var(--bs-black)
     }

     .image-fit-right {
         object-position: right
     }

     .home-service-app-section .panel-icons {
         width: 90px;
         text-align: center
     }
 }

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

     /*** ----------------------------------------
     Banner Section  
     -------------------------------------*/
     .service-banner-details {
         width: 94%
     }

     /*** ----------------------------------------
    Mobile App Development Page
---------------------------------------------  
 ---- 2.1 Project Managment Section ------***/
     .project-wrap:nth-child(1) .project-single-blog,
     .project-wrap:nth-child(3) .project-single-blog,
     .project-wrap:nth-child(5) .project-single-blog,
     .project-wrap:nth-child(7) .project-single-blog {
         border-radius: 0 39px 0 0
     }

     .project-wrap:nth-child(2) .project-single-blog,
     .project-wrap:nth-child(4) .project-single-blog,
     .project-wrap:nth-child(6) .project-single-blog,
     .project-wrap:nth-child(8) .project-single-blog {
         border-radius: 0 0 39px 0
     }

     /*** ----------------------------------------
    Cab Booking  Page
---------------------------------------------     
/* 3.2  Cab Feature Section*/
     .cab-opsiton-icons {
         padding: 13px 10px;
         border-radius: 10px 10px 0 0;
         margin: 18px 0 9px;
         text-align: center
     }

     /*** ----------------------------------------
           grocery-software Page Css 
---------------------------------------------*/
     .solution-ordering-section {
         padding: 50px 0 30px
     }

     .inner-solution-ordering p,
     .inner-grocery-management p {
         padding: 20px 20px
     }

     /*** ----------------------------------------
   food-delivery-software
---------------------------------------------*/
     .single-food-delivery {
         border-radius: 30px 30px 0 0
     }

     .single-food-delivery::before {
         bottom: 0;
         border-radius: 30px 30px 0 0
     }

     .single-food-delivery:hover::before {
         height: 100%
     }

     .delivery-icons {
         margin-bottom: 20px
     }

     /*** ----------------------------------------
       Home Service Software Page
---------------------------------------------*/
     .panel-icons {
         padding: 30px 10px;
         text-align: center;
         margin: 0
     }

     .single-block-panel {
         padding: 25px 0;
         margin-bottom: 30px
     }

     .panel-content-area {
         padding: 15px 15px 0
     }

     .single-block-panel:hover .panel-icons {
         margin-left: 0
     }

     .single-block-panel:hover {
         transform: translateY(-10px)
     }
 }

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

     /*** ----------------------------------------
    Service Common Css
---------------------------------------------
 ------------  Development Service Section  ------------*/
     .development-inner-block {
         display: block;
         text-align: center
     }

     .development-icons {
         margin-right: 0;
         margin-bottom: -19px;
         position: relative
     }

     .development-service-name {
         padding: 45px 15px 30px;
         height: auto;
         align-items: center;
         display: block;
         border-radius: 0px 0px 15px 15px;
         text-align: center
     }

     .single-booking-software {
         overflow: hidden
     }

     .single-booking-software:hover::before {
         height: 100%
     }
 }

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

     /*** ----------------------------------------
    Service Common Css
---------------------------------------------
 ------------  Service Pge Awards Section  ------------*/
     .service-inner-awards {
         display: block
     }

     .single-service-awards {
         border-right: 1px solid var(--bs-service-gray);
         width: 100%;
         border-bottom: none
     }

     .single-service-awards:last-child {
         border-bottom: 1px solid var(--bs-service-gray)
     }

     .team-main-work {
         width: 100%;
         height: 100%
     }

     .team-main-work::after,
     .work-content::after,
     .sr-no::before {
         display: none
     }

     .feature-head-img img {
         animation: none;
         width: 100%
     }
 }