/* @import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css"); */

@font-face {
    font-family: sens;
    src: url(../fonts/Sansation_Regular.ttf);
    font-display: fallback;
}

@font-face {
    font-family: gilroy;
    src: url(../fonts/Gilroy-Light.otf);
    font-display: fallback;
}

/* Preloader */
.preloaderBg {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    background: black;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-wrap {
    position: relative;
    width: 250px;
    height: 250px;
}

.preloader-logo {
    margin: auto;
    background: url(../images/favicon&Loader.webp) no-repeat center;
    background-size: 150px;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 25px;
    left: 25px;
}


.preloader-circle {
    /*border: 5px solid #f3f3f3; GG*/
    border: 5px solid #989898;
    /*border-top: 5px solid #c18263; GG*/
    border-top: 5px solid black;
    border-radius: 50%;
    width: 250px;
    height: 250px;
    animation: spin 1.5s ease-in-out infinite;
    position: absolute;
    top: 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

html {
    overflow-x: hidden;
}

body {
    font-family: gilroy;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: sens;
}

* {
    padding: 0;
    margin: O;
    box-sizing: border-box;
}

h1 {
    font-size: 50px;
}

@media all and (max-width:767px) {
    h1 {
        font-size: 38px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 20px;
    }
}

h2 {
    font-size: 40px;
    margin-bottom: 0;
}

h3 {
    font-size: 25px;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}

/*error-pop-up starts*/
.error-popup2 {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
}

.popup-wrap2 {
    background: black !important;
    border-radius: 5px;
    /*   box-shadow: 0 0 5px 5px rgba(0,0,0,0.2); */
    padding: 5px 10px;
    max-width: 500px;
    margin: auto;
}

.hide-popup2 {
    text-align: right;
    cursor: pointer;
    font-weight: bold;
}

.popup-text2 {
    padding: 10px 30px 30px;
    text-align: center;
    color: white;
}

/*error-pop-up ENDS*/
.underline-bleft {
    width: 71px;
    height: 2px;
    background: black;
    margin-bottom: 15px;
}

.midline-black {
    width: 71px;
    height: 2px;
    margin: auto;
    background: black;
    margin-bottom: 10px;
}

.midline-white {
    width: 71px;
    height: 2px;
    margin: auto;
    background: white;
    margin-bottom: 10px;
}

.underline-wleft {
    width: 71px;
    height: 3px;
    background: white;
    margin-bottom: 15px;
}

section {
    padding: 15px 15px;
}

.wrap {
    height: 100%;
    max-width: 1300px;
    margin: auto;
}

button {
    padding: 10px 45px;
    border-radius: 25px;
    border: none;
}

.blck-btn {
    color: black;
    background: inherit;
    border: 2px solid black;
}

.whit-btn {
    color: white;
    background: inherit;
    border: 2px solid white;
}

.wrap .row {
    height: 100%;
}

.navbar a.nav-link {
    color: white;
}


.full-nav .navbar-toggler:focus,
.full-nav .navbar-toggler:active {
    outline: 0;
    border: none;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.full-nav.is-sticky {
    background:rgba(0, 0, 0, 0.5);
    position: fixed;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
    padding: 8px 0;
    backdrop-filter: blur(4px);
    animation: slideDown 0.35s ease-out;
    /* box-shadow: 0 5px 12px #13AB80; */
    z-index: 100;
    width: 100%;
    left: 0;
    top: 0;
}

.privacy-header .full-nav {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

@media all and (max-width:991px) {
    .full-nav a.nav-link::before {
        display: none;
    }

    .full-nav .nav-link {
        width: fit-content;
        margin: auto;
    }

    .full-nav li:last-child>a.nav-link {
        padding: 8px 20px;
    }


}

.full-nav .navbar-toggler {
    height: 45px;
    border: none;
    box-shadow: none;
}

.full-nav .navbar-toggler span {
    display: block;
    background-color: white;
    height: 2px;
    width: 25px;
    margin-top: 6px;
    margin-bottom: 4px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    position: relative;
    opacity: 1;
}

.full-nav .navbar-toggler span:nth-child(1),
.full-nav .navbar-toggler span:nth-child(3) {
    -webkit-transition: transform 0.35s ease-in-out;
    -moz-transition: transform 0.35s ease-in-out;
    -o-transition: transform 0.35s ease-in-out;
    transition: transform 0.35s ease-in-out;
}

.full-nav .navbar-toggler[aria-expanded="true"] span:nth-child(1) {
    position: absolute;
    top: 32px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.full-nav .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
    visibility: hidden;
    background-color: transparent;
}

.full-nav .navbar-toggler[aria-expanded="true"] span:nth-child(3) {
    position: absolute;
    top: 32px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}

/* .full-nav .navbar-toggler:focus,
.full-nav .navbar-toggler:active {
    outline: 0;
}

.full-nav .navbar-toggler {
    height: 45px;
}

.full-nav .navbar-toggler span {
    display: block;
    background-color: white;
    height: 2px;
    width: 25px;
    margin-top: 6px;
    margin-bottom: 4px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    position: relative;
    opacity: 1;
}

.full-nav .navbar-toggler span:nth-child(1),
.full-nav .navbar-toggler span:nth-child(3) {
    -webkit-transition: transform 0.35s ease-in-out;
    -moz-transition: transform 0.35s ease-in-out;
    -o-transition: transform 0.35s ease-in-out;
    transition: transform 0.35s ease-in-out;
}

.full-nav .navbar-toggler:not(.collapsed) span:nth-child(1) {
    position: absolute;
    top: 32px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.full-nav .navbar-toggler.open span:nth-child(2) {
    visibility: hidden;
    background-color: transparent;
}

.full-nav .navbar-toggler.open span:nth-child(3) {
    position: absolute;
    top: 32px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
} */


@media all and (min-width:992px) {
    .navbar a.nav-link {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .navbar-nav li.dropdown:hover>.dropdown-menu {
        perspective: 1000px;
        display: block;
    }

    .navbar .dropdown-menu {
        background-color: inherit;
        border: none;
        top: 27px;
        left: 16px;
    }

    .navbar .dropdown-toggle::after {
        display: none;
    }
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotateX(-90deg), translateX(-50px);
    }

    50% {
        transform: rotateX(20deg), translateX(-25px);
    }

    100% {
        opacity: 1;
        transform: rotateX(0deg), translateX(0px);
    }

}

.navbar .dropdown-menu {
    background-color: inherit;
    border: none;
}

.navbar .dropdown-menu li {
    background-color: white;
    opacity: 0;
    color: black;
}

/* .navbar .dropdown-menu a:hover {
    color: white;
    background-color: inherit;
} */


.navbar-nav li.dropdown:hover>.dropdown-menu li {
    display: block;
}

.navbar .dropdown-item {
    transition: all .1.5s ease-in;
}

.navbar .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.85);
}

@media all and (max-width:991px) {
    .navbar .dropdown-menu li {
        background-color: inherit;
        color: white;
    }

    .navbar a.dropdown-item {
        color: white;
        text-align: center;
    }
}

/* .navbar-nav li.dropdown:hover>.dropdown-menu {
    perspective: 1000px;
    display: block;
} */

.navbar-nav li.dropdown:hover>.dropdown-menu li {
    transform-origin: center;
    opacity: 0;
}

.navbar-nav li.dropdown:hover>.dropdown-menu li :first-child {
    animation: animate 300ms ease-in-out forwards;
    animation-delay: -150ms;
}

.navbar-nav li.dropdown:hover>.dropdown-menu li:nth-child(1) {
    animation: animate 300ms ease-in-out forwards;
    animation-delay: -150ms;
}

.navbar-nav li.dropdown:hover>.dropdown-menu li:nth-child(2) {
    animation: animate 300ms ease-in-out forwards;
    animation-delay: 0ms;
}

.navbar-nav li.dropdown:hover>.dropdown-menu li:nth-child(3) {
    animation: animate 300ms ease-in-out forwards;
    animation-delay: 150ms;
}

.navbar-nav li.dropdown:hover>.dropdown-menu li:nth-child(4) {
    animation: animate 300ms ease-in-out forwards;
    animation-delay: 300ms;
}

.navbar-nav li.dropdown:hover>.dropdown-menu li:nth-child(5) {
    animation: animate 300ms ease-in-out forwards;
    animation-delay: 450ms;
}

.navbar-nav li:hover>.dropdown-menu li:nth-child(6) {
    animation: animate 300ms ease-in-out forwards;
    animation-delay: 600ms;
}

.navbar-nav li:hover>.dropdown-menu li:last-child {
    animation: animate 300ms ease-in-out forwards;
    animation-delay: 600ms;
}

.navbar a.nav-link {
    position: relative;
}

.navbar-nav a.nav-link:before {
    position: absolute;
    content: "";
    bottom: 6px;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width .3s ease-in;
}



.navbar li.nav-item:first-child:hover a.nav-link:before {
    width: 60%;
}

.navbar li.nav-item:nth-child(2):hover a.nav-link:before {
    width: 65%;
}

.navbar li.nav-item:nth-child(3):hover a.nav-link:before {
    width: 74%;
}

.navbar li.nav-item:nth-child(4):hover a.nav-link:before {
    width: 68%;
}

.navbar li.nav-item:nth-child(5):hover a.nav-link:before {
    width: 78%;
}

.navbar li.nav-item:nth-child(6):hover a.nav-link:before {
    width: 78%;
}

.navbar li.nav-item:last-child>a {
    border-radius: 25px;
    background-color: white;
    color: black !important;
}

/* .navbar .nav-item.dropdown:hover .dropdown-menu {
    display: block;
} */

.navbar .navbar-brand img {
    width: 170px;
}

.social-header span {
    color: white;
}

.index-header {
    background: url(../images/Home-page-bg.webp);
    background-size: cover;
    height: 100vh;
    padding: 10px 15px;
    color: white;
}

/* carousel embed  */
.index-car {
    height: 88%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media all and (max-width:991px) {
    .index-car {
        height: auto;
    }
}

.mn-carousel {
    overflow-x: hidden;
}

.index-car .owl-stage-outer,
.index-car .owl-stage,
.index-car .owl-item {
    height: 100%;
}

.index-car .owl-item {
    display: flex;
    align-items: center;
}

.index-car .main-carousel {
    height: 100%;
}

.index-car .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-car .main-carousel .owl-dots {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 15px;
}

@keyframes headcar {
    0% {
        opacity: 0;
        transform: translateY(-300px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.main-carousel #car-heading {
    opacity: 0;
}

.main-carousel .heading {
    padding-bottom: 50px;
    width: 80%;
    margin: auto;
}

.main-carousel .vendor-info {
    width: 100%;
}

.carousel-btn a {
    display: block;
    width: fit-content;
}

.carousel-btn div {
    color: black !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 10px 45px;
    border-radius: 25px;
    text-transform: uppercase;
    white-space: nowrap;
    width: 280px;
    border: 3px solid white;
    background-image: -webkit-linear-gradient(30deg, white 53%, transparent 50%);
    background-image: linear-gradient(30deg, white 53%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}


.carousel-btn div:hover {
    background-position: 115%;
    color: white !important;

}

/* .main-carousel .carousel-btn a{
    display: block;
    width:100px;
    
    margin: auto;
    border-top:3px solid white;
    border-bottom: 3px solid white;
  } */
.main-carousel .heading h1 {
    color: white;
    margin-bottom: 0;
    text-align: center;
    font-size: 25px;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
}

.main-carousel .para {
    width: 80%;
    margin: auto;
    padding-bottom: 25px;
}

.main-carousel .para p {
    text-align: center;
    color: white;
    font-size: 17px;
    letter-spacing: 1px;
    margin: auto;
    font-family: regular;
    font-weight: 600;
    text-transform: capitalize;
}

.main-carousel .owl-dot {
    outline: none !important;
    /* clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); */
    height: 13px;
    width: 13px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .5) !important;
    margin: 0 6px;
}

.main-carousel .owl-dot.active {
    background-color: white !important;
}




/* car ended   */
.index-header .logo-div {
    max-width: 231px;
    height: 145px;
}

.header {
    height: 100vh;
    overflow-y: hidden;
}

@media all and (max-width:991px) {
    .header {
        height: auto;
    }
}

@media all and (min-width:992px) {
    .header .header-content {
        max-width: 80%;
        margin: auto;
    }
}

.header .wrap {
    max-width: 1300px;
    margin: auto;
    height: 100%;
}

.header .row {
    height: 100%;
}

.header .heading-h1 {
    padding: 6px 0;
}

.header .header-line {
    border-top: 3px solid white;
    width: 20%;
    margin-bottom: 12px;
}

.header form .form-group {
    position: relative;
    padding: 12px 0;
}

.header form input.form-control {
    background: inherit;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    color: white;
    transition: border .3s ease;
    border-radius: 0;
}

.header form input.form-control:focus {
    box-shadow: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
}

.border-d {
    border-bottom: 2px solid rgba(255, 255, 255, 0.7) !important;
}

/* .header form .input-line{
    border-top:2px solid rgba(255 ,255,255,0.4);
} */
@media all and (min-width:991px) {
    .header .para-wrap {
        width: 68%;

    }
}

.about-index {
    background-image: url(../images/about-us-bg.webp);
    background-size: cover;
    background-position: center;
    height: 100vh;
}

@media all and (max-width:991px) {
    .index-header {
        height: auto;
    }

    .about-index {
        background-image: none;
        height: auto;
        padding: 0;
    }

    .about-index .content {
        padding: 10px 15px;
    }

    .about-index .main-heading {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        min-height: 280px;
        background-image: url(../images/about-us-bg.webp);
        background-size: cover;
        padding-right: 20px;
    }
}

@media all and (max-width:497px) {
    .about-index .main-heading {
        /* background-position: right; */
        min-height: 230px;
    }
}

@media all and (max-width:416px) {
    .about-index .main-heading {
        /* background-position: right; */
        min-height: 180px;
    }
}

@media all and (max-width:366px) {
    .about-index .main-heading {
        /* background-position: right; */
        min-height: 150px;
        padding-right: 10px;
    }
}

@media all and (max-width:366px) {
    .about-index .who-we h3 {
        font-size: 22px;
    }

    .about-index .about-heading h2 {
        font-size: 32px;
    }
}

@media all and (max-width:288px) {
    .about-index .who-we h3 {
        font-size: 20px;
    }

    .about-index .about-heading h2 {
        font-size: 30px;
    }
}

.services-index {
    background-image: url(../images/services-bg.webp);
    background-size: cover;
    color: white;
}

.services-index .grid {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    max-width: 800px;
    margin: auto;
}

@media all and (max-width:700px) {
    .services-index .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width:447px) {
    .services-index .grid {
        grid-template-columns: 1fr;
    }
}

.services-index .img-services {
    padding: 10px 0;
}

.services-index .heading-services h3 {
    font-size: 16px;
}

.services-index .img-services img {
    height: 30px;
    width: auto;
}

.services-index .service-para {
    height: 93px;
    overflow-y: hidden;
}

.services-index .service-para p {
    margin-bottom: 0;
    font-size: 12px;
}

.services-index .service-link a {
    color: white
}

/* services boxes */
.services-box {
    padding: 1rem;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.15);
}

.middle-underline {
    border-top: 3px solid white;
    width: 80px;
    margin: 0px auto 20px auto;
}

.middle-bunderline {
    border-top: 3px solid black;
    width: 80px;
    margin: 0px auto 20px auto;
}

.start-today {
    padding: 0;
    /* background-image: url(../images/what-are-you-waiting-bg.webp);
    background-size: cover; */
    /* height: 60vh;
    overflow: hidden; */
}

@media all and (max-width:991px) {
    .start-today {
        height: auto;
    }

    .start-today .img-div {
        display: none;
    }

    .start-today .main-heading {
        display: flex;
        padding: 0 3px;
        align-items: center;
        min-height: 290px;
        background-image: url(../images/what-are-you-waiting-bg.webp);
        background-size: cover;
    }

    .start-today .heading-h2 {
        width: 40%;
    }

    .start-today .content {
        padding: 10px 15px;
    }
}

@media all and (max-width:600px) {
    .start-today .main-heading {
        background-position: center;
        min-height: 200px;
    }
}

@media all and (max-width:500px) {
    .start-today h2 {
        font-size: 25px;
    }
}

@media all and (max-width:340px) {
    .start-today .heading-h2 {
        width: 36%;
    }

    .start-today h2 {
        font-size: 20px !important;
    }
}

@media all and (max-width:354px) {
    .start-today h2 {
        font-size: 23px;
    }

    .start-today .main-heading {
        background-position: center;
        min-height: 157px;
    }
}

.start-today .img-div {
    background-image: url(../images/what-are-you-waiting-img.webp);
    background-size: cover;
    height: 100%;
    min-height: 300px;
    width: 100%;
    margin-left: 215px;

}

.portfolio-index {
    background-image: url(../images/Portfolio-bg.webp);
    background-size: cover;
    color: white;
}

.portfolio-index .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    color: white;

}

.portfolio-index .grid .img-div {
    margin-bottom: 7px;
}

/* @media all and (max-width:991px) {
    .portfolio-index .grid {
        column-gap: 10px;


    }
} */

.portfolio-index .grid .img-div.first-div {}

.our-skills {
    background: url(../images/Our-Skills-bg.webp);
    background-size: cover;
    background-position: center;
    height: 75vh;
}

@media all and (max-width:991px) {
    .our-skills {
        height: auto;
        background: none;
        padding: 0;
    }

    .our-skills .main-heading {
        background: url(../images/Our-Skills-bg.webp);
        background-size: cover;
        min-height: 300px;
        display: flex;
        padding: 0 3px;
        justify-content: center;
        flex-direction: column;
    }

    .our-skills .content {
        padding: 10px 15px;
    }
}

@media all and (max-width:739px) {
    .our-skills .main-heading {
        min-height: 250px;

    }
}

@media all and (max-width:530px) {
    .our-skills .main-heading {
        min-height: 180px;

    }
}

@media all and (max-width:380px) {
    .our-skills .main-heading {
        min-height: 150px;

    }
}

.testimonals {
    background-image: url(../images/testimonials-bg.webp);
    background-size: cover;
    color: white;
    position: relative;
}

.testimonals .testi-carousel {
    overflow: hidden;
}



.testimonals .container {
    padding: 100px 30px;
}

.testimonals .img-div {
    margin-bottom: 30px;
}

.testimonals .img-div img {
    width: 150px;
}

.testimonals .comma img {
    width: 60px;
}

.testimonals .testi-carousel {
    position: relative;
}

.testimonals .comma-c img {
    width: 60px;
}

.testimonals .comma {
    align-self: flex-start;
}

.testimonals .comma-c {
    align-self: flex-end;
}

.testimonals button.owl-prev {
    position: absolute;
    top: 50%;
    padding: 0;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.testimonals button.owl-next {
    position: absolute;
    right: 0;
    top: 50%;
    padding: 0;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.testimonals .para {
    align-self: center;
    /* padding: 0 60px; */
    max-width: 80%;
    margin: auto;
}

.testimonals .para p {
    color: white;
}

.testimonals .owl-stage {
    display: flex;
}

.testimonals .owl-dots {
    text-align: center;
}

.testimonals .owl-dots button {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    padding: 0;
    margin: 0 4px;
}

.testimonals .owl-dots button.active {
    background-color: white;
}

.testimonals .comma {}

.why-choose-index {
    background-image: url(../images/why-choose-us-bg.webp);
    background-size: cover;
    color: white;
}

@media all and (max-width:837px) {
    .why-choose-index .grid {
        grid-template-columns: repeat(2, 1fr) !important;

    }

    .why-choose-index .choose-box {
        margin-bottom: 10px;
    }
}

@media all and (max-width:991px) {
    .why-choose-index .grid {
        padding-top: 10px;
    }
}

@media all and (max-width:473px) {
    .why-choose-index .grid {
        grid-template-columns: 1fr !important;

    }
}


.why-choose-index .choose-box {
    padding: 50px 25px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    display: flex;
    align-items: center;
    transition: transform .1s ease-in;
}

.why-choose-index .choose-box:hover {
    transform: scale(1.04);
    cursor: default;
}

.why-choose-index .choose-box .content p {
    margin-bottom: 0;
}


.why-choose-index .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
}

@media all and (min-width:992px) {
    .why-choose-index .grid {
        padding: 50px 0;
        max-width: 820px;
        margin: auto;
    }

    .portfolio-index .grid {
        padding-top: 20px;
    }
}

.why-choose-index .img-div {
    margin-right: 10px;
}

.why-choose-index .img-div img {
    height: 60px;
    width: auto;
}

.faq-index {
    background: url(../images/FAQS-bg.webp);
    background-size: cover;
    color: white;
}

.faq-index .congest:first-child {
    width: 80%;
}

.faq-index .congest:last-child {
    width: 70%;
    margin: auto;
}

@media all and (max-width:500px) {
    .faq-index .congest {
        width: 100% !important;
    }
}

@media all and (min-width:992px) {
    .faq-index .head-img {
        padding-bottom: 20px;
    }

    .faq-index .btn-div {
        padding: 20px 0;
    }
}

.faq-index .accordion-item {
    border-bottom: 0;
    background-color: inherit;
    border: 2px solid white !important;
    border-radius: 8px;
}

.faq-index .accordion-header {
    background-color: inherit;
}

.faq-index .accordion-body {
    color: white;
}

.faq-index .accordion-button {
    background-color: black;
    color: white !important;
    padding: 1.5rem 1.25rem;
    opacity: 0.8;
}

.faq-index .accordion-button.collapsed {
    border-radius: 8px !important;
}

.faq-index .accordion-button.collapsed::after {
    content: "+";
}

.faq-index .accordion-button::after {
    content: "\f077";
    /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: "Font Awesome 5 Free";
    background-image: none;
}

.faq-index .accordion-button:not(.collapsed) {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.faq-index .accordion-collapse {
    background-color: black;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    opacity: .8;
}

.faq-index .accordion-button:focus {
    border: 0;
    box-shadow: none;
}

.faq-index .head-img img {
    height: 44px;
    width: auto;
}

.let-talk {
    background-image: url(../images/contact-us-bg-Graphic-design.webp);
    background-size: cover;
    padding: 40px 0 223px 0;
    z-index: -1;
}

.let-talk.curve {
    padding: 90px 0 223px 0;
    position: relative;
    z-index: -1;
}

@media all and (max-width:1193px) {
    .let-talk .lets-box {
        width: 80% !important;
    }
}

@media all and (max-width:888px) {
    .let-talk .grid {
        grid-template-columns: 1fr !important;
    }

    .let-talk .img-div {
        width: 50%;
        margin: auto;
        margin-bottom: 15px;
    }
}

@media (max-width: 349px) {
    .let-talk .lets-box {
        padding: 29px 10px !important;
    }
}

@media all and (min-width:350px) and (max-width:600px) {
    .let-talk .lets-box {
        padding: 50px 25px !important;
    }
}

@media all and (max-width:445px) {
    .let-talk .g-recaptcha>div {
        width: 100% !important;
    }
}

@media all and (max-width:427px) {
    .let-talk .lets-box {
        width: 100% !important;
    }
}

.let-talk .grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    column-gap: 40px;
}

.let-talk .lets-box {
    background-image: url(../images/contact-us-form-bg.webp);
    background-size: cover;
    padding: 100px 100px;
    color: white;
    width: 63%;
    margin: auto;
    border-radius: 25px;
    border: 5px solid white
}

.let-talk .lets-box label {
    color: white;
    margin-bottom: 0;
}

.let-talk input.form-control,
.let-talk select.form-select {
    background: inherit;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 2px;
    height: 28px;
    transition: border .3s ease;
    border-radius: 0;
}

.let-talk select.form-select option {
    color: black;
}

.let-talk input.form-control:focus {
    box-shadow: none;
}


.footer {
    background-image: url(../images/footer-bg.webp);
    background-size: cover;
    color: white;
    padding: 79px 15px 10px 15px;
    margin-top: -195px;
}

.footer .social-footer {
    gap: 15px;
}

.footer .social-footer span {
    color: white;
    font-size: 20px;
}

.footer ul {
    list-style: none;
    padding-left: 0;
}

.footer .footer-logo img {
    width: 385px;
    height: auto;
}

.footer ul a {
    color: white;
}

.footer .row {
    padding: 30px 0;
}

.footer .site-updated p {
    text-transform: uppercase;
}

@media all and (max-width:779px) {
    .footer .footer-logo img {
        width: 200px
    }
}

@media all and (max-width:767px) {
    .footer {
        padding: 113px 15px 10px 15px;
    }
}

@media all and (max-width:575px) {
    .footer {
        padding: 265px 15px 10px 15px;
    }

    .footer ul {
        padding-left: 15px;
    }

    .footer .contact-add {
        padding-left: 15px;
    }
}

/* web development page */
.web-header {
    background-image: url(../images/web/web-dev-bg.webp);
    background-size: cover;
    color: white;
    height: 100vh;
    display: flex;
    align-items: center;
}

@media all and (max-width:991px) {
    .web-header {
        height: auto;
    }
}

/* 
.primary-scope {
    height: 100vh;
} */

.web-services {
    background-image: url(../images/web/web-dev-Services-bg.webp);
    background-size: cover;
    color: white;
}

.web-services .grid {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    max-width: 800px;
    margin: auto;
}


.services-box .img-services {
    padding: 10px 0;
}

@media all and (max-width:795px) {
    .web-services .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width:630px) {
    .web-services .grid {
        grid-template-columns: 1fr;
    }
}


.services-box .heading-services {
    height: 46px;
    display: flex;
    align-items: center;
}

.services-box .heading-services h3 {
    font-size: 16px;
}

.services-box .img-services img {
    height: 30px;
    width: auto;
}

.services-box .service-para {
    height: 93px;
    overflow-y: hidden;
}

.services-box .service-para p {
    margin-bottom: 0;
    font-size: 12px;
}

.services-box .service-link a {
    color: white
}

/* services boxes */
.services-box {
    padding: 1rem;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.15);
    transition: transform .1s ease-in;
}

.services-box:hover {
    transform: scale(1.04);
    cursor: default;
}

.web-design {
    padding: 0 15px;
}

.web-apps {
    background: url(../images/web/Web-Apps-bg.webp);
    background-size: cover;
    color: white;
}

.admin-panels {
    padding: 0 15px 0 15px;
}

.crm-systems {
    background: url(../images/web/CRM-Systems-bg.webp);
    background-size: cover;
    color: white;
}

.erp-systems {
    padding: 0 15px 10px 15px;
}

.lms {
    background: url(../images/web/LMS-bg.webp);
    background-size: cover;
    color: white;
    /* padding: 10px 15px 0 15px; */
}

.e-commerece {
    background: url(../images/web/E-commerce-Store-bg.webp);
    background-size: cover;
    color: white;
}

.web-works {
    background: url(../images/web/dev-process-bg.webp);
    background-size: cover;
    color: white;
}

@media all and (min-width:992px) {
    .web-works .grid {
        padding: 30px 0
    }
}

.web-works .grid {
    padding-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
}

@media all and (max-width:924px) {
    .web-works .grid {
        grid-template-columns: repeat(2, 1fr);

    }

    .web-works .entity {
        margin-bottom: 10px;
    }
}

@media all and (max-width:616px) {
    .web-works .grid {
        grid-template-columns: 1fr;

    }
}

.web-works .entity {
    padding: 1rem;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.15);
}

.web-works .entity p {
    font-size: 14px;
}

.web-tools .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 30px;
    max-width: 600px;
    margin: auto;
}

.web-portfolio {
    padding-top: 0;
    z-index: 10;
}

.curve-line {
    margin-bottom: -70px;
}

.curve-uline {
    margin-bottom: -96px;
}

@media all and (max-width:1418px) {
    .curve-uline {
        margin-bottom: -82px;
    }
}

@media all and (max-width:991px) {
    .curve-uline {
        margin-bottom: -59px;
    }
}

@media all and (max-width:753px) {
    .curve-uline {
        margin-bottom: -49px;
    }
}

@media all and (max-width:753px) {
    .curve-uline {
        margin-bottom: -39px;
    }
}

@media all and (max-width:458px) {
    .curve-uline {
        margin-bottom: -29px;
    }
}

.web-portfolio .portfolio-carousel .item {
    padding: 0;
}

@media all and (max-width:991px) {
    .web-portfolio .portfolio-carousel .owl-dots {
        right: 0 !important;
    }
}

.web-portfolio .portfolio-carousel .owl-dots {
    right: 363px;
}

.web-portfolio .portfolio-carousel .owl-prev {
    right: 71px;
    z-index: 10;
}

.web-portfolio .portfolio-carousel .owl-next {
    z-index: 10;
}

@media all and (max-width:1083px) and (min-width:992px) {
    .web-portfolio .portfolio-carousel .owl-dots {
        top: 119px;
    }

    .web-portfolio .portfolio-carousel button.owl-next,
    .web-portfolio .portfolio-carousel button.owl-prev {
        top: 119px;
    }
}

@media all and (max-width:1261px) and (min-width:1140px) {
    .web-portfolio .portfolio-carousel .owl-dots {
        top: 160px;
    }

    .web-portfolio .portfolio-carousel button.owl-next,
    .web-portfolio .portfolio-carousel button.owl-prev {
        top: 160px;
    }
}

/* portfolio page */
.port-header {
    background-image: url(../images/port/portfolio-bg.webp);
    background-size: cover;
    color: white;
}

.port-tabs {
    background: url(../images/port/portfolio-work2.webp);
    background-size: cover;
}

.port-tabs nav {
    padding: 50px 0;

}

.port-tabs .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.port-tabs .nav-link:hover {
    border: none;
    color: whitesmoke;
}

.port-tabs .nav-link.active {
    border: none;
    border-bottom: 1px solid white;
    color: white;
    background: inherit;
    border-radius: 0;
}

.port-tabs .nav-link {
    color: rgba(255, 255, 255, 0.5);
    border-radius: 0;
}

.port-tabs .nav-link {
    transition: none;
}

.port-tabs nav button {
    color: white;
}

.port-tabs .img-div {
    margin-bottom: 10px;
}

.port-tabs .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}

.port-tabs .g-design {
    transform: translateY(500px);
    opacity: 0;
    transition: all 1s ease-in;
}

.port-tabs .tab-pane.show .g-design {
    transform: translateY(0);
    opacity: 1;
    /* transition: all .5s ease-in; */
}

.port-tabs .g-design .img-div {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    /* border: 5px solid white; */
}

.port-tabs .g-design .img-div .btn-dynmaic a {
    background-color: #13AB80;
    color: white;
    border-radius: 4px;
    padding: 5px 15px;
}

.port-tabs .g-design .img-div .btn-dynmaic {
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    transition: all .3s ease-in;
    display: flex;
    justify-content: center;
    align-items: center;
}

.port-tabs .g-design .img-div img {
    /* filter: drop-shadow(1px 1px 4px #13AB80); */
    /* border: 1px solid #13AB80; */
    transition: all .3s ease-in;
    /* box-shadow: 1px 1px 3px #13AB80; */
}

.port-tabs .g-design .img-div:hover img {
    filter: blur(1px)
}

.port-tabs .g-design .img-div:hover .btn-dynmaic {
    opacity: 1;
}

.portfolio-carousel {
    overflow: hidden;
}

.portfolio-carousel .owl-stage {
    display: flex;
}

.portfolio-carousel {
    position: relative;
}

.work-port {
    background-image: url(../images/port/portfolio-work1-bg.webp);
    background-size: cover;
}

.work-port nav {
    padding: 50px 0;

}

.work-port .nav-link:hover {
    border: none;
    color: black;
    transform: none;
}

.work-port .nav-link {
    color: rgba(0, 0, 0, 0.5);
}

.work-port .nav-link.active {
    border: none;
    border-bottom: 1px solid black;
    color: black;
    background: inherit;
    border-radius: 0;
}

.work-port .nav-link {
    transition: none;
}

.work-port .nav-link:active {
    border: none;
}

.work-port nav button {
    color: black;
}

.portfolio-carousel .owl-dots {
    right: 60px;
    position: absolute;
    top: 185px;
}

.portfolio-carousel .item {
    padding: 20px 0;
}

.portfolio-carousel button.owl-prev {
    position: absolute;
    top: 207px;
    right: 218px;
    padding: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    background: inherit;

}

.portfolio-carousel button.owl-next {
    position: absolute;
    top: 207px;
    right: 39px;
    padding: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: inherit;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;

}

@media all and (max-width:1228px) {
    .portfolio-carousel .owl-dots {
        top: 182px;
    }

    .portfolio-carousel button.owl-next,
    .portfolio-carousel button.owl-prev {
        top: 190px;
    }
}

@media all and (max-width:1140px) {
    .portfolio-carousel .owl-dots {
        top: 142px;
    }

    .portfolio-carousel button.owl-next,
    .portfolio-carousel button.owl-prev {
        top: 149px;
    }
}

@media all and (max-width:991px) {
    .portfolio-carousel .owl-dots {
        top: 0;
        right: 0;
        position: relative;
        text-align: center;
    }

    .portfolio-carousel button.owl-next,
    .portfolio-carousel button.owl-prev {
        top: 97%;
    }

    .portfolio-carousel button.owl-prev {
        left: 0;
    }

    /* .portfolio-carousel button.owl-next,
    .portfolio-carousel button.owl-prev {
        top: 0;
        right: 0;
        position: relative;
    } */
}

.portfolio-carousel .owl-dots .owl-dot {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    padding: 0;
    margin: 5px;

}

.portfolio-carousel .owl-dot.active {
    background-color: black;
}

/* under construction page */
.under-construction {
    background-image: url(../images/Home-page-bg.webp);
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 100vh;
    color: white;
    align-items: center;
    justify-content: space-around;
    padding: 20px 0;
}

.under-construction .logo-div {
    max-width: 550px;
    max-height: 300px;
}

.under-construction .line,
.under-construction .upr-text {
    font-size: 33px;
}

.under-construction .text-cons {
    height: 100px;
    font-size: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media all and (max-width:681px) {
    .under-construction .pagniation .line {
        display: none;
    }

    .under-construction .pagniation .upr-text {
        display: none;
    }
}


/* graphic design page */
.gd-header {
    background-image: url(../images/gd/Graphic-design-bg.webp);
    background-size: cover;
    color: white;
}

.gd-services {
    background-image: url(../images/gd/service-bg.webp);
    background-size: cover;
    color: white;
}

.gd-services .grid {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    max-width: 800px;
    margin: auto;
}

.gd-services .services-box .para {
    height: 183px;
    margin-bottom: 10px;
}

.gd-services .services-box ul {
    padding-left: 0;
    list-style: none;
}

@media all and (max-width:795px) {
    .gd-services .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width:630px) {
    .gd-services .grid {
        grid-template-columns: 1fr;
    }
}

.infographics {
    background-image: url(../images/gd/Infographics-bg.webp);
    background-size: cover;
    color: white;
}

.buisness-card {
    background-image: url(../images/gd/Business-Cards-bg.webp);
    background-size: cover;
    color: white;
}

.menus-design {
    background-image: url(../images/gd/Menus-Design-bg.webp);
    background-size: cover;
    color: white;
}

.book-magazine {
    background-image: url(../images/gd/Book-and-Magazine-bg.webp);
    background-size: cover;
    color: white;
}

.garphic-works {
    background: url(../images/gd/Graphic-process-bg.webp);
    background-size: cover;
    color: white;
}

@media all and (min-width:992px) {
    .garphic-works .grid {
        padding: 30px 0
    }
}

.garphic-works .grid {
    padding-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
}

@media all and (max-width:924px) {
    .garphic-works .grid {
        grid-template-columns: repeat(2, 1fr);

    }

    .garphic-works .entity {
        margin-bottom: 10px;
    }
}

@media all and (max-width:616px) {
    .garphic-works .grid {
        grid-template-columns: 1fr;

    }
}

.garphic-works .entity {
    padding: 1rem;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.15);
}

.garphic-works .entity p {
    font-size: 14px;
}

.graphic-tools .grid {
    display: grid;
    padding: 20px 0;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 30px;
    max-width: 600px;
    margin: auto;
}

.faq-index.faq-graphic {
    background-image: url(../images/gd/FAQS-bg.webp);
}


/* webscraping page */
.webs-header {
    background-image: url(../images/webs/web-scraping-bg.webp);
    background-size: cover;
    color: white;
}

.menus-design {
    background-image: url(../images/gd/Menus-Design-bg.webp);
    background-size: cover;
    color: white;
}

.general-need {
    padding-top: 0;
}

.webs-services {
    background-image: url(../images/web/web-dev-Services-bg.webp);
    background-size: cover;
    color: white;
}

.webs-services .grid {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    max-width: 800px;
    margin: auto;
}

@media all and (max-width:600px) {
    .webs-services .grid {
        grid-template-columns: 1fr;
    }
}

.scrapers-sift .grid {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    max-width: 800px;
    margin: auto;
}

@media all and (max-width:600px) {
    .scrapers-sift .grid {
        grid-template-columns: 1fr;

    }
}

.reliable-scraping {
    background-image: url(../images/webs/solutions-bg.webp);
    background-size: cover;
    color: white;
}

.boost-buisness {
    padding-top: 0;
}

.quality-control {
    background-image: url(../images/webs/quality-control-bg.webp);
    background-size: cover;
    color: white;
}

.htsol-advantage {
    background-image: url(../images/webs/HTSOL-Advantage-image.webp);
    background-size: cover;
}

.htsol-advantage .grid {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    max-width: 850px;
    margin: auto;
}

@media all and (max-width:600px) {
    .htsol-advantage .grid {
        grid-template-columns: 1fr;
    }
}

.service-provider {
    background-image: url(../images/webs/best-service-provider-bg.webp);
    background-size: cover;
    color: white;
}

.service-provider .grid {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    max-width: 800px;
    margin: auto;
}

@media all and (max-width:991px) {
    .service-provider .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width:600px) {
    .service-provider .grid {
        grid-template-columns: 1fr;
    }
}

/* testimonials pages */
.test-header {
    background-image: url(../images/testim/testimonials-bg1.webp);
    background-size: cover;
    color: white;
}

.testimonals.test-page .owl-nav {
    display: none;
}

.full-service {
    padding: 20px 15px
}

.full-service .inputs-div {
    display: grid;
    grid-template-columns: 1fr 12fr;
    column-gap: 20px;
}

@media all and (max-width:845px) {
    .full-service .inputs-div {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
}

.full-service .inputs-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}

@media all and (max-width:730px) {
    .full-service .inputs-inner {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
}

.full-service .grid {
    padding-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}

@media all and (max-width:800px) {
    .full-service .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width:620px) {
    .full-service .grid {
        grid-template-columns: 1fr;
    }
}

.full-service .entity {
    border: 1px solid black;
    border-radius: 4px;
}

.full-service .entity .img-div {
    padding: 50px 0;
    text-align: center;
}

.full-service .entity .img-div img {
    height: 37px;
    width: auto;
}

.full-service .industry-upper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
}

.full-service .entity .industry-upper:last-child {
    border-bottom: none;
}

.full-service .entity .industry-upper {
    border-bottom: 1px solid black;
}

.full-service .industry-upper p {
    margin-bottom: 0;
    color: #737373;
}

.full-service .industry-upper .light-color {
    padding-right: 10px;
    border-right: 1px solid black;
}

.full-service .industry-upper .logos-init {
    width: 70%;
    display: flex;
    row-gap: 10px;

}

.full-service .logos-init img {
    margin: 0 4px;
    width: auto;
    height: 14px;
}

/* contact pages */
.cu-header {
    background-image: url(../images/cu/header-bg.webp);
    background-position: right bottom;
    background-size: cover;
    color: white;
}

.cu-lyr {
    padding: 0;
    margin-top: -104px;
}

@media all and (max-width:1207px) {
    .cu-lyr {
        margin-top: -80px;
    }
}

@media all and (max-width:931px) {
    .cu-lyr {
        margin-top: -70px;
    }
}

@media all and (max-width:991px) {
    .cu-header {
        padding-bottom: 112px;
    }

    .cu-lyr {
        margin-top: -63px;
    }
}

@media all and (max-width:831px) {
    .cu-lyr {
        margin-top: -53px;
    }
}

@media all and (max-width:706px) {
    .cu-lyr {
        margin-top: -43px;
    }
}

@media all and (max-width:550px) {
    .cu-lyr {
        margin-top: -33px;
    }
}

@media all and (max-width:386px) {
    .cu-lyr {
        margin-top: -23px;
    }
}

.second-cu {
    padding: 100px 15px;
    background-image: url(../images/cu/contact-us-text-bg.webp);
    background-size: cover;
}

.second-cu h2,
.second-cu p {
    text-align: center;
}



/* mobile app development */
.mobile-header {
    background-image: url(../images/web/web-dev-bg.webp);
    background-size: cover;
    color: white;
}

.unpreced {
    padding: 0 15px 15px 15px;
}

.mob-services {
    color: white;
    background-image: url(../images/mobile/services-bg.webp);
    background-size: cover;

}

.mob-services .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    max-width: 800px;
    margin: auto;
    padding: 20px 0;
}

@media all and (max-width:600px) {
    .mob-services .grid {
        grid-template-columns: 1fr;

    }
}

.mobile-uiux {
    padding: 0 15px;
}

.java-kot {
    background-image: url(../images/mobile/android-app-bg.webp);
    background-size: cover;
    color: white;
}

.andriod-mult {
    padding: 15px 15px 0px 15px;
}

.comm-apps {
    padding: 0 15px;
}

.andriod-enter {
    padding: 15px 15px 0px 15px;
    background-image: url(../images/mobile/Android-Enterprise-image-bg.webp);
    background-size: cover;
    color: white;
}

.social-net {
    background-image: url(../images/mobile/Social-Networking-apps-bg.webp);
    background-size: cover;
    color: white;
}

.cross-platform {
    background-image: url(../images/mobile/cross-app-bg.webp);
    background-size: cover;
    color: white;
    padding: 15px 15px 0px 15px;
}

.ios-app {
    padding: 0 15px 15px 15px;
}

.why-ht {
    background-image: url(../images/mobile/why-us.webp);
    background-size: cover;
    padding: 50px 15px;
}

.why-ht .wrap {
    max-width: 900px;
    margin: auto;
}

.why-ht .content p {
    line-height: 30px;
    font-size: 25px;
}

.mob-works {
    background: url(../images/web/dev-process-bg.webp);
    background-size: cover;
    color: white;
}

.mob-works .wrap {
    max-width: 900px;
    margin: auto;
}

@media all and (min-width:992px) {
    .web-works .grid {
        padding: 30px 0
    }
}

.mob-works .grid {
    padding-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
}

@media all and (max-width:924px) {
    .mob-works .grid {
        grid-template-columns: repeat(2, 1fr);

    }

    .mob-works .entity {
        margin-bottom: 10px;
    }
}

@media all and (max-width:616px) {
    .mob-works .grid {
        grid-template-columns: 1fr;

    }
}

.mob-works .entity {
    padding: 1rem;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.15);
}

.mob-works .entity p {
    font-size: 14px;
}

.faq-index.faq-mobile {
    background-image: url(../images/mobile/FAQS-bg-Mobile-app.webp);
    background-size: cover;
}

.web-portfolio.mob-portfolio {
    background-image: url(../images/port/portfolio-work1-bg.webp);
    background-size: cover;
}



/* ui ux page  */
.uiux-header {
    background-image: url(../images/uiux/ui-ux-header-bg.webp);
    background-size: cover;
    color: white;
}

.uiux-design {
    padding: 0 15px;
}

.web-uiux {
    background-image: url(../images/uiux/Web-UI-UX-Design-bg.webp);
    background-size: cover;
    color: white;
}

.uiux-brand {
    padding: 0 15px 15px 15px;
}

.how-we-work {
    background-image: url(../images/uiux/How-We-Work-bg.webp);
    background-size: cover;
    color: white;
}

.how-we-work .grid {
    padding: 40px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    max-width: 1060px;
    margin: auto;
    position: relative;
}

.how-we-work .upper-first {
    position: absolute;
    top: -7px;
    left: 119px;
}

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

    .how-we-work .upper-first,
    .how-we-work .upper-second,
    .how-we-work .lower-first {
        display: none;
    }
}

.how-we-work .upper-first img {
    width: 235px;
}

.how-we-work .upper-second {
    position: absolute;
    top: -7px;
    right: 150px;
}

.how-we-work .upper-second img {
    width: 235px;
}

.how-we-work .lower-first {
    position: absolute;
    bottom: -7px;
    left: 407px;
}

.how-we-work .lower-first img {
    width: 235px;
}

@media all and (max-width:991px) {
    .how-we-work .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width:600px) {
    .how-we-work .grid {
        grid-template-columns: 1fr;
    }
}

.how-we-work .entity {
    padding: 1rem;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.15);
}

.how-we-work .entity ul {
    list-style: none;
    padding-left: 0;
}

@media all and (max-width:795px) {
    .web-services .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width:630px) {
    .web-services .grid {
        grid-template-columns: 1fr;
    }
}

.designing-process .wrap {
    max-width: 800px;
}

.can-help .wrap {
    max-width: 800px;
}

.can-help {
    background-image: url(../images/uiux/How-can-we-help-bg.webp);
    background-size: cover;
    color: white;
}

.email-phn {
    max-width: 500px;
    margin: auto;
}

.can-help img {
    height: 30px;
    width: auto;
}

.can-help .d-flex.email-phn p {
    margin-bottom: 0;
    margin-left: 6px;
}

.uiux-tools .grid {
    padding: 20px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 100px;
    row-gap: 70px;
    max-width: 700px;
    margin: auto;
}

.faq-index.faq-uiux {
    background-image: url(../images/uiux/ui-ux-FAQS-bg.webp);
}

.web-portfolio.uiux-port {
    background-image: url(../images/port/portfolio-work1-bg.webp);
    background-size: cover;
    padding: 0 15px;
    margin-bottom: -32px;
    position: relative;
    z-index: -1;
}

@media all and (max-width:991px) {
    .web-portfolio.uiux-port {
        padding-bottom: 15px;
    }
}

@media all and (max-width:991px) {
    .web-portfolio.uiux-port {
        padding-bottom: 20px;
    }
}

@media all and (max-width:596px) {
    .web-portfolio.uiux-port {
        padding-bottom: 25px;
    }
}

@media all and (max-width:439px) {
    .web-portfolio.uiux-port {
        padding-bottom: 30px;
    }
}

#shadow-host-companion {
    display: none;
}

#loom-companion-mv3 {
    display: none;
}



#liecbddmkiiihnedobmlmillhodjkdmb {
    display: none;
}

.white-popup {
    position: relative;
    /* background: #73b7c4; */
    background: white;
    color: black;
    padding: 40px 20px;
    width: auto;
    background-size: cover;
    max-width: 85%;
    margin: 0 auto;
    border-radius: 7px;
}

.pop-car .owl-stage {
    display: flex;
}

.pop-car .owl-stage-outer {
    overflow-x: hidden;
}

/* .white-popup .btns-div button span {
    font-size: 20px;
} */
.white-popup .btns-div {
    display: flex;
    /* flex-direction: column; */
    gap: 15px;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}

.white-popup .btns-div button {
    width: 200px;
    padding: 7px 0;
    border: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background-color: #13AB80;
    color: white;
}

.white-popup .btns-div button span i {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 30px;
}

.white-popup .btns-div button span svg {
    width: 30px;
    height: 30px;
}

#carousel-custom-dots {
    margin-top: 15px;
    display: flex;
    gap: 7px;
}

#carousel-custom-dots button {
    border: none;
    border-radius: 10px;
}

.pop-car .owl-nav {
    display: none;
}

.white-popup .mfp-close-btn-in .mfp-close {
    color: white;
}

.white-popup h2,
.white-popup h3 {
    color: #13AB80;
}

.white-popup h2 {
    font-size: 23px;
}

.white-popup h3 {
    font-size: 20px;
}

.white-popup p {
    font-size: 16px;
}

#carousel-custom-dots button {
    border: none;
    border-radius: 10px;
    padding: 0;
}

.ascunde {
    display: none;
}