:root {
    --primary-color: #1487FC;

    --muted-color: #F0F4FA;

    --btn-primary-color: #1487FC;
    --btn-secondary-color: #53a9fe;
    
    --heading-color: #19223F;
    --body-text: #2E2E2E;
}

/* utils */
body {
    color: var(--body-text);
}
.heading .highlight {
    color: var(--white-color);
    position: relative;
    display: inline-block;
}

.heading .highlight::after {
    content: '';
    width: 105%;
    height: 135%;
    display: block;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--primary-color);
}

.text-lg {
    font-size: clamp(1rem, 0.8808rem + 0.5961vw, 1.25rem);
}

.text-xxl {
    font-size: clamp(2.125rem, 0.277rem + 9.2399vw, 5.7rem);
}
.tag-popover {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 5px;
    align-items: center;
    font-size: 14px;
    color: var(--white-color);
    background-color: var(--primary-color);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    max-width: 190px;
    position: absolute;
    top: 5%;
    left: -40%;
}
.tag-popover.right {
    left: unset;
    right: -30%;
}
.pb-40 {
    padding-bottom: 40px;
}
.heading span {
    color: var(--primary-color);
}
.alt-btn:hover {
    color: var(--black-color);
    background-color: #FFFFFFe0;
}
/* utils ends */


.uber-hero {
    background: linear-gradient(256deg, rgba(32, 136, 255, 0.00) 54.67%, rgba(32, 136, 255, 0.20) 75.82%, rgba(103, 82, 236, 0.20) 93.16%);
}

.tel-input-group {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: var(--white-color);
    max-width: 485px;
    flex-wrap: wrap;
    border: 1px solid rgba(0, 0, 0, 0.10);
}

.tel-input-group .tel-input {
    flex: 1 0 auto;
}

.button.tel-submit {
    padding: 15px 14px;
    gap: 7px;
    flex: 1 0 auto;
}

.tel-control {
    padding: 0;
    border: 0;
}
.tel-control{
    outline: none !important;
    box-shadow: none !important;
}

.tel-control:focus {
    box-shadow: none;
}

.tel-control,
.country-code {
    font-size: clamp(1rem, 0.8808rem + 0.5961vw, 1.25rem);
}

.hero-gal-grid {
    display: grid;
    gap: clamp(0.9375rem, 0.6394rem + 1.4903vw, 1.5625rem);
    grid-template-areas: 
    ". UD"
    "UT UE";
    grid-template-columns: 1fr 1fr;
}
.uber-hero-img:nth-child(1) {
    grid-area: UD;
}
.uber-hero-img:nth-child(2) {
    grid-area: UT;
}
.uber-hero-img:nth-child(3) {
    grid-area: UE;
}

.uber-hero-img {
    position: relative;
}

.uber-hero-img > img {
    border-radius: 10px;
    width: 100%;
    height: auto;
}

.uber-hero-img .uber-img-name {
    position: relative;
    z-index: 1;
    color: var(--black-color);
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    background-color: var(--white-color);
    width: 80%;
    margin-inline: auto;
    margin-top: -20px;
    text-align: center;
    padding: 10px;
    font-size: clamp(0.875rem, 0.7558rem + 0.5961vw, 1.125rem);
}

.exp-count .col-6 {
    border-right: 1px solid var(--white-color);
}

/* .recent-work {
    padding-bottom: 150px;
} */
.recent-grid {
    display: grid;
    grid-template-areas: 
    "blk1 blk1 blk2"
    "blk3 blk4 blk4"
    "blk3 blk5 blk6";
    gap: 25px;
}

.recent-grid-item {
    padding-inline: 35px;
    background-color: #F0F4FA;
    border-radius: 10px;
}

.recent-grid-item:nth-child(1) {
    grid-area: blk1;    
}
.recent-grid-item:nth-child(2) {
    grid-area: blk2;    
}
.recent-grid-item:nth-child(3) {
    grid-area: blk3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.recent-grid-item:nth-child(3) img {
    width: 100%;
}
.recent-grid-item:nth-child(4) {
    grid-area: blk4;    
}
.recent-grid-item:nth-child(5) {
    grid-area: blk5;    
}
.recent-grid-item:nth-child(6) {
    grid-area: blk6;    
}

.recent-grid-row {
    display: flex;
    align-items: center;
    height: 100%;
    /* gap: 20px 0; */
}
.py-35 {
    padding-block: 35px;
}
.recent-right {
    flex: 1 0 auto;
}
.phone-image {
    padding-top: 35px;
    height: 100%;
    display: flex;
    align-items: end;
    /* margin-bottom: -35px; */
}
.phone-image img {
    object-position: bottom;
}

.feature-card-blk {
    border-radius: 10px;
    padding: 30px;
    height: 100%;
    background-color: var(--white-color);
}
.feature-card-blk img {
    height: 70px;
}

.why-card-blk {
    padding: 40px 20px;
    border-radius: 10px;
    border: 1px solid #E1E1E1;
    transition: all .3s ease;
    height: 100%;
}
.why-icon-wrap {
    height: 45px;
    width: 45px;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    transition: all .3s ease;
}
.why-opt .row .why-card-blk h3,
.why-icon-wrap path {
    transition: all .3s ease;
}

.why-opt .row .why-card-blk:hover {
    color: var(--white-color);
    background-color: var(--primary-color);
}
.why-opt .row .why-card-blk:hover h3 {
    color: var(--white-color);
}
.why-opt .row .why-card-blk:hover .why-icon-wrap {
    background-color: var(--white-color) !important;
}
.why-opt .row .why-card-blk:hover .why-icon-wrap path {
    fill: var(--primary-color);
}

.ready-cta {
    background: linear-gradient(270deg, #1487FC 2.53%, #005CB9 100%);
    position: relative;
}

.ready-cta .row .col-lg-5:nth-child(2) {
    position: relative;
}
.cta-img-blk {
    position: absolute;
    bottom: 0;
    right: 0;
}
.cta-img-blk img {
    position: relative;
    z-index: 3;
    max-height: 570px
}
.cta-img-blk::before {
    content: url(../images/uber-img/cta-extra-1.png);
    position: absolute;
    bottom: 30px;
    right: 80%;
    z-index: 1;
}
.cta-img-blk::after {
    content: '';
    background-image: url(../images/uber-img/cta-glow.png);
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: -40%;
    background-size: contain;
    background-position: center;
}

.key-list {
    padding-left: 1rem;
    column-count: 2;
}
.key-list li::marker {
    color: #19223F;
}

.hire-cta {
    padding: 0px 44px;
    border-radius: 20px;
}

.ind-row {
    display: grid;
    gap: 60px 25px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-top: 39px;
}
.ind-icon {
    height: 78px;
    width: 78px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--white-color);
    border: 3px solid var(--primary-color);
    position: absolute;
    top: -39px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    transition: all .3s ease;
}
.ind-card {
    --image: url(../images/uber-img/indus-img-1.png);
    position: relative;
    padding: 20px;
    padding-top: 62px;
    border-radius: 22px;
    text-align: center;
    box-shadow: 2px 10px 10px 0px rgba(93, 93, 93, 0.25);
    background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1)), var(--image);
    background-size: cover !important;
    height: 100%;
    min-height: 240px;
    transition: all .3s ease;
}

.ind-card::after {
    content: '';
    background-color: var(--white-color);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 22px;
    transition: all .3s ease;
}

.ind-card:hover::after {
    background-color: transparent;
}
.ind-card:hover {
    background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)), var(--image);
}

.ind-card:hover :is(h4, p) {
    color: var(--white-color);
}
.ind-card .button {
    opacity: 0;
}
.ind-card:hover .button {
    opacity: 1;
}

.ind-card .ind-content {
    position: relative;
    z-index: 3;
}

/* .ind-card:hover {
    padding-inline: 30px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), var(--image);
    background-size: cover;
    background-position: center;
}
.ind-card:hover :is(h3, p) {
    color: var(--white-color);
}
.ind-card:hover .ind-icon{
    left: 30px;
    transform: unset;
} */

.ind-card.indus-1 {
    --image: url(../images/uber-img/indus-img-1.png);
}
.ind-card.indus-2 {
    --image: url(../images/uber-img/indus-img-2.png);
}
.ind-card.indus-3 {
    --image: url(../images/uber-img/indus-img-3.png);
}
.ind-card.indus-4 {
    --image: url(../images/uber-img/indus-img-4.png);
}
.ind-card.indus-5 {
    --image: url(../images/uber-img/indus-img-5.png);
}
.ind-card.indus-6 {
    --image: url(../images/uber-img/indus-img-6.png);
}
.ind-card.indus-7 {
    --image: url(../images/uber-img/indus-img-7.png);
}
.ind-card.indus-8 {
    --image: url(../images/uber-img/indus-img-8.png);
}
.ind-card.indus-9 {
    --image: url(../images/uber-img/indus-img-9.png);
}

.get-clone-body {
    border-radius: 30px;
    overflow: hidden;
    background-color: #F9F7F8;
}

.get-clone-card {
    padding: 40px 20px;
    text-align: center;
    height: 100%;
}

.border-b {
    border-bottom: 1px solid rgba(44, 85, 48, 0.15);
}
.border-x::before,
.border-x::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background-color: rgba(44, 85, 48, 0.15);
}
.border-x::before {
    left: 0;
}
.border-x::after {
    right: 0;
}

.loc-cta {
    border-radius: 20px;
}

.device-slider .owl-item .device-image {
    scale: .85;
    transition: all .3s ease;
}
.device-slider .owl-item.center .device-image {
    scale: 1;
}
.button-app {
    border-radius: 50px;
    color: var(--white-color);
    background-color: var(--black-color);
}
.button-app:hover {
    color: var(--white-color);
    background-color: #121212;
}

.our-process .img-card {
    position: absolute;
    max-width: 250px;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid #EAEAEA;
    background-color: var(--white-color);
    box-shadow: 2px 20px 40px 0px rgba(93, 93, 93, 0.25);
    bottom: -12px;
    left: 12px;
}
.our-process .img-card + img {
    padding-left: 40px;
}

.list-img-wrap {
    position: relative;
    width: 87px;
}
.list-img-wrap .list-count {
    height: 32px;
    width: 32px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    margin-bottom: -16px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    background-color: var(--white-color);
    position: relative;
    border-radius: 50%;
}
.list-img-wrap .list-img {
    height: 87px;
    width: 87px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.process-list li {
    display: flex;
    align-items: center;
    gap: 15px 25px;
    margin-bottom: 25px;
}

.process-list li:not(:last-child) .list-img-wrap::after {
    content: '';
    height: 100%;
    width: 1px;
    border-left: 1px dashed var(--primary-color);
    position: absolute;
    top: 90%;
    left: 50%;
    z-index: -1;  
}

.tech-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px 50px;
}
.tech-img {
    height: 120px;
    width: 120px;
    aspect-ratio: 1/1;
    padding: 20px;
    border-radius: 10px;
    background-color: #F1F5F9;
    display: grid;
    place-items: center;
    margin: auto;
}

.tech-img img {
    height: 50px;
    object-fit: contain;
}

.testimonial-img {
    position: relative;
}
.testimonial-img .video-control {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.testi-slide .user-name {
    display: inline-block;
    padding-bottom: 20px;
    border-bottom: 2px solid #121212;
    margin-bottom: 20px;
}

.swiper-control {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.testi-btn.swiper-button-disabled {
    opacity: .5;
    pointer-events: none;
}
.testi-pagination {
    width: 100px;
}
.testi-pagination .swiper-pagination-current {
    font-size: 40px;
    color: #121212;
}

.testimonail-slider {
    position: relative !important;
    padding: 30px 0 30px 25px !important;
    border-left: 10px solid var(--primary-color);
    border-bottom: 10px solid var(--primary-color);
}
.testimonail-slider::before {
    content: '';
    border-top: 10px solid var(--primary-color);
    width: 30%;
    position: absolute;
    top: 0;
    left: 0;
}

.resource-section .container>.row {
    background: var(--primary-color) !important;
}

#cloneModal .modal-content {
    border: 0;
    border-radius: 35px;
    overflow: hidden;
}
#cloneModal .modal-content .modal-body {
    position: relative;
    padding: 0;
    background: linear-gradient(180deg, #F4F3F1 0%, #F2F2F0 20.11%, #FAFBFD 51.7%, #FCFCFE 100%);
}
#cloneModal .modal-content .modal-body .close-popup {
    position: absolute;
    top: 30px;
    right: 30px;
}
.clone-popup-image {
    display: flex;
    background: url(../images/uber-img/clone-img.png);
    background-size: cover;
    background-position: center;
    width: 40%;
    justify-content: center;
    padding: 5px 30px;
    gap: 10px;
}
.clone-popup-body {
    display: flex;
    align-items: center;
}
.clone-popup-content {
    width: 60%;
    padding: 50px 25px;
}
.clone-popup-content a {
    width: 100%;
    max-width: 70%;
}

.clone-popup-content strong{
    font-size: 24px;
}

.clone-img-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.clone-img-wrap.clone-img-left {
    margin-bottom: 60px;
}
.clone-img-wrap.clone-img-right {
    margin-top: 60px;
}
.clone-img-wrap img {
    border: 2px solid var(--white-color);
    border-radius: 20px;
}

.faq-blocks .accordion-flush .accordion-item .accordion-header {
    border: 0 !important;
}
.faq-blocks .accordion-flush .accordion-item:last-child .accordion-header {
    border-bottom: 0 !important;
}
.faq-blocks .accordion-button:not(.collapsed) {
    box-shadow: none;
}
.faq-blocks .accordion-flush .accordion-collapse {
    border-top: 0;
}
.faq-blocks .accordion-item {
    border: 2px solid var(--white-color);
    border-radius: 18px;
    box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
    overflow: hidden;
    margin-bottom: 25px !important;
    transition: all .3s ease;
}
.faq-blocks button.accordion-button {
    padding: 30px clamp(0.9375rem, -0.4038rem + 6.7064vw, 3.75rem);
}
.faq-blocks .accordion-body {
    padding: 0 clamp(0.9375rem, -0.4038rem + 6.7064vw, 3.75rem) 30px;
}

.faq-blocks .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 19' fill='none'%3E%3Cpath d='M1.854 17.7578L9 9.50122L1.854 1.24463' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    width: 50px;
    height: 50px;
    background-position: center;
    transform: scale(1) !important;
    border-radius: 50%;
}
.faq-blocks .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 19' fill='none'%3E%3Cpath d='M1.854 17.7578L9 9.50122L1.854 1.24463' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transform: rotate(90deg) !important;
    background-color: var(--primary-color);
}
.accordion-item:has(.accordion-button:not(.collapsed)) {
    border: 2px solid var(--primary-color);
}

.tel-input .iti--separate-dial-code .iti__selected-flag {
    background-color: var(--white-color) !important;
    padding: 0;
}
.tel-input .iti--separate-dial-code .form-control .tel-control {
    padding-left: 77px !important;
}
.tel-input .iti__selected-dial-code {
    font-size: clamp(1rem, 0.8808rem + 0.5961vw, 1.25rem);
}
.form-control.is-valid, .was-validated .form-control:valid,
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none;
}
@media (max-width: 1300px) {
    .tag-popover.right {
        right: 40px;
    }
}
@media (max-width: 991px) {
    .recent-grid {
        grid-template-areas: 
        "blk1 blk1 blk1"
        "blk2 blk5 blk6"
        "blk3 blk3 blk3"
        "blk4 blk4 blk4";
    }
    .recent-grid-item:nth-child(3) {
        flex-direction: row;
        align-items: center;
    }
    .recent-grid-item:nth-child(3) img {
        width: 28% !important;
    }
    .border-x::before,
    .border-x::after {
        content: unset;
    }
    .get-clone-card {
        border-bottom: 1px solid rgba(44, 85, 48, 0.15);
    }
}
@media (max-width: 767px) {
    .py-35 {
        padding: 0;
    }
    /* .recent-work {
        padding-bottom: 40px;
    }    */
    .recent-grid {
        grid-template-areas: 
        "blk1 blk2"
        "blk3 blk4"
        "blk5 blk6";
    }
    .recent-grid-item {
        padding: 20px 25px;
    }
    .recent-grid-item p {
        font-size: 14px;
    }
    .recent-grid-item:nth-child(3) img,
    .recent-grid-item .recent-grid-row > :is(.phone-image, img) {
        display: none;   
    }
    .exp-count .col-6:nth-child(2) {
        border-right: 0;
    }   

    .ind-card {
        flex: 0 0 calc(50% - (25px / 2));
    }
    .clone-popup-body {
        flex-direction: column;
    }
    .clone-popup-image,
    .clone-popup-content {
        width: 100%;
    }
    .clone-popup-image {
        flex-direction: column;
    }
    .clone-popup-content {
        padding: 20px;
    }
    .clone-img-wrap {
        flex-direction: row;
        justify-content: center;
    }
    .clone-img-wrap.clone-img-wrap.clone-img-left {
        margin-bottom: 0;
        margin-right: 20px;
    }
    .clone-img-wrap.clone-img-wrap.clone-img-right {
        margin-top: 0;
        margin-left: 20px;
    }
    #cloneModal .modal-content .modal-body .close-popup {
        top: 10px;
        right: 10px;
        height: 40px;
        width: 40px;
        background: var(--white-color);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
}

@media (max-width: 575px) {
    .recent-grid {
        grid-template-areas: 
        "blk1"
        "blk2"
        "blk3"
        "blk4"
        "blk5"
        "blk6";
    }
    .ind-card {
        min-height: unset;
        flex: 0 0 100%;
    }
    /* .ind-card.special-info {
        min-height: 280px;
    } */
    .key-list {
        column-count: 1;
    }
    .clone-img-wrap img {
        border-radius: 10px;
        height: 60px;
    }
    .button.tel-submit {
        padding: 12px 10px;
        font-size: 14px;
    }
    .button.tel-submit svg {
        display: none;
    }
}
@media (max-width: 480px) {
    .testimonail-slider {
        padding: 20px 0 20px 10px !important;
    }
}

.video-promo .video-wrap {
    aspect-ratio: 16/9;
    width: 100% !important;
    border-radius: 10px;
}
p.clone-sub {
    font-size: 25px;
    font-weight: 500;
}
.uber-cln-hed{
   font-size: 29px;
}
@media only screen and (min-width: 992px) {
   .tech-stack {
   padding-bottom: 200px;
}
}