/* custom order form */

.order {
         background: url(../../../../uploads/2026/03/order-banner.webp) !important;
}

.form-txt {
    width: 100%;
    max-width: 640px !important;
}

.order-form {
    width: 100%;
    max-width: 780px;
    margin: auto;
}

.order-form .form-control {
    min-height: 58px;
    background-color: #E5EFF1;
}

button.wpcf7-form-control.has-spinner.wpcf7-submit.button.blue.order-btn {
    padding: 18px 34px !important;
}

/* Password Protected Page */

.custom-password-protected {
    background: url(../../../../uploads/2026/03/order-banner.webp) no-repeat;
    background-size: cover;
    background-position: center;
}

.custom-password-protected .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
}

.custom-password-protected .inner-layer{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 100px 0;
    text-align: center;
}

.custom-password-protected .inner-layer > h2{
    text-transform: capitalize;
    font-weight: 800;
    line-height: 1;
    font-size: 42px;
    color: var(--secondary-color);
    margin: 25px auto 10px;
}

.custom-password-protected .post-password-form{
    margin-top: 25px;
}

.custom-password-protected .post-password-form > p:nth-of-type(1){
    display: none;
}

.custom-password-protected .post-password-form > p:nth-of-type(2){
    /* font-size: 0; */
    border: 1px solid #bbbbbb;
    border-radius: 50px;
    box-shadow: 0 0 24px rgba(0,0,0,0.44);
    background-color: #fff;
    display: inline-flex;
    padding: 3px;
    width: 100%;
    max-width: 426px;
    margin: 0 auto;
}

.custom-password-protected .post-password-form > p:nth-of-type(2) label{
    font-size: 0;
    position: relative;
    width: 100%;
    max-width: 300px;
    text-align: left;
}

.custom-password-protected .post-password-form > p:nth-of-type(2) label::before{
    content: "Enter Your Password";
    font-size: 16px;
    line-height: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
}

.custom-password-protected .post-password-form > p:nth-of-type(2) label.hide::before{
    display: none;
}

.custom-password-protected .post-password-form > p:nth-of-type(2) input[type="password"]{
    width: 100%;
    height: 45px;
    background-color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 50px;
    outline: none;
    padding-left: 15px;
}

.custom-password-protected .post-password-form > p:nth-of-type(2) input[type="submit"]{
    border: none;
    border-radius: 50px;
    width: 120px;
    background-image: linear-gradient(to right, #00c6f1, #096fcb , #00c6f1);
    background-size: 300% 100%;
    color: #fff;
    transition: all .4s ease-in-out;
}

.custom-password-protected .post-password-form > p:nth-of-type(2) input[type="submit"]:hover{
    background-position:  100% 0;
}

/* Payment Invoice */

.payment-invoice br{
    display: none;
}

.invoice-row{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.invoice-row .col-50{
    width: 100%;
    max-width: calc(100%/2 - 10px);
}

.invoice-row .col-100{
    width: 100%;
    max-width: 100%;
}

.invoice-row p{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

.invoice-row p span{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 50px;
}

.invoice-row p span.label{
    background-image: linear-gradient(to bottom, #00c6f1, #096fcb);   
    color: #fff;
    text-transform: uppercase;
    padding: 0 20px;
    width: 200px;
    font-size: 15px;
    letter-spacing: 1px;
}

.invoice-row p span.value{
    padding: 10px 20px;
    width: calc(100% - 200px);
    background: #eaf2f4;
    color: #5f5f5f;
    line-height: 1.3;
}

.order-amount{
    margin: 20px auto;
}

.order-amount p{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 10px;
}

.order-amount p span.label{
    display: inline-block;
    font-size: 24px;
    font-weight: 400;
    color: var(--secondary-color);
    text-transform: capitalize;
}

.order-amount p span.value{
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    min-width: 100px;
    text-align: right;
}

.invoice-area {
  background-image: linear-gradient(to right, #55b4c5, #1758c7);
  padding: 100px 0 50px;
  color: #fff;
}

.invoice-area .inner-content {
  width: 100%;
  max-width: 884px;
  margin: 0 auto;
}

.invoice-area .contact-form-2 {
  padding: 25px;
  box-shadow: 0 0 13px 0 rgb(0 0 0 / 20%);
  border-radius: 12px;
  margin: 20px auto;
  background: 0 0;
  position: relative;
}

.invoice-area form select {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  background-color: #fff;
  border: 1px solid #e7e7e7;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  color: #999 !important;
  opacity: 1;
}

.invoice-area .contact-form-2 .wpcf7-spinner{
  bottom: 16px;
  margin-left: 65px;
}

/* ------------------------------------------------ */
/* ----------------- COMMON STYLING --------------- */
/* ------------------------------------------------ */

.wpcf7-form .cf-turnstile iframe{
    width: 100% !important;
    max-width: 300px !important;
}

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

:root{
    --primary-color: #2a2c33;
    --secondary-color: #2986f0;
    --common-background-color: #f4f7fa;
    --blue-gradient-background: url('../../../../uploads/2023/07/blue-gradient.webp') no-repeat center;
}

::selection{
    background: #38defe;
    color: #fff;
}

html::-webkit-scrollbar-button {
    width: 10px;
    height: 10px;
    background: var(--secondary-color);
    opacity: 0.7;
    border-radius: 10px;
}
html::-webkit-scrollbar {
    width: 10px;
    height: 8px;
}
html::-webkit-scrollbar-track {
    background: #f7f7f7;
    border-radius: 10px;
}
html::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    opacity: 0.7;
    border-radius: 8px;
}

/* Handle on hover */
html::-webkit-scrollbar-thumb:hover {
    opacity: 1;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body{
    width: 100%;
    height: 100%;
    font-family: 'Outfit', sans-serif !important;
}

.post, .page{
    margin-bottom: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin: 0;
}

a,
.btn,
button{
    outline: none !important;
    text-decoration: none;
    display: inline-block;
}

ul,ol{
    margin-left: 0px !important;
    padding-left: 0 !important;
}

.image-wrapper {
    text-align: center;
}

picture{
    display: block;
}

.image-wrapper img,
img{
    max-width: 100%;
    /* width: auto; */
    height: auto;
}

p{
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 300;
}

strong{
    font-weight: 700;
}

/* CF7 Form Alerts */

.wpcf7 form .wpcf7-response-output {
    margin: 10px auto 0 !important;
    padding: 10px 15px !important;
    border: 0px !important;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    background: #ffb900;
    color: #191819;
    font-weight: 600;
}

.wpcf7 form.failed .wpcf7-response-output, 
.wpcf7 form.aborted .wpcf7-response-output {
    background: #ff0000;
    color: #fff;
}

.wpcf7 form.sent .wpcf7-response-output {
    background: #2ABB03;
    color: #fff;
}

.wpcf7 form.spam .wpcf7-response-output {
    background: #f56e28;
    color: #fff;
  }

.iti__selected-dial-code {
    display: none !important;
}

.scrollToTop{
    width: 45px;
    height: 45px;
    text-align: center;
    color: #000 !important;
    z-index: 350;
    font-size: 20px;
    border: 1px solid #000;
    border-radius: 50%;
    text-decoration: none;
    background-color: #fff;
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: .2s all ease;
    -webkit-transition: .2s all ease;
    box-shadow: none !important;
}

.scrollToTop.button-show{
    opacity: 1;
    visibility: visible;
}

.scrollToTop:hover{
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
    transform: scale(0.91);
}

.text-transform-unset{
    text-transform: unset !important;
}

/* -------------------------------- */
/* -------- HEADINGS STYLE -------- */
/* -------------------------------- */

.main-heading{
    font-size: 40px;
    font-weight: 500 ;
    margin-bottom: 20px;
    line-height: 1.3;
    text-transform: capitalize;
}

.sub-heading{
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: capitalize;
}

.small-heading{
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.main-heading.dark,
.sub-heading.dark,
.small-heading.dark{
    color: var(--primary-color);
}

.main-heading.white,
.sub-heading.white,
.small-heading.white{
    color: #fff;
}

.main-heading span,
.sub-heading span,
.small-heading span{
    color: var(--secondary-color);
}

.heading-box .main-heading{
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.heading-box p{
    font-size: 18px;
    margin: 30px auto;
    font-weight: 300;
    max-width: 850px;
}

/* -------------------------------- */
/* --------- BUTTON STYLE --------- */
/* -------------------------------- */

.button-group{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 30px;
}

.button{
    padding: 17px 20px;
    border-radius: 10px;
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    min-width: 130px;
    text-align: center;
    border: none;
    transition: box-shadow 0.5s ease-in-out;
}
.button:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}

.button.button-sm{
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 13px;
    min-width: unset;
    font-weight: 600;
}

.button i{
    display: inline-block;
    margin-right: 10px !important;
}

.button.blue{
    background-image: linear-gradient(294deg, #2e5bed 58%, #39eaff );
    color: #fff;
}

.button.white{
    background-color: #fff;
    color: var(--primary-color);
    font-weight: 500;
}

.button.grey{
    background-color: #efefef;
    color: var(--primary-color);
}

.lets-talk{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 10px;
}

.lets-talk span{
    font-size: 16px;
    font-style: italic;
    color: var(--primary-color);
    line-height: 1.5;
    display: inline-block;
    margin-top: 15px;
    width: 125px;
    font-weight: 300;
}

/* ------- CUSTOM LIST STYLE ------ */

.custom-list {
    margin-bottom: 35px;
}

.custom-list li{
    position: relative;
    list-style-type: none;
    padding-left: 30px;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-weight: 300;
}

.custom-list li::before {
    content: "\f00c";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    left: 0;
    position: absolute;
    top: 2px;
    color: var(--secondary-color);
    font-size: 16px;
}

/* -------------------------------- */
/* --------- HEADER STYLE --------- */
/* -------------------------------- */

.main-header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11111;
    width: 100%;
    padding-top: 20px;
    /*background-color: #fff;*/
    transition: all .5s ease-in-out;
}

.main-header nav{
    padding:  0 !important;
    position: unset !important;
}

.main-header .container{
    padding: 0 33px 0 18px !important;
}

.main-header .menu-main-menu-container{
    margin-left: auto;
}

.navbar-brand{
    display: inline-block;
    width: 100%;
    max-width: 200px;
    transition: all .5s ease-in-out;
}

.navbar-nav{
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    column-gap: 50px;
}

.main-header .navbar .navbar-nav > .menu-item > a{
    font-family: 'Outfit', sans-serif !important;
    text-transform: capitalize;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-color) !important;
    line-height: 50px;
    height: 50px;
    opacity: 1 !important;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: height .15s ease-in-out,line-height .15s ease-in-out,color .2s ease;
}

.main-header .navbar .navbar-nav > .menu-item > a[aria-current="page"]{
    color: var(--secondary-color) !important;
}

.main-header .navbar .navbar-nav > .menu-item > a::before{
    content: "";
    display: inline-block;
    height: 2px;
    width: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-image: linear-gradient(to right, #4de2fb, #0646b5);
    transition: all .3s ease-in-out;
}

.main-header .navbar .navbar-nav > .menu-item > a:hover::before{
    width: 100%;
}

.main-header .navbar .navbar-nav > .menu-item > a:hover{
    opacity: 0.8;
}


.main-header .navbar .navbar-nav .menu-item.dropdown a{
    position: relative;
    padding-right: 23px !important;
}

.main-header .navbar .navbar-nav .menu-item.dropdown a::after{
    display: none;
}

.main-header .navbar .navbar-nav .dropdown::after {
    content: "\f107";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    line-height: 14px;
    right: 12px;
    font-size: 10px;
    color: var(--primary-color);
}

.main-header .navbar .navbar-nav .sub-menu{
    display: none;
    text-align: left;
    list-style: none;
    border: none;
    background: #fff; 
    padding: 12px 20px  !important;
    z-index: 300;
    box-shadow: 21px 21px 54px rgba(0,0,0,0.10) !important;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s linear;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
}

.main-header.sticky-header .navbar .navbar-nav .sub-menu{
    border-radius: 0 0 20px 20px;
}

.main-header .navbar .navbar-nav .dropdown-menu a,
.main-header .navbar .navbar-nav .sub-menu a{
    display: inline-block;
    padding: 9px 0 !important;
    letter-spacing: .3px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px;
    color: var(--para-color);
    transition: all 0.2s linear;
    font-weight: 400;
}

.main-header .navbar .navbar-nav .dropdown-menu a:hover,
.main-header .navbar .navbar-nav .sub-menu a:hover{
    color: var(--secondary-color);
    padding-left: 10px !important;
}

.close-button {
    height: 67px;
    padding: 16px 20px;
    background-color: #000;
    text-align: right;
    display: none;
}


/* -------------------------------- */
/* --------- LEAD CAPTURE MODAL --------- */
/* -------------------------------- */

.lead-capture-modal {
    z-index: 111111;
  }
  .lead-capture-modal .modal-content {
    background-color: transparent;
    border: none;
  }
  .lead-capture-modal .modal-body {
    padding: 0;
  }
  .lead-capture-modal .btn-close {
    position: absolute;
    left: auto;
    right: -10px;
    bottom: auto;
    top: -10px;
    height: 35px;
    width: 35px;
    line-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #000;
    border-radius: 50%;
    font-size: 13px;
    box-shadow: none !important;
    text-shadow: none !important;
    background-color: #fff;
    opacity: 1;
  }
  .lead-capture-popup {
    background-image: url(../../../../uploads/2023/11/popup-background.png);
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0px 0px 50px 0px rgb(25, 25, 25, 0.19);
    background-size: cover;
  }
  .lead-capture-popup > div {
    padding: 40px;
  }
  .lead-capture-popup .heading {
    text-align: center;
    border-bottom: 1px solid #fff;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .lead-capture-popup .heading h2 {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 15px;
  }

  .lead-capture-popup .heading h2 span{
    color: #2986f0;
  }

  .lead-capture-popup .heading h2 br {
    display: block !important;
  }
  .lead-capture-popup .heading h3 {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 300;
  }
  .lead-capture-popup strong {
    display: block;
    font-weight: 500 !important;
    font-size: 16px;
    margin-bottom: 20px;
    color: #fff;
  }
  .lead-capture-popup .services-buttons {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 15px;
  }
  .lead-capture-popup .services-buttons label {
    display: block;
    width: 100%;
    max-width: calc(100% / 3 - 10px);
    padding: 30px 15px;
    color: #000;
    font-weight: 500;
    font-size: 16px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    position: relative;
    text-align: center;
    cursor: pointer !important; background: #fff;
  }

  .lead-capture-popup .services-buttons label i{
    font-size: 25px;
    color: #2986f0;
  }

  .lead-capture-popup .services-buttons label p{
    color: #000;
    line-height: 20px;margin-top: 10px !important;
    font-weight: 400;
  }

  .lead-capture-popup .service-buttons label:hover{
    background-image: -moz-linear-gradient( -67deg, rgb(88,172,241) 0%, rgb(17,86,216) 100%);
    background-image: -webkit-linear-gradient( -67deg, rgb(88,172,241) 0%, rgb(17,86,216) 100%);
    background-image: -ms-linear-gradient( -67deg, rgb(88,172,241) 0%, rgb(17,86,216) 100%);
    box-shadow: -12.861px 19.068px 38.27px 4.73px rgba(148, 186, 255, 0.25);
  }

  .lead-capture-popup .services-buttons label input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer !important;
  }

  .lead-capture-popup .services-buttons label .icon {
    display: block;
    margin: 0 auto 10px;
    width: 100%;
    max-width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .lead-capture-popup .services-buttons label.logoDesignLabel .icon {
    background-image: url(../../../../uploads/2023/03/popup-icon-logo-design.webp);
  }
  .lead-capture-popup .services-buttons label.socialMediaLabel .icon {
    background-image: url(../../../../uploads/2023/03/popup-icon-social-media.webp);
  }
  .lead-capture-popup .services-buttons label.brandingLabel .icon {
    background-image: url(../../../../uploads/2023/03/popup-icon-branding.webp);
  }
  .lead-capture-popup .services-buttons label.websiteDevelopmentLabel .icon {
    background-image: url(../../../../uploads/2023/03/popup-icon-web-development.webp);
  }
  .lead-capture-popup .services-buttons label.contentWritingLabel .icon {
    background-image: url(../../../../uploads/2023/03/popup-icon-content-writing.webp);
  }
  .lead-capture-popup .services-buttons label.videoAnimationLabel .icon {
    background-image: url(../../../../uploads/2023/03/popup-icon-video-animation.webp);
  }
  .lead-capture-popup .step-two {
    background-image: url(../../../../uploads/2023/11/popup-background.png);
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
  }
  .lead-capture-popup .service-box {
    padding-bottom: 30px;
    margin-bottom: 15px;
  }
  .lead-capture-popup .service-box .wpcf7-list-item.first {
    display: none;
  }
  .lead-capture-popup .service-box .wpcf7-list-item {
    display: block;
    margin-bottom: 15px;
    margin-left: 30px;
  }
  .lead-capture-popup .service-box .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
    position: relative;
  }
  .lead-capture-popup .service-box .wpcf7-list-item-label::before {
    content: "";
    display: inline-block;
    height: 18px;
    width: 18px;
    background: transparent;
    border: 2px solid #fff;
    margin-top: 3px;
    border-radius: 50%;
    z-index: 1111;
    position: absolute;
    top: -2px;
    left: 0;
    margin-left: -30px;
  }
  .lead-capture-popup .service-box .wpcf7-list-item input {
    height: 16px;
    width: 16px;
    background: transparent;
    border: 2px solid #fff;
    margin-top: 3px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .lead-capture-popup .service-box .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
    border-color: #fd394f;
    font-weight: 900;
    font-size: 11px;
    color: #fff;
    text-align: center;
    line-height: 15px;
    content: "\2713";
    background-color: #fd394f;
    transform: rotate(10deg);
  }
  .lead-capture-popup .service-box .wpcf7-list-item-label {
    font-size: 14px;
    font-weight: 400;
  }
  .lead-capture-popup .contact-details-form .custom-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .lead-capture-popup .contact-details-form .custom-row .input-box {
    width: 100%;
    max-width: calc(100% / 2 - 10px);
  }
  .lead-capture-popup .wpcf7-not-valid-tip {
    margin-top: 7px !important;
    color: #fff !important;
    font-size: 14px !important;
  }
  .lead-capture-popup .wpcf7-not-valid-tip::before {
    content: "*";
    color: red;
    font-size: 14px;
    line-height: 1;
    padding-right: 5px;
  }
  .lead-capture-popup .contact-details-form .custom-row .input-box.w-100 {
    max-width: 100%;
  }
  .lead-capture-popup .contact-details-form .form-control {
    background-color: rgb(19, 68, 101);
    height: 46px;
    padding: 0 15px 0 20px;
    color: #fff;
    font-size: 14px;
    outline: none !important;
    box-shadow: none !important;
    border: none;
    font-weight: 500;
    border-radius: 10px;
  }

  .lead-capture-popup .contact-details-form .form-control::placeholder{
    color: #98afc7;
  }

  .lead-capture-popup .contact-details-form .form-control:focus {
    border-color: #ff0566 !important;
  }
  .lead-capture-popup .submit-buttons-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .lead-capture-modal .wpcf7-form .wpcf7-form-control-wrap {
    margin-bottom: 0 !important;
  }
  .lead-capture-popup .contact-details-form input[type="submit"],
  .lead-capture-popup .contact-details-form input[type="reset"],
  .lead-capture-popup .contact-details-form button {
    background-image: -moz-linear-gradient( -67deg, rgb(88,172,241) 0%, rgb(17,86,216) 100%);
    background-image: -webkit-linear-gradient( -67deg, rgb(88,172,241) 0%, rgb(17,86,216) 100%);
    background-image: -ms-linear-gradient( -67deg, rgb(88,172,241) 0%, rgb(17,86,216) 100%);
    box-shadow: -12.861px 19.068px 38.27px 4.73px rgba(148, 186, 255, 0.25);
    color: #fff;
    padding: 10px 25px;
    border-radius: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    border: 0;
  }
  .lead-capture-popup .contact-details-form input[type="submit"] {
    margin-left: 15px;
  }
  .lead-capture-popup .contact-details-form input[type="reset"],
  .lead-capture-popup .contact-details-form button {
    background: rgb(19, 68, 101) !important;
    padding: 10px 0;
    font-weight: 400;
    box-shadow: 0 0;
    padding: 17px 20px !important;
    border-radius: 10px !important;
    font-weight: 400 !important;
    font-size: 15px !important;
  }
  
  .country-select .country-list, .intl-tel-input .country-list{
    background-color: #134465 !important;
  }

  .intl-tel-input .selected-flag .iti-arrow{
    border-top: 4px solid #fff !important;
  }

  

/** Resources **/

@media only screen and (min-width: 991px){
    .main-header .navbar .dropdown:hover .dropdown-menu,
    .main-header .navbar .dropdown:hover .sub-menu{
        display: block;
    }
}

.main-header .navbar .navbar-nav .sub-menu .menu-item,
.main-header .navbar-nav .dropdown .dropdown-item:hover{
    background-color: transparent !important;
}

.main-header .navbar .navbar-nav .sub-menu .menu-item:not(:last-child){
    /* border-bottom: 1px solid rgba(0,0,0,0.1) !important; */
}


#dropdownTrigger{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
    height: 49px;
    line-height: 48px;
    width: 50px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    background: var(--secondary-color);
    border: none;
    border-color: rgba(92,92,92,.23);
    border-style: solid;
    border-width: 0 0 1px 1px;
    border-radius: 0;
    padding: 0;
    display: none;
}
#dropdownTrigger::before{
    content: '\f0d7';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
#dropdownTrigger:hover{
    opacity: 0.8;
    cursor: pointer;
}

.navbar-toggler{
    border: none;
    box-shadow: none !important;
    padding: 0 ;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    border-radius: 0;
    height: 20px;
    width: 20px;
    font-size: 24px;
    text-align: center;
    line-height: 20px;
}

.navbar-toggler span{
    display: inline-block;
    height: 2px;
    background-color: var(--primary-color);
    width: 20px;
}

.navbar-toggler i,
.navbar-toggler[aria-expanded="true"] span{
    display: none;
    line-height: 20px;
    margin-left: 2px;
}

.navbar-toggler[aria-expanded="true"] i{
    display: inline-block;
}


.main-header.sticky-header {
    padding-top: 0;
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 15%);
}

.main-header.sticky-header .navbar-brand{
    max-width: 150px;
}

/* -------------------------------- */
/* --------- FOOTER STYLE --------- */
/* -------------------------------- */

.main-footer{
    position: relative;
    width: 100%;
    height: auto;
    background: url('../../../../uploads/2023/07/footer-bg.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding-top: 70px;
    font-size: 14px;
    font-family: 'Outfit', sans-serif !important;
}

.main-footer .row{
    row-gap: 30px;
}

.footer-collapse-head button {
    width: 100%;
    justify-content: space-between;
    display: flex; position: relative;
}

.footer-links-accordion-button:after {
    position: absolute;
    content: "\2b";
    width: 20px;
    height: 20px;
    right: 0; font-size: 30px;
}

.footer-links-accordion-button:not(.collapsed)::after {
    content: "-";
}

.footer-collapse-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
    border-bottom: 3px solid #fff;
    padding: 20px 0;
    margin-bottom: 20px;
}

.footer-collapse-head button{
    background-color: transparent;
    border-radius: 0;
    border: none;
    padding: 0;
    opacity: 1;
    color: #fff;
    font-size: 26px;
    line-height: 1;
}

.footer-collapse .collapse > div {
    border-bottom: 3px solid #fff;
    padding-bottom: 20px;
}

.footer-collapse-head span{
    color: #fff;
    font-size: 22px;
    font-weight: 500;
}

.main-footer p{
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5;
    color: #bfbfbf;
}

.main-footer h5{
    font-size: 17px;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: #fff;
    margin-bottom: 15px;
    position: relative;
    line-height: 1.4;
}

.f-menu{
    margin: 0;
    padding: 0;
    list-style: none;
}

.f-menu li{
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 300;
}

.f-menu li a{
    color: #bfbfbf;
}

.main-footer a:hover{
    color: #fff !important;
}


.main-footer .contact-info{
    margin-bottom: 7px;
}

.main-footer .contact-info a{
    color: #bfbfbf;
}

.footer-social-details{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 100px;
    row-gap: 20px;
    flex-wrap: wrap;
    padding: 25px 0;
} 

.footer-social-details > a{
    display: inline-block;
    color: #fff !important;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
}

.footer-social-link{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 25px;
}

.footer-social-link a{
    display: inline-block;
    color: #fff !important;
    font-size: 20px;
    line-height: 1;
}

.footer-social-link a:hover,
.footer-social-details > a:hover{
    color: var(--secondary-color) !important;
}

.main-footer .social-icons li a:hover{
    background-color: #ff6500 !important;
}

.main-footer .copyrights{
    border-top: 2px solid rgba(255,255,255,.1);
    padding: 20px 10px;
    line-height: 1.6;
    color: #bfbfbf;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.main-footer .copyrights a{
    font-weight: 700;
    color: var(--secondary-color) !important;
}

.main-footer .copyrights a:hover{
    text-decoration: underline !important;
}

/* -------------------------------- */
/* --------- BANNER STYLE --------- */
/* -------------------------------- */

.banner{
    padding: 130px 0 50px;
    background: url('../../../../uploads/2023/07/banner-bg.webp');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    position: relative;
    background-color: #fff;
    z-index: 1;
}

.banner .row{
    padding: 0;
}

.banner .row > div{
    padding: 0;
}

.banner .banner-content{
    width: 100%;
    max-width: 630px;
    margin-left: auto;
    margin-top: 70px;
    padding-left: 20px;
}

.banner .banner-content p{
    font-size: 18px;
    margin: 70px 0;
    width: 100%;
    max-width: 450px;
}

/* -------------------------------- */
/* ------ OUR SERVICES STYLE ------ */
/* -------------------------------- */

.our-services{
    background: url('../../../../uploads/2023/07/services-bg.webp');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    position: relative;
    padding-top: 50px;
}

.our-services .row{
    align-items: center;
    position: relative;
    top: 100px;
    z-index: 2;
}

.services-cards{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 25px;
}

.service-card{
    border: 2px solid #fff;
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: calc(100%/3 - 50px/3);
    padding: 15px 20px;
    box-shadow: 0 21px 54px rgba(0,0,0,0.15);
    transition: 0.3s ease;
    cursor: pointer;
}

.service-card:hover{
    border-color: var(--secondary-color);
}

.service-card .inner-layer{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    row-gap: 10px;
    min-height: 275px;
    max-height: 275px;
    overflow: hidden;
}
.service-card:hover .icon{
    display: none;
}

.service-card:hover .onHover{
    /* display: block; */
}

.service-card .icon{
    height: 40px;
    width: 40px;
    font-size: 36px;
    line-height: 1;
    color: var(--secondary-color);
    /* transition: 0.7s ease 0.7s; */
}

.service-card .service-title{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0;
    color: var(--primary-color);
    margin-top: 176px;
    transition: 0.7s linear;
}

.service-card:hover .service-title{
    margin-top: 0;
}

.service-card:hover .icon{
    /* margin-top: -40px; */
}

.service-card ul{
    margin: 0;
}

.service-card ul li{
    list-style-type: none;
    font-size: 14px;
    color: var(--primary-color);
    line-height: 1.3;
    margin-bottom: 5px;
    font-weight: 300;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 10px;
}

.service-card ul li::before{
    content: '\f111';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--secondary-color);
    font-size: 8px;
    line-height: 18px;
}

.service-card .button{
    background-image: linear-gradient(#2e5bed 58%, #39eaff );
}

.service-card .button i{
    margin: 0 0 0 5px !important;
}

.service-card:hover .button{
    display: block;
    margin: 0 auto;
    font-weight: 300;
}

/* -------------------------------- */
/* ---------- CTA STYLE ----------- */
/* -------------------------------- */

.mobile-app-cta{
    position: relative;
    padding-top: 70px;
}

.mobile-app-cta .row{
    background: var(--blue-gradient-background);
    background-size: cover;
    padding: 220px 0 180px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.mobile-app-cta > img{
    position: relative;
    z-index: 1;
    width: 100%;
    pointer-events: none;
}

.mobile-app-cta .inner-wrapper{
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.mobile-app-cta .inner-wrapper p{
    width: 90%;
    margin: 40px auto;
}

/* -------------------------------- */
/* -------- OUR WAY STYLE --------- */
/* -------------------------------- */

.struqio-way{
    padding: 100px 0;
    margin-top: -200px;
    position: relative;
    z-index: 1;
}

.struqio-way .inner-wrapper{
    width: 100%;
    max-width: 380px;
    margin: 0 auto 30px;
}

.struqio-way .image-wrapper{
    margin: 25px auto 20px;
}

.struqio-way .image-wrapper img{
    width: 100%;
}

/* -------------------------------- */
/* ---- OUR TECHNOLOGIES STYLE ---- */
/* -------------------------------- */

.our-technologies-carousel .item{
    height: 100%;
}

.our-technologies-carousel .owl-stage{
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.our-technologies-carousel .technology-card{
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.our-technologies-carousel .owl-item:not(.center) .technology-card{
    background-image: linear-gradient(50deg, rgba(0,0,0,0.8) , #fff);
}

.our-technologies-carousel .owl-item.center .technology-card{
    background: var(--blue-gradient-background);
    background-size: cover;
}

.our-technologies-carousel .owl-item.center{
    width: 650px !important;
}

.our-technologies-carousel .owl-item.center .technology-card{
    width: 100%;
    min-height: 450px;
}

.our-technologies-carousel .owl-item.center .technology-card::before,
.our-technologies-carousel .owl-item .technology-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
    display: none;
    
}

.technology-card .technology-icon{
    height: 70px;
    width: 70px;
    min-width: 70px;
    position: absolute;
    bottom: 25px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.technology-card .technology-icon.lg{
    height: 70px;
    width: 120px;
    min-width: 70px;
    column-gap: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.technology-card .technology-icon.lg img{
    width: 58px;
}

.technology-card .technology-icon:not(.lg) img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.our-technologies-carousel .owl-item:not(.center) .technology-icon{
    left: 50%;
    transform: translateX(-50%);
}

.our-technologies-carousel .owl-item.center .technology-icon{
    left: 35px;
}

.our-technologies-carousel .owl-item:not(.center) .technology-info{
    display: none;
}

.technology-info{
    width: 100%;
    max-width: 270px;
    position: absolute;
    top: 35px;
    left: 35px;
    z-index: 2;

}

.technology-info h3{
    font-size: 30px;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    font-weight: 400;
}

.technology-info p{
    font-size: 16px;
    color: #fff;
    line-height: 1.4;
    margin: 20px auto 0;
    font-weight: 200;
}

.our-technologies-carousel .owl-item .technology-card .technology-image{
    position: absolute;
}

.our-technologies-carousel .owl-item:not(.center) .tech-android .technology-image{
    width: 238px;
    top: 0;
    left: 12%;
}

.our-technologies-carousel .owl-item.center .tech-android .technology-image{
    width: 320px;
    top: 0;
    right: 0;
}

.our-technologies-carousel .owl-item:not(.center) .tech-angular .technology-image{
    width: 450px;
    top: 2%;
    left: 5%;
}

.our-technologies-carousel .owl-item.center .tech-angular .technology-image{
    width: 550px;
    bottom: -120px;
    right: -200px;
}

.our-technologies-carousel .owl-item:not(.center) .tech-reactjs .technology-image{
    width: 450px;
    top: -6%;
    left: 10%;
}

.our-technologies-carousel .owl-item.center .tech-reactjs .technology-image{
    width: 550px;
    bottom: 0px;
    right: -270px;
}

.our-technologies-carousel .owl-item:not(.center) .tech-flutter .technology-image{
    width: 300px;
    top: -9%;
    left: -22%;
}

.our-technologies-carousel .owl-item.center .tech-flutter .technology-image{
    width: 350px;
    top: 0;
    right: 0;
}

.our-technologies-carousel .owl-item:not(.center) .tech-dot-net .technology-image{
    width: 370px;
    top: 4%;
    left: 5%;
}

.our-technologies-carousel .owl-item.center .tech-dot-net .technology-image{
    width: 600px;
    right: -270px;
    bottom: -105px;
}

.our-technologies-carousel .owl-item:not(.center) .tech-mysql .technology-image{
    width: 370px;
    top: 4%;
    left: 5%;
}

.our-technologies-carousel .owl-item.center .tech-mysql .technology-image{
    width: 600px;
    right: -270px;
    bottom: -105px;
}

.our-technologies-carousel .owl-item:not(.center) .tech-mongodb .technology-image{
    width: 470px;
    top: 4%;
    left: 4%;
}

.our-technologies-carousel .owl-item.center .tech-mongodb .technology-image{
    width: 600px;
    right: -270px;
    bottom: -105px;
}

.our-technologies-carousel .owl-item:not(.center) .tech-html .technology-image{
    width: 370px;
    top: 4%;
    left: 4%;
}

.our-technologies-carousel .owl-item.center .tech-html .technology-image{
    width: 500px;
    right: -200px;
    bottom: -45px;
}

.our-technologies-carousel .owl-dots{
    background: var(--blue-gradient-background);
    margin: 25px auto 0 !important;
    display: none !important;
}

.our-technologies-carousel .owl-dots .owl-dot span,
.why-choose-us-carousel .owl-dots .owl-dot span, .values-carousel .owl-dots .owl-dot span{
    background: rgba(255,255,255,0.3) !important;
}

.our-technologies-carousel .owl-dots .owl-dot.active span,
.why-choose-us-carousel .owl-dots .owl-dot.active span, .values-carousel .owl-dots .owl-dot.active span{
    background: #fff !important;
}

/* -------------------------------- */
/* ------ OUR PROCESS STYLE ------- */
/* -------------------------------- */

.our-process{
    padding: 100px 0;
}

.our-process .image-wrapper{
    padding-top: 30px;
}

/* -------------------------------- */
/* ------ PROCESS MODEL STYLE ----- */
/* -------------------------------- */

.process-model{
    padding: 100px 0;
    background-color: #f4f7fa;
}

.process-model .row{
    align-items: center;
}

.process-model .custom-list{
    width: 100%;
    max-width: 400px;
    margin: 30px auto;
    font-size: 18px;
}

/* -------------------------------- */
/* --- CUSTOM SW APP CTA STYLE ---- */
/* -------------------------------- */

.custom-sw-app-cta{
    padding: 100px 0;
    position: relative;
}

.custom-sw-app-cta .row{
    background: var(--blue-gradient-background);
    background-size: cover;
    border-radius: 50px;
    padding: 60px 0;
    align-items: center;
}

.custom-sw-app-cta .inner-content{
    width: 100%;
    max-width: 600px;
    padding-left: 40px;
    margin: 0 auto;
}

.custom-sw-app-cta p{
    margin: 40px auto 50px;
}

.custom-sw-app-cta .button-talk{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.custom-sw-app-cta .on-mobile{
    display: none;
}

.custom-sw-app-cta .on-desktop{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 45%;
}

/* -------------------------------- */
/* ----- OUR ADVANTAGES STYLE ----- */
/* -------------------------------- */

.our-advantages {
    position: relative;
}

.advantage-images,
.advantage-images img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.advantage-images img {
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.advantage-images:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.70);
}

.our-advantages.light-overlay .advantage-images:after {
    background: rgba(255,255,255,0.6);
}

.advantage-box {
    position: relative;
    z-index: 1;
    padding: 90px 60px;
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    border-right: 1px solid rgba(255, 255, 255, .6);
    min-height: 470px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.our-advantages.light-overlay .advantage-box {
    border-bottom: 1px solid rgba(0,0,0,0.7);
    border-right: 1px solid rgba(0,0,0,0.7);
}

.advantage-box:not(.first) {
    justify-content: center;
    cursor: pointer;
}

.advantage-box:not(.first):hover {
    background: rgba(30, 130, 254, 0.8);
    -webkit-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    transition: .2s ease-in;
}

.advantage-box:not(.first) .content {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
    align-items: center;
    justify-content: flex-start;
}

.advantage-box:not(.first):hover .content {
    align-items: flex-start;
}

.advantage-box .heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 20px;
}

.advantage-box .heading .icon{
    height: 60px;
    width: 60px;
    text-align: center; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.advantage-box:hover .heading img{
    filter: brightness(0) invert(1);
}

/* .advantage-box:hover .heading img:not(.onHover),
.advantage-box .heading .onHover {
    display: none;
}

.advantage-box:hover .heading .onHover {
    display: block;
} */

.advantage-box:not(.first):hover .main-heading span,
.advantage-box:not(.first):hover .sub-heading span {
    color: #fff;
}

.advantage-box .heading .sub-heading{
    font-size: 28px;
}

.our-advantages.light-overlay .advantage-box:hover .sub-heading{
    color: #fff;
}

.advantage-box .heading .sub-heading span {
    display: block;
}

.advantage-box p{
    color: #fff;
}

.advantage-box.first p {
    width: 100%;
    max-width: 700px;
    font-size: 18px;
    line-height: 1.3;
    margin-top: 40px;
}

.advantage-box:not(.first) p {
    font-size: 15px;
    width: 100%;
    max-width: 300px;
    max-height: 0px;
    overflow: hidden;
    opacity: 0;
    margin: 0;
}

.our-advantages.light-overlay .advantage-box.first p {
    color: var(--primary-color);
}

.advantage-box:not(.first):hover p {
    max-height: 11rem;
    -webkit-transition: max-height .7s ease-in-out, opacity .7s ease-in-out .2s;
    -o-transition: max-height .7s ease-in-out, opacity .7s ease-in-out .2s;
    transition: max-height .7s ease-in-out, opacity .7s ease-in-out .2s;
    opacity: 1;
}

.advantage-box:not(.first):hover p {
    display: block;
}

/* -------------------------------- */
/* --------- RECENT BLOGS --------- */
/* -------------------------------- */

.recent-blogs{
    padding: 100px 0;
}

.blog-tags{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px;
}

.blog-tags a{
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 400;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 30px;
    text-transform: capitalize;
}

.blog-tags a:hover{
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
    color: #fff;
}

.blog-recent .blog-meta{
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
}

.blog-recent .blog-thumbnail{
    display: block;
    transition: all 0.3s ease-out;
    border-radius: 30px;
    overflow: hidden;
    margin-right: 7px;
    margin-bottom: 7px;
    box-shadow: 7px 7px 0px var(--secondary-color);
    font-size: 0;
    line-height: 0;
}

.blog-recent .blog-thumbnail::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    transition: all 1s ease-out;
}

.blog-recent .blog-thumbnail img{
    width: 100%;
    object-fit: cover;
    display: block;
    height: 100% !important;
    transition: all 1s ease-out;
}

.blog-recent:hover .blog-thumbnail img{
    transform: scale(1.05);
}

.blog-recent .blog-title{
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: 0.3px;
    font-weight: 600;
    width: 100%;
    min-height: 60px;
    margin: 10px 0;
}

.blog-recent .blog-title a{
    color: #2f2f2f !important;
}

.blog-recent .blog-title a strong{
    font-weight: 600 !important;
}

.blog-recent .blog-by,
.blog-recent .blog-date,
.single-blog .blog-by{
    font-size: 14px;
    color: #404040;
    line-height: 1.7;
    margin-bottom: 10px;
}

.blog-recent .blog-by a,
.blog-recent .blog-date strong{
    color: #000;
    text-transform: capitalize;
    font-weight: 600;
}

.blog-by a{
    pointer-events: none;
}

.single-blog .blog-by a{
    text-transform: capitalize;
    font-weight: 600;
}

.blog-meta-info{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 30px;
    row-gap: 10px;
    flex-wrap: wrap;
    margin: 15px auto 40px;
}

.blog-meta-info p{
    margin: 0;
    font-weight: 400;
}

.blog-meta-info p i{
    color: var(--secondary-color);
    margin-right: 7px;
}

.blog-meta-info p a{
    pointer-events: none;
}

/* -------------------------------- */
/* -------- CLIENT REVIEWS -------- */
/* -------------------------------- */

.reviews{
    position: relative;
    width: 100%;
    height: auto;
    padding: 50px 0 100px;
}

.reviews .main-heading{
    margin-bottom: 60px;
}

.reviews .reviews-wrapper{
    background: #131630;
    border-radius: 50px;
    padding: 50px;
}

.testimonial-box{
    text-align: left;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 30px;
    row-gap: 15px;
    position: relative;
}

.testimonial-box .left,
.testimonial-box .right{
    width: 100%;
}

.testimonial-box .left{
    max-width: calc(100% - 430px)
}

.testimonial-box .right{
    max-width: 400px;
    position: relative;
}

.testimonial-box .right::before{
    content: '';
    height: 100%;
    width: 3px;
    background: var(--secondary-color);
    position: absolute;
    top: 0;
    left: -15px;
}

.testimonial-box .ratings{
    color: yellow;
    margin: 20px auto 10px;
    font-size: 14px;
}

.testimonial-box .ratings::before{
    content: "\f005\f005\f005\f005\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.testimonial-box p{
    color: #fff;
    font-size: 15px;
    width: 100%;
    max-width: 550px;
}

.testimonial-box .testimonial-avatar{
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.testimonial-box .inner-wrapper{
    width: 100%;
    max-width: 300px;
    margin: 0;
    margin-left: auto;
    text-align: center;
}

.testimonial-box .customer-detail{
    margin: 20px auto;
    font-weight: 500;
    color: #fff;
}

.testimonial-box .customer-detail span{
    color: rgba(255, 255, 255, .8);
    font-weight: 300;
}

.owl-dots{
    background: #2b2a3b;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 7px;
    width: max-content;
    margin: 50px auto 0 !important;
    border-radius: 20px;
    padding: 7px 15px;
}

.owl-dot span{
    background: #878787 !important;
    height: 8px !important;
    width: 8px !important;
    margin: 0 !important;
    display: block;
    border-radius: 10px;
}

.owl-dot.active span{
    background: #fff !important;
}

/* -------------------------------- */
/* --------- CLIENT LOGOS --------- */
/* -------------------------------- */

.clients{
    background: #080d10;
    padding: 45px 20px;
}

.clients .inner-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.clients .inner-wrapper > div{
    width: 100%;
    max-width: 17%;
}

/* -------------------------------- */
/* ------ ONLINE ENQUIRY FORM ----- */
/* -------------------------------- */

.online-enquiry{
    background: #080d10;
    padding: 75px 20px;
}

.online-enquiry .custom-row{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 30px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.online-enquiry .custom-row .column:first-child{
    width: 100%;
    max-width: 300px;
}

.online-enquiry .custom-row .column:last-child{
    width: 100%;
    max-width: calc(100% - 330px);
}

.online-enquiry .contact-detail{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-bottom: 35px;

}

.online-enquiry .contact-detail i{
    font-size: 24px;
    color: var(--secondary-color);
    line-height: 1;
    margin-bottom: 10px;
}

.online-enquiry .contact-detail span{
    font-size: 18px;
    color: #fff;
    line-height: 1;
    font-weight: 400;
}

.online-enquiry .contact-detail small{
    font-size: 14px;
    color: #8d9192;
    line-height: 1.3;
    font-weight: 300;
}

.social-links{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 15px;
}

.social-links a{
    height: 35px;
    width: 35px;
    text-align: center;
    color: #fff;
    background: transparent;
    line-height: 35px;
    border: 1px solid #313639;
    border-radius: 8px 0 8px 0;
}

.social-links a:hover{
    background: #fff;
    color: #313639;
}

.enquiry-form-wrapper{
    background: #161e20;
    border-radius: 30px 0 30px 0;
    padding: 45px;
    height: 100%;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, 
    rgba(17, 17, 26, 0.1) 0px 8px 24px, 
    rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

.enquiry-form-wrapper h4{
    font-weight: 300;
    line-height: 1.4;
    font-size: 24px;
    margin-bottom: 0;
    color: #fff;
}

.enquiry-form-wrapper p{
    font-weight: 400;
    line-height: 1.4;
    font-size: 16px;
    margin: 20px auto 40px;
    color: #8d9192;
}

.wpcf7-form p{
    margin: 0 !important;
    position: relative;
}

.wpcf7-form br{
    display: none !important;
}

.wpcf7-form .wpcf7-form-control-wrap{
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.enquiry-form-wrapper label{
    display: block;
    width: 100%;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #8d9192;
}

.enquiry-form-wrapper .form-control{
    border-radius: 0;
    min-height: 45px;
    outline: none;
    box-shadow: none;
    border: 1px solid transparent;
    margin-top: 10px;
    padding: 7px 15px;
}

.enquiry-form-wrapper .phone-num .iti--allow-dropdown{
    margin-top: 10px;
}

.enquiry-form-wrapper .iti__arrow{
    border-top-color: #555;
}

.enquiry-form-wrapper textarea{
    resize: none;
    height: 130px;
}

.enquiry-form-wrapper .form-control:focus{
    border-color: var(--secondary-color);
}

.wpcf7-form .wpcf7-form-control[type="submit"]{
    padding: 17px 20px !important;
    border-radius: 10px !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 1;
    min-width: 130px;
    text-align: center;
    border: none;
    background-image: linear-gradient(294deg, #2e5bed 58%, #39eaff );
    color: #fff ;
    border: 0 !important;
}

.wpcf7-form .wpcf7-form-control[type="submit"]::before{
    content: '\f1d8';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    color: #fff;
    margin-right: 10px;
    line-height: 0;   
}

.wpcf7-form .wpcf7-spinner{
    position: absolute;
    top: 0;
    left: 0;
}

.enquiry-form-wrapper .wpcf7-not-valid-tip {
    color: #fff;
    font-size: 1em;
    font-weight: normal;
    display: block;
    margin-top: 10px;
}

.database-banner{
    padding: 70px 0 0;
}
.dedicated-banner{
    padding: 150px 0 0;
}


/* -------- FULL CYCLE -------- */

.full-cycle{
    background: var(--common-background-color);
    padding: 100px 0;
}

.full-cycle .row > div{
    padding-top: 70px;
}

.icon-card{
    border-radius: 30px;
    background: #fff;
    box-shadow: 21px 21px 54px rgba(0,0,0,0.10);
    height: 100%;
    padding: 65px 30px 40px;
    text-align: center;
    position: relative;
}

.icon-card .icon{
    height: 90px;
    width: 90px;
    border-radius: 50%;
    border: 3px solid var(--secondary-color);
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
}

.icon-card:hover .icon{
    background: #fff;
}

.icon-card img{
    transform: scale(0.8);
}

.icon-card:hover img{
    filter: brightness(0);
}

.icon-card .small-heading{
    display: block;
    margin: 0 auto 25px;
}

.icon-card p{
    font-size: 13px;
    margin-bottom: 0;
}

.icon-card:hover{
    background: var(--secondary-color);
}

.icon-card:hover strong,
.icon-card:hover p{
    color: #fff;
}


/* -------- SOLUTIONS TAB -------- */

.solutions{
    padding: 100px 0;
}

.solutions-tab > .row > div{
    padding: 0 15px !important;
}

.solutions-tab .nav{
    position: relative;
    margin-right: 13px;
}
.solutions-tab .tab-content{
    position: relative;
    height: 100%;
}

.solutions-tab .tab-content::before{
    content: '';
    width: 2px;
    height: 100%;
    background-color: #d0d0d0;
    position: absolute;
    left: 0;
    top: 0; 
}

.solutions-tab .nav-pills .nav-link{
    border: none;
    color: #242f51;
    padding: 15px 40px 15px 20px;
    text-transform: capitalize;
    border-radius: 0;
    margin-top: 1px;
    display: block;
    line-height: 1;
    box-shadow: none;
    font-size: 18px;
    font-weight: 500;
    background-color: #f3f3f3;
    transition: none;
    margin-right: 2px;
    text-align: left;
}

.solutions-tab .nav-pills .nav-link.active,
.solutions-tab .nav-pills .nav-link:hover{
    background: var(--secondary-color);
    color: #fff;
    position: relative;
    font-weight: 400;
}

.solutions-tab .nav-pills .nav-link.active::after,
.solutions-tab .nav-pills .nav-link:hover::after{
    content: '';
    width: 10px !important;
    height: 10px !important;
    right: -13px !important;
    border-top: 10px solid transparent !important;
    border-left: 13px solid var(--secondary-color);
    border-bottom: 10px solid transparent !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.solutions-tab .tab-content{
    padding: 0 15px 30px 30px;
}

.solutions-tab .tab-content h3{
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.solutions-tab .tab-content p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--primary-color);
    width: 100%;
    max-width: 600px;
}

.solutions-tab .service-icon{
    margin-bottom: 30px;
    width: max-content;
    padding-top: 30px;
}

/* ------ Responsive Accordion ------ */

.responsive-accordion .accordion-body h3{
    font-size: 28px;
    color: var(--dark-blue);
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.responsive-accordion .accordion-body h3{
    font-size: 20px;
}

.responsive-accordion .accordion-body p{
    margin-bottom: 20px;
}

.responsive-accordion .accordion-body p{
    font-size: 14px;
}

.responsive-accordion .accordion-item{
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}

.responsive-accordion .accordion-header button{
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 500;
    min-height: 51px;
}

.responsive-accordion .accordion-header button[aria-expanded="true"]{
    background: var(--secondary-color);
    color: #fff;
}

.responsive-accordion .accordion-header button::after{
    display: none;
}

.responsive-accordion .icon{
    width: 30px;
    margin-right: 15px;
    text-align: center;
}

.responsive-accordion .accordion-button[aria-expanded="false"] img{
    filter: brightness(0);
}

.responsive-accordion .accordion-button[aria-expanded="true"] img{
    filter: brightness(0) invert(1);
}

.responsive-accordion .icon img{
    width: 100%;
}

.responsive-accordion .accordion-body{
    padding: 30px 15px;
    border-top-color: #ddd;
    text-align: center;
}

.responsive-accordion .custom-list li{
    font-size: 14px;
    text-align: left;
}

/* -------- STATISTICS -------- */

.statistics{
    background-image: url(../../../../uploads/2023/07/statistics-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #fff;
    padding: 100px 0;
}

.statistics .row {
    row-gap: 30px;
}

.statistics p{
    color: #fff;
    font-weight: 500;
    font-size: 20px;
}

.statistics strong{
    display: block;
    margin-bottom: 0px;
    font-weight: 700;
    color: #fff;
    font-size: 80px;
    line-height: 1;
}

.statistics strong::after{
    content: "+";
}


/* -------- Why Us ------- */

.why-us{
    padding: 100px 0;
}

.image-cards{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}

.image-cards .img-card{
    width: 100%;
    max-width: calc(100%/3 - 20px);
    padding: 0 10px;
    text-align: center;
}

.image-cards .img-card .image-wrapper{
    padding: 0 12px;
    margin: 0 auto 30px;
}

.image-cards .img-card p{
    padding: 0 10px;
    margin: 10px auto;
    font-weight: 300;
    font-size: 14px;
    color: var(--primary-color);
}

/* -------- TEcH EXPERTISE -------- */

.tech-expertise{
    background-image: url(../../../../uploads/2023/07/our-experties-bg.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;   
    padding: 100px 0;
}

.experise-tabs{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 25px;
    margin-top: 50px;
}

.experise-tabs .nav-tabs{
    border-bottom: 0;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 270px;
    gap: 10px;
}

.experise-tabs .nav-item{
    width: 100%;
}
.experise-tabs .nav-link{
    color: #88a0b1;
    background: #0c273b;
    font-size: 16px;
    border-radius: 8px;
    width: 100%;
    text-align: left;
    border: 0;
    box-shadow: none;
    padding: 20px 22px;
    font-weight: 500;
}

.experise-tabs .nav-link:hover,
.experise-tabs .nav-link.active{
    color: #fff;
    background: var(--secondary-color);
    font-weight: 400;
}

.experise-tabs .tab-content{
    width: 100%;
    max-width: calc(100% - 310px);
}

.experise-tabs .tabs-gallery{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    list-style: none;
    gap: 10px;
}

.experise-tabs .tab-inner-content{
    width: 100%;
    max-width: 700px;
}

.experise-tabs h3{
    font-size: 30px;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.experise-tabs p{
    margin-bottom: 20px;
    line-height: 1.5;
    font-weight: 200;
    color: #fff;
}

.dash-list{
    list-style: none;
}

.dash-list li{
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
    position: relative;
    padding-left: 30px;
    line-height: 1.5;
    font-weight: 200;
}

.dash-list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    background: var(--secondary-color);
    height: 6px;
    width: 6px;
}

/* -------- CUSTOM DEVELOPMENT -------- */

.custom-development{
    background-image: url(../../../../uploads/2023/07/custom-development-bg.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;   
    padding: 100px 0;
}

.custom-development-cards{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
}

.custom-development-card{
    background: #fff;
    padding: 40px 15px;
    color: var(--primary-color);
    text-align: center;
}

.custom-development-card:hover{
    background: url(../../../../uploads/2023/07/custom-development-card-bg.webp);
    background-position: top center;
    background-size: cover;
    color: #fff;
}

.custom-development-card:hover p{
    color: #fff;
}

.custom-development-card strong{
    display: block;
    min-height: 75px;
}

.custom-development-card p{
    margin: 0;
    font-size: 14px;
    font-weight: 300;
}

.custom-development .inner-content{
    width: 100%;
    max-width: 600px;
}

/* -------- SERVICES CTA -------- */

.inner-service-cta .row{
    position: relative;
    z-index: 1;
}

.inner-service-cta .heading-box p{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.inner-service-cta .button{
    padding-left: 35px;
    padding-right: 35px;
}

.inner-service-cta .button i{
    margin-right: 15px;
}


.dNet-cta{
    background-image: url(../../../../uploads/2023/07/net-development-cta.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.web-dev-cta{
    background-image: url(../../../../uploads/2023/07/web-dev-cta-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0;
    position: relative;
}

.web-dev-cta::before,
.db-cta::before, 
.software-outsourcing-cta-banner::before,
.cloud-service-cta::before, .quality-assurance-cta::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

.dNet-cta .inner-content{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 20px;
}

.dNet-cta .image-wrapper img{
    width: 100%;    
}

.mobile-app-service-cta {
    background-image: url(../../../../uploads/2023/07/mobile-app-development-cta-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 70px 0 50px;
}

.custom-sw-dev-cta{
    background-image: url(../../../../uploads/2023/07/custom-sw-development-cta-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}

.enterprise-sw-dev-cta{
    background-image: url(../../../../uploads/2023/07/enterprise-sw-development-cta-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
}

.custom-sw-dev-cta .inner-content ,
.enterprise-sw-dev-cta .inner-content,
.qa-and-testing-cta .inner-content {
    padding-left: 20px;
    width: 100%;
    max-width: 650px;
    margin-left: auto;
}

.enterprise-sw-dev-cta .image-wrapper img,
.qa-and-testing-cta .image-wrapper img{
    width: 90%;
}

.db-cta{
    background-image: url(../../../../uploads/2023/07/database-development-cta-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
    position: relative;
}

.qa-and-testing-cta{
    background-image: url(../../../../uploads/2023/07/qa-and-testing-cta-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
    position: relative;
}

/* -------- WHY CHOOSE US -------- */

.why-choose-us{
    padding: 100px 0 30px;
}

.why-choose-us .carousel-wrapper {
    width: 90%;
    margin-left: auto;
}

.why-choose-us .carousel-wrapper .owl-stage{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.why-choose-us .carousel-wrapper .item{
    padding: 15px;
}

.why-choose-us-carousel{
    position: relative;
}

.why-choose-us-carousel .owl-nav{
    text-align: left;
    padding-left: 10px;
}

.why-choose-us-carousel .owl-nav button[class*=owl-]{
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    width: 40px;
    height: 40px;
    line-height: 1;
    text-align: center;
    border-radius: 50px;
    font-size: 15px;
    margin: 0 5px;
    padding: 0;
}

.why-choose-us-carousel .owl-nav button[class*=owl-]:hover{
    background: var(--blue-gradient-background);
    background-size: cover;
}

.why-choose-us-carousel .feature{
    background-color: #fff;
    border-radius: 30px;
    padding: 30px 15px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    /* box-shadow: 21px 21px 50px rgba(0,0,0,0.10); */
    text-align: center;
    color: var(--primary-color);
    cursor: pointer;
    border: 3px solid #fff;
}

.cloud .why-choose-us-carousel .feature{
    min-height: 270px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.why-choose-us.cloud .small-heading{
    margin-bottom: 0;
}

.why-choose-us-carousel .feature:hover strong{
    color: #fff;
}

.why-choose-us-carousel .feature p{
    font-size: 14px;
    margin: 20px auto 0;
    width: 90%;
}

.why-choose-us-carousel .feature:hover{
    background: var(--blue-gradient-background);
    color: #fff;
    border-color: var(--secondary-color);
}

.why-choose-us-carousel .feature:hover p{
    color: #fff;
}

.why-choose-us-carousel .owl-dots, .values-carousel .owl-dots {
    background: var(--secondary-color);
    margin: 0px auto 0 !important;
}

/* -------- INDUSTRIES WE SERVE -------- */

.industries-we-serve{
    background: var(--common-background-color);
    padding: 60px 0;
}

.industries{
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 50px auto;
}

.industries .industry{
    background: #fff;
    text-align: center;
    width: 100%;
    max-width: calc(100%/4 - 23px);
    padding: 40px 20px 60px;
    min-height: 155px;
    transition: all 0.3s ease-in-out;
    border-radius: 30px;
    box-shadow: 21px 21px 54px rgba(0,0,0,0.10);
}

.industries .industry:hover{
    background-image: url('../../../../uploads/2023/07/blue-gradient.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.industries .industry .icon-box{
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 20px;
}

.industries .industry:hover img{
    filter:brightness(0) invert(1);
}

.industries .industry p{
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.industries .industry:hover p{
    color: #fff;
}

/* -------- DEVELOPMENT PROCES -------- */

.development-process{
    background-image: url('../../../../uploads/2023/07/development-process-bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    padding: 60px 0;
}

.process-steps{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 70px;
    position: relative;
}

.process-steps::before{
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: #98c2ff;
    z-index: 0;
}

.process-step{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: calc(100%/6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    color: #fff;
    column-gap: 25px;
    row-gap: 15px;
}

.process-step:nth-child(even){
    flex-direction: column-reverse;
}

.process-step .step-box,
.process-step .step-number{
    height: 80px;
    width: 80px;
}

.process-step .step-number{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.process-step:nth-child(even) .step-number{
    align-items: flex-end;
}

.process-step .step-connector{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 6px solid var(--secondary-color);
    box-shadow: 0 0 12px rgba(0,0,0,0.35);
}

.process-step p{
    text-transform: uppercase;
    font-size: 13px;
    line-height: 1;
    margin-top: 20px;
    margin-bottom: 0;
    color: #fff;
    font-weight: 400;
}

.process-step .icon{
    margin: 0 auto;
}

.bg-process_plan_icon {
    width: 40px; height: 41px;
    background: url('../../../../uploads/2023/07/process-icons.webp') -2px -2px;
}

.bg-process_design_icon {
    width: 42px; height: 42px;
    background: url('../../../../uploads/2023/07/process-icons.webp') -46px -2px;
}

.bg-process_develop_icon {
    width: 42px; height: 42px;
    background: url('../../../../uploads/2023/07/process-icons.webp') -92px -2px;
}

.bg-process_test_icon {
    width: 48px; height: 42px;
    background: url('../../../../uploads/2023/07/process-icons.webp') -233px -2px;
}

.bg-process_deploy_icon {
    width: 45px; height: 42px;
    background: url('../../../../uploads/2023/07/process-icons.webp') -184px -2px;
}

.bg-process_maintain_icon {
    width: 42px; height: 42px;
    background: url('../../../../uploads/2023/07/process-icons.webp') -138px -2px;
}


/* MKT - 6 Css */

.why-choose-struqtio{
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--common-background-color);
    /*padding: 100px 50px;*/ padding: 100px 0 50px;
}

.why-choose-struqtio::before{
    position: absolute;
    width: 600px;
    height: 650px;
    background: url(../../../../uploads/2023/07/why-choose-left.webp) no-repeat;
    left: 0;
    bottom: 7%;
    content: "abcd";
    font-size: 0;
    background-size: contain;
    z-index: 0;
}

.why-choose-struqtio::after{
    position: absolute;
    width: 316px;
    height: 316px;
    background: url(../../../../uploads/2023/07/bottom-service-shape.webp) no-repeat;
    right: 38%;
    top: -120px;
    content: "abcd";
    font-size: 0;
    background-size: cover;
    z-index: 0;
}

.offshore-development-section{
    position: relative;
    width: 100%;
    height: auto;
    padding: 50px 0;
}

.service-cta{
    position: relative;
    background: var(--blue-gradient-background);
    background-size: cover;
    padding: 50px 0;
}

.service-cta p, .custom-software-services .service-card:hover .service-title, .custom-software-services .service-card:hover p, .custom-software-services .service-card:hover .icon{
    color: #fff;
}

.custom-software-services .service-card:hover{
    background: var(--blue-gradient-background);
    background-size: cover;
}

.custom-software-services{
    position: relative;
    width: 100%;
    height: auto;
    padding: 100px 0;
    background-color: var(--common-background-color);
}

.custom-software-services::before{
    position: absolute;
    width: 400px;
    height: 70%;
    background: url(../../../../uploads/2023/07/right-center.webp) no-repeat;
    right: 0;
    top: 20%;
    content: "abcd";
    font-size: 0;
    background-size: contain;
}

.custom-software-services::after{
    position: absolute;
    width: 20%;
    height: 32%;
    background: url(../../../../uploads/2023/07/bottom-left.webp) no-repeat;
    left: 0;
    bottom: 0;
    content: "abcd";
    font-size: 0;
}

.custom-software-services .service-card .onHover, .custom-software-services .service-card:hover .icon {
    display: block;
}

.custom-software-services .service-card .service-title{
    margin-top: 0;
}

.custom-software-services .service-card .inner-layer {
    min-height: 260px;
    max-height: 260px;
}

.custom-software-services .service-card:hover .icon-laptop-mobile{
    background: url('../../../../uploads/2023/07/icon-laptop-mobile-white.webp') no-repeat;
}
.custom-software-services .service-card:hover .icon-third-party{
    background: url('../../../../uploads/2023/07/third-party-integration-hover.webp') no-repeat;
}

.br-line{
    border-right: 1px solid #b4b8bc;
}

.approach-section{
    position: relative;
    width: 100%;
    height: auto;
    padding: 50px 0;
}

.approach-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 25px;
    align-items: center;
}

.approach-left {
    border: 2px solid #fff;
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: calc(100%/3.5 - 50px/3);
    padding: 15px 0px;
}

.approach-mid {
    border: 2px solid #fff;
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: calc(100%/2.5 - 50px/3);
    padding: 15px 0;
}

.approach-right {
    border: 2px solid #fff;
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: calc(100%/3.5 - 50px/3);
    padding: 15px 20px;
}

.bullet-list{
    margin: 0;
    padding: 0;
    list-style: none;
}

.bullet-list li{
    margin: 15px 0;
}

.approach-left .bullet-list li{
    position: relative;
    padding-right: 20px;
    text-align: right;
}

.approach-left .bullet-list li::after{
    content: "abd";
    font-size: 0;
    background: #2986f0;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 0;
    top: 9px;
}

.approach-right {
    border: 2px solid #fff;
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: calc(100%/3.5 - 50px/3);
    padding: 15px 0;
}

.approach-right .bullet-list{
    margin: 10px 0px;
    position: relative;
    padding-left: 20px;
}

.approach-right .bullet-list li{
    position: relative;
    padding-left: 20px;
}

.approach-right .bullet-list li::before{
    content: "abd";
    font-size: 0;
    background: #2986f0;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 9px;
}

.icon-laptop-mobile{
    width: 40px;
    height: 32px;
    background: url(../../../../uploads/2023/07/icon-laptop-mobile.webp) no-repeat;
}

.icon-third-party{
    width: 40px;
    height: 32px;
    background: url(../../../../uploads/2023/07/third-party-integration.webp) no-repeat;
}

.high-zindex{
    z-index: 9;
    position: relative;
}

.new-age-background{
    position: relative;
    width: 100%;
    height: auto;
    background: url(../../../../uploads/2023/07/new-age-background.webp) no-repeat center top;
    padding: 100px 0 0;
    background-size: 100% 80%;
}

.new-age-background p{
    color: #fff;
}

.new-age-background img{
    margin-top: 30px;
}

.service-banner .banner-content p {
    margin: 40px 0;
}

.why-choose-white-box {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.22);
    padding: 50px;
  }

  .handshake-image{
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.22);
  }

  .buildings-image{
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.22);
  }

  .why-choose-left-image{
    width: 100%;
  }

  .white-box-overlap{
    margin-top: -31%;
    margin-bottom: 15%;
  }

  .why-choose-struqtio .row > div{
    padding: 0;
  }
  

.why-choose-rite{
    /*max-width: 505px;*/
    margin: 0 0 0 30px;
    padding: 0 30px;
}

.why-choose-struqtio .row > div.why-choose-buildings-image{
    padding-left: 20px;
}

/*** About Page ***/

.about-banner{
    position: relative;
    width: 100%;
    height: auto;
    background: url('../../../../uploads/2023/07/about-banner.webp') no-repeat center;
    padding-top: 200px;
    min-height: 750px; background-size: cover;
}

.about-banner .heading-box{
    max-width: 620px;
    margin: 0 auto;
}

.effective-solution-wrapper{
    position: relative;
    width: 100%;
    height: auto;
    padding: 50px 0;
}

.effective-solution-wrapper .main-heading{
    margin-bottom: 40px;
}

.dark-box{
    background: #051826;
    border-radius: 32px;
    position: relative;
    width: 100%;
    height: 199px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.gradient-box{
    border-radius: 32px;
    position: relative;
    width: 100%;
    height: 199px;
    background-image: linear-gradient(294deg, #2e5bed 58%, #39eaff );
    color: #fff;
    align-items: center;
    display: flex;
    justify-content: center;
}

.dark-box p, .gradient-box p{
    font-size: 71px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    margin: 0;
    line-height: 51px;
}

.dark-box p span, .gradient-box p span{
    display: block;
    font-weight: 300;
    font-size: 16px;
    line-height: 30px;
}

.dark-box::after{
    position: absolute;
    bottom: -160px;
    left: 50%;
    background: url(../../../../uploads/2023/07/flag-arrow.webp) no-repeat;
    content: "abcd";
    font-size: 0;
    width: 194px;
    height: 151px;
}

.uae-map{
    width: 80%;
    margin: 20px auto 0;
}

.effective-solution-right img{
    margin-bottom: 30px;
}

.effective-solution-right .button{
    margin-top: 20px;
}
.talent-background{
    position: relative;
    background: url('../../../../uploads/2023/07/development-process-bg.webp') no-repeat center top;
    width: 100%;
    height: auto;
    padding: 100px 0;
    background-size: 100% 72%;
}

.talent-background .heading-box p{
    color: #fff;
}

.talent-background .service-card {
    max-width: calc(100%/4 - 50px/2.6);
}

.talent-background .service-card .service-title{
    margin-top: 0;
    width: 100%;
}

.talent-background .service-card .inner-layer {
    min-height: 270px;
    text-align: center;
    justify-content: center;
}

.talent-background .services-cards {
    margin-top: 40px;
}

.mission-vision-wrapper{
    margin-bottom: 100px;
}

.mission-vission-button{
    background: #d0e6f5;
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 0;
    font-size: 30px;
    border: none;
    border-radius: 20px;
    text-align: left;
    padding: 15px 20px;
}

.mission-vission-button:after{
    position: absolute;
    content: "\2b";
    width: 20px;
    height: 20px;
    right: 20px;
}

.mission-vission-button:not(.collapsed)::after{
    content: "-";
}

.mission-vision-wrapper h3{
    margin: 20px 0;
}

.mission-vision-content{
    background: #fff;
    border: 1px solid #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 21px 54px rgba(0,0,0,0.15);
    padding: 20px;
    height: 100%;
}

.values-background{
    background-image: linear-gradient(294deg, #2e5bed 58%, #39eaff );
    border-radius: 25px 25px 0 0;
    z-index: 9;
    position: relative;
}

.cube{
    margin-top: -70px;
    margin-bottom: -70px;
}

.values-background .main-heading{
    padding: 50px;
}

.values-item-wrapper{
    position: relative;
    background: #ecf3ff;
    padding: 100px 20px 20px;
    border-radius: 20px;
}

.values-item-wrapper h5{
    margin: 20px 0;
}

.values-carousel img{
    width: auto !important;
}
/*** About Page End ***/

/** Contact Page **/

.inner-banner{
    padding: 250px 0 100px;
    background: url(../../../../uploads/2023/07/contact-us-banner.webp);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    position: relative;
    z-index: 1;
    width: 100%;
}

.inner-banner .heading-box{
    margin: 0 auto;
}

.page-id-173 .online-enquiry {
    background: #eef9fa;
    box-shadow: 0 0; padding-bottom: 100px;
}

.page-id-173 .enquiry-form-wrapper {
    /*background: transparent;*/
}

.page-id-173 .online-enquiry .contact-detail span, 
.page-id-173 .enquiry-form-wrapper h4, 
.page-id-173 .social-links a {
    color: var(--secondary-color);
}

.page-id-173 .social-links a {
    border-color: var(--secondary-color);
}

.page-id-173 .social-links a:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

/** Contact Page End **/

/** Dedicated **/

.dedicated-team-cta{
    background-image: url(../../../../uploads/2023/07/dedicated-development-team-cta.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
    position: relative;
}
/** **/

/** Privacy **/

.privacy-banner{
    background: url('../../../../uploads/2023/07/privacy-banner.webp') no-repeat center top;
    padding-bottom: 400px;
    background-size: cover;
}

/** Privacy End **/

/** Software Ousourcing CTA **/

.software-outsourcing-cta{
    background-image: url(../../../../uploads/2023/07/software-outsourcing-cta.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0;
    position: relative;
}

/** Software Ourcing CTA End **/

/**  Blog Page **/

.blog-banner {
    background: url(../../../../uploads/2023/07/blog-banner.webp) no-repeat center top !important;
    position: relative;
}

.blog-banner::before{
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to top, #fff, rgba(255,255,255,0));
}

.category-banner h1 ul{
    display: inline-block;
    list-style-type: none;
    margin: 0 !important;
}

.category-banner h1 ul li a{
    pointer-events: none;
    color: var(--secondary-color) !important;
}

.second-banner {
    color: #fff;
    text-align: center;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.second-banner .vertical-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.min-600 {
    min-height: 600px;
}

.min-400 {
    min-height: 400px;
}

.search-banner h1{
    font-size: 36px;
    color: var(--primary-color);
}

.search-banner h1 span{
    display: block;
}

.no-blog-found .page-content p{
    font-size: 17px;
    color: red;
    margin: 50px auto;
    font-weight: 500;
}

.search-bar-box{
    background-color: #fff;
    padding: 30px;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.26);
    margin-top: -90px;
    position: relative;
    z-index: 2;
}

.search-bar-box h2{
    color: #000;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 20px;
    text-transform: capitalize;
    line-height: 1;
}

.search-bar-box .input-group{
    border: 1px solid  #bebebe;
    border-radius: 0 !important;
    background-color: #f3f3f3;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.search-bar-box .form-control{
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent;
    border: 0 !important;
    outline: none !important;
    padding-left: 20px;
    height: 45px;
    width: 100%;
    max-width: calc(100% - 170px);
    font-weight: 400;
    line-height: 1;
    color: #000;   
}

.search-bar-box .form-control::placeholder{
    opacity: 0.7;
}

.search-bar-box input[type="submit"]{
    text-transform: uppercase;
    font-weight: 500;
    width: 100%;
    max-width: 170px;
    background-color: var(--secondary-color);
    color: #fff;
    font-size: 14px;
    border: 0 !important;
    border-radius: 0;
}

.search-bar-box input[type="submit"]::before{
    content: '\f002';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 16px;
    color: #fff;
}

.blogs{
    padding: 70px 0;
}

.blogs .row{
    margin: 0 auto !important;        
}

.blogs .no-padding{
    padding: 0 !important;
}

.blogs-listing .blog{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 30px;
}

.blogs-listing .blog-header{
    width: 100%;
    max-width: calc(50% - 30px);
}

.blogs-listing .read-more{
    display: inline-block !important;
}

.blogs-listing .blog-info{
    display: inline-block;
    width: 100%;
    max-width: 50%;
}

.blogs-listing .blog-info .read-more,
.job-description .entry-title,
nav.pagination .next,
nav.pagination .prev {
    display: none !important;
}

.blogs-listing .blog-info p{
    margin: 0;
}

.blogs-listing .blog-title{
    font-size: 24px;
    margin: 15px auto;
}

.blogs-listing .blog-info p a{
    font-weight: 500;
    color: #000;
}

.blogs-listing .blog-info p a:hover{
    color: var(--secondary-color);
    text-decoration: none;
}

.blogs-listing .blog-title a{
    color: var(--primary-color);
}

.blogs-listing .blog-title a:hover{
    color: var(--secondary-color);
}

.blogs-listing .blog-by{
    color: var(--primary-color);
    text-transform: capitalize;
}

.blogs-listing .blog-by a{
    font-weight: 700 !important;
}

/* Blog Sidebars */

.blog-sidebar{
    height: 100%;
    width: 100%;
}

.blog-sidebar .inner-layer{
    padding: 20px;
    margin-bottom: 25px;
    color: var(--dark-blue);
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 20px;
}

.blog-sidebar .sticky-sidebar{
    position: sticky;
    top: 100px;
}

.sidebar-heading{ 
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #1B1919;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 4px;
    display: inline-block;
}

.sidebar-heading::after{
    content: "";
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: var(--secondary-color);
    right: -35px;
    top: 12px;
}

.sidebar-heading span{
    color: var(--secondary-color);
}


.blog-sidebar .social-links a{
    border: 0;
}

.second-sidebar{
    height: 100%;
}

/* Blog Categories */

.blog-categories-list{
    position: sticky;
    top: 100px;
    left: 0;
}

.blog-categories-list .cta-list{
    border: none;
    padding-left: unset !important;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-bottom: 0;
    border-top: 2px solid  #f8f8fb;
    padding-top: 15px;
}

.blog-categories-list .cta-list li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--secondary-color);
    font-weight: 600;
}

.blog-categories-list .cta-list li a{
    color: var(--primary-color) !important;
    font-weight: 400;
}

.blog-categories-list .cta-list li a:hover{
    text-decoration: underline !important;
}

/* Recent Articles */
.recent-article{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(124,124,124,.15);
    line-height: 1.3;
}

.recent-article:last-child{
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.recent-article .blog-icon{
    max-width: 50px;
}

.recent-article .blog-thumbnail{
    max-width: 50px;
    max-width: 50px;
}

.recent-article .blog-thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.recent-article .blog-info{
    width: 100%;
    max-width: calc(100% - 65px);
    margin-bottom: 0;
}

.recent-article .blog-info h5 a{
    letter-spacing: .3px;
    text-decoration: none;
    color: rgba(0,0,0,.9);
    font-weight: 600;
    transition: all .2s;
    font-size: 12px;
    margin-bottom: 5px;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.recent-article .blog-info h5 a strong{
    font-weight: 600;
}

.recent-article .blog-info div{
    color: #BBB;
    font-size: 12px;
}

.recent-article .blog-info div *{
    display: inline;
}

.recent-article .blog-info div a{
    color: #BBB;
    font-weight: 400;
    margin-left: 5px;
}

.recent-article .blog-info a:hover{
    color: var(--secondary-color) !important; 
}

.mb-30 {
    margin-bottom: 30px !important;
}

#sidebar-cta{
    display: none;
}

.sidebar-cta{
    border: 1px solid rgba(0, 0, 0, 0.22);
    position: sticky;
    top: 100px;
    left: 0;
    display: none;
}

/* Table of Content Styling */

.single-post h2.has-background {
    font-size: 18px;
    font-weight: 400;
    padding: 0 0 10px 0;
    background-color: transparent !important;
    color: #2a2c33 !important;
    padding-bottom: 10px;
    border-right: 2px solid rgba(0, 0, 0, 0.1);
    line-height: 1;
    position: relative;
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
}

.single-post h2.has-background::after {
    content: '\2b';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: 0.3s ease-in-out;
    transform: rotate(90deg);
}

.single-post h2.has-background.active::after {
    transform: rotate(0);
    content: "\f068";
}

.single-post h2.has-background + figure.wp-block-table {
    border-right: 2px solid rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    display: none;
    overflow: hidden;
    background: transparent;
    padding-right: 15px !important;
    max-height: 450px;
    overflow-y: auto;
}

/* width */
.single-post h2.has-background + figure.wp-block-table::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}
  
/* Track */
.single-post h2.has-background + figure.wp-block-table::-webkit-scrollbar-track {
    background: #f7f7f7;
    border-radius: 6px 0 0 6px;
}

/* Handle */
.single-post h2.has-background + figure.wp-block-table::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    opacity: 0.7;
    border-radius: 6px 0 0 6px;
}

.single-post h2.has-background + figure.wp-block-table.active{
    display: block;
}

.single-post h2.has-background + figure.wp-block-table table {
    width: 100%;
}

.single-post h2.has-background + figure.wp-block-table table td {
    border: none;
    position: relative;
    padding: 5px 0;
}

.single-post h2.has-background + figure.wp-block-table table td a {
    color: #2a2c33 !important;
    font-size: 13px;
    text-transform: capitalize;
}

.single-post h2.has-background + figure.wp-block-table table td a:hover{
    text-decoration: underline !important;
    color: var(--secondary-color) !important;
}

.single-post h2.has-background + figure.wp-block-table table td strong{
    font-weight: 400 !important;
}

.single-post h2.has-background + figure.wp-block-table table td a:not(:first-child){
    padding-left: 30px;
    position: relative;
    padding-top: 5px;
}

/* Frequently Asked Questions Styling */

.accordion-table{
    margin: 20px auto;
}

.accordion-table table{
    margin-bottom: 0;
    border-collapse: separate;
}

.accordion-table table td{
    background: none;
    padding: 0 0 8px !important;
    border: 0 !important;
}

.accordion-table table strong{
    display: block;
    border: 1px solid rgba(0,0,0,0.3);
    color: #000;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 40px 12px 20px;
    position: relative;
    cursor: pointer;
}

.accordion-table table strong.on{
    background: var(--blue-gradient-background);
    border-color: var(--secondary-color);
    color: #fff;
}

.accordion-table table strong::after{
    content: '\2b';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 15px;
    right: 20px;
    text-align: center;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

.accordion-table table strong.on::after{
    content: '\f068';
    transform: rotate(180deg);
}

.accordion-table table mark{
    font-size: 0;
    display: block;
    padding: 0;
}

.accordion-table table mark.on{
    font-size: 14px;
    padding: 12px 20px;
    line-height: 1.8;
}

.accordion-table table mark a{
    color: var(--orange);
}

.accordion-table table mark a:hover{
    text-decoration: underline !important;
}

.accordion-table table td > br{
    display: none;
}

.single-blog .post-navigation {
    display: none;
}

.blogs-listing .blog .category-title a, 
.blog-recent .category-title a {
    position: absolute !important;
    left: 20px;
    top: 20px;
    text-transform: uppercase;
    z-index: 1111;
    display: inline-block;
    border: 0;
    border-radius: 30px;
    box-shadow: 0 6px 63px rgba(0,0,0,.2);
    padding: 12px 25px;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    background-image: linear-gradient(294deg, #2e5bed 58%, #39eaff );
}

.blogs-listing .blog .blog-meta, .blog-recent .blog-meta {
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
}

.page-content, .entry-content, .entry-summary {
    margin: 1.5em 0 0;
}

.single-blog-main{
    padding-top: 180px;
    background: #ffffff url('../../../../uploads/2024/01/single-blog-banner.webp') no-repeat;
    background-position: top center;
    background-size: 100%;
}

.single-blog-row{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

.single-blog-row .column{
    width: 100%;
}

.single-blog-row .content-column{
    max-width: calc(100% - 275px);
}

.single-blog-row .sidebar-column{
    width: 235px;
}

.single-blog .multi-columns{
    column-gap: 40px;
    row-gap: 20px;
}

.single-blog .multi-columns > div{
    width: 100% !important;
    flex-basis: unset !important;
    flex-grow: unset !important;
    flex-shrink: unset !important;
}

.single-blog .multi-columns > div:first-child{
    max-width: 235px;
    position: sticky;
    height: max-content;
    top: 100px;
}

.single-blog .multi-columns > div:last-child{
    max-width: calc(100% - 315px);
}

.single-blog .multi-columns > div:last-child > p{
    text-align: justify;
}

.single-blog .multi-columns > div:last-child > p a{
    display: inline;
}

.single-blog h2 {
    margin-bottom: 20px;
    line-height: 1.4;
    font-size: 24px;

}

.single-blog h2 strong{
    font-weight: 500;
}

.single-blog .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.single-blog .blog-featured-img .category-title {
    position: absolute;
    top: 20px;
    left: 20px;
}

.single-blog .blog-featured-img .category-title a {
    text-transform: uppercase;
    z-index: 11111;
    display: inline-block;
    border: 0;
    border-radius: 30px;
    box-shadow: 0 6px 63px rgba(0,0,0,.2);
    padding: 12px 25px;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    background-color: var(--secondary-color);
}

.single-blog .entry-title {
    font-size: 32px;
    margin-bottom: 0;
    margin-top: 44px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .4px;
    color: #1b1919;
}

.single-blog h3 {
    color: #1b1919;
    margin-bottom: 20px;
    line-height: 1.4;
    font-size: 22px;
    margin-top: 20px;
    letter-spacing: .5px;
    font-weight: 700;
}

.blog-banner .banner-content{
    max-width: 600px;
}

.single-blog .entry-content p {
    margin-bottom: 15px;
    margin-top: 10px;
    line-height: 1.6;
}

/* Blog Related Articles */

.single-blog .related-articles{
    width: 100%;
    max-width: calc(100% - 315px);
    margin-top: 30px;
    margin-left: auto;
    margin-right: 40px;
}

.single-blog .related-articles h2{
    font-size: 24px;
    line-height: 1.4;
    font-weight: 500;
    color: #2a2c33;
    margin: 0 auto 20px;
    text-align: left;
}

.single-blog .related-articles-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: none;
}

.single-blog .related-articles-list li{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 15px;
    width: 100%;
    border: 1px solid #efefef;
    padding: 10px;
    border-radius: 6px;
    background: #fff;
}

.single-blog .related-articles-list li:hover{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px 0px;
}

.single-blog .related-articles-list li a:first-child {
    display: inline-block;
    width: 100%;
    max-width: 100px;
    overflow: hidden;
}

.single-blog .related-articles-list li a img{
    object-fit: contain;
    height: 100%;
    max-width: 100%;
    transition: all 0.5s ease-in-out;
}

.single-blog .related-articles-list li:hover img{
    transform: scale(1.1);
}

.single-blog .related-articles-list li a:last-child{
    color: #000;
    font-style: 20px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    width: 100%;
    max-width: calc(100% - 115px);
}

.single-blog .related-articles-list li strong{
    font-weight: 400;
}

/* Similar Articles List */

.related-blogs-list{
    padding-left: 0 !important;
    margin-bottom: 20px !important;
}

.related-blogs-list br{
    display: none;
}

.related-blogs-list li{
    list-style-type: none;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 10px;
}

.related-blogs-list li::before{
    content: '\2b';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--primary-color);
    line-height: 20px;
    font-size: 12px;
}

.related-blogs-list li:not(:last-child){
    margin-bottom: 7px;
}

.related-blogs-list li a{
    line-height: 1.4;
    font-size: 14px;
    font-weight: 300;
    color: var(--secondary-color);
    display: inline-block;
    text-decoration: underline !important;
}

.related-blogs-list li a:hover{
    color: var(--primary-color);
}

/* Blog Simple List */

.single-blog .multi-columns ul:not([class]),
.single-blog .multi-columns ol:not([class]){
    padding-left: 20px !important;
    margin-bottom: 20px;
}

.single-blog .multi-columns ul:not([class]),
.single-blog .multi-columns ol:not([class]) li{
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 300;
    line-height: 1.6;
}

/* Blog CATs */

.blog-ctas-wrapper{
    padding: 100px 0;
}

.blog-ctas-wrapper h2.main-heading{
    text-align: center;
}

.blog-ctas-wrapper .inner-wrapper{
    width: 100%;
    max-width: 770px;
    margin: 0 auto;
}

.blog-cta{
    margin: 25px auto;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: hidden;
    position: relative;
}

.blog-cta::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
}

.blog-cta .inner-layer{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    row-gap: 10px;
    min-height: 250px;
    position: relative;
    z-index: 2;
}

.blog-cta .content-col{
    width: 100%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 25px 0 25px 25px;
}

.blog-cta .image-col{
    width: 100%;
    max-width: 50%;
    text-align: center;
}

.blog-cta .content strong{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: capitalize;
    display: block;
    color: #fff;
}

.blog-cta .content strong span{
    color: var(--secondary-color);
}

.blog-cta .content p{
    color: #fff;
    margin: 10px auto 20px;
    font-size: 12px;
}

.blog-cta .button.blue{
    font-size: 13px;
    padding: 13px;
}

.cloud_services_cta{
    background: #041625 url('../../../../uploads/2023/12/cta-cloud-services-bg.webp') no-repeat;
    background-position: right center;
    background-size: cover;
}

.custom_software_development_cta{
    background: #041625 url('../../../../uploads/2023/12/cta-custom-software-development-bg.webp') no-repeat;
    background-position: right center;
    background-size: cover;
}

.database_development_cta{
    background: #041625 url('../../../../uploads/2023/12/cta-database-development-bg.webp') no-repeat;
    background-position: right center;
    background-size: cover;
}

.dedicated-development_cta{
    background: #041625 url('../../../../uploads/2023/12/dedicated-development-teams-banner.webp') no-repeat;
    background-position: right center;
    background-size: cover;
}

.erp-software-banner{
    background: #041625 url('../../../../uploads/2023/12/erp-software-banner.webp') no-repeat;
    background-position: right center;
    background-size: cover;
}

.mobile-app-development-banner{
    background: #041625 url('../../../../uploads/2023/12/mobile-app-development-banner.webp') no-repeat;
    background-position: right center;
    background-size: cover;
}

.net-development-cta{
    background: #041625 url('../../../../uploads/2023/12/net-development-banner.webp') no-repeat;
    background-position: right center;
    background-size: cover;    
}

.quality-assurance-cta{
    background: #041625 url('../../../../uploads/2023/12/quality-assurance-banner.webp') no-repeat;
    background-position: right center;
    background-size: cover;    
}

.software-outsourcing-cta-banner{
    background: #041625 url('../../../../uploads/2023/12/software-outsourcing-cta-bg.webp') no-repeat;
    background-position: right -50px center;
    background-size: cover;  
}

.web-development-cta-banner{
    background: #041625 url('../../../../uploads/2023/12/web-development-cta-bg.webp') no-repeat;
    background-position: right -70px center;
    background-size: cover;  
}

.dedicated-development_cta .content{
    width: 100%;
    max-width: 500px;
    padding: 30px 20px;
    margin: 0 auto;
}

.summary_cta{
    margin: 30px auto;
}

.summary_cta .image-wrapper {
    width: 100%;
    max-width: 160px;
    margin: 0 auto 20px;
}

.summary_cta .site-title {
    color: var(--secondary-color);
}

.summary_cta p {
    margin: 20px auto;
    font-weight: 400;
    line-height: 1.6;
}

.share-links {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

.share-links li {
    list-style-type: none;
    display: inline-block;
    margin: 5px;
}

.share-links a {
    height: 35px;
    width: 35px;
    font-size: 18px;
    color: #fff !important;
    text-align: center;
    line-height: 35px;
    border-radius: 8px 0 8px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.share-links a.facebook {
    background-color: #3b5998;
}

.share-links a.linkedin {
    background-color: #0077b5;
}

.share-links a.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

.share-links a.pinterest {
    background-color: #0077b5;
}


/** Blog Page End **/

/* Erro 404 Page */
.error-404 {
    padding: 150px 0 0;
    text-align: center;
}

.error-404 .inner-content {
    position: relative;
}

.error-404 .content {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.error-404 .action-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px auto 0;
}

.error-404 .image-wrapper {
    width: 85%;
    max-width: 650px;
    margin: 0 auto;
}

.error-404 p {
    width: 90%;
    max-width: 400px;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
}

.cloud-service-cta {
    background-image: url(../../../../uploads/2023/08/cloud-service-cta-banner.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0;
    position: relative;
}

/* Badges */

.badges{
    padding-top: 100px;
}

.badges-wrapper{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;   
    align-items: center;
    justify-content: space-around;
    column-gap: 50px;
    row-gap: 30px;
    flex-wrap: wrap;
}

.badges-wrapper .badge{
    display: block;
}

nav.pagination{
    display: flex;
    align-items: center;
    justify-content: center;
}

nav.pagination .prev,
nav.pagination .next {
    display: none !important;
}

nav.pagination .page-numbers {
    display: none;
    border: 1px solid transparent;
    border-bottom-color: var(--secondary-color);
    display: inline-block;
    text-align: center;
    width: 34px;
    line-height: 32px;
    margin-right: 6px;
    font-size: 16px;
    color: #000;
}

nav.pagination .page-numbers.current,
nav.pagination .page-numbers:active{
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
}

nav.pagination .page-numbers:not(.current):hover{
    border-color: var(--secondary-color);
}

/* ----------------- FAQs Accordion ---------------- */

.faq-accordion .accordion-item{
    border: 0;
}

.faq-accordion .accordion-item:not(:last-child){
    margin-bottom: 10px;
}

.faq-accordion .accordion-button{
    display: block;
    border: 1px solid rgba(0,0,0,0.3);
    color: #000;
    font-size: 15px;
    font-weight: 400;
    padding: 15px 40px 15px 20px;
    position: relative;
    cursor: pointer;
    box-shadow: none;
}

.faq-accordion .accordion-button:hover,
.faq-accordion .accordion-button:not(.collapsed){
    background: var(--blue-gradient-background);
    border-color: var(--secondary-color);
    color: #fff;
}

.faq-accordion .accordion-button::after{
    content: '\2b';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    text-align: center;
    line-height: 20px;
    background-image: none;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
    content: '\f068';
    transform: translateY(-50%) rotate(180deg);
}


/* ------------------------------------------------ */   
/* ----------------- MEDIA QUERIES ---------------- */
/* ------------------------------------------------ */

@media only screen and (min-width: 1750px){
    .custom-sw-app-cta .row{
        padding: 150px 0 !important;
    }
    .custom-sw-app-cta .on-desktop{
        width: 40%;
    }
    .mobile-app-cta .row {
        padding: 350px 0 270px;
    }
}

@media only screen and (min-width: 1600px){
    .custom-sw-app-cta .row{
        padding: 90px 0 !important;
    }
    .mobile-app-cta .row {
        padding: 280px 0 210px;
    }
    .clients .inner-wrapper > div{
        max-width: 180px;
    }
    .custom-sw-development-banner .banner-content{
        padding-top: 150px !important;
    }
}

@media only screen and (min-width: 1400px){
    .container{
        max-width: 1370px !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        transition: all 0.5s ease-in-out;
    }
    .banner .row{
        align-items: center;
    }
        .banner .banner-content{
            margin-top: 0;
        margin-bottom: 100px;
    }
    .service-card .inner-layer{
        min-height: 270px;
    }
    .struqio-way{
        margin-top: -300px;
    }
    .custom-sw-app-cta .row{
        padding: 70px 0;
    }
    .main-header .navbar .navbar-nav > .menu-item > a::before{
        height: 3px;
    }
    .why-choose-us-carousel .feature p{
        /* padding: 0 20px; */
    }
    .inner-service-cta .heading-box p{
        font-size: 22px;
    }
}

@media only screen and (min-width: 1300px){
    .container{
        max-width: 1270px !important;
    }
}

@media only screen and (min-width: 1200px){
    .dNet-cta .image-wrapper{
        position: relative;
        margin-top: -100px;
    }
    .banner-service{
        margin-left: -15%;
        width: 65%;
    }
}

@media only screen and (min-width: 991px){
    .main-header .navbar .navbar-nav > .menu-item > a{
        line-height: 50px;
        height: 50px;
    }
    .main-header.sticky-header .navbar .navbar-nav > .menu-item > a{
        line-height: 75px;
        height: 75px;
    }
}

@media only screen and (max-width: 1400px){
    .advantage-box {
        padding: 70px 60px;
    }
    .single-blog-main{
        padding-top: 100px;
    }
}

@media only screen and (max-width: 1200px){
    .testimonial-box .left {
        max-width: calc(100% - 330px);
    }
    .testimonial-box .right {
        max-width: 300px;
    }
    .struqio-way{
        margin-top: -100px;
    }
    .mobile-app-cta .row{
        padding: 150px 0 100px;
    }
    .experise-tabs .tabs-gallery li img{
        width: 60px;
    }
    .statistics p{
        font-size: 16px;
    }
    .statistics strong{
        font-size: 50px;
    }
    .approach-left, .approach-mid, .approach-right{
        max-width: 100%;
    }  
    .bullet-list li {
        width: 430px;
        margin: 20px auto;
    }            
    .approach-left .bullet-list li {
        text-align: left;
        margin: 20px auto;
        padding-right: 0;
        padding-left: 20px;
    } 
    .approach-left .bullet-list li::after{
        left: 0;
    }
    .approach-mid{
        text-align: center;
    }
    .custom-software-services::before {
        width: 300px;
        height: 480px;
        background-size: cover;
    }            
    .custom-software-services::after{
        width: 120px;
        height: 220px;
        background-size: cover;
    }
    .our-technologies-carousel .owl-dots{
        display: flex !important;
    }
    .single-blog-row .content-column,
    .single-blog-row .sidebar-column{
        width:100%;
        max-width: 100%;
    }
    .blog-sidebar{
        width: 100%;
        max-width: calc(100% - 275px);
        margin-left: auto;
    }
    .blog-sidebar .sidebar-cta{
        display: none !important;
    }
    .single-blog .multi-columns > div:last-child,
    .single-blog .related-articles{
        max-width: calc(100% - 275px);
        margin-right: 0;
    }
    /* .share-blog.inner-layer{
        padding: 0;
        border: none;
        border-radius: unset;
        position: fixed;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        left: 0;
        margin-bottom: 0;
    }
    .share-blog.inner-layer .social-connect{
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .share-blog.inner-layer .social-connect .sidebar-heading{
        margin-bottom: 0;
        padding-bottom: 0;
        padding-right: 10px;
    }
    .share-blog.inner-layer .social-connect .sidebar-heading::after{
        display: none;
    } */


}

@media only screen and (max-width: 1199px){
    .dark-box::after {
        position: absolute;
        bottom: -110px;
        left: 50%;
        background: url(../../../../uploads/2023/07/flag-arrow.webp) no-repeat;
        content: "abcd";
        font-size: 0;
        width: 120px;
        height: 93px;
        background-size: cover;
    }    
}

@media only screen and (max-width: 991px){
    .mobile-block{
        display: block;
    }
    .newsletter-box-wrapper{
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        padding: 10px;
    }
    .why-choose-struqtio .mockups-row {
        margin: 0 auto;
        column-gap: 16px;
    }
    .why-choose-struqtio .mockups-row > div{
        padding: 0 !important;
        max-width: calc(100%/2 - 8px) !important;
    }
    .why-choose-struqtio .row > div{
        padding: 0 15px;
    }
    .m-0{
        margin-top: calc(var(--bs-gutter-y) * -1);
        margin-right: calc(var(--bs-gutter-x) * -.5);
        margin-left: calc(var(--bs-gutter-x) * -.5);
    }
    .mission-vision-content {
        background: none;
        border-bottom: 1px solid #2986f0;
        border-radius: 0;
        box-shadow: 0 0;
        padding: 20px;
        height: 100%;
        margin: 20px 0;
    }
    .mobile-block > .mission-vision-content{
        border-top: none;
    }
    .navbar-brand,
    .main-header.sticky-header .navbar-brand{
        display: inline-block;
        width: 100%;
        max-width: 130px;
    }
    .main-header{
        padding-top: 0;
    }
    .main-header .container{
        padding: 0 20px !important;
    }
    .main-header .navbar .container > div{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 11111;
        width: 270px;
        background-color: #fff;
        min-height: 100%;
        max-height: 100%;
        overflow-y: scroll;
        margin-left: -270px;
        transition: all 0.3s ease-in-out;
        box-shadow: 2px 0px 5px 0px rgb(0 0 0 / 15%);
    }
    .main-header .navbar .container > div.show{
        margin-left: 0;
    }
    .main-header .navbar .navbar-nav li{
        width: 100%;
    }
    .main-header .navbar .navbar-nav li a,
    .main-header .navbar .navbar-nav .menu-item > a{
        width: 100%;
        display: block;
        padding: 0 15px !important;
        font-size: 16px;
        height: 49px !important;
        line-height: 49px !important;
        border-bottom: 1px solid rgba(92,92,92,.23);
    }
    .main-header .navbar .navbar-nav li a:hover,
    .main-header .navbar .navbar-nav li a.active{
        color: var(--secondary-color) !important;
        font-weight: 500 !important;
    }
    .main-header .navbar .navbar-nav .dropdown::after{
        display: none;
    }
    #dropdownTrigger{
        display: block;
    }
    .main-header .navbar .navbar-nav .sub-menu{
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        min-width: 100%;
        position: relative;
        border-radius: 0;
    }
    .main-header .navbar .navbar-nav .sub-menu.active{
        display: block;
    }
    .main-header .navbar .navbar-nav .menu-item.dropdown >  a{
        display: inline-block;
        width: calc(100% - 50px);
    }
    .main-header .navbar-nav .dropdown .sub-menu a{
        padding: 0px 25px !important;
        border-bottom: 1px solid rgba(92,92,92,.23);
        margin-bottom: 0;
        font-size: 13px !important;
    }
    .main-header .navbar .navbar-nav .menu-item.dropdown a{
        padding-right: 10px !important;
    }
    .advantage-box {
        padding: 50px 30px;
        min-height: 350px;
    }
    .main-heading {
        font-size: 34px;
    }
    .offshore-development-section .main-heading{
        margin-top: 30px;
    }
    .process-model .custom-list{
        max-width: 100%;
    }
    .struqio-way,
    .our-process,
    .process-model,
    .recent-blogs,
    .reviews,
    .why-choose-struqtio,
    .industries-we-serve,
    .development-process{
        padding: 40px 0;
    }
    .badges{
        padding-top: 50px;
    }
    .testimonial-box{
        flex-direction: column-reverse;
    }
    
    .testimonial-box .left,
    .testimonial-box .right{
        width: 100%;
        max-width: 100%;
        padding-bottom: 40px;
    }
    
    .testimonial-box .right::before{
        height: 2px;
        width: 100%;
        top: unset;
        left: unset;
        bottom: 10px;
    }
    .testimonial-box .testimonial-avatar{
        margin: 0;
    }
    .testimonial-box .inner-wrapper {
        max-width: 100%;
        margin-left: 0;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 20px;
    }
    .testimonial-box .customer-detail,
    .testimonial-box .ratings{
        margin: 0 0 10px;
    }
    .online-enquiry .custom-row{
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 30px;
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
    }
    
    .online-enquiry .custom-row .column:first-child,
    .online-enquiry .custom-row .column:last-child{
        max-width: 100%;
    }

    .online-enquiry .custom-row .column:first-child{
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        column-gap: 20px;
    }
    .online-enquiry .custom-row .column:first-child > div{
        width: 100%;
        max-width: calc(50% - 10px);
    }
    .online-enquiry .contact-detail{
        margin-bottom: 20px;
    }
    .online-enquiry .custom-row .column > div.social-links{
        max-width: 100%;
        margin-top: 20px;
    }
    .struqio-way{
        margin-top: unset;
    }
    .struqio-way .inner-wrapper{
        max-width: unset;
    }
    .our-services {
        background-position: center left;
        padding-top: 0;
    }
    .our-services .row{
        top: 50px;
    }
    .services-cards{
        gap: 20px;
    }
    .service-card, .talent-background .service-card {
        max-width: calc(100%/2 - 20px);
    }
    .banner .row{
        align-items: flex-end;
    }
    .banner .banner-content{
        margin-top: 0;
        padding-bottom: 30px;
    }
    .banner .banner-content p{
        margin: 30px 0;
    }
    .scrollToTop {
        width: 35px;
        height: 35px;
        font-size: 15px;
        bottom: 25px;
        right: 25px;
    }
    .custom-sw-app-cta .row{
        width: 100%;
        margin: 0 auto 50px;
        padding: 30px 0 0;
    }
    .custom-sw-app-cta .inner-content{
        padding: 0 5px;
    }
    .custom-sw-app-cta .image-wrapper{
        position: relative;
        top: 40px;
    }
    .custom-sw-app-cta p{
        margin: 20px auto
    }
    .industries .industry {
        max-width: calc(100%/2 - 15px);
    }
    .dNet-cta .image-wrapper{
        margin-top: 0;
        max-width: 450px;
        margin-left: auto;
    }
    .custom-development,
    .tech-expertise,
    .why-us,
    .statistics,
    .solutions,
    .full-cycle,
    .inner-service-cta:not(.dNet-cta){
        padding: 50px 0;
    }
    .image-cards .img-card{
        padding: 0;
    }
    .image-cards .img-card .image-wrapper{
        margin: 0 auto 15px;
    }
    .web-dev-cta::before,
    .db-cta::before, .software-outsourcing-cta::before,
    .cloud-service-cta::before, .quality-assurance-cta::before{
        display: block;
    }
    .custom-sw-dev-cta .inner-content {
        max-width: 700px;
        margin: 0 auto;
    }
    .custom-sw-development-banner{
        padding: 100px 0;
    }
    .br-line{
        border: none;
    }   
    .why-choose-struqtio{
        text-align: center;
    }
    .why-choose-struqtio::before {
        height: 320px;
        width: 300px;
    }
    .white-box-overlap{
        margin: 20px;
    }
    .blogs-listing .blog>* {
        max-width: 100%;
    }
    .why-choose-rite{
        margin: 0;
        padding: 0;
    }
    .blog-banner .min-400,
    .blog-banner .min-600{
        min-height: unset;
    }
    .blog-banner .container{
        padding: 100px 20px 150px;
    }
    .single-blog-banner .container{
        padding: 100px 20px 0;
    }
    .blog-banner .container .main-heading{
        font-size: 28px;
    }
    .blogs{
        padding: 0 10px 50px;
    }
    .advantage-box .heading{
        width: 100%;
    }
    .advantage-box .heading .sub-heading{
        font-size: 25px;
    }
    .uae-map {
        margin: 40px auto 40px;
    }
    .approach-left, .approach-mid, .approach-right{
        padding: 0;
    }
    .approach-left .bullet-list li,
    .approach-right .bullet-list li{
        margin: 0 auto 10px;
    }
    .inner-banner{
        padding: 150px 0 50px;
    }
    .blog-cta .inner-layer{
        min-height: 250px;
    }
    .qa-and-testing-cta{
        padding-top: 40px;
    }
    .cloud_services_cta::before, .erp-software-banner::before, .mobile-app-development-banner::before, .software-outsourcing-cta-banner::before{
        display: block;
    }
    .cloud_services_cta .content-col, .erp-software-banner .content-col, .mobile-app-development-banner .content-col, .software-outsourcing-cta-banner .content-col, .quality-assurance-cta .content-col {
        max-width: 500px !important;
        margin: 0 auto;
        padding: 50px 25px;
        text-align: center;
    }
    .custom_software_development_cta ,
    .database_development_cta {
        background-position: center;
    }
    .multi-columns{
        flex-direction: column !important;
    }
    .single-blog .multi-columns > div,
    .single-blog .related-articles{
        max-width: 100% !important;
    }
    .single-blog .multi-columns > div:first-child{
        position: static;
        top: unset;
    }
    .blog-sidebar{
        max-width: 100%;
    }
    .single-post h2.has-background,
    .single-post h2.has-background + figure.wp-block-table{
        border-right: 0;
    }
    .single-post h2.has-background{
        padding: 10px;
        background: #f4f4f4 !important;
        font-weight: 600;
    }
    .single-post h2.has-background::after{
        top: 9px;
    }
    .single-post h2.has-background + figure.wp-block-table{
        padding: 5px 15px 0;
    }
    .single-blog .entry-title{
        margin-top: 30px;
    }
    .second-sidebar{
        margin: 30px auto 40px;
        height: unset;
    }
    .single-post h2.has-background + figure.wp-block-table {
        max-height: unset;
    }
    .blog-sidebar .inner-layer.recent{
        display: none;
    }
    .lead-capture-popup .submit-buttons-box .cf-turnstile{
        order: 1;
        width: 100%;
        max-width: 100%;
    }
    .lead-capture-popup .submit-buttons-box > *{
        order: 2;
    }
}

@media only screen and (max-width: 767px){
    .lead-capture-popup .heading h2{
        font-size: 26px;
      }
      .lead-capture-popup .heading h3{
        font-size: 16px;
      }
      .lead-capture-popup strong {
        margin-bottom: 15px;
      }
      .lead-capture-popup .contact-details-form .custom-row .input-box{
        max-width: 100%;
      }
      .lead-capture-popup .services-buttons{
        column-gap: 16px;
        row-gap: 16px;
      }
      .lead-capture-popup .services-buttons label{
        max-width: calc(100%/2 - 8px);
      }
      .lead-capture-popup > div {
        padding: 20px;
    }      
    .white-box-overlap {
        margin-top: calc(var(--bs-gutter-y) * -1);
        margin-right: calc(var(--bs-gutter-x) * -.5);
        margin-left: calc(var(--bs-gutter-x) * -.5);
        margin-top: 20px;
    }
    .why-choose-white-box{
        padding: 15px;
    }
    .talent-background {
        padding: 50px 0;
    }
    .mission-vision-wrapper{
        margin-bottom: 50px;
    }
    .cube, .values-background .main-heading{
        text-align: center;
    }
    .banner{
        padding-top: 100px;
        padding-bottom: 0;
        min-height: 330px;
        background-position: center bottom;
    }
    .privacy-banner {
        padding: 100px 0 130px;
    }
    .custom-software-services{
        padding: 50px 0;
    }
    .new-age-background{
        padding: 50px 0 0;
    }
    .service-card, .talent-background .service-card{
        max-width: 100%;
    }
    .mission-vission-button{
        font-size: 21px;
    }
    .owl-carousel{
        /*width: auto;*/
        margin: 0;
    }
    .why-choose-struqtio::before {
        height: 80px;
        width: 100px;
        bottom: 0;
    }
    .banner .banner-content{
        max-width: 100%;
        margin-top: 0;
        padding-bottom: 0;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .mobile-app-cta{
        padding-top: 0;
    }
    .mobile-app-cta > img{
        display: none;
    }
    .mobile-app-cta .row{
        position: unset;
        padding: 100px 0 50px;
    }
    .mobile-app-cta .inner-wrapper p{
        margin: 20px auto;
    }
    .process-step .step-connector {
        height: 20px;
        width: 20px;
        border-width: 4px;
    }
    .process-step img{
        transform: scale(0.8);
    }
    .experise-tabs{
        margin-top: 0px;
    }
    .experise-tabs .nav-tabs{
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
    }
    .experise-tabs .nav-item{
        width: unset;
    }
    .experise-tabs .nav-link{
        font-size: 14px;
        padding: 10px 20px;
    }
    .experise-tabs .nav-tabs,
    .experise-tabs .tab-content{
        max-width: 100%;
    }
    .image-cards .img-card{
        max-width: 100%;
    }
    .accordion-table table strong{
        font-size: 14px;
        padding: 10px 32px 10px 10px;
    }
    .accordion-table table mark{
        font-size: 0;
    }
    .accordion-table table mark.on{
        padding: 10px;
    }
    .accordion-table table strong::after{
        top: 10px;
        right: 7px;
    }
    .error-404 .content {
        position: relative;
        bottom: unset;
        left: unset;
        transform: unset;
        margin: -50px auto 0 ;
        z-index: 11;
    }
    .effective-solution-wrapper .pe-5{
        padding-right: 15px !important;
    }
    .dark-box{
        margin-bottom: 50px;
    }
    .dark-box::after{
        display: none;
    }

    .gradient-box::after{
        position: absolute;
        bottom: -100px;
        left: 30%;
        background: url(../../../../uploads/2023/07/flag-arrow.webp) no-repeat;
        content: "abcd";
        font-size: 0;
        width: 114px;
        height: 89px;
        background-size: cover;
    }
    .search-bar-box input[type=submit] {
        max-width: 120px;
    }
    .search-bar-box .form-control {
        max-width: calc(100% - 120px);
    }
    .blogs-listing .blog .category-title a, 
    .blog-recent .category-title a,
    .single-blog .blog-featured-img .category-title a {
        padding: 0 10px;
        font-size: 11px;
        top: 10px;
        left: 10px;
        line-height: 30px;
    }
    .single-blog .entry-title{
        font-size: 26px;
    }
    .single-blog h2{
        font-size: 22px;
    }
    .single-blog h3{
        font-size: 20px;
    }
    .our-technologies-carousel .owl-item.center{
        width: 500px !important;
    }
    .our-technologies-carousel .owl-item.center .technology-image{
        transform: scale(0.7);
    }
    .our-technologies-carousel .owl-item.center .tech-flutter .technology-image{
        right: -52px;
    }
    .our-technologies-carousel .owl-item.center .tech-android .technology-image {
        top: -60px;
        right: -50px;
    }
    .recent-blogs .row > div:last-child .blog-info{
        margin-bottom: 0 !important;
    }
    .responsive-accordion .accordion-item:last-child,
    .responsive-accordion .accordion-body p:last-child{
        margin-bottom: 0;
    }
    .why-choose-us{
        padding: 40px 0 30px;
    }
}

@media only screen and (max-width: 575px){
    .main-header .navbar .container > div{
        width: 235px;
        margin-left: -235px;
    }
    .main-header .navbar .navbar-nav li a,
    .main-header .navbar .navbar-nav .menu-item > a{
        font-size: 13px;
        height: 40px !important;
        line-height: 40px !important;
    }
    .main-header .navbar .navbar-nav .dropdown::after{
        height: 39px;
        line-height: 39px;
        width: 39px;
        font-size: 13px;
    }
    .main-header .navbar-nav .dropdown .dropdown-menu,
    .main-header .navbar-nav .dropdown .sub-menu {
        min-width: unset !important;
    }
    .main-header .navbar-nav .dropdown .dropdown-menu a,
    .main-header .navbar-nav .dropdown .sub-menu a{
        font-size: 11px !important;
    }
    #dropdownTrigger {
        height: 40px;
        line-height: 40px;
        width: 40px;
        font-size: 11px;
    }
    .main-header .navbar .navbar-nav .menu-item.dropdown > a {
        width: calc(100% - 40px);
    }
    .main-footer{
        padding-top: 30px;
    }
    .footer-social-details{
        column-gap: 30px;
    }
    .button-group{
        column-gap: 15px;
    }
    .advantage-box {
        padding: 30px 20px;
        min-height: 250px;
        border-right: 0;
    }
    .main-heading {
        font-size: 30px;
    }
    .main-heading br{
        display: none;
    }
    .heading-box p{
        font-size: 15px;
    }
    .reviews .reviews-wrapper {
        border-radius: 30px;
        padding: 30px;
    }
    .clients .inner-wrapper{
        justify-content: center;
    }
    .clients .inner-wrapper > div{
        max-width: 100px;
    }
    .enquiry-form-wrapper{
        padding: 30px 20px;
    }
    .enquiry-form-wrapper label{
        font-size: 11px;
    }
    .enquiry-form-wrapper .form-control{
        min-height: 40px;
    }
    .button,
    .wpcf7-form .wpcf7-form-control[type="submit"],
    .lead-capture-popup .contact-details-form input[type="reset"]{
        padding: 15px !important;
        border-radius: 8px !important;
        font-weight: 400 !important;
        font-size: 12px !important;
        min-width: 92px;
    }
    .wpcf7-form .wpcf7-form-control[type="submit"]::before{
        font-size: 12px;
        margin-right: 5px;
    }
    .service-card {
        max-width: 100%;
    }
    .service-card .inner-layer{
        min-height: unset;
        max-height: 96px;
    }
    .service-card:hover .inner-layer{
        max-height: unset;
    }
    .service-card .onHover{
        opacity: 0;
        transition: all 0.6s ease-in-out;
    }
    .service-card:hover .onHover{
        opacity: 1;
    }
    .service-card .service-title{
        margin-top: 0;
    }
    .service-card:hover .icon{
        display: unset;
    }
    .custom-software-services .service-card .inner-layer{
        max-height: unset;
        min-height: unset;
    }
    .blog-recent .blog-thumbnail {
        border-radius: 15px;
        box-shadow: 5px 5px 0px var(--secondary-color);
    }
    .blog-recent .blog-title {
        font-size: 20px;
        width: 100%;
        min-height: unset;
    }
    .blog-tags {
        column-gap: 10px;
    }
    .blog-tags a {
        padding: 7px 15px;
        font-size: 12px;
    }
    .footer-social-link a,
    .footer-social-details > a{
        font-size: 15px;
    }
    .process-steps{
        flex-direction: column;
        margin-top: 35px;
    }
    .process-steps::before{
        width: 3px;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .process-step{
        max-width: 100%;
        flex-direction: row;
        justify-content: center;
        height: 120px;
    }
    .process-step:nth-child(even){
        flex-direction: row-reverse;
    }
    .process-step .step-number,
    .process-step:nth-child(even) .step-number{
        align-items: center;
    }
    .industries{
        gap: 20px;
        margin-bottom: 0;
    }
    .industries .industry {
        max-width: calc(100%/2 - 10px);
    }
    .why-choose-us .carousel-wrapper .owl-stage{
        padding: 0;
    }
    .custom-development-cards{
        flex-direction: column;
    }
    .custom-development-card{
        padding: 20px;
    }
    .custom-development-card strong{
        min-height: unset;
    }
    .experise-tabs h3{
        font-size:24px;
    }
    .experise-tabs p{
        font-size: 14px;
    }
    .dash-list li{
        color: #fff;
        font-size: 14px;
        padding-left: 25px;
    }
    .bullet-list li {
        width: 290px;
    }
    .search-bar-box input[type=submit] {
        max-width: 100px;
        font-size: 12px;
    }    
    .search-bar-box .form-control {
        padding-left: 10px;
        max-width: calc(100% - 100px);
        height: 40px;
        font-size: 13px;
    }
    .our-technologies-carousel .owl-item.active .technology-card{
        background: var(--blue-gradient-background);
        background-size: cover;
        width: calc(100% - 30px);
        margin: 0 auto;
    }
    .our-technologies-carousel .owl-item .technology-card{
        height: auto !important;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 15px;
    }
    .our-technologies-carousel .owl-item .technology-card > div{
        position: unset !important;
        top: unset !important;
        transform: unset !important;
        max-width: 100%;
    }
    .our-technologies-carousel .owl-item .technology-icon{
        order: 1;
    }
    .our-technologies-carousel .owl-item .technology-info{
        order: 2;
        display: block !important;
    }
    .our-technologies-carousel .owl-item .technology-image{
        order: 3;
        margin: 0 auto;
    }
    .our-technologies-carousel .owl-item .technology-image img{
        object-fit: unset;
        height: auto;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }
    .our-technologies-carousel .technology-info p{
        margin-top: 10px;
    }
    .process-model .custom-list{
        font-size: 16px;
    }
    .inner-banner{
        padding: 100px 0 0;
    }
    .inner-banner p{
        margin-bottom: 0;
    }
    .online-enquiry{
        padding: 50px 20px !important;
    }
    .statistics .row {
        column-gap: 20px;
        margin: 0 auto;
    }
    .statistics .row > div{
        padding: 0 !important;
        max-width: calc(100%/2 - 10px);
    }
    .statistics p{
        margin-bottom: 0;
        line-height: 1.2;
    }
    .statistics strong{
        font-size: 36px;
        display: block;
        margin-bottom: 10px;
    }
    .custom_software_development_cta .inner-layer,
    .database_development_cta .inner-layer, .net-development-cta .inner-layer, .web-development-cta-banner .inner-layer{
        flex-direction: column;
    }
    .custom_software_development_cta .inner-layer > div,
    .database_development_cta .inner-layer > div, .net-development-cta .inner-layer > div, .web-development-cta-banner .inner-layer > div{
        max-width: 100%;
    }
    .web-development-cta-banner{
        background: #041625;
    }
    .blog-cta .content-col{
        padding: 30px 15px;
    }
    .blog-cta .content strong{
        font-size: 24px;
    }
    .blog-sidebar .inner-layer{
        max-width: 100%;
    }
    .recent-article .blog-info h5 a{
        -webkit-line-clamp: 6;
    }
    .faq-accordion .accordion-button{
        padding: 12px 35px 12px 15px;
    }
    .faq-accordion .accordion-body{
        padding: 12px 15px;
    }
    .faq-accordion .accordion-button::after{
        height: 20px;
        width: 20px;
        right: 10px;
        line-height: 20px;
    }
}

@media only screen and (max-width: 450px){
    .struqio-way{
        padding-bottom: 10px;
    }
    .custom-sw-app-cta .row{
        border-radius: 30px;
        padding-top: 20px;
    }
    .main-header .container{
        padding: 0 10px !important;
    }
    .advantage-box.first p {
        margin-top: 20px;
    }
    .online-enquiry .custom-row .column:first-child{
        row-gap: 20px;
    }
    .online-enquiry .custom-row .column:first-child > div{
        width: 100%;
        max-width: 100%;
    }   
    .industries{
        gap: 10px;
    }
    .industries .industry {
        padding: 30px 15px;
        max-width: calc(100%/2 - 5px);
        border-radius: 20px;
    }
    .industries .industry p{
        font-size: 14px;
    }
    .industries .industry .icon-box{
        transform: scale(0.8);
    }
    .why-choose-us .carousel-wrapper {
        width: 100%;
        margin: 0 auto;
        padding: 0 15px;
        
    }
    .why-choose-us-carousel .feature{
        background-color: #fff;
        border-radius: 30px;
        padding: 30px 15px;
        margin-left: 0;
    }
    .why-choose-us-carousel .feature p{
        width: 100%;
    }
    .error-404 {
        padding: 100px 0 50px;
    }
    .error-404 .content {
        margin: 0 auto;
    }
    .search-bar-box input[type=submit] {
        max-width: 90px;
        font-size: 11px;
    }
    .search-bar-box .form-control {
        max-width: calc(100% - 90px);
        font-size: 12px;
    }
    .cloud .why-choose-us-carousel .feature{
        min-height: unset;
    }
    .technology-card .technology-icon {
        height: 50px;
        width: 50px;
        min-width: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .technology-card .technology-icon img{
        object-fit: contain;
        height: 100%;

    }
    .technology-card .technology-icon.lg {
        height: 50px;
        width: 100px;
        min-width: 50px;
    }
    .technology-card .technology-icon.lg img{
        width: 48px;
    }
    .technology-card .technology-info{
        /* min-height: 185px; */
    }
    .technology-card .technology-info h3{
        font-size: 22px;
    }
    .our-technologies-carousel .technology-info p{
        font-size: 13px;
    }
    .main-heading{
        font-size: 26px;
        margin-bottom: 15px;
    }
    .sub-heading{
        font-size: 21px;
    }
    .heading-box p{
        margin-top: 15px;
    }
    .advantage-box .heading .sub-heading{
        font-size: 22px;
    }
    .badges-wrapper{
        /* column-gap: 20px; */
    }
    .badges-wrapper .badge{
        width: 100%;
        max-width: calc(100%/2 - 25px);
    }
    .effective-solution-wrapper{
        padding: 20px 0 0;
    }
    .dark-box{
        margin-bottom: 20px;
    }
    .effective-solution-right img{
        margin-bottom: 0;
    }
    .mission-vission-button {
        font-size: 18px;
        border-radius: 12px;
        padding: 15px 20px;
    }
    .mission-vision-content,
    .mission-vision-content p{
        margin: 0;
    }
    .values-background .main-heading{
        padding: 30px 15px;
        margin-bottom: 0;
    }
    .cube{
        margin-top: 0;
    }
    .values-item-wrapper{
        border-radius: 0 0 20px 20px;
    }
    .blog-banner{
        background-size: contain !important;
        position: relative;
    }
    .blog-banner .container{
        position: relative;
        z-index: 1;
    }
    .blog-banner::after{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, .4);
        z-index: 0;
    }
    .search-bar-box{
        padding: 20px 15px;
    }
    .search-bar-box h2{
        font-size: 24px;
    }
    .blogs{
        padding: 30px 0;
    }
    .blogs .row > div{
        padding: 0;
    }
    .search-box-section .container,
    .blogs .container{
        padding: 0 20px !important;
    }
    .no-blog-found{
        padding: 0 8px;
    }
    .custom-sw-dev-cta .inner-content, .enterprise-sw-dev-cta .inner-content, .qa-and-testing-cta .inner-content{
        padding-left: 20px;
        padding-right: 20px;
    }
    .sidebar-column{
        padding-bottom: 40px !important;
    }
    .related-blogs-list li{
        max-width: 100%;
    }
    .related-blogs-list{
        padding-left: 0 !important;
    }
    .single-blog .blog-featured-img .category-title{
        top: 10px;
        left: 10px;
    }
    .single-blog-main{
        padding-top: 70px;
    }
    .single-blog .related-articles-list li a:last-child{
        font-size: 14px;
    }
    .second-sidebar{
        margin: 0 auto 30px;
    }
    .blogs-listing .blog-title{
        font-size: 22px;
    }
}

@media only screen and (max-width: 370px){
    .why-choose-struqtio::after{
        position: absolute;
        width: 60px;
        height: 145px;
        background: url(../../../../uploads/2023/07/top-right-shape.webp) no-repeat;
        right: 0;
        top: 0;
        content: "abcd";
        font-size: 0;
        background-size: contain;
        z-index: 0;
    }
    .gradient-box::after {
        position: absolute;
        bottom: -80px;
        left: 30%;
        background: url(../../../../uploads/2023/07/flag-arrow.webp) no-repeat;
        content: "abcd";
        font-size: 0;
        width: 74px;
        height: 58px;
        background-size: cover;
    }
    .statistics .row > div{
        max-width: 100%;
    }
}