 /* banner-section 
 ========================================= **/
 .service-banner-section::after {
   display: none
 }

 @keyframes circle-animation-2 {
   0% {
     left: 0
   }

   50% {
     left: 100%
   }

   100% {
     left: 0
   }
 }

 /* Breadcumb setion 
 ======================================= **/
 .breadcumb-section.position-relative {
   padding-top: 0
 }

 .breadcumb-section .container {
   z-index: 1
 }

 /*         Payment 
======================================= **/
 .design-developemnt-common {
   overflow-x: hidden
 }

 .tp-payment-method__wrapper {
   padding-top: 140px;
   padding-bottom: 140px
 }

 .tp-payment-method__main-img {
   width: 100px;
   height: 100px;
   text-align: center;
   border-radius: 50%;
   background: var(--bs-white);
   align-items: center;
   display: flex;
   justify-content: center;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
   z-index: 1
 }

 .techno-circle::after {
   position: absolute;
   content: "";
   width: 7px;
   height: 7px;
   background-color: #ACE67A;
   border-radius: 50%;
   top: -3px;
   right: 0
 }

 .techno-circle.circle-1::after {
   animation: circle-animation 30s linear infinite
 }

 .techno-circle.circle-2::after {
   left: 0;
   animation: circle-animation-2 20s linear infinite
 }

 .techno-circle.circle-3::after {
   animation: circle-animation 30s linear infinite
 }

 .techno-circle.circle-4::after {
   left: 0;
   animation: circle-animation-2 20s linear infinite
 }

 .techno-circle.circle-5::after {
   animation: circle-animation 30s linear infinite
 }

 .techno-circle.circle-6::after {
   animation: circle-animation 30s linear infinite
 }

 .techno-circle.circle-7::after {
   left: 0;
   animation: circle-animation-2 20s linear infinite
 }

 .techno-circle.circle-8::after {
   animation: circle-animation 30s linear infinite
 }

 .techno-circle.circle-9::after {
   left: 0;
   animation: circle-animation-2 20s linear infinite
 }

 .techno-circle.circle-10::after {
   animation: circle-animation 30s linear infinite
 }

 .techno-circle.circle-11::after {
   left: 0;
   animation: circle-animation-2 20s linear infinite
 }

 .techno-circle.circle-12::after {
   animation: circle-animation 30s linear infinite
 }

 .techno-circle.circle-13::after {
   left: 0;
   animation: circle-animation-2 20s linear infinite
 }

 .techno-circle.circle-14::after {
   animation: circle-animation 30s linear infinite
 }

 .techno-circle.circle-15::after {
   left: 0;
   animation: circle-animation-2 20s linear infinite
 }

 .techno-circle.circle-16::after {
   animation: circle-animation 30s linear infinite
 }

 .tp-payment-method__main-circle {
   display: inline-block
 }

 .custom-technology-1 span,
 .custom-technology-2 span,
 .custom-technology-3 span,
 .custom-technology-4 span,
 .custom-technology-5 span,
 .custom-technology-6 span,
 .custom-technology-7 span,
 .custom-technology-8 span,
 .custom-technology-9 span,
 .custom-technology-10 span,
 .custom-technology-11 span,
 .custom-technology-12 span,
 .custom-technology-13 span,
 .custom-technology-14 span,
 .custom-technology-15 span,
 .custom-technology-16 span {
   position: absolute;
   left: -40px;
   top: 50%;
   text-align: center;
   border-radius: 50%;
   background: var(--bs-white);
   align-items: center;
   display: flex;
   justify-content: center;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
   transition: .5s all ease-in-out
 }

 .single-technology {
   position: absolute;
   top: 50%;
   text-align: center;
   display: inline-block;
   transform-origin: right center;
   height: 1px;
   background-color: #AEEA7B
 }

 .custom-technology-1 span {
   transform: translateY(-50%) rotate(14deg)
 }

 .custom-technology-2 span {
   transform: translateY(-50%) rotate(44deg)
 }

 .custom-technology-3 span {
   transform: translateY(-50%) rotate(24deg)
 }

 .custom-technology-4 span {
   transform: translateY(-50%) rotate(2deg)
 }

 .custom-technology-5 span {
   transform: translateY(-50%) rotate(-10deg)
 }

 .custom-technology-6 span {
   transform: translateY(-50%) rotate(-26deg)
 }

 .custom-technology-7 span {
   transform: translateY(-50%) rotate(-51deg)
 }

 .custom-technology-8 span {
   transform: translateY(-50%) rotate(-123deg)
 }

 .custom-technology-9 span {
   transform: translateY(-50%) rotate(-150deg)
 }

 .custom-technology-10 span {
   transform: translateY(-50%) rotate(-160deg)
 }

 .custom-technology-10 p {
   transform: rotate(180deg)
 }

 .custom-technology-11 span {
   transform: translateY(-50%) rotate(-170deg)
 }

 .custom-technology-12 span {
   transform: translateY(-50%) rotate(-180deg)
 }

 .custom-technology-12 p {
   transform: rotate(180deg)
 }

 .custom-technology-13 span {
   transform: translateY(-50%) rotate(-190deg)
 }

 .custom-technology-14 span {
   transform: translateY(-50%) rotate(-199deg)
 }

 .tp-payment-method__main-circle span img {
   transition: .5s all ease-in-out
 }

 .single-technology span:hover img {
   transform: scale(1.1)
 }

 .custom-technology-name {
   opacity: 0;
   transition: .5s all ease-in-out
 }

 .single-technology:hover .custom-technology-name {
   opacity: 1
 }

 .custom-technology-8 .custom-technology-name,
 .custom-technology-9 .custom-technology-name,
 .custom-technology-11 .custom-technology-name,
 .custom-technology-13 .custom-technology-name,
 .custom-technology-14 .custom-technology-name,
 .custom-technology-15 .custom-technology-name,
 .custom-technology-16 .custom-technology-name {
   transform: rotate(180deg)
 }

 /**   Industries Marquee Section
===================================== **/
 .industries-section {
   background: url(../image/industries/industries_bg.webp);
   padding: 50px 0
 }

 .industries-section::after {
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) -7%, #fff 2%, rgba(13, 13, 12, 0) 16%, rgba(0, 0, 0, 0) 92%, rgba(255, 255, 255, 0.97) 98%);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   content: ""
 }

 .industries-section .service-section-title {
   z-index: 1
 }

 .marquee-industries {
   overflow: hidden;
   gap: 2rem;
   padding: 20px
 }

 .marquee-group {
   flex-shrink: 0;
   gap: 2rem
 }

 .marquee-left .marquee-group {
   animation: scrollLeft 40s linear infinite;
   animation-direction: reverse
 }

 .marquee-right .marquee-group {
   animation: scrollRight 50s linear infinite
 }

 .marquee-group {
   animation-delay: calc(10s / -2)
 }

 @keyframes scrollLeft {
   0% {
     transform: translateX(0)
   }

   100% {
     transform: translateX(-100%)
   }
 }

 @keyframes scrollRight {
   0% {
     transform: translateX(0)
   }

   100% {
     transform: translateX(-100%)
   }
 }

 /*  Life Cycle Progress Section  
================================== */
 .technology-list {
   overflow-x: scroll;
   max-width: 92%;
   margin: 0 auto;
   /*scrollbar-width:thin;*/
   scrollbar-color: #F9A11B #f2f2f2;
   padding-bottom: 23px;
   box-shadow: 0 11px 11px -15px var(--bs-black)
 }

 /*.technology-list::-webkit-scrollbar{width: 11px}*/
 .development-row .col-column:first-child .ssingle-cycle-box,
 .development-row .col-column:nth-child(2) .ssingle-cycle-box,
 .development-row .col-column:nth-child(3) .ssingle-cycle-box,
 .development-row .col-column:nth-child(4) .ssingle-cycle-box,
 .development-row .col-column:nth-child(5) .ssingle-cycle-box,
 .development-row .col-column:nth-child(6) .ssingle-cycle-box,
 .development-row .col-column:nth-child(7) .ssingle-cycle-box,
 .inner-cycle {
   background: var(--bs-white)
 }

 .technology-list::-webkit-scrollbar-track {
   background: #f9a11b;
   border-radius: 6px
 }

 .technology-list::-webkit-scrollbar-thumb {
   background-color: #fff;
   border-radius: 6px;
   border: 3px solid #f9a11b
 }

 .row.development-row {
   display: grid;
   padding: 0 30px;
   grid-template-columns: 345px 345px 345px 345px 345px 345px 345px
 }

 .col-column {
   padding: 4px;
   width: 100%
 }

 .col-column:first-child::before {
   background: #f27c1e;
   width: 10px;
   height: 10px;
   position: absolute;
   top: 50%;
   left: -3px;
   content: "";
   border-radius: 50%;
   z-index: 9
 }

 .col-column:first-child::after,
 .col-column:nth-child(3)::after,
 .col-column:nth-child(5)::after,
 .col-column:nth-child(7)::after {
   position: absolute;
   width: 100%;
   height: 50%;
   content: "";
   top: 0;
   left: 0;
   border-radius: 15px 15px 0 0;
   z-index: -1
 }

 .col-column:nth-child(2)::after,
 .col-column:nth-child(4)::after,
 .col-column:nth-child(6)::after {
   position: absolute;
   width: 100%;
   height: 50%;
   content: "";
   bottom: 0;
   left: 0;
   border-radius: 0 0 15px 15px;
   z-index: -1
 }

 .col-column:first-child::after {
   background: linear-gradient(108deg, #f1741f 0, #f9a11b 100%)
 }

 .col-column:nth-child(2)::after {
   background: linear-gradient(108deg, #f9a11b 0, #fed503 100%)
 }

 .col-column:nth-child(3)::after {
   background: linear-gradient(108deg, #fdcc07 0, #82c340 100%)
 }

 .col-column:nth-child(4)::after {
   background: linear-gradient(108deg, #83c340 0, #56bb02 100%)
 }

 .col-column:nth-child(5)::after {
   background: linear-gradient(108deg, #5fbd0e 0, #47cda7 100%)
 }

 .col-column:nth-child(6)::after {
   background: linear-gradient(108deg, #48cda6 0, #53bcff 100%)
 }

 .col-column:nth-child(7)::after {
   background: linear-gradient(108deg, #65cbff 0, #0079ff 100%)
 }

 .development-row .col-column:nth-child(2) {
   margin-left: -4px
 }

 .development-row .col-column:nth-child(3) {
   margin-left: -8px
 }

 .development-row .col-column:nth-child(4) {
   margin-left: -12px
 }

 .development-row .col-column:nth-child(5) {
   margin-left: -16px
 }

 .development-row .col-column:nth-child(6) {
   margin-left: -20px
 }

 .development-row .col-column:nth-child(7) {
   margin-left: -24px
 }

 .development-row .col-column:nth-child(7)::before {
   background: #017aff;
   width: 10px;
   height: 10px;
   position: absolute;
   top: 50%;
   right: -3px;
   content: "";
   border-radius: 50%;
   z-index: 2
 }

 .single-cycle-box {
   z-index: 1;
   border-radius: 15px;
   padding: 15px;
   border: 9px solid var(--bs-white);
   box-shadow: 1px 1px 9px -2px #b2afaf
 }

 .inner-cycle {
   padding: 6px;
   border-radius: 15px
 }

 .type-icon {
   width: 87px;
   height: 87px;
   margin: 0 auto 35px;
   position: relative;
   z-index: 1;
   transition: .3s linear;
   display: flex;
   align-items: center;
   justify-content: center
 }

 .type-icon::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   z-index: -1
 }

 .col-column:first-child .type-icon::before {
   background: #fff2e4
 }

 .col-column:nth-child(2) .type-icon::before {
   background: #fdf5ce
 }

 .col-column:nth-child(3) .type-icon::before {
   background: #e9ffc0
 }

 .col-column:nth-child(4) .type-icon::before {
   background: #f7ffc0
 }

 .col-column:nth-child(5) .type-icon::before {
   background: #dcffef
 }

 .col-column:nth-child(6) .type-icon::before {
   background: #dcfcff
 }

 .col-column:nth-child(7) .type-icon::before {
   background: #dbeeff
 }

 .type-icon img {
   max-width: 80px;
   transform: translate(-10px, 15px);
   transition: .4s linear
 }

 .development-row [class*=col-]:nth-child(2) .type-icon img {
   transform: translate(20px, 15px)
 }

 .development-row [class*=col-]:nth-child(3) .type-icon img {
   transform: translate(20px, -20px)
 }

 .development-row [class*=col-]:nth-child(4) .type-icon img {
   transform: translate(-30px, 18px)
 }

 .col-column:hover .type-icon img {
   transform: translate(0) !important;
   max-width: 60px
 }

 .col-column:first-child .type-process-heading {
   color: #f4831e
 }

 .col-column:nth-child(2) .type-process-heading {
   color: #fcc10c
 }

 .col-column:nth-child(3) .type-process-heading {
   color: #cec91d
 }

 .col-column:nth-child(4) .type-process-heading {
   color: #499209
 }

 .col-column:nth-child(5) .type-process-heading {
   color: #26a775
 }

 .col-column:nth-child(6) .type-process-heading {
   color: #31a2da
 }

 .col-column:nth-child(7) .type-process-heading {
   color: #1257d4
 }

 /* Portfolio Section  with Slider
=============================== */
 .development-portfolio-section .col-lg-6 {
   padding: 0
 }

 .portfolio-tabs .tabs {
   display: grid;
   grid-template-columns: 50% 50%;
   overflow: hidden;
   padding: 0
 }

 .portfolio-tabs .tap-links {
   background: #f2f2f2;
   display: flex;
   justify-content: center;
   padding: 40px;
   transition: .5s all ease-in-out;
   z-index: 0;
   cursor: pointer
 }

 .portfolio-tabs .tap-links:nth-child(1),
 .portfolio-tabs .tap-links:nth-child(4) {
   background: #ededed;
   color: #222
 }

 .portfolio-tabs .tap-links.active {
   transform: scale(1.05);
   box-shadow: 0 16px 40px rgba(32, 33, 36, 0.1);
   background: var(--bs-white);
   z-index: 1
 }

 .tp-image img {
   margin-bottom: 20px
 }

 .portfolio-image .tab-content {
   padding: 0;
   display: none;
   background: #ededed
 }

 .tab-content.current {
   display: inherit
 }

 .portfolio-image {
   height: 100%
 }

 .portfolio-details img {
   width: 100%;
   transition: 1s;
   height: 100%;
   object-position: top
 }

 .dot {
   cursor: pointer
 }

 .fade {
   animation-name: fade;
   animation-duration: 1.5s
 }

 @keyframes fade {
   from {
     opacity: .4
   }

   to {
     opacity: 1
   }
 }

 /*   Technology Section 
============================= */
 .custom-development-section {
   box-shadow: 0 15px 30px rgba(66, 66, 66, 0.04)
 }

 .frontend-development::before,
 .backend-development::before {
   background: #ff6f04;
   width: 10px;
   height: 10px;
   content: "";
   position: absolute;
   border-radius: 5px
 }

 .frontend-development::after,
 .backend-development::after {
   background: #ff6f04;
   height: 2px;
   content: "";
   position: absolute
 }

 .dev-technology-img::before {
   background: transparent;
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: -1;
   transform: rotate(45deg);
   border-radius: 28px;
   border: 2px solid #ff6f04
 }

 .dev-technology-img {
   width: 143px;
   margin: 0 auto;
   text-align: center;
   box-shadow: 1px 4px 9px 5px rgba(232, 232, 232, 0.47);
   border-radius: 28px;
   background: var(--bs-white)
 }

 .frontend-development .dev-technology-img::after,
 .backend-development .dev-technology-img::after {
   background: #ff6f04;
   content: "";
   width: 8px;
   height: 8px;
   position: absolute;
   z-index: -1;
   transform: rotate(45deg);
   border-radius: 50%
 }

 .dev_position-content {
   margin-top: 59px
 }

 .backend-development .dev_position-content {
   margin-left: auto
 }

 .all-technology ul {
   padding: 15px 0;
   border-bottom: 1px solid #d9d9d9
 }

 .all-technology li {
   width: 48px;
   border: 1px solid #d9d9d9;
   padding: 5px;
   display: inline-block;
   margin: 0 10px;
   border-radius: 5px
 }

 .alter3-features {
   overflow-x: hidden
 }

 .alter3-features .animation {
   z-index: -1
 }

 .alter3-features .shape-ring-1 .animation {
   border-radius: 50%;
   border: 5px solid #edf4f8;
   -webkit-animation-duration: 45s;
   animation-duration: 45s;
   margin: 0 auto;
   position: absolute;
   left: 0;
   right: 0;
   margin: 0 auto
 }

 .alter3-features .shape-ring-2 .animation {
   border-radius: 50%;
   border: 1px solid #d3d4d5;
   -webkit-animation-duration: 60s;
   animation-duration: 60s;
   margin: 0 auto;
   position: absolute;
   left: 0;
   right: 0;
   margin: 0 auto
 }

 .alter3-features .shape-ring .animation {
   border-style: dashed
 }

 @-webkit-keyframes clockwise {
   0% {
     -webkit-transform: rotate(0) translate(-165px) rotate(0);
     transform: rotate(0) translate(-165px) rotate(0)
   }

   100% {
     -webkit-transform: rotate(360deg) translate(-165px) rotate(-360deg);
     transform: rotate(360deg) translate(-165px) rotate(-360deg)
   }
 }

 @-webkit-keyframes rotating {
   0% {
     -webkit-transform: rotate(0);
     transform: rotate(0)
   }

   100% {
     -webkit-transform: rotate(-360deg);
     transform: rotate(-360deg)
   }
 }

 .animation--clockwise {
   -webkit-animation: clockwise 30s linear infinite normal;
   animation: clockwise 30s linear infinite normal
 }

 .animation--rotating {
   -webkit-animation: rotating 15s linear infinite normal;
   animation: rotating 15s linear infinite normal
 }

 .alter3-header .animation-shape.shape-triangle div:before {
   -webkit-transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
   transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%)
 }

 .alter3-header .animation-shape.shape-triangle div:after {
   -webkit-transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
   transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%)
 }

 /* Development= No Better Time 
========================== */
 .better-devlopment-section {
   padding: 110px 0 50px
 }

 .dev_card-img1 {
   top: -53px;
   left: 45px;
   animation: 15s linear infinite rotate2;
   z-index: 2
 }

 .dev_card-img2 {
   bottom: -57%;
   right: -24px;
   z-index: 2
 }

 .dev_card-img3 {
   top: -11%;
   right: 0;
   z-index: -1
 }

 .dev_card-img4 {
   top: 19%;
   right: 20px;
   z-index: -1
 }

 .dev_card-img5 {
   top: 43%;
   right: 19%;
   animation: 5s infinite alternate forwards tptranslateX2;
   z-index: 2
 }

 .tp-card-main-img img {
   border-radius: 30px;
   z-index: 1;
   width: auto;
   height: auto
 }

 @keyframes rotate2 {
   from {
     transform: rotate(0)
   }

   to {
     transform: rotate(360deg)
   }
 }

 @keyframes rotate3 {
   from {
     transform: rotateZ(0)
   }

   to {
     transform: rotateZ(360deg)
   }
 }

 @keyframes tptranslateX2 {
   0% {
     -webkit-transform: translateX(-30px);
     -moz-transform: translateX(-30px);
     -ms-transform: translateX(-30px);
     -o-transform: translateX(-30px);
     transform: translateX(-30px)
   }

   100% {
     -webkit-transform: translatXY(20px);
     -moz-transform: translateX(20px);
     -ms-transform: translateX(20px);
     -o-transform: translateX(20px);
     transform: translateX(20px)
   }
 }

 /**   PWA Launch Section
======================== */
 .pwa-bg {
   position: absolute;
   right: 0;
   top: 0;
   z-index: -1
 }

 .pwa-rendering-section .col-xxl-6:first-child {
   order: 1
 }

 .pwa-rendering-section .col-xxl-6:last-child {
   order: 0
 }

 .app-image {
   animation: moveBounce 5s linear infinite;
   top: -24px
 }

 .circle-img {
   position: absolute;
   left: 0;
   top: 20px;
   z-index: -1;
   right: 0;
   margin: 0 auto
 }

 .circle-img img {
   animation: rotating 15s linear infinite normal
 }

 @keyframes moveBounce {
   0% {
     transform: translateY(0)
   }

   50% {
     transform: translateY(20px)
   }

   to {
     transform: translateY(0)
   }
 }

 /** swiper Slider
===================== */
 .web-technology-section {
   padding-bottom: 0
 }

 .web-technology-slider {
   padding: 30px 15px 15px
 }

 .web-technology-info {
   text-align: center;
   width: 95%;
   transition: .5s all ease-in-out
 }

 .web-technology-left {
   z-index: 1
 }

 .web-technology-logo {
   background: var(--bs-white);
   border-radius: 50%;
   box-shadow: 3px 4px 7px 0 #0000009c
 }

 .web-technology-logo::after {
   position: absolute;
   right: 0;
   content: "";
   z-index: -1;
   border-radius: 50%;
   border: 5px solid var(--bs-white)
 }

 .dotnet-technology .web-technology-logo::after {
   background: #0A74D1
 }

 .php-technology .web-technology-logo::after {
   background: #7377ad
 }

 .python-technology .web-technology-logo::after {
   background: #feb800
 }

 .nodejs-technology .web-technology-logo::after {
   background: #509840
 }

 .angular-technology .web-technology-logo::after {
   background: #ce022d
 }

 .java-technology .web-technology-logo::after {
   background: #229ad4
 }

 .web-technology-logo img {
   width: 50px
 }

 .web-technology-content {
   box-shadow: 1px 3px 9px 0 #f0eded;
   border-radius: 19px;
   border-top: 10px solid;
   transition: .5s all ease-in-out;
   position: relative;
   text-align: left
 }

 .web-technology-head:hover .web-technology-content {
   background: var(--bs-gray-dark-bg);
   box-shadow: none
 }

 .dotnet-technology .web-technology-content {
   border-color: #0465BB
 }

 .php-technology .web-technology-content {
   border-color: #3E4279
 }

 .python-technology .web-technology-content {
   border-color: #e1ae14
 }

 .nodejs-technology .web-technology-content {
   border-color: #1B600D
 }

 .angular-technology .web-technology-content {
   border-color: #A90825
 }

 .java-technology .web-technology-content {
   border-color: #0778BD
 }

 .web-technology-content p {
   margin: 0;
   margin-bottom: 20px
 }

 .web-technology-footer ul {
   padding: 7px 0
 }

 .web-technology-footer li {
   display: inline-block;
   color: var(--bs-black);
   font-weight: 400;
   border: 1px solid #dbdbea;
   border-radius: 25px;
   padding: 2px 10px;
   margin-bottom: 5px;
   font-size: 11px;
   background: #f1f1ff
 }

 .web-technology-footer li:last-child {
   margin-right: 0
 }

 .dotnet-technology .hire-developer-btn {
   background: #096ec7
 }

 .php-technology .hire-developer-btn {
   background: #777bb3
 }

 .python-technology .hire-developer-btn {
   background: #f9b400
 }

 .nodejs-technology .hire-developer-btn {
   background: #539e43
 }

 .angular-technology .hire-developer-btn {
   background: #dd0330
 }

 .java-technology .hire-developer-btn {
   background: #2196cf
 }

 .hire-developer-btn::after {
   content: "\ea40";
   font-family: 'Zequon Icon';
   position: absolute;
   margin-left: 21px;
   animation: move_horizontal 3000ms infinite ease-in-out
 }

 .web-technology-section .swiper-container {
   padding-bottom: 54px
 }

 .swiper-button-prev.webslider-arrow,
 .swiper-button-next.webslider-arrow {
   top: auto;
   background-image: none;
   margin: 0 auto
 }

 .web-technology-section .swiper-button-prev {
   left: 50%
 }

 .web-technology-section .swiper-button-next {
   right: 50%
 }

 /*  Feqs Section  
================== */
 .feq-section {
   box-shadow: 0 15px 30px rgba(66, 66, 66, 0.04)
 }

 .development-feqs .feqs-label-title {
   border: 1px solid #DBDBDB;
   font-size: 18px;
   box-shadow: 0 5px 7px -6px var(--bs-shadow)
 }

 .single-development-feqs {
   margin-bottom: 30px
 }

 .development-feqs input:checked+.feqs-label-title {
   box-shadow: 0 5px 8px -5px var(--bs-shadow)
 }

 .development-feqs input:checked~.feqs-content {
   line-height: 1.42857143;
   background: var(--bs-white);
   color: #2b2b2b;
   font-size: 18px
 }

 /*  form Section  
================ */
 .development-form-details {
   box-shadow: 0 15px 30px rgba(61, 90, 125, 0.08);
   border-radius: 20px;
   border: 1px solid #F2F0F0;
   padding: 30px;
   margin-top: 60px
 }

 .develop-label {
   font-size: 14px;
   color: #6f6f6f
 }

 .develop-form-fild input,
 .develop-form-fild select,
 .develop-form-fild textarea {
   border-radius: 6px
 }

 .develop-form-fild .budget-title {
   padding: 0
 }

 .develop-form-fild .contery-fleg {
   top: 35px
 }

 .develop-form-fild .phone_number {
   padding-left: 137px
 }

 input[type="email"],
 input[type="number"],
 input[type="password"],
 input[type="tel"],
 input[type="text"],
 textarea[type="message"] {
   font-weight: 350
 }

 .shape-one,
 .shape-two {
   position: absolute
 }

 .shape-one {
   bottom: 0;
   right: aut
 }

 .shape-two {
   right: 0;
   top: 0
 }

 .float-bob-x {
   -webkit-animation-name: float-bob-x;
   animation-name: float-bob-x;
   -webkit-animation-duration: 3s;
   animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear
 }

 .ribbonRotate {
   -webkit-animation-name: ribbonRotate;
   animation-name: ribbonRotate;
   -webkit-animation-duration: 5s;
   animation-duration: 5s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear
 }

 @keyframes ribbonRotate {

   0%,
   100% {
     -webkit-transform: rotate(0);
     transform: rotate(0)
   }

   25%,
   75% {
     -webkit-transform: rotate(15deg);
     transform: rotate(15deg)
   }

   50% {
     -webkit-transform: rotate(30deg);
     transform: rotate(30deg)
   }
 }

 @-webkit-keyframes float-bob-x {
   0% {
     transform: translateX(-30px)
   }

   50% {
     transform: translateX(-10px)
   }

   100% {
     transform: translateX(-30px)
   }
 }

 @keyframes float-bob-x {
   0% {
     transform: translateX(-30px)
   }

   50% {
     transform: translateX(-10px)
   }

   100% {
     transform: translateX(-30px)
   }
 }

 @keyframes rotate2 {
   from {
     transform: rotate(0deg)
   }

   to {
     transform: rotate(360deg)
   }
 }

 @keyframes rotate3 {
   from {
     transform: rotateZ(0deg)
   }

   to {
     transform: rotateZ(360deg)
   }
 }

 @keyframes circle-animation {
   0% {
     right: 0
   }

   50% {
     right: 100%
   }

   100% {
     right: 0
   }
 }

 @media only screen and (max-width:419px) {
   .portfolio-tabs .tap-links {
     padding: 10px
   }

   .tp-image img {
     width: 50px
   }

   .portfolio-details img {
     position: relative;
     object-fit: cover;
     height: 100%
   }

   .alter3-features {
     display: none
   }
 }

 @media only screen and (min-width:420px) {
   .portfolio-tabs .tap-links {
     padding: 40px 15px
   }

   .tp-image img {
     width: 70px
   }

   .portfolio-details img {
     position: relative;
     object-fit: cover;
     height: 100%
   }

   .alter3-features .shape-ring-1 .animation {
     height: 250px;
     width: 250px;
     bottom: -23px
   }

   .alter3-features .shape-ring-2 .animation {
     height: 200px;
     width: 200px;
     bottom: 0
   }

   .tp-payment-method__wrapper {
     padding-bottom: 220px
   }
 }

 @media only screen and (max-width:479px) {
   .tp-payment-method__main-circle {
     left: -50px
   }

   .tp-payment-method__main-img {
     width: 50px;
     height: 50px;
     right: -50px
   }

   .custom-technology-1,
   .custom-technology-2,
   .custom-technology-4,
   .custom-technology-6,
   .custom-technology-7,
   .custom-technology-8,
   .custom-technology-9,
   .custom-technology-11,
   .custom-technology-13,
   .custom-technology-14,
   .custom-technology-15,
   .custom-technology-16 {
     display: none
   }

   .single-technology {
     width: 180px
   }

   .custom-technology-3 {
     left: -35%;
     transform: translate(-50%) rotate(45deg)
   }

   .custom-technology-5 {
     left: -35%;
     transform: translate(-50%) rotate(-45deg)
   }

   .custom-technology-10 {
     left: -35%;
     transform: translate(-50%) rotate(134deg);
     top: 50%
   }

   .custom-technology-12 {
     left: -35%;
     transform: translate(-50%) rotate(226deg)
   }

   .single-technology span {
     width: 50px;
     height: 50px
   }

   .single-technology img {
     width: 36px
   }

   .single-technology p {
     font-size: 11px
   }
 }

 @media only screen and (min-width:480px) {
   .tp-payment-method__wrapper {
     padding-top: 180px;
     left: -50px
   }

   .tp-payment-method__main-img {
     width: 50px;
     height: 50px;
     right: -46px
   }

   .single-technology {
     width: 180px
   }

   .custom-technology-1 {
     left: -35%;
     transform: translate(-50%) rotate(-22deg)
   }

   .custom-technology-2 {
     left: -35%;
     transform: translate(-50%) rotate(-67deg)
   }

   .custom-technology-3 {
     left: -35%;
     transform: translate(-50%) rotate(-45deg)
   }

   .custom-technology-4 {
     left: -35%;
     transform: translate(-50%) rotate(-0deg)
   }

   .custom-technology-5 {
     left: -35%;
     transform: translate(-50%) rotate(23deg)
   }

   .custom-technology-6 {
     left: -35%;
     transform: translate(-50%) rotate(45deg)
   }

   .custom-technology-7 {
     left: -35%;
     transform: translate(-50%) rotate(67deg)
   }

   .custom-technology-8 {
     left: -35%;
     transform: translate(-50%) rotate(90deg)
   }

   .custom-technology-9 {
     left: -35%;
     transform: translate(-50%) rotate(113deg)
   }

   .custom-technology-10 {
     left: -30%;
     transform: translate(-50%) rotate(133deg);
     top: 49%
   }

   .custom-technology-11 {
     left: -35%;
     transform: translate(-50%) rotate(157deg)
   }

   .custom-technology-12 {
     left: -35%;
     transform: translate(-50%) rotate(180deg)
   }

   .custom-technology-13 {
     left: -35%;
     transform: translate(-50%) rotate(202deg)
   }

   .custom-technology-14 {
     left: -35%;
     transform: translate(-50%) rotate(224deg)
   }

   .custom-technology-15 {
     left: -35%;
     transform: translate(-50%) rotate(247deg)
   }

   .ingle-technology span {
     width: 50px;
     height: 50px
   }

   .custom-technology-15 span {
     transform: translateY(-50%) rotate(-250deg)
   }

   .custom-technology-16 {
     left: -35%;
     transform: translate(-50%) rotate(270deg)
   }

   .single-technology img {
     width: 36px
   }

   .custom-technology-16 img,
   .custom-technology-11 img {
     width: 28px
   }

   .custom-technology-16 span {
     transform: translateY(-50%) rotate(-270deg)
   }

   .single-technology span {
     width: 50px;
     height: 50px
   }

   .single-technology p {
     font-size: 12px
   }
 }

 @media only screen and (min-width:576px) {
   .tp-payment-method__wrapper {
     padding-top: 225px;
     left: -60px
   }

   .tp-payment-method__main-img {
     width: 60px;
     height: 60px;
     right: -60px
   }

   .single-technology {
     width: 225px
   }

   .single-technology span {
     width: 75px;
     height: 75px
   }

   .alter3-features .shape-ring-1 .animation {
     height: 280px;
     width: 280px;
     bottom: -25px
   }

   .alter3-features .shape-ring-2 .animation {
     height: 220px;
     width: 220px;
     bottom: 7px
   }

   .development-form-details {
     padding: 30px 58px 20px
   }
 }

 @media only screen and (max-width:767px) {

   .better-devlopment-section,
   .pwa-rendering-section {
     box-shadow: 0 15px 30px rgba(66, 66, 66, 0.04)
   }

   .better-devlopment-section .col-xl-6:last-child {
     padding-top: 158px
   }

   .web-technology-logo {
     width: 80px;
     height: 80px;
     line-height: 80px;
     margin: 0 auto
   }

   .web-technology-logo::after {
     width: 105px;
     height: 105px;
     top: -12px;
     left: 0;
     margin: 0 auto
   }

   .web-technology-content {
     padding: 94px 20px 20px;
     margin-top: -102px
   }

   .web-technology-name {
     padding-top: 18px
   }

   .web-technology-content p {
     font-size: 14px
   }

   .hire-developer-btn {
     width: 100%;
     display: inline-block;
     text-align: center;
     padding: 10px 15px;
     border-radius: 10px;
     position: relative;
     bottom: -35px;
     color: var(--bs-white)
   }

   .web-technology-info:hover .hire-developer-btn {
     background: var(--bs-black)
   }
 }

 @media only screen and (min-width:768px) {
   .tp-payment-method__wrapper {
     padding-top: 250px;
     left: -60px
   }

   .tp-payment-method__main-img {
     width: 80px;
     height: 80px;
     right: -55px
   }

   .single-technology {
     width: 250px
   }

   .custom-technology-1 {
     left: -35%;
     transform: translate(-50%) rotate(-22deg)
   }

   .custom-technology-2 {
     left: -35%;
     transform: translate(-50%) rotate(-67deg)
   }

   .custom-technology-3 {
     left: -35%;
     transform: translate(-50%) rotate(-45deg)
   }

   .custom-technology-4 {
     left: -35%;
     transform: translate(-50%) rotate(-0deg)
   }

   .custom-technology-5 {
     left: -35%;
     transform: translate(-50%) rotate(23deg)
   }

   .custom-technology-6 {
     left: -35%;
     transform: translate(-50%) rotate(45deg)
   }

   .custom-technology-7 {
     left: -35%;
     transform: translate(-50%) rotate(67deg)
   }

   .custom-technology-8 {
     left: -35%;
     transform: translate(-50%) rotate(90deg)
   }

   .custom-technology-9 {
     left: -35%;
     transform: translate(-50%) rotate(113deg)
   }

   .custom-technology-10 {
     left: -30%;
     transform: translate(-50%) rotate(133deg);
     top: 49%
   }

   .custom-technology-11 {
     left: -35%;
     transform: translate(-50%) rotate(157deg)
   }

   .custom-technology-12 {
     left: -35%;
     transform: translate(-50%) rotate(180deg)
   }

   .custom-technology-13 {
     left: -35%;
     transform: translate(-50%) rotate(202deg)
   }

   .custom-technology-14 {
     left: -35%;
     transform: translate(-50%) rotate(224deg)
   }

   .custom-technology-15 {
     left: -35%;
     transform: translate(-50%) rotate(247deg)
   }

   .custom-technology-15 span {
     transform: translateY(-50%) rotate(-250deg)
   }

   .custom-technology-16 {
     left: -35%;
     transform: translate(-50%) rotate(270deg)
   }

   .single-technology img {
     width: 36px
   }

   .custom-technology-16 img,
   .custom-technology-11 img {
     width: 28px
   }

   .custom-technology-16 span {
     transform: translateY(-50%) rotate(-270deg)
   }

   .single-technology span {
     width: 70px;
     height: 70px
   }

   .single-technology p {
     font-size: 15px
   }

   .alter3-features .shape-ring-1 .animation {
     height: 320px;
     width: 320px;
     bottom: 0
   }

   .alter3-features .shape-ring-2 .animation {
     height: 250px;
     width: 250px;
     bottom: 38px
   }

   .pwa-rendering-section {
     box-shadow: 0 15px 30px rgba(66, 66, 66, 0.04)
   }

   .frontend-development::after,
   .backend-development::after {
     width: 29%
   }

   .better-devlopment-section .col-xl-6:last-child {
     padding-top: 158px
   }

   .web-technology-logo {
     width: 80px;
     height: 80px;
     line-height: 80px;
     margin: 0
   }

   .web-technology-logo::after {
     width: 105px;
     height: 105px;
     top: -12px;
     left: -12px;
     margin: 0
   }

   .web-technology-content {
     padding: 27px 20px 5px 60px;
     margin-top: -69px;
     margin-left: 35px
   }

   .web-technology-name p {
     margin: 0;
     padding: 7px 27px 6px 79px;
     border-radius: 0 15px 15px 0;
     color: var(--bs-white);
     position: relative;
     left: -42px;
     z-index: -1;
     top: -7px
   }

   .dotnet-technology .web-technology-name p {
     background: linear-gradient(108deg, #096ec7 0%, #0465BB 100%)
   }

   .php-technology .web-technology-name p {
     background: linear-gradient(108deg, #777bb3 0%, #3E4279 100%)
   }

   .python-technology .web-technology-name p {
     background: linear-gradient(108deg, #f9b400 0%, #e1ae14 100%)
   }

   .nodejs-technology .web-technology-name p {
     background: linear-gradient(108deg, #539e43 0%, #1B600D 100%)
   }

   .angular-technology .web-technology-name p {
     background: linear-gradient(108deg, #dd0330 0%, #A90825 100%)
   }

   .java-technology .web-technology-name p {
     background: linear-gradient(108deg, #2196cf 0%, #0778BD 100%)
   }

   .web-technology-content p {
     font-size: 14px
   }

   .hire-developer-btn {
     display: block;
     color: var(--bs-white);
     border-radius: 21px 0 0 0;
     position: absolute;
     transition: .5s all ease-in-out;
     font-size: 0;
     text-align: left
   }

   .web-technology-info:hover .hire-developer-btn {
     background: var(--bs-black);
     opacity: 1;
     height: auto;
     font-size: 18px
   }

   .hire-developer-btn {
     width: 200px;
     left: -91px;
     bottom: 77px
   }

   .swiper-slide-next .hire-developer-btn {
     opacity: 1;
     height: auto;
     font-size: 18px
   }

   .hire-developer-btn,
   .web-technology-info:hover .hire-developer-btn,
   .swiper-slide-next .hire-developer-btn {
     transform: rotateZ(270deg)
   }

   .web-technology-info:hover .hire-developer-btn,
   .swiper-slide-next .hire-developer-btn {
     width: 200px;
     padding: 10px 10px 10px 15px
   }
 }

 @media only screen and (max-width:991px) {
   .frontend-development.position-relative {
     padding-bottom: 50px
   }

   .service-section-title {
     padding-top: 15px
   }

   .frontend-development::before,
   .backend-development::before {
     top: 195px;
     left: 0;
     right: 0;
     margin: 0 auto
   }

   .frontend-development::after,
   .backend-development::after {
     width: 2px;
     height: 50px;
     top: 155px;
     left: 0;
     right: 0;
     margin: 0 auto
   }

   .frontend-development .dev-technology-img::after,
   .backend-development .dev-technology-img::after {
     left: 0;
     right: 0;
     top: 154px;
     margin: 0 auto
   }
 }

 @media only screen and (min-width:992px) {
   .tp-payment-method__wrapper {
     padding-top: 200px;
     left: -15px
   }

   .tp-payment-method__main-img {
     width: 100px;
     height: 100px;
     right: -6px
   }

   .single-technology img {
     width: auto
   }

   .custom-technology-1 {
     left: -166%;
     transform: translate(-50%) rotate(-9deg);
     width: 454px
   }

   .custom-technology-1 span,
   .custom-technology-2 span,
   .custom-technology-3 span,
   .custom-technology-4 span,
   .custom-technology-5 span,
   .custom-technology-6 span,
   .custom-technology-7 span,
   .custom-technology-8 span,
   .custom-technology-9 span,
   .custom-technology-10 span,
   .custom-technology-11 span,
   .custom-technology-12 span,
   .custom-technology-13 span,
   .custom-technology-14 span,
   .custom-technology-15 span,
   .custom-technology-16 span {
     width: 100px;
     height: 100px
   }

   .custom-technology-2 {
     left: -50%;
     transform: translate(-50%) rotate(-49deg);
     width: 219px
   }

   .custom-technology-2 img,
   .custom-technology-5 img {
     width: 52px
   }

   .custom-technology-3 {
     left: -138%;
     transform: translate(-50%) rotate(-25deg);
     width: 395px
   }

   .custom-technology-3 img {
     width: 48px
   }

   .custom-technology-4 {
     transform: translate(-50%) rotate(0deg);
     left: -100%;
     width: 314px
   }

   .custom-technology-4 img {
     width: 38px
   }

   .custom-technology-4 span,
   .custom-technology-7 span,
   .custom-technology-9 span,
   .custom-technology-13 span {
     width: 70px;
     height: 70px
   }

   .custom-technology-5 {
     transform: translate(-50%) rotate(15deg);
     width: 448px;
     left: -166%
   }

   .custom-technology-6 {
     transform: translate(-50%) rotate(35deg);
     left: -119%;
     width: 350px
   }

   .custom-technology-7 {
     left: -43%;
     transform: translate(-50%) rotate(54deg);
     width: 202px
   }

   .custom-technology-7 img {
     width: 55px
   }

   .custom-technology-8 {
     left: -41%;
     transform: translate(-50%) rotate(125deg);
     width: 203px
   }

   .custom-technology-9 {
     left: -130%;
     top: 50%;
     transform: translate(-50%) rotate(150deg);
     width: 380px
   }

   .custom-technology-9 img {
     max-width: 32px
   }

   .custom-technology-10 {
     left: -173%;
     top: 49%;
     transform: translate(-50%) rotate(159deg);
     width: 469px
   }

   .custom-technology-10 img {
     width: 40px
   }

   .custom-technology-10 span {
     width: 60px;
     height: 60px
   }

   .custom-technology-11 {
     left: -118%;
     transform: translate(-50%) rotate(169deg);
     width: 350px
   }

   .custom-technology-11 span {
     width: 80px;
     height: 80px
   }

   .custom-technology-12 {
     width: 434px;
     left: -158%;
     transform: translate(-50%) rotate(180deg)
   }

   .custom-technology-12 img {
     width: 53px
   }

   .custom-technology-13 {
     left: -97%;
     top: 52%;
     transform: translate(-50%) rotate(189deg);
     width: 327px
   }

   .custom-technology-13 img {
     width: 34px
   }

   .custom-technology-14 {
     width: 427px;
     left: -157%;
     transform: translate(-50%) rotate(198deg)
   }

   .custom-technology-15 {
     left: -126%;
     top: 50%;
     transform: translate(-50%) rotate(213deg);
     width: 370px
   }

   .custom-technology-15 span {
     transform: translateY(-50%) rotate(-211deg)
   }

   .custom-technology-16 {
     left: -26%;
     top: 50%;
     transform: translate(-50%) rotate(239deg);
     width: 170px
   }

   .custom-technology-16 span {
     transform: translateY(-50%) rotate(-238deg)
   }

   .single-technology p {
     font-size: 16px
   }

   .webdevelopment-breadcumb.breadcumb-section .container {
     top: -40px
   }

   .shape-one {
     top: 0;
     right: 12%
   }

   .shape-two {
     right: 22%;
     bottom: -94px
   }

   .technology-list {
     max-width: 86%
   }

   .portfolio-details img {
     position: absolute
   }

   .tp-image img {
     width: 70px
   }

   .alter3-features .shape-ring-1 .animation {
     height: 420px;
     width: 420px
   }

   .alter3-features .shape-ring-2 .animation {
     height: 335px;
     width: 335px
   }

   .dev_position-content {
     margin-top: 59px;
     width: 94%
   }

   .frontend-development::after,
   .backend-development::after {
     width: 26%
   }

   .frontend-development::before,
   .backend-development::before {
     top: 65px
   }

   .frontend-development::before {
     right: 30px
   }

   .backend-development::before {
     left: 23px
   }

   .frontend-development::after,
   .backend-development::after {
     top: 68px
   }

   .frontend-development::after {
     right: 30px
   }

   .backend-development::after {
     left: 30px
   }

   .frontend-development .dev-technology-img::after,
   .backend-development .dev-technology-img::after {
     top: 65px
   }

   .frontend-development .dev-technology-img::after {
     right: -20px
   }

   .backend-development .dev-technology-img::after {
     left: -20px
   }

   .shape-center::before,
   .shape-center::after {
     width: 155px;
     height: 64px;
     content: "";
     position: absolute;
     z-index: -1;
     top: 38px;
     border-radius: 49px;
     border: 2px solid #ff6f04
   }

   .shape-center img {
     position: absolute;
     right: -33px;
     top: 44px;
     width: 49px;
     box-shadow: 1px 4px 9px 5px rgba(232, 232, 232, 0.86);
     border-radius: 50%
   }

   .shape-center::before {
     right: -86px;
     transform: rotate(-45deg)
   }

   .shape-center::after {
     right: -87px;
     transform: rotate(45deg)
   }

   .better-devlopment-section .col-xl-6:last-child {
     padding-top: 0
   }

   .pwa-rendering-section {
     box-shadow: none
   }

   .pwa-rendering-section .col-xxl-6:first-child {
     order: 0
   }

   .pwa-rendering-section .col-xxl-6:last-child {
     order: 1
   }

   .pwa-content {
     width: 95%
   }

   .lounch-img {
     right: -12px
   }

   .web-technology-footer {
     height: 86px
   }

   .development-form-details {
     margin-top: 0
   }

   .shape-one {
     top: 0;
     right: 12%
   }

   .shape-two {
     right: 22%;
     bottom: -94px;
     top: auto
   }
 }

 @media only screen and (min-width:1200px) {
   .webdevelopment-breadcumb.breadcumb-section .container {
     top: -30px
   }

   .custom-technology-5 {
     width: 494px;
     left: -196%
   }

   .custom-technology-11 {
     left: -133%;
     width: 394px
   }

   .custom-technology-12 {
     width: 510px;
     left: -194%;
     transform: translate(-50%) rotate(180deg)
   }

   .tp-image img {
     width: 120px
   }

   .alter3-features .shape-ring-1 .animation {
     height: 480px;
     width: 480px
   }

   .alter3-features .shape-ring-2 .animation {
     height: 400px;
     width: 400px
   }

   .frontend-development::after,
   .backend-development::after {
     width: 29%
   }

   .web-technology-logo {
     width: 80px;
     height: 80px;
     line-height: 80px
   }

   .web-technology-logo::after {
     width: 105px;
     height: 105px;
     top: -12px;
     left: -12px
   }

   .web-technology-content {
     padding: 27px 20px 5px 60px;
     margin-top: -69px;
     margin-left: 35px
   }

   .hire-developer-btn {
     width: 200px
   }

   .web-technology-info:hover .hire-developer-btn,
   .swiper-slide-next .hire-developer-btn {
     width: 200px;
     padding: 10px 10px 10px 40px
   }
 }

 @media only screen and (min-width:1400px) {
   .custom-technology-1 {
     left: -246%;
     transform: translate(-50%) rotate(-12deg);
     width: 610px
   }

   .custom-technology-4 {
     left: -162%;
     width: 430px
   }

   .custom-technology-5 {
     left: -228%;
     width: 570px
   }

   .custom-technology-10 {
     left: -240%;
     top: 51%;
     transform: translate(-50%) rotate(158deg);
     width: 600px
   }

   .custom-technology-12 {
     width: 620px;
     left: -257%
   }

   .custom-technology-14 {
     width: 521px;
     left: -202%
   }

   .technology-list {
     max-width: 70%
   }

   .tp-image img {
     width: 150px
   }

   .frontend-development::after,
   .backend-development::after {
     width: 32%
   }

   .web-technology-logo {
     width: 95px;
     height: 95px;
     line-height: 100px
   }

   .web-technology-logo::after {
     width: 120px;
     height: 120px;
     top: -12px;
     left: -12px
   }

   .web-technology-content {
     padding: 38px 20px 5px 60px;
     margin-top: -87px;
     margin-left: 47px
   }

   .web-technology-content p {
     font-size: 17px
   }
 }

 @media only screen and (min-width:1600px) {

   .webdevelopment-banner-section .service-banner,
   .webdevelopment-banner-section .banner-content-wrapper {
     height: 696px
   }

   .webdevelopment-banner-section .service-banner {
     object-fit: unset
   }

   .webdevelopment-breadcumb.breadcumb-section .container {
     top: -60px
   }

   .lounch-img {
     right: 0
   }
 }

 @media only screen and (min-width:1400px) {
   .portfolio-tabs .tap-links {
     height: 357px
   }

   .pwa-content {
     width: 85%
   }
 }

 .service-banner-section.web-development-bg {
   background-image: url("../image/banners/web_development_banner.webp");
   background-size: cover;
   background-position: center bottom;
   overflow: hidden;
   height: 100%;
 }

 .banner-content-wrapper.h-100 {
   height: 100%;
 }

 .web-banner {
   margin-top: 140px;
 }

 .web-banner h1 {
   margin-bottom: 15px;
 }

 .web-banner p {
   line-height: 32px;
 }

 .web-banner .inquiry-form {
   max-width: 330px;
   margin: 20px auto;
   background-color: #0000009e;
   border: 2px solid #fff;
   padding: 10px 20px 20px;
   border-radius: 10px;
   margin-bottom: 100px;
 }

 .input-field {
   position: relative;
 }

 .input-field .input-style {
   background-color: #fff;
   border: 1px solid #ffffff;
   color: #000;
 }

 .web-btn-style {
   background: var(--bs-gradient-secondary);
   background-size: 200% auto;
   padding: 10px;
   border-radius: 9px;
   color: var(--bs-white);
   top: -2px;
   transition: 0.4s;
 }

 .web-btn-style:hover {
   background-position: right center;
   color: #fff;
 }