:root {
    --text-color: #0a222e99;
    --main-color: #279dd8;
    --main-text-color: #0a222e;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: inherit;
}
html,
body {
    overflow-x: hidden;
}
.multi-select-wrapper {
    position: relative;
    width: 100%;
    font-family: inherit;
}

.multi-select-display {
    border: 1px solid #ddd;
    padding: 8px 12px;
    min-height: 45px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

.multi-select-display .arrow {
    position: absolute;
    left: 12px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    background: #007bff;
    color: #fff;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
}

.tag i {
    margin-right: 4px;
    cursor: pointer;
}

#placeholder {
    color: #777;
    font-size: 14px;
}

/* Dropdown */
.dropdown-container {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    top: 105%;
    width: 100%;
    display: none;
    z-index: 999;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    padding: 10px;
}

.dropdown-container .search-box {
    width: 100%;
    padding: 6px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.dropdown-container .options label {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    cursor: pointer;
}

.dropdown-container label:hover {
    background: #f5f5f5;
}

.dropdown-container input[type="checkbox"] {
    margin-right: 8px;
}

/* RTL */
[dir="rtl"] .multi-select-display .arrow {
    right: 12px;
    left: auto;
}

[dir="rtl"] .dropdown-container input[type="checkbox"] {
    margin-left: 8px;
    margin-right: 0;
}

input[type="number"] {
    direction: ltr;
    text-align: right;
}
body {
    font-family: "Alexandria", sans-serif !important;
    margin: 0;
    padding: 0;
    direction: rtl;
    background-color: #f9fdff;
    position: relative;
}

body::-webkit-scrollbar {
    display: none;
}

input::placeholder {
    height: 50px;
}

.avatar {
    width: 100%;
}

nav.navbar.navbar-expand-lg.bg-body-tertiary {
    padding: 15px 70px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
    background: white;
    box-shadow: 0px 7px 50px 0px #00000014;
    width: 100%;
}
.form-control,
.form-select,
.dropdown button {
    box-shadow: none !important;
}
/* Amazing custom select style */
.form-select {
    appearance: none; /* remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    direction: ltr !important;
    text-align: right !important;

    background-color: #f2f5f7; /* white background */

    border-radius: 12px; /* rounded corners */
    font-weight: 300;
    font-size: 1rem;

    color: #0a222e99;
    transition: all 0.3s ease-in-out;

    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 0 24 24' width='20'><path d='M7 10l5 5 5-5z'/></svg>")
        no-repeat left 12px center;
    background-size: 18px;
}

.form-select:hover {
    border-color: var(--main-color);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.5);
}

/* Style dropdown options */
.form-select option {
    cursor: pointer !important;
    font-size: 16px;
    font-weight: 400;
    background-color: #f2f5f7;
    text-align: center !important;
    color: #0a222e99;
}

/* Override the selected option */
/* .form-select option:checked {
  text-align: right!important;
  font-weight: 500;            
} */

.form-select option:hover {
    cursor: pointer !important;
    background-color: #f1f9ff; /* light blue hover */
}

.v-input__control,
.v-text-field .v-field {
    border: none !important;
}

.v-input__control:focus,
.v-text-field .v-field:focus {
    outline: none !important;
    box-shadow: none !important;

    background-color: transparent !important;
}
.serv-head {
    display: flex;
    justify-content: center;
}

.form-select option:hover,
.form-select option:focus,
.form-select option:checked {
    background-color: var(--main-color) !important;
    color: #fff !important;
}
.form-select option::selection {
    background: var(--main-color) !important;
    color: #fff;
}
.not-fonud-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.serv-card,
.service-card {
    background-color: white;
    box-shadow: 0 4px 8px #0000000d;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.serv-head,
.offers-head {
    position: relative;
}

.serv-name {
    font-size: 24px;
    font-weight: 600;
    color: #3f444a;
    margin: 20px 0;
}

.serv-card {
    overflow: hidden;
    position: relative;
}

.serv-card::after,
.service-card::after {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #279dd8;
    position: absolute;
    top: 60px;
    right: 50px;
    transform: translate(50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.service-card::after {
    right: 50%;
}

.serv-card:hover::after,
.service-card:hover::after {
    width: 1000px;
    height: 1000px;
    transition: width 0.7s ease, height 0.7s ease;
}

.serv-card .serv-name,
.serv-card .serv-description,
.service-card .serv-name,
.service-card .serv-description {
    position: relative;
    z-index: 100;
}

.serv-card .serv-name,
.service-card.serv-description,
.service-card .serv-name,
.serv-card .serv-description {
    transition: color 0.1s ease-in-out 0.1s;
}

.btn-primary:hover {
    background-color: #05a2f0 !important;
}

.serv-card:hover .serv-name,
.serv-card:hover .serv-description,
.service-card:hover .serv-name,
.service-card:hover .serv-description {
    color: white !important;
}

button.btn.btn-outline-primary {
    outline: none;
    border-color: var(--main-color);
}

button.btn.btn-primary:hover {
    background-color: #1e7bb5;
}

button.btn.btn-outline-primary:hover {
    background-color: var(--main-color) !important;
}
button.btn.btn-outline-primary:focus {
    border-color: var(--main-color);
}

.serv-description {
    font-size: 18px;
    font-weight: 300;
    color: #5c6873;
}

.content-section {
    margin-top: 100px;
    position: relative;
}

.info {
    margin-top: 80px;
    width: 100%;
}

.info .btns {
    display: flex;
    /* justify-content: space-between; */
    gap: 20px;
}

.servies-title,
.news-container .news-head p,
.services-container .services-head p,
.prev-jobs-head p,
.web-app-dev-title p {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #0a222e;
    margin: 20px 0;
}

.prev-jobs-head p,
.web-app-dev-title p,
.online-store-design-content .title {
    font-size: 35px;
}

.web-app-dev-title {
    position: relative;
}
.web-app-dev-title img {
    position: absolute;
    top: -5px;
    left: 33%;
}

.web-app-dev-head {
    position: relative;
    margin-top: 35px;
}
.web-app-dev-head .pseudo-img img {
    position: absolute;
    left: -6%;
    top: 18px;
    z-index: -1;
    max-height: 680px;
}

.web-app-dev-card .the-card-img img {
    width: 100%;
}

.web-app-dev-card,
.web-app-dev-cards {
    background-color: white;
    border-radius: 18px;
}
.web-app-dev-card .first {
    background-color: transparent !important;
}
.web-app-dev-card .title,
.web-app-dev-cards .title,
.online-store-design-card .title,
.upper-careem-first-card .title {
    color: #0a222e;
    font-size: 22px;
    font-weight: 500;
    margin: 15px 0;
}
.web-app-dev-card .discription,
.web-app-dev-cards .discription,
.online-store-design-content .discription,
.online-store-design-card .discription,
.upper-careem-first-card .discription {
    color: #0a222e99;
    font-size: 16px;
    font-weight: 300;
    line-height: 30px;
}
.web-app-dev-card .discription a,
.web-app-dev-cards .discription a,
.online-store-design-content .discription a,
.online-store-design-card .discription a,
.upper-careem-first-card .discription a {
    color: #0a222e99;
    font-size: 16px;
}

.online-store-design-content .discription {
    margin: 5px 0;
}

.web-app-dev-cards .text-holder {
    padding: 0 20px;
}
.web-app-dev-cards .text-holder ul li {
    color: var(--main-color);
    margin: 5px 0;
    font-size: 16px;
}
.web-app-dev-cards .text-holder ul li::marker,
.online-store-design-card .text-holder ul li::marker {
    font-size: 14px;
}

.web-app-dev-cards .images-holder {
    position: relative;
}
.web-app-dev-cards .images-holder .main-img img {
    width: 95%;
    z-index: 5;
}
.web-app-dev-cards .images-holder .halan img {
    margin: 20px 0;
}

.web-app-dev-cards {
    position: relative;
    overflow: hidden;
}

.web-app-dev-cards .vector20 {
    position: absolute;
    width: 80% !important;
}
.web-app-dev-cards .deliveroo-vector {
    left: 0;
}

.web-app-dev-cards .store,
.upper-careem-first-card .store {
    display: flex;
    align-items: center;
    flex-direction: row;
    z-index: 5;
    position: relative;
    gap: 25px;
    margin-top: 40px;
    margin-left: 55px;
    justify-content: left;
}

.web-app-dev-cards .deliveroo-store {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 60px 0;
    justify-content: start;
}
.web-app-dev-cards .halan-store {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 20px 0;
    justify-content: start;
}

.web-app-dev-cards .store img,
.upper-careem-first-card .store img {
    display: flex;
    width: 200px;
    margin: 10px;
    cursor: pointer;
}

.wp-services {
    margin: 30px 0;
}

.serv-vector {
    position: absolute;
    top: 10px;
    left: 500px;
}

.vectores {
    position: absolute;
    top: -13px;
    left: 575px;
}

.design {
    font-weight: 700;
    font-size: 55px;
    height: 190px;
}

.description {
    margin: 20px 0;
    font-weight: 350;
    font-size: 17px;
    color: var(--text-color);
}

.btn-outline-primary {
    width: 260px;
    height: 60px;
    color: #2f99ce;
    border-color: #2f99ce;
    border-radius: 18px;
}

.btn-primary {
    width: 260px;
    height: 45px;
    background-color: #2f99ce;
    border: none;
    border-radius: 18px;
}

.main {
    color: #279dd8 !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    cursor: pointer;
}

.arrow {
    margin-right: 5px;
}

.nav-link p {
    color: var(--text-color);
    font-weight: 300;
    font-size: 16px;
}
.nav-link:hover p {
    color: var(--main-color);
    text-decoration: underline;
}
.apps {
    margin: 0 30px;
    color: var(--text-color);
    cursor: pointer;
}
.first-vector,
.second-vector {
    display: none;
}
.header {
    background-color: white;
    height: 100px;
    box-shadow: 0 4px 8px #00000014;
    width: 100%;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 40px;
}

.icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menus {
    display: flex;
}

.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}

.logo {
    width: 7.5rem;
    margin-left: 30px;
    cursor: pointer;
}

.nav-bar .icons .lang {
    color: var(--text-color);
    font-weight: 300;
    font-size: 16px;
    text-decoration: underline;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.primary {
    background-color: #ffcf38;
    border: none;
    margin-right: 15px;
    color: white;
    width: 100px;
    height: 45px;
    padding: 5px;
    border-radius: 10px;
}

button.btn.btn-outline-secondary {
    width: 100px;
    /* height: 45px; */
    padding: 5px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 300;
}

.group {
    display: flex;
    align-items: center;
}
.group1 {
    display: flex;
    align-items: center;
}
.menu p {
    color: var(--text-color);
    cursor: pointer;
}

p {
    margin: 0;
}

.offers-body {
    background-color: white;
    border-radius: 25px;
    margin: 20px 0;
}

.offer-list {
    border-radius: 0 25px 0 25px;
}

.first-list {
    background-color: var(--main-color);
    border-radius: 0 25px 0 25px;
}
.last-list {
    background-color: var(--main-color);
    border-radius: 25px 0 25px 0;
}

.offer-list p {
    color: white;
    font-size: 18px;
    font-weight: 400;
    padding: 20px 50px;
    cursor: pointer;
}

.offer-list .active {
    background-color: white;
    color: var(--main-color);
    border-radius: 25px 0 0 25px;
}

.offer-details {
    border-radius: 18px 0 18px 0;
}

.offer-destails {
    width: 80%;
}

.offer-destails {
    padding: 20px 25px;
}

.offer-details-head {
    font-size: 24px;
    font-weight: 400;
    color: #222222;
    display: flex;
    padding: 20px 0px;
    position: relative;
}

.first-vector {
    position: absolute;
    left: 408px;
    top: 24px;
}
.second-vector {
    position: absolute;
    left: 408px;
    top: 18px;
}

.offer-description {
    font-weight: 300;
    font-size: 18px;
    color: #3b3c3d;
    line-height: 36px;
}

.bullets {
    display: flex;
}

li::marker {
    color: var(--main-color);
}

.bullets ul li {
    margin: 20px 0;
    color: #3b3c3d;
    font-weight: 300;
    font-size: 18px;
}

.know-more {
    text-decoration: none;
    color: var(--main-color);
    padding: 20px;
    font-size: 18px;
    font-weight: 400;
}

.analysis-head {
    position: relative;
}
.analysis-vector {
    position: absolute;
    top: -7px;
    left: 500px;
}

.analysis-card {
    background-color: white;
    box-shadow: 0 4px 8px #0000000d;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    color: #0a222e;
    padding: 100px 30px;
    max-height: 445px;
}

.analysis-card-four::after,
.analysis-card-one::after,
.analysis-card-two::after,
.analysis-card-three::after {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #279dd8;
    position: absolute;
    transition: width 0.7s ease, height 0.7s ease;
}

.analysis-card-one::after {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
}
.analysis-card-two::after {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
}
.analysis-card-three::after {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}
.analysis-card-four::after {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}

.analysis-card-four:hover::after,
.analysis-card-one:hover::after,
.analysis-card-two:hover::after,
.analysis-card-three:hover::after {
    width: 1600px;
    height: 1600px;
    transition: width 0.7s ease, height 0.7s ease;
}

.analysis-card .text-container {
    position: relative;
    z-index: 20;
}

.analysis-card .text-container {
    transition: color 0.3s ease-in-out 0.1s;
}

.analysis-card:hover .text-container {
    color: white !important;
}
.analysis-card .text-container .text {
    transition: color 0.3s ease-in-out 0.1s;
}
.analysis-card:hover .text {
    color: white !important;
}

.analysis-card img {
    transition: transform 0.2s ease-in-out;
    z-index: 10;
}

.analysis-card:hover img {
    transform: scale(1.1);
}

.first-img {
    position: absolute;
    bottom: -280px;
    left: -278px;
}

.analysis {
    margin: 20px 0;
}

.heading {
    font-size: 22px;
    font-weight: 600;
    margin: 20px 0;
}

.text-container .text {
    font-weight: 300;
    font-size: 16px;
    line-height: 34px;
    color: rgba(10, 34, 46, 0.6);
    max-width: 236px;
}

.number {
    font-size: 40px;
    font-weight: 600;
    color: #279dd8;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    position: absolute;

    bottom: 165px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.one {
    left: 110px;
}

.two {
    right: 110px;
}

.second-img-container,
.second-img-container2 {
    position: relative;
}

.img-container img {
    width: 100%;
    height: 555px;
    object-fit: cover;
    border-radius: 50%;
    /* object-position: 636% 101%; */
    /* object-position: bottom left; */
}
.second-img-container img {
    width: 559px;
    height: 456px;
    border-radius: 50%;
    object-fit: cover;
}
.second-img-container2 img {
    width: 518px;
    height: 453px;
}
.second-img {
    position: absolute;
    bottom: -282px;
     right: -278px;
}

.three-img {
    position: absolute;
    top: -289px;
    left: -278px;
}

.three {
    position: absolute;
    left: 110px;
    top: 165px;
}
.four-img {
    position: absolute;
    top: -289px;
   left: -278px;
}

.four {
    position: absolute;
    right: 110px;
    top: 165px;
}

.opinion-vector {
    left: 548px;
}

.opinion-card {
    position: relative;
    display: inline-block;
    width: 100%;
}

.man {
    width: 100%;
    border-radius: 14px;
}

.vid-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.customer-vector {
    left: 571px;
    top: 2px;
}

.customer-card {
    background-color: white;
    border-radius: 18px;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    padding: 30px;
    flex-direction: column;
    padding-top: 0;
    gap: 65px;
}

.customer-carddd {
    background-color: white;
    border-radius: 18px;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    padding: 30px;
direction: ltr;
    padding-top: 0;
    gap: 65px;
}

.customer-card-img img {
    filter: grayscale(100%);
    object-fit: contain !important;
    transition: filter 0.3s ease-in-out;
    cursor: pointer;
    width: 200px;
    height: 200px;
}

.web-hosting-content .web-hosting-working-with .customer-card-img img {
    width: 80px !important;
    height: 80px !important;
}

.customer-card-img img:hover {
    filter: grayscale(0%);
}

.customer-opinion {
    background-image: url(../assets/images/Frame\ 26086972.png);
    background-size: cover;
    background-position: center;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: 30px 110px;
}

.cutomer-review {
    margin: 80px 80px 40px 0;
    color: white;
    /* max-width: 280px; */
    /* width: 100%; */
    flex: 0 0 22%;
}

.header-holder {
    position: relative;
}

.header-holder img {
    position: absolute;
    top: 0;
    left: 20px;
}

.customer-text {
    font-size: 45px;
    font-weight: 700;
}

.paragraph {
    font-weight: 400;
    font-size: 18px;
}

.customer-opinion-card {
    margin: 20px 0;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-width: 1px;
    padding: 30px 30px;
    height: 370px;
    box-shadow: 0px 0px 15px 0px #0000001a;
    position: relative;
}

.signeture {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.profession {
    color: #279dd899;
    font-size: 17px;
    font-weight: 300;
    text-align: right;
}

.name {
    font-weight: 350;
    font-size: 22px;
    color: #0a222e;
}

.customer-opinion-card p {
    font-weight: 350;
    font-size: 18px;
    color: #414a59;
    line-height: 40px;
    text-align: right;
}
.rating {
    position: absolute;
    bottom: -15px;
    right: 0;
    padding: 10px 22px;
    border-radius: 16px;
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #f8f8f8 30%,
        #e8e8e8 70%,
        #ffffff 100%
    );
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1),
        0 0 25px rgba(251, 191, 36, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(251, 191, 36, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.rating::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(251, 191, 36, 0.2),
        transparent
    );
    animation: shimmer 3s infinite;
}

.rating:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.15),
        0 0 35px rgba(251, 191, 36, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.9);
    border-color: rgba(251, 191, 36, 0.4);
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%,
    100% {
        left: 100%;
    }
}

/* Real luxury gold stars */
.rating .fa-solid.fa-star {
    font-size: 22px;
    background: linear-gradient(
        135deg,
        #fff7cc 0%,
        #ffe066 15%,
        #ffd700 30%,
        #ffb800 50%,
        #ff9500 70%,
        #e68a00 85%,
        #cc7a00 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(255, 193, 7, 0.6))
        drop-shadow(0 0 10px rgba(255, 193, 7, 0.3));

    display: inline-block;
}

.rating .fa-solid.fa-star:hover {
    transform: scale(1.2) rotate(15deg);
    filter: drop-shadow(0 3px 10px rgba(255, 193, 7, 0.8))
        drop-shadow(0 0 20px rgba(255, 193, 7, 0.5));
}

@keyframes starGlow {
    0%,
    100% {
        filter: drop-shadow(0 2px 6px rgba(255, 193, 7, 0.6))
            drop-shadow(0 0 10px rgba(255, 193, 7, 0.3));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 3px 12px rgba(255, 193, 7, 0.9))
            drop-shadow(0 0 20px rgba(255, 193, 7, 0.6));
        transform: scale(1.08);
    }
}
.blog-head {
    text-align: center;
    position: relative;
}

.blog {
    color: #0a222e99;
    font-weight: 400;
    font-size: 24px;
}

.blog-vector {
    top: 45px;
    left: 491px;
}
.question-head {
    text-align: center;
    position: relative;
}

.question,
.news-container .news-head span,
.services-container .services-head span,
.prev-jobs-head span {
    color: #0a222e99;
    font-weight: 400;
    font-size: 18px;
}

.prev-jobs-head span {
    font-size: 16px;
}
.prev-jobs-head .vectors {
    position: absolute;
    top: -5px;
    left: 30.5%;
}

.prev-jobs-tabs .head-title-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.prev-jobs-tabs .nav-pills .nav-link {
    color: #0a222e99;
    background-color: transparent;
}
.prev-jobs-tabs .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #f2f8fc;
    color: #0a222e;
}

.prev-jobs-tabs .tab-content {
    background-color: transparent;
}

.prev-jobs-card {
    margin-bottom: 10px;
    background-color: white;
    border-radius: 18px;
    border: none;
    overflow: hidden;
    text-align: center;
    box-shadow: 0px 4px 25px 0px #0000000f;
}

.prev-jobs-card:hover img {
    transform: scale(1.1);
}

.prev-jobs-card img {
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.prev-jobs-card:hover p {
    transform: scale(1.2);
}

.prev-jobs-card p {
    font-weight: 400;
    font-size: 20px;
    color: #0a222e;
    margin-bottom: 15px;
    transition: transform 0.3s ease-in-out;
}

.prev-jobs-more-btn {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.question-vector {
    top: 28px;
    left: 490px;
}

.question-card {
    position: relative;
}

.pseudo {
    position: absolute;
    top: 20px;
    right: -20px;
    z-index: 1;
}

.pseudo img {
    max-height: 420px;
}

.bgr {
    position: relative;
    z-index: 2;
    max-height: 100%;
}
.bgr img {
    height: 450px;
    width: 100%;
    filter: grayscale(1);
    margin-top: -15px;
    border-radius: 10px;
    margin-right: 7px;
    transition: margin-top 0.5s ease, margin-right 0.5s ease, filter 0.5s ease; /* ✅ include filter */
}

.bgr img:hover {
    filter: grayscale(0);
    margin-top: 0;
    margin-right: 0;
}

button.btn.btn-link.collapsed {
    color: #0a222e !important;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
}

button.btn.btn-link {
    color: #3f444a !important;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
}

.question-menu .card-body {
    font-weight: 300;
    font-size: 18px;
    color: #5abff1;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.gradient-custom .card-body.mb-5,
.gradient-custom-4 .card-body.mb-5 {
    margin-top: 0;
    padding-top: 0;
}

.gradient-custom .card-body.mb-5 {
    padding-left: 100px;
}

.gradient-custom-4 .card-body.mb-5 {
    padding-right: 100px;
}

#headingOne,
#headingTwo,
#headingThree,
#headingFour,
#headingFive,
#headingSix,
#headingSeven,
#headingEight,
#headingNine,
#headingTen {
    border: none;
    background-color: white;
}

.question-menu .card {
    border: none;
    margin-bottom: 20px;
    padding: 0px;
}
.question-content .row {
    display: flex;
    align-items: center;
}
.comments-you-can .likes {
    display: flex;
}
.more-faq {
    color: white;

    font-size: 16px;
    cursor: pointer;
    background: var(--main-color);
    border: none;
    border-radius: 10px;
    padding: 10px;
    width: 170px;
}
.more-faq:hover {
    text-decoration: underline;
}
.floating-icons {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 99999;
}

.floating-icons a:hover img {
    transform: scale(1.1);
}
.floating-icons .whatsapp-icon {
    background: #25d366; /* Official WhatsApp green */

    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;

    transition: transform 0.2s ease-in-out;
}
.floating-icons .call-icon {
    background: var(--main-color); /* Official WhatsApp green */

    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;

    transition: transform 0.2s ease-in-out;
}
.comments-you-can .likes .dislike,
.comments-you-can .likes .like {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.comments-you-can .likes .dislike i {
    position: absolute;
    transform: rotate(-180deg);
    color: #c73203;
}
.comments-you-can .likes .like i,
.comments-you-can .likes .dislike i {
    cursor: pointer;
}
.comments-you-can .likes .like i:hover,
.comments-you-can .likes .dislike i:hover {
    font-weight: bold;
}
.comments-you-can .likes .like i {
    color: #288be6;
}
.comments-you-can .likes .dash {
    color: #5b5b5b91;
}
.comments-you-can .likes .likes-number {
    color: #424242;
    font-weight: 300;
    font-size: 18px;
}

.question-menu .arrow {
    float: left;
}

button.btn.btn-link .arrow {
    color: #279dd8;
    transition: transform 0.4s ease-in-out;
}

button.btn.btn-link.collapsed .arrow {
    color: #0a222e;
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}

button.btn.btn-link {
    display: block;
    width: 100%;

    text-align: right;
}

button.btn.btn-link:focus {
    color: #0a222e;
}

.footer {
    background-color: #181818;
    color: white;
}

.footer-content {
    margin: 0 100px;
}
.cards-holder {
    padding: 40px 0;
}

.first-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.last-btns {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20px;
}

a.contact {
    background-color: var(--main-color);
    text-align: center;
    outline: none;
    border: none;
    font-size: 18px;
    color: white;
    font-weight: 300;
    border-radius: 10px;
    padding: 10px 38px;
    text-decoration: none;
}
a.ask {
    background-color: white;
    text-align: center;
    outline: none;
    border: none;
    font-size: 18px;
    color: var(--main-color);
    font-weight: 300;
    border-radius: 10px;
    padding: 10px 15px;
    text-decoration: none;
}

.footer .details {
    color: white;
    opacity: 0.6;
    font-size: 16px;
    font-weight: 300;
}

.middle-row {
    margin: 0 50px;
}

.footer-card-heading {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
}

.footer-card-content p,
.footer-card-content a {
    font-size: 16px;
    font-weight: 300;
    margin: 15px 0;
    color: rgba(255, 255, 255, 0.86);
}

.footer-card-content a {
    display: block;
    text-decoration: none;
}

.wp-logo {
    width: 250px;
}

.contact-us i {
    color: var(--main-color);
}

/* .bottom-content {
  background-color: #0f0e0e;
  text-align: center;
} */

.condtion-holder {
    background-color: #0f0e0e;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-top-left-radius: 100px;
    font-size: 14px;
    font-weight: 300;
    margin-top: 4px;
    width: 625px;
}

.condtion-holder-dash {
    padding: 0 10px;
}

.copyright-holder {
    background-color: #0f0e0e;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-top-right-radius: 100px;
    margin-top: 4px;
    width: 625px;
}

.copyright-holder p {
    text-align: center;
    color: #888c8f;
    font-size: 14px;
    font-weight: 400;
    direction: ltr;
}
.form-inputs:focus {
    border: 1px solid var(--main-color);
}
.icon-and-text {
    display: flex;
    gap: 10px;
    margin-top: -6px;
    align-items: center;
}

.contact-us a {
    direction: ltr;
    font-size: 16px;
    font-weight: 300;
    margin: 15px 0;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.86);
}

a.location-link {
    direction: rtl;
}

.accounts-holder {
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    height: 100%;
    gap: 10px;
    margin: 0 10px;
}

.latest-blog {
    position: relative;
}

.backg {
    position: absolute;
    z-index: -1;
    width: 100vw;
    left: -115px;
}

.blog-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    border-radius: 10px 0 0 10px;
}

.blog-card img {
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.blog-card:hover img {
    transform: scale(1.1);
}

.blog-content-holder {
    background-color: white;
    width: calc(95%);
    border-radius: 10px 0 10px 10px;
    position: relative;
    z-index: 100;
    margin-top: -50px;
    box-shadow: 0px 0px 15px 0px #0000001a;
}

.blog-content-holder .date {
    background-color: var(--main-color);
    color: white;
    border: none;
    text-align: center;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 300;
    padding: 10px 20px;
    transition: margin-top 0.3s ease-in-out;
}

.blog-card:hover .blog-content-holder .date {
    margin-top: -5px;
}

.main-blog {
    color: #0a222e;
    font-weight: 400;
    font-size: 18px;
}

.blog-read-more {
    font-weight: 400;
    font-size: 18px;
    color: #0a222e99;
    text-decoration: none;
}

.blog-read-more i {
    color: var(--main-color);
}

.stay-in-touch {
    position: relative;
}

.stay-in-touch .title {
    font-size: 28px;
    font-weight: 600;
    color: #0a222e;
}

.stay-in-touch-vector {
    position: absolute;
    top: -15px;
    right: 251px;
}

.stay-in-touch-card {
    position: relative;
}

.stay-pseudo {
    position: absolute;
    /* top: 50px; */
    left: -20px;
    z-index: 1;
    height: 100%;
}

.stay-pseudo img {
    max-height: 450px;
    /* height: 100%; */
}

.stay-bgr {
    position: relative;
    z-index: 2;
    max-height: 100%;
}

.stay-bgr img {
    height: 450px;
    width: 100%;
    filter: grayscale(1);
    border-radius: 10px;
    object-fit: cover;
    margin-top: -25px;
    margin-right: 5px; /* ✅ set a base value */
    transition: margin-top 0.5s ease, margin-right 0.5s ease, filter 0.5s ease; /* ✅ include filter */
}

.stay-bgr img:hover {
    filter: grayscale(0);
    margin-top: 0;
    margin-right: 0;
}

.inputs-menu {
    height: 100%;
}

.form-inputs {
    width: 100%;
    border: 1px solid transparent;
    padding: 20px;
    border-radius: 10px;
    outline: none;
    background-color: #cccccc29;
    caret-color: #0a222e99;
}

.form-inputs::placeholder,
.area-field::placeholder {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
}

.area-field {
    width: 100%;
    border: none;
    padding: 20px;
    border-radius: 10px;
    outline: none;
    background-color: #cccccc29;
    caret-color: #0a222e99;
    height: 130px;
    text-align: start;
}

.flag-holder {
    position: relative;
}

.flag {
    position: absolute;
    right: 10px;
    top: 19px;
    display: flex;
    gap: 5px;
    /* width: 100%; */
    align-items: center;
}

.flag p {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
}

/* .wp-offer-tab {
  background-color: white;
  border-radius: 25px;
} */

.nav-links-holder .nav-link {
    border-radius: 0 !important;
    color: white !important;
    font-size: 18px;
    font-weight: 400;
    padding: 20px 50px;
    cursor: pointer;
}

.nav-links-holder .nav-link.active {
    color: var(--main-color) !important;
    background-color: white !important;
}

.tab-content {
    background-color: white;
}

.tabs-content-holder {
    background-color: white;
    border-radius: 25px;
}

div#v-pills-tab {
    border-top-right-radius: 25px !important;
}

.row.tabs-content-holder .col-4 {
    padding-right: 0;
}

.nav-links-holder .nav-link {
    background-color: var(--main-color) !important;
}

.nav-links-holder .nav-link:first-child {
    border-top-right-radius: 30px !important;
}

.nav-links-holder .nav-link:last-child {
    border-bottom-right-radius: 30px !important;
}

.nav-link.active + .nav-link {
    border-top-left-radius: 30px !important;
    background-color: red;
}

.nav-links-holder .nav-link:has(+ a.active) {
    border-bottom-left-radius: 30px !important;
}

.nav-link,
.nav-link .active {
    transition: none !important;
}

.nav-bar {
    background-color: white;
    box-shadow: 0 4px 8px #00000014;
}

.nav-btns {
    display: flex;
    justify-content: center;
    margin-right: 145px;
}

.dropdown-toggle::after {
    display: none !important;
}

.contact-us-hero-section {
    background-image: url("../assets/images/contact-us.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 392px;
    color: white;
    position: relative;
    margin-top: 48px;
    display: flex;

    justify-content: center;
    flex-direction: column;
}
.contact-us-hero-section .name {
    color: white;
    font-weight: 700;
    font-size: 60px;
    margin-bottom: 10px;
}
.about-us-hero-section {
    background-image: url("../assets/images/about-us.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 392px;
    color: white;
    margin-top: 48px;
    position: relative;
    display: flex;

    justify-content: center;
    flex-direction: column;
}

.about-us-hero-section .name {
    color: white;
    font-weight: 700;
    font-size: 50px;
    margin-bottom: 10px;
}

.theway {
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: rgba(10, 34, 46, 0.6);
    width: fit-content;
    padding: 10px;
    border-radius: 3px;
}

.hero-text {
    text-align: right;
    padding: 0 10rem;
}

.theway p {
    font-size: 18px;
    font-weight: 300;
}

.contact-ways .card {
    background-color: #f9fcfc;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0px 20px 20px 0px #0000000d;
    border: none;
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    height: 225px;
}

.card-holder .card {
    background-color: #f9fcfc;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0px 20px 20px 0px #0000000d;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 230px;
    background-color: white;
    transition: width 0.7s ease, height 0.7s ease;
    overflow: hidden;
}

.card-holder .card::after {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #279dd8;
    position: absolute;
    top: 80px;
    right: 155px;
    transform: translate(50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.card-holder .card:hover::after {
    width: 1000px;
    height: 1000px;
    transition: width 0.7s ease, height 0.7s ease;
}

.card-holder .card .card-img,
.service-card .card-img {
    margin-top: 10px;
    background-color: var(--main-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: auto;
    padding: 15px;
    position: relative;
    z-index: 20;
}

.the-app-idea-section .the-steps .step-img {
    background-color: var(--main-color);
    padding: 15px;
    width: fit-content;
    height: fit-content;
    border-radius: 50%;
    margin-top: 20px;
}

.card-holder .card .card-img img,
.service-card .card-img img,
.the-app-idea-section .the-steps .step-img img {
    width: 50px;
    height: 50px;
}
.card-holder .card {
    cursor: pointer;
}
.card-holder .card .card-title {
    color: #0a222e;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    position: relative;
    z-index: 20;
    transition: color 0.3s ease-in-out;
}

.card-holder .card:hover .card-title {
    color: white !important;
    transition: color 0.3s ease-in-out;
}

.category-name {
    font-weight: 400;
    font-size: 22px;
    margin: 20px 0;
}
.category-details {
    font-weight: 300;
    font-size: 17px;
    color: #4d4d4d !important;
    text-align: center;
    text-decoration: none;
}

.map-img iframe {
    width: 100%;
    height: 400px;
}

.about-wp-header {
    position: relative;
}
.about-wp-header .title {
    font-size: 28px;
    font-weight: 600;
    color: #0a222e;
}
.about-wp-header .vector {
    position: absolute;
    top: -10px;
    left: 245px;
}

.about-wp .discription,
.wp-history .discription {
    font-weight: 300;
    font-size: 16px;
    color: #0a222e99;
    line-height: 34px;
}

.wp-history .title {
    margin-top: 0px;
    margin-bottom: 10px;
}

.history-vector {
    position: absolute;
    right: 183px !important;
}

.about-wp-img img {
    width: 100%;
}

.about-wp {
    position: relative;
    margin-top: 40px;
}

.floating-img {
    position: absolute;
    width: 300px;
    height: 220px;
    z-index: 100;
    top: 40px;
}

.wp-history-img {
    width: 100%;
}

.res-tabs {
    border-radius: 25px;
}

.head-title-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.head-title-nav::-webkit-scrollbar {
    display: none;
}

.res-tabs .offer-destails {
    white-space: normal;
    overflow-x: unset !important;
}

.nav-pills .nav-link {
    color: var(--main-color);
    background-color: white;
    border-radius: var(--bs-nav-pills-border-radius);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--main-color);
    color: white;
}

.apply-first-hero-section,
.blog-details-hero-section,
.wp-services-hero-section,
.prev-jobs-hero-section,
.web-app-dev-hero-section,
.online-store-design-hero-section,
.app-like-upper-hero-section,
.payment-methods-hero-section,
.job-decription-hero-section,
.techniques-hero-section,
.privacy-policy-hero-section,
.user-agreement-hero-section,
.terms-conditions-hero-section,
.web-hosting-hero-section,
.shared-hosting-hero-section {
    background-image: url(../assets/images/aplly1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    color: white;
    position: relative;
    margin-top: 85px;
    display: flex;

    justify-content: center;
    flex-direction: column;
}
.e-marketing-hero-section {
    background-image: url(../assets/images/aplly1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    color: white;
    position: relative;
    margin-top: 85px;
}
.apply-first-hero-section .name,
.blog-details-hero-section .name,
.wp-services-hero-section .name,
.prev-jobs-hero-section .name,
.web-app-dev-hero-section .name,
.online-store-design-hero-section .name,
.app-like-upper-hero-section .name,
.payment-methods-hero-section .name,
.job-decription-hero-section .name,
.techniques-hero-section .name,
.privacy-policy-hero-section .name,
.user-agreement-hero-section .name,
.terms-conditions-hero-section .name,
.shared-hosting-hero-section .name {
    color: white;
    font-weight: 700;
    font-size: 50px;
    margin-bottom: 10px;
}

.first-apply .card-title {
    position: relative;
}

.first-apply .card-title p {
    font-size: 28px;
    font-weight: 600;
    color: #0a222e;
}
.first-apply .card-title img {
    position: absolute;
    top: -10px;
    left: 355px;
}

.first-apply .card {
    background-color: white;
    border-radius: 18px;
    border: none;
    overflow: hidden;
}

.first-apply .card .card-inputs {
    padding: 35px 150px;
}
.first-apply .card .card-img img {
    width: 100%;
    display: block;
}

.prev-jobs-hero-section {
    background-image: url(../assets/images/previous-jobs.jpg);
}

.web-app-dev-hero-section {
    background-image: url(../assets/images/web-app-dev.png);
}

.apply-second-hero-section {
    background-image: url(../assets/images/apply\ second.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 450px;
    color: white;
    position: relative;
    margin-top: 85px;
}
.apply-second-hero-section .name {
    color: white;
    font-weight: 700;
    font-size: 50px;
    margin-bottom: 10px;
}

.second-apply .card-title {
    position: relative;
}

.second-apply .card-title p {
    font-size: 28px;
    font-weight: 600;
    color: #0a222e;
}
.second-apply .card-title img {
    position: absolute;
    top: -10px;
    left: 420px;
}

.second-apply .card {
    background-color: white;
    border-radius: 18px;
    border: none;
    overflow: hidden;
}

.second-apply .card .card-inputs {
    padding: 35px 150px;
}
.second-apply .card .card-inputs .dropdown-field {
    width: 100%;
    border: none;
    padding: 20px 30px;
    border-radius: 10px;
    outline: none;
    background-color: #cccccc29;
    text-align: right;
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    appearance: none; /* For other browsers */
    background-image: none; /* Remove any background image */
    /* padding-right: 0; */
}
.second-apply .card .card-img img {
    width: 100%;
    display: block;
}

.second-apply .card .form-check {
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.second-apply .card .form-check label {
    color: #0a222e99;
    opacity: 0.6;
    font-weight: 300;
    font-size: 18px;
}
.second-apply .card .form-check input {
    width: 25px;
    height: 25px;
    color: white;
    box-shadow: none;

    /* background-color: var(--main-color); */
}
.second-apply .card .form-check input:checked {
    background-color: var(--main-color);
    border: none;
}

.apply-online-last .recieved {
    margin: 70px auto;
    text-align: center;
    margin-top: 130px;
}
.apply-online-last .recieved .done-recieved {
    color: var(--main-color);
    font-size: 35px;
    font-weight: 500;
}
.apply-online-last .recieved .wait {
    color: #0a222e99;
    font-size: 22px;
    font-weight: 350;
    margin: 15px 0;
}

.apply-online-last .recieved .ok {
    width: 100%;
    max-width: 500px;
    height: 350px;
}

.customer-testimonials-hero-section {
    background-image: url(../assets/images/cutomer-testimonsiol_new.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 450px;
    color: white;
    position: relative;
    margin-top: 85px;
}
.customer-testimonials-hero-section .name {
    color: white;
    font-weight: 700;
    font-size: 50px;
    margin-bottom: 10px;
}

.customer-testimonials-opinion {
    text-align: center;
}

.customer-testimonials-opinion .servies-title {
    margin-bottom: 5px;
}

.customer-testimonials-opinion .sharing {
    color: #0a222e99;
    opacity: 0.6;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 20px;
}

.customer-testimonials-opinion .more,
.services-container .more-btn {
    background-color: transparent;
    border: 1px solid #0a222e99;
    cursor: pointer;
    border-radius: 18px;
    width: 350px;
    padding: 15px;
    color: #0a222e99;
    opacity: 0.6;
    font-size: 18px;
    font-weight: 400;
}

.wp-news-hero-section {
    background-image: url(../assets/images/wp-news.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 450px;
    color: white;
    position: relative;
}
.wp-news-hero-section .name {
    color: white;
    font-weight: 700;
    font-size: 50px;
    margin-bottom: 10px;
}

.news-container {
}

.news-container .news-head,
.services-container .services-head,
.prev-jobs-container .prev-jobs-head {
    text-align: center;
    position: relative;
}
.news-container .news-head p {
    margin: 10px 0;
}
.news-container .news-head .vectors {
    position: absolute;
    top: -13px;
    left: 495px;
}
.news-container .news-head span {
}

.blog-details-hero-section {
    background-image: url(../assets/images/blog-details-bg.jpg);
}
.blog-details-hero-section .name {
    margin: 20px 0;
}

.blog-details-content .card {
    background-color: white;
    width: 100%;
    border-radius: 8px;
    padding: 20px 15px 20px 120px;
    border: none;
    margin: 20px 0;
}

.blog-details-content .card .title {
    color: #0a222e;
    font-size: 20px;
    font-weight: 600;
}
.blog-details-content .card .date p,
.blog-details-content .rest-arti p {
    color: #0a222e99;
    opacity: 0.6;
    font-size: 16px;
    font-weight: 300;
}

.blog-details-content .saves .date {
    display: flex;
    align-items: center;
    gap: 7px;
}

.blog-details-content .rest-arti {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 7px 0;
}

.latest-blogs .news-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.latest-blogs .news-info .profile-details {
    width: 100%;
}

.latest-blogs .news-info .profile-details .name {
    font-weight: 400;
    font-size: 20px;
    color: #0a222e;
}
.latest-blogs .news-info .profile-details .date {
    font-weight: 400;
    font-size: 14px;
    color: #6c6a72;
    text-align: left;
}

.the-new-details .the-new-img img {
    width: 100%;
}

.the-new-details .updated-daily .title {
    color: #0f0f0f;
    font-weight: 600;
    font-size: 22px;
    margin: 20px 0;
}

.the-new-details .updated-daily .text {
    font-weight: 350;
    font-size: 15px;
    width: 85%;
    color: #6c6a72;
    line-height: 30px;
}

.the-new-details .auther p {
    width: 90%;
    font-weight: 400;
    font-size: 20px;
    color: rgba(10, 34, 46, 0.4);
}

.the-new-details .auther .auther-name {
    color: #1d1729;
    font-weight: 400;
    font-size: 24px;
    direction: ltr;
    width: 90%;
    margin: 10px 0;
}

.the-new-details .updated-daily .text a {
    color: inherit;
}

.the-new-details .new-details-imgs img {
    width: 100%;
}

.quote-box {
    background-image: url(../assets/images/Blockquote.svg);
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 30px;
    margin: 20px 0;
}

.quote-box .text {
    margin: 15px;
}

.quote-box p {
    /* margin: 0 10px; */
    font-weight: 400;
    font-size: 20px;
    color: rgba(10, 34, 46, 0.4);
}

.quote-box footer {
    color: #1d1729;
    font-weight: 350;
    font-size: 21px;
    direction: ltr;
    margin-bottom: 23px;
    /* margin: 10px 5px; */
}

.wp-services-hero-section {
    background-image: url(../assets/images/services-bg.png);
    display: flex;

    justify-content: center;
    flex-direction: column;
}

.services-container .services-head p {
    margin: 0;
}

.services-container .services-head {
    position: relative;
}
.services-container .service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services-container .services-head .vectores {
    position: absolute;
    top: -10px;
    left: 525px;
}

.services-container .service-card .title {
    font-weight: 400;
    font-size: 20px;
    color: #0a222e;
    margin: 15px 0;
    position: relative;
    z-index: 20;
    transition: color 0.3s ease-in-out;
}
.services-container .service-card .details {
    color: #0a222e99;
    font-weight: 300;
    font-size: 16px;
    margin: 10px 0;
    text-align: center;
    position: relative;
    z-index: 20;
    transition: color 0.3s ease-in-out;
    flex-grow: 1;
}

.service-card:hover .details,
.service-card:hover .title {
    color: white !important;
}

.services-container .more-services {
    display: none;
}

.services-container .more-btn {
    margin: 5px auto;
    display: block;
}

.error-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 120px;
}

.error-holder img {
    width: 100%;
    max-width: 500px;
    margin: 10px 0;
}

.error-holder .content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 50px 0;
}

.error-holder .no-page {
    font-weight: 600;
    font-size: 36px;
    color: #0a222e;
    margin: 5px;
}
.error-holder .sorry {
    font-weight: 400;
    font-size: 17px;
    color: #0a222e99;
    margin: 5px;
    text-align: center;
}

.error-holder .to-home {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-app-hero-section {
    background-image: url("../assets/images/representations-user-experience-interface-design 1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 360px;
    margin-top: 88px;
}

.mobile-app-hero-section .name {
    color: white;
    font-weight: 700;
    font-size: 45px;
    margin-bottom: 10px;
}
.mobile-app-hero-section .more-text {
    color: white;
    margin: 30px 0;
    width: 70%;
    font-weight: 300;
    font-size: 17px;
}

.mobile-app-hero-section .more-text p {
    margin: 10px 0;
}
.mobile-app-container .ask {
    margin-top: 23px;
}
.mobile-app-container .ask .ask-card {
    background-color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 10px;
    margin: 15px 0;
    cursor: pointer;
    height: 53px;
    transition: background-color 0.3s ease-in-out;
}
#app-design-request,
#app-design-card,
#control-price-card,
#prices-card,
#why-need-app,
#profit-ways-card,
#control-screen,
#why-wp-best-company,
#used-languages,
#app-design-steps,
#comments-you-can {
    scroll-margin-top: 95px; /* Adjust based on your header height */
}

.section-with-container {
    margin: 50px 100px !important;
}

.mobile-app-container .ask .ask-card:hover {
    background-color: rgba(39, 157, 216, 0.6);
}

.ask-card .icon-div {
    background-color: #0a222e99;
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease-in-out, width 0.2s ease-in-out;
}

.mobile-app-container .ask .ask-card:hover .icon-div {
    background-color: #279dd8 !important;
    width: 60px;
}

.mobile-app-container .ask .ask-card.active .icon-div {
    background-color: #279dd8 !important;
    width: 60px;
}
.mobile-app-container .ask .ask-card:hover p {
    color: white !important;
}

.mobile-app-container .ask .ask-card img {
    /* display: block; */
    /* height: 100%; */
}
.mobile-app-container .ask .ask-card p {
    color: #0a222e99;
    font-weight: 400;
    font-size: 14px;
}

.content .best-comp-card,
.app-design-card,
.why-need-app,
.prices-card,
.profit-ways-card,
.control-screen,
.why-wp-best-company,
.used-languages,
.app-design-request,
.comments-you-can,
.app-design-steps {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 0;
}

.card-content,
.why-wp-best-company .the-card-content {
    display: flex;
    gap: 10px;
}

.content .best-comp-card .text-content,
.app-design-card .card-content .text-content,
.why-need-app .text-content,
.prices-card .text-content,
.profit-ways-card .text-content,
.control-screen .text-content,
.why-wp-best-company .text-content,
.used-languages .text-content,
.app-design-request .text-content,
.comments-you-can .text-content {
    padding: 18px;
}

.app-design-card .card-content img,
.why-wp-best-company .the-card-content img {
    height: 100%;
    object-fit: cover;
    width: 300px;
}
.content .best-comp-card .title,
.app-design-card .title,
.why-need-app .title,
.prices-card .text-content .title,
.profit-ways-card .text-content .title,
.control-screen .text-content .title,
.why-wp-best-company .text-content .title,
.used-languages .text-content .title,
.app-design-request .text-content .title,
.comments-you-can .text-content .title {
    font-weight: 600;
    font-size: 22px;
    color: #0a222e;
    margin: 10px 0;
}

.app-design-steps .main-title {
    padding: 20px;
}
.app-design-steps .main-title {
    font-weight: 600;
    font-size: 24px;
    color: #279dd8;
    text-align: center;
}

.content .best-comp-card p,
.app-design-card p,
.why-need-app .text-content p,
.prices-card .text-content p,
.profit-ways-card .text-content p,
.control-screen .text-content p,
.why-wp-best-company .text-content p,
.used-languages .text-content p,
.app-design-request .text-content p {
    color: #0a222e99;

    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
}

.control-screen .text-content p,
.used-languages .text-content p {
    color: var(--main-color);
}

.control-screen .text-content ul li,
.used-languages .text-content ul li {
    color: #0a222e99;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    margin: 0;
}
.control-screen .text-content ul li::marker,
.used-languages .text-content ul li::marker {
    color: #0a222e99;
}

.prices-card .text-content .question {
    color: #0a222e;
    font-weight: 400;
    font-size: 18px;
}

.profit-ways-card .text-content ul {
    padding: 0;
    padding-right: 25px;
}

.profit-ways-card .text-content ul li {
    color: var(--main-color);
    font-weight: 400;
    font-size: 16px;
}

.prices-card .text-content .default-answer {
    color: var(--main-color);
    font-weight: 400;
    font-size: 18px;
}

.why-need-app .text-content p span,
.why-wp-best-company .text-content p span {
    color: var(--main-color);
}
.why-need-app .text-content .answers {
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.why-need-app .text-content .answers img {
    width: 30px;
    height: 30px;
}

.content .best-comp-card p a,
.app-design-card p a,
.why-need-app .text-content p a,
.why-wp-best-company .text-content p a,
.used-languages .text-content ul li a {
    color: inherit;
}

.app-design-request .form {
    width: 80%;
    margin: 20px auto;
}

.comments-you-can .comment-auther {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* .comments-you-can .comment-auther img {
  width: 70px;
  height: 70px;
} */
.comments-you-can .comment-auther .name {
    color: #02133199;
    font-weight: 400;
    font-size: 16px;
}
.comments-you-can .comment-auther .request {
    color: #081429;
    font-size: 18px;
    font-weight: 400;
}

/* .app-design-request .form .how-to-help {
  height: 150px;
} */
.app-design-request .form .form-control:focus,
.write-your-question .form .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: #cccccc29;
}

.app-design-request .form .form-control,
.write-your-question .form .form-control {
    resize: none;
    overflow: hidden;
    height: 130px;
}

/* The actual timeline (the vertical ruler) */
.main-timeline-4 {
    position: relative;
    width: 100%;
    display: block;
}

/* The actual timeline (the vertical ruler) */
.main-timeline-4::after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 3px dashed #0a222e4d;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
    margin-top: 15px;
    margin-bottom: 176px;
}
.web-design-time-line::after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 3px dashed #0a222e4d;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
    margin-top: 15px;
    margin-bottom: 155px;
}

.send-comment {
    height: 60px;
}

.app-design-request .app-design-request-image {
    width: 100%;
}

/* Container around content */
.timeline-4 {
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* The circles on the timeline */
.timeline-4::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    right: -5px;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    background-color: #279dd8;
}

.app-development::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    right: -5px;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    background-color: #ed4126;
}
.rocket::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    right: -5px;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    background-color: #0648f2;
}

.right-4 .the-text-content {
    text-align: left;
    margin-left: 35px;
}

/* Place the container to the left */
.left-4 {
    left: -50%;
}

/* Place the container to the right */
.right-4 {
    left: -30px;
}

/* Add arrows to the left container (pointing right) */
.left-4::before {
    content: "";
    position: absolute;
    top: -6px;
    z-index: 10;
    right: -70px;
    width: 50px; /* Adjust width to match your image */
    height: 50px; /* Adjust height to match your image */
    background-image: url(../assets/images/app-analysis.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.app-development::before {
    content: "";
    position: absolute;
    top: -6px;
    z-index: 10;
    right: -70px;
    width: 50px; /* Adjust width to match your image */
    height: 50px; /* Adjust height to match your image */
    background-image: url(../assets/images/app-development.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.rocket::before {
    content: "";
    position: absolute;
    top: -6px;
    z-index: 10;
    right: -70px;
    width: 50px; /* Adjust width to match your image */
    height: 50px; /* Adjust height to match your image */
    background-image: url(../assets/images/rocket.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Add arrows to the right container (pointing left) */
.right-4::before {
    content: "";
    position: absolute;
    top: -13px;
    z-index: 10;
    left: -45px;
    width: 50px; /* Adjust width to match your image */
    height: 50px; /* Adjust height to match your image */
    background-image: url(../assets/images/deal.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ui-ux::before {
    content: "";
    position: absolute;
    top: -7px;
    z-index: 10;
    left: -45px;
    width: 50px; /* Adjust width to match your image */
    height: 50px; /* Adjust height to match your image */
    background-image: url(../assets/images/ui-ux.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.the-testing::before {
    content: "";
    position: absolute;
    top: 2px;
    z-index: 10;
    left: -40px;
    width: 50px; /* Adjust width to match your image */
    height: 50px; /* Adjust height to match your image */
    background-image: url(../assets/images/the-testing.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Fix the circle for containers on the right side */
.right-4::after {
    right: 381px;
    background-color: #4db648;
}
.ui-ux::after {
    right: 381px;
    background-color: #ffcf38 !important;
}
.the-testing::after {
    right: 381px;
    background-color: #26a8d1 !important;
}

.card-body .main-text {
    font-weight: 400;
    font-size: 18px;
    color: #0a222e;
}

.card-body .explain {
    font-weight: 300;
    font-size: 18px;
    color: #0a222e99;
}

/* Media queries - Responsive timeline on screens less than 600px wide */

.gradient-custom {
    /* fallback for old browsers */
    /* background: #6a11cb; */

    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(
        to right,
        rgba(106, 17, 203, 1),
        rgba(37, 117, 252, 1)
    );

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* background: linear-gradient(
    to right,
    rgba(106, 17, 203, 1),
    rgba(37, 117, 252, 1)
  ); */
    border: none;
}

.gradient-custom-4 {
    /* fallback for old browsers */
    /* background: #f093fb; */

    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(
        to left,
        rgba(240, 147, 251, 1),
        rgba(245, 87, 108, 1)
    );

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* background: linear-gradient(
    to left,
    rgba(240, 147, 251, 1),
    rgba(245, 87, 108, 1)
  ); */
    border: none;
}

.taj-app-hero-section {
    background-image: url("../assets/images/representations-user-experience-interface-design 1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 360px;
    margin-top: 88px;
    display: flex;
}

.taj-app-hero-section .hero-text .theway,
.fac-hero-section .hero-text .theway {
    color: white;
    background-color: #26323869;
}
.taj-app-hero-section .hero-text .theway {
    margin-top: 40px;
}

.taj-app-hero-section .title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    z-index: 2;
    display: flex;
}
.taj-app-hero-section .title p {
    color: white;
    font-weight: 700;
    font-size: 41px;
}

.the-app-idea-section {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 0;
    padding: 20px;
}

.iphone-section .iphone-img img,
.the-app-idea-section .the-img-holder img {
    width: 100%;
}

.taj-app-header,
.fac-header {
    width: 75%;
    margin: 80px auto;
    text-align: center;
}
.fac-header {
    margin: 100px auto;
    margin-bottom: 20px;
    position: relative;
}

.taj-app-header .title,
.fac-header .title {
    position: relative;
}
.fac-header .title::before {
    content: "";
    position: absolute;
    top: -12px; /* always stick to the top */
    left: 265px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.stay-in-touch-head .title::before {
    content: "";
    position: absolute;
    top: -12px; /* always stick to the top */
    right: 260px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.cutomer-review .customer-text::before {
    content: "";
    position: absolute;
    top: -12px; /* always stick to the top */
    right: 280px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.offers-head .servies-title::before {
    content: "";
    position: absolute;
    top: -5px; /* always stick to the top */
    left: 470px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.wp-services .servies-title::before {
    content: "";
    position: absolute;
    top: 10px; /* always stick to the top */
    right: 750px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.about-wp-header .title::before {
    content: "";
    position: absolute;
    top: 0px; /* always stick to the top */
    right: 235px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.e-wp-header .title::before {
    content: "";
    position: absolute;
    top: 0px; /* always stick to the top */
    right: 415px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.e-wp-header2 .title::before {
    content: "";
    position: absolute;
    top: 40px; /* always stick to the top */
    right: 145px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.about-wp-header .title.special-title::before {
    content: "";
    position: absolute;
    top: 0px; /* always stick to the top */
    right: 200px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.analysis-head .servies-title::before {
    content: "";
    position: absolute;
    top: -2px; /* always stick to the top */
    left: 516px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.our-customer .servies-title::before {
    content: "";
    position: absolute;
    top: 10px; /* always stick to the top */
    right: 680px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.customer-qustion .servies-title::before {
    content: "";
    position: absolute;
    top: 30px; /* always stick to the top */
    right: 770px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.customer-qustion .working-title::before {
    content: "";
    position: absolute !important;
    top: 20px !important; /* always stick to the top */
    right: 796px !important; /* always stick to the left */
    width: 30px !important;
    height: 30px !important;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.first-apply .card-title p::before {
    content: "";
    position: absolute;
    top: -12px; /* always stick to the top */
    left: 400px; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.taj-app-header .title p,
.fac-header .title p {
    color: #0a222e;
    margin: 30px 0;
    font-weight: 700;
    font-size: 41px;
}

.fac-header .title p {
    margin: 10px 0;
}

.taj-app-header .title img {
    position: absolute;
    top: 0px;
    left: 33%;
}
.fac-header .title img {
    position: absolute;
    top: -30px;
    left: 20%;
}
.taj-app-header .project-details-title,
.fac-header .project-details-title {
    color: #0a222e;
    font-weight: 600;
    font-size: 28px;
    margin: 5px 0;
}
.taj-app-header .project-details,
.fac-header .project-details {
    color: #0a222e99;
    font-weight: 400;
    font-size: 16px;
}

.the-app-idea-section .the-steps {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.the-app-idea-section .the-steps .step-text {
    width: 75%;
    margin-top: 30px;
}
.the-app-idea-section .the-steps .step-text .step-name {
    font-weight: 600;
    font-size: 22px;
    color: #0a222e;
    margin: 10px 0;
}
.the-app-idea-section .the-steps .step-text .step-details {
    font-weight: 400;
    font-size: 16px;
    color: #0a222e99;
}

.the-app-idea-section .store img {
    width: 100%;
    cursor: pointer;
}

.taj-comments {
    padding: 20px 60px;
}

.taj-comments .form {
    margin: 0;
    width: 100%;
}

.taj-comments .your-rating .rate {
    display: flex;
    gap: 5px;
    cursor: pointer;
    direction: ltr !important;
}

.taj-comments .your-rating {
    display: flex;
    background-color: #f6f6f699;
    padding: 20px;
    width: 80%;
    justify-content: space-around;
    border-radius: 20px;
    margin: 20px 0;
}
.taj-comments .your-rating p {
    font-weight: 600;
    font-size: 22px;
    color: #0a222e;
}

.your-rating .rate i {
    font-size: 30px;
    color: transparent;
    -webkit-text-stroke: 1px black;
    transition: color 0.2s, -webkit-text-stroke 0.2s;
}

.your-rating .rate i.active {
    color: #ed930c;
    -webkit-text-stroke: 0;
}

.ask-for-similar-project {
    background-color: #f2f2f2;
    border-radius: 18px;
    overflow: hidden;
    margin: 20px 0;
}

.ask-for-similar-project .img-holder {
    height: 100%;
}
.ask-for-similar-project .img-holder img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.ask-for-similar-project .form-content {
    padding: 25px;
    text-align: right !important;
}
.ask-for-similar-project .form-content .title {
    margin: 15px auto;
    color: #0a222e;
    font-weight: 600;
    font-size: 30px;
}
.ask-for-similar-project .form-content .form-inputs,
.ask-for-similar-project .area-field {
    background-color: white !important;
}
.ask-for-similar-project .form-content .form .form-control {
    resize: none;
    overflow: hidden;
    height: 130px;
}

.similar-projects {
    background-color: #fff;
    background-image: url(../assets/images/div.elementor-background-overlay.svg);
    border-radius: 18px;
    overflow: hidden;
    margin: 20px 0;
    text-align: center;
    padding: 20px;
}
.similar-projects .title {
    color: #0a222e;
    font-weight: 600;
    font-size: 30px;
    margin: 15px 0;
}
.similar-projects .similar-projects-card .card {
    box-shadow: 0px 20px 20px 0px #0000000d;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
}
.similar-projects .similar-projects-card .card .card-name {
    color: #0a222e99;
    font-size: 18px;
    font-weight: 400;
    margin: 15px 0;
}
.similar-projects .similar-projects-card .card img {
    width: 100%;
}
.similar-projects .similar-projects-card .card .view-site {
    margin-bottom: 15px;
    width: 60%;
}

.online-store-design-hero-section {
    background-image: url(../assets/images/online-store-design-hero.png);
}
.online-store-design-hero-section .theway,
.app-like-upper-hero-section .theway,
.payment-methods-hero-section .theway,
.job-decription-hero-section .theway,
.techniques-hero-section .theway,
.privacy-policy-hero-section .theway,
.user-agreement-hero-section .theway,
.user-agreement-hero-section .theway,
.shared-hosting-hero-section .theway {
    background-color: #26323869;
}
.online-store-design-content .online-store-design-head {
    position: relative;
    text-align: center;
}
.online-store-design-head img {
    position: absolute;
    top: -11px;
    left: 33%;
}

.online-store-design-card {
    background-color: white;
    border-radius: 18px;
    overflow: hidden;
    padding: 15px;
    height: 400px;
}

.your-feature-content .feature-card {
    background-color: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0px 20px 20px 0px #0000000d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    margin: 20px 0;
    height: 270px;
    position: relative;
}

.your-feature-content .feature-card::after {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #279dd8;
    position: absolute;
    top: -50px;
    transition: width 0.4s ease, height 0.4s ease;
}

.your-feature-content .feature-card:hover::after {
    width: 1000px;
    height: 1000px;
    transition: width 0.7s ease, height 0.7s ease;
}

.your-feature-content .feature-card .card-title {
    color: #0a222e;
    font-weight: 400;
    font-size: 18px;
    margin: 10px 0;
    position: relative;
    z-index: 5;
    transition: color 0.1s ease-in-out 0.1s;
}
.your-feature-content .feature-card .card-explain {
    color: #0a222e99;
    font-weight: 300;
    font-size: 16px;
    position: relative;
    z-index: 5;
    transition: color 0.1s ease-in-out 0.1s;
}

.your-feature-content .feature-card:hover .card-title,
.your-feature-content .feature-card:hover .card-explain {
    color: white;
}

.your-feature-content .feature-card .card-img {
    background-color: var(--main-color);
    width: 200px;
    height: 200px;
    padding: 20px;
    border-radius: 50%;
    margin-top: -100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.your-feature-content .feature-card .card-img img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}
.your-feature-content .feature-card .text-card-content {
    padding: 15px;
    height: 150px;
}

.online-store-design-card .text-holder .lio {
    color: var(--main-color);
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    margin: 5px 10px;
}
.online-store-design-card .image-holder {
    position: relative;
}
.online-store-design-card .image-holder .pseudo-img {
    position: absolute;
}
.online-store-design-card .image-holder .main-img img {
    width: 100%;
    position: relative;
    margin-left: 80px;
    /* height: 400px; */
    margin-top: -6px;
}
.online-store-design-card .image-holder .pseudo-marketing img {
    transform: rotate(180deg);
}
.online-store-design-card .image-holder .marketing img {
    width: 90%;
    position: relative;
    margin: 0;
    margin-top: 15px;
}

.customer-opinion .why-important {
    color: white !important;
    text-align: center;
}
.customer-opinion .why-important .presentage {
    font-size: 50px;
    font-weight: 500;
}
.customer-opinion .why-important .presentage-content {
    font-size: 18px;
    font-weight: 400;
}
.customer-opinion .why-important .why-important-question {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 50px;
}

.your-online-store-feature-haed {
    position: relative;
    text-align: center;
}
.online-store-design-content .online-store-design-head .title,
.your-online-store-feature-haed .title {
    font-weight: 700;
    font-size: 34px;
    color: #0a222e;
}

.your-online-store-feature-haed .vector img {
    position: absolute;
    top: 0;
    left: 27%;
}

.app-like-upper-hero-section {
    background-image: url(../assets/images/upperandkareem.jpg);
}

.upper-careem-first-card {
    position: relative;
}
.upper-careem-first-card .pseudo-img {
    position: absolute;
    left: -50px;
    top: -21px;
    z-index: -1;
}
.upper-careem-first-card .pseudo-img img {
    height: 500px;
    width: 500px;
}
.upper-careem-first-card .image-holder img {
    width: 105%;
}

.upper-careem-first-card .discription {
    line-height: 40px;
}
.upper-careem-first-card .discription a {
    color: inherit;
}

.upper-card {
    height: auto;
}
.upper-card .discription {
    width: 103%;
}
.upper-card .last-text-holder .discription {
    width: 100%;
}
.upper-card ul li {
    margin: 5px 0;
    line-height: 30px;
}
.upper-card .text-holder {
    width: 90%;
}

.payment-methods-hero-section {
    background-image: url(../assets/images/payment-methods.png);
}

.payment-methods-head {
    position: relative;
}

.payment-methods-head .vector img {
    position: absolute;
    top: -12px;
    left: 30.5%;
}

.payment-methods-head {
    text-align: center;
}

.payment-methods-head .title,
.job-desciption-content .head-title {
    color: #0a222e;
    font-size: 30px;
    font-weight: 700;
    margin: 5px 0;
    margin-bottom: 30px;
}
.payment-methods-head span {
    color: #0a222e99;
    font-size: 16px;
    font-weight: 400;
}

.payment-method-card {
    box-shadow: 0px 4px 25px 0px #00000014;
    background-color: white;
    height: 250px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.payment-method-card::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: var(--main-color);
    bottom: 0px;
    transition: height 0.3s ease-in-out;
}
.payment-method-card:hover::after {
    height: 400px;
    /* transition: height 0.3s ease-in-out; */
}

.payment-method-card .payment-img {
    background-color: white;
    z-index: 5;
    border-radius: 15px;
    width: fit-content;
    overflow: hidden;
    height: fit-content;
}

.payment-method-card .payment-img img {
    width: 170px;
    height: 100%;
    position: relative;
    z-index: 5;
}

.payment-method-card .special-image img {
    padding: 15px;
    width: 170px;
    height: 100px;
}

.write-your-question {
    background-color: white;
    padding: 40px 60px;
}
.write-your-question .text-content {
    color: #0a222e;
}

.write-your-question .u-share {
    font-weight: 300;
    font-size: 16px;
}
.write-your-question .u-ask {
    font-weight: 300;
    font-size: 30px;
    margin: 15px 0;
}
.write-your-question .u-ask span {
    font-weight: 600;
    font-size: 30px;
}

.job-decription-hero-section {
    background-image: url(../assets/images/job-descripiton.jpg);
}

.job-decription-hero-section .last-line {
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 90px;
}
.job-decription-hero-section .last-line .date {
    display: flex;
    align-items: center;
    gap: 10px;
}
.job-decription-hero-section .last-line .date .day {
    font-weight: 300;
    font-size: 22px;
}
.job-decription-hero-section .last-line .accounts {
    display: flex;
    gap: 20px;
    align-items: center;
}
.job-decription-hero-section .last-line .accounts .share img {
    width: 25px;
}

.job-desciption-content .head-title {
    text-align: center;
}

.job-desciption-content .content-row {
    border-top: 1px dashed #0a222e59;
}
.job-desciption-content .left-col {
    border-right: 1px dashed #0a222e59;
}

.job-desciption-content .info-section,
.job-desciption-content .description-content {
    margin: 10px;
    padding: 10px;
}
.job-desciption-content .main-title {
    color: var(--main-color);
    font-weight: 500;
    font-size: 22px;
    margin: 10px 0;
}
.job-desciption-content .info-section ul li {
    color: #0a222e99;
    font-weight: 400;
    font-size: 18px;
    margin: 15px 0;
}
.job-desciption-content .info-section ul li span {
    color: #0a222e;
}
.job-desciption-content .info-section ul li::marker {
    color: #0a222e99;
    font-size: 14px;
}
.job-desciption-content .description-content p {
    color: #0a222e99;
    margin: 10px 0;
    font-weight: 400;
    font-size: 18px;
}
.job-desciption-content .search-filter {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 5px auto;
    padding: 25px;
    background-color: white;
    width: fit-content;
    border-radius: 15px;
}
.job-desciption-content .search-filter .join-us-btn {
    padding: 10px 20px;
    width: auto;
    height: auto;
}
.job-desciption-content .search-filter .drop-menu {
    background-color: #104c6a12;
    border: none;
    color: #0a222e99;
    width: 350px;
    text-align: right;
    padding: 10px;
}
.job-desciption-content .search-filter .drop-menu i {
    float: left;
    margin: 5px;
}

.job-desciption-content .job-card {
    background-color: white;
    border-radius: 18px;
    height: 265px;
    padding: 10px 20px;
    position: relative;
    overflow: hidden;
}

.job-desciption-content .job-card::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 4px;
    background-color: var(--main-color);
    bottom: 0px;
    transition: height 0.3s ease-in-out, color 0.3s ease-in-out;
    margin-right: -25px;
}
.job-desciption-content .job-card:hover::after {
    height: 400px;
}

.job-desciption-content .job-card .share-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: var(--main-color);
    width: fit-content;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    top: 0;
    left: 10%;
    z-index: 5;
    transition: background-color 0.3s ease-in-out;
}

.job-desciption-content .job-card .details-holder {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    align-items: center;
    position: relative;
    z-index: 5;
}

.job-desciption-content .job-card .details-holder .job-name {
    font-weight: 500;
    font-size: 30px;
    color: var(--main-text-color);
    position: relative;
    z-index: 5;
}
.job-desciption-content .job-card .details-holder img {
    width: 25px;
    height: 25px;
    position: relative;
    z-index: 5;
    transition: filter 0.2s ease-in-out;
}

.job-desciption-content .job-card .share-icon img {
    transition: filter 0.2s ease-in-out;
}

.job-desciption-content .job-card .details-holder p {
    color: #0a222e99;
    font-weight: 400;
    font-size: 22px;
    position: relative;
    z-index: 5;
    transition: color 0.2s ease-in-out;
}
.job-desciption-content .job-card .date-holder {
    float: left;
    position: relative;
    z-index: 5;
}

.job-desciption-content .job-card:hover p {
    color: white !important;
}
.job-desciption-content .job-card:hover .details-holder img {
    filter: brightness(0) invert(1);
}
.job-desciption-content .job-card:hover .share-icon {
    background-color: white;
}
.job-desciption-content .job-card:hover .share-icon img {
    filter: brightness(0);
}

.job-desciption-content button.btn.btn-outline-primary {
    margin: 0 auto;
    display: block;
}

.techniques-hero-section {
    background-image: url(../assets/images/technology-big-data-.jpg);
}

.techniques-content .technique-card,
.software-testing-tools .technique-card {
    background-image: url(../assets/images/Component\ 327.svg);
    background-position: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 18px;
    overflow: hidden;
    color: white !important;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    transform-origin: left;
}

.techniques-content .technique-card:hover,
.software-testing-tools .technique-card:hover {
    transform: scaleX(1.01);
    background-color: rgba(0, 50, 150, 0.3);
}

.techniques-content .technique-card .technique-card-content,
.software-testing-tools .technique-card .technique-card-content {
    padding: 5px 20px;
}
.techniques-content .technique-card .technique-card-content .main-title,
.software-testing-tools .technique-card .technique-card-content .main-title {
    font-weight: 500;
    font-size: 22px;
    color: white !important;
}
.techniques-content .technique-card .technique-card-content .secondary-title,
.software-testing-tools
    .technique-card
    .technique-card-content
    .secondary-title {
    font-weight: 300;
    font-size: 18px;
}
.techniques-content .technique-card .technique-card-content .techniques-icon,
.software-testing-tools
    .technique-card
    .technique-card-content
    .techniques-icon {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}
.techniques-content .technique-card .technique-card-content .icon,
.software-testing-tools .technique-card .technique-card-content .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: white;
    border-radius: 10px;
    width: 90px;
}
.techniques-content .technique-card .technique-card-content .icon img,
.software-testing-tools .technique-card .technique-card-content .icon img {
    width: 65px;
    height: 40px;
}

.technique-card-content .multiple-content-holder,
.software-testing-tools .multiple-content-holder {
    display: flex;
    gap: 20px;
}

.privacy-policy-hero-section {
    background-image: url(../assets/images/policy.png);
}

.privacy-policy-content .text-content .regular {
    color: #0a222e99;
    font-weight: 300;
    font-size: 16px;
    line-height: 34px;
}
.privacy-policy-content .text-content span {
    color: #0a222e;
}
.privacy-policy-content .text-content .special {
    color: var(--main-color);
    font-weight: 500;
    font-size: 16px;
}
.privacy-policy-content .text-content .add-to-this-section {
    background: linear-gradient(#0b0a0acc, #0b0a0acc),
        url(../assets/images/Frame\ 26086883.svg);
    background-position: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 18px;
    overflow: hidden;
    color: #ffffffc9 !important;
    margin: 50px 0;
    font-weight: 400;
    font-size: 18px;
    padding: 50px 35px;
}
.privacy-policy-content .text-content .add-to-this-section .big-text {
    color: white;
    font-weight: 700;
    font-size: 40px;
}
.privacy-policy-content .text-content .add-to-this-section .big-text {
    color: white;
    font-weight: 600;
    font-size: 35px;
    /* margin: 10px 0; */
}

.user-agreement-hero-section {
    background-image: url(../assets/images/useragreement_new.png);
}
.terms-conditions-hero-section {
    background-image: url(../assets/images/terms-and-conditions.png);
}

.privacy-policy-content .text-content .regular ul {
    padding: 0 25px 0 0;
}
.privacy-policy-content .text-content .regular ul li {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
    line-height: 34px;
    margin: 0;
}
.privacy-policy-content .text-content .regular ul li::marker {
    color: #0a222e99;
    font-size: 10px;
}

.web-hosting-hero-section {
    background-image: url(../assets/images/web-hosting-bg.jpg);
}
.web-hosting-hero-section .hero-text-holder {
    width: 56%;
    padding: 100px;
    position: relative;
}
.web-hosting-hero-section .hero-text-holder .text {
    font-weight: 600;
    font-size: 50px;
    margin-bottom: 20px;
    position: relative;
}
.web-hosting-hero-section .hero-text-holder img {
    /* position: absolute;
    left: 32%;
    bottom: 34px; */
    /* margin-top: -30px; */
    margin-top: -54px;
}
.web-hosting-hero-section .hero-text-holder .hero-para {
    font-weight: 300;
    font-size: 20px;
}

.web-hosting-content .search-bar {
    display: flex;
    justify-content: center;
    position: relative;
}
.web-hosting-content .search-bar button {
    position: absolute;
    border: none;
    background-color: var(--main-color);
    color: white;
    padding: 15px;
    border-radius: 50px;
    width: 190px;
    font-size: 20px;
    font-weight: 400;
    top: -24px;
    left: 12%;
}
.web-hosting-content .search-bar .search-input {
    width: 1000px;
    padding: 25px;
    border-radius: 50px;
    border: none;
    background-color: #f4f4f4;
    margin-top: -30px;
}
.web-hosting-content .search-bar .search-input:focus {
    border: none;
    outline: none;
}
.web-hosting-content .search-bar .search-input::placeholder {
    color: #0a222e99;
    font-weight: 400;
    font-size: 20px;
}
.web-hosting-content .domains {
    color: var(--main-text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    margin: 20px 0;
}
.web-hosting-content .domains p {
    direction: ltr;

    font-weight: 400;
    font-size: 18px;
}

.web-hosting-services .service-card {
    align-items: start;
}
.web-hosting-services .service-card .details {
    text-align: unset;
}

.web-hosting-plans-tabs .ul-holder {
    margin: 20px auto;
    width: fit-content;
    padding: 5px;
    background-color: white;
    border-radius: 50px;
    margin-bottom: 85px !important;
}
.web-hosting-plans-tabs ul li {
    margin: 0;
}

.web-hosting-plans-tabs .nav-pills .nav-link {
    color: var(--main-color);
    background-color: white;
    border-radius: 50px;
    font-weight: 300;
    font-size: 18px;
    width: 100px;
}
.web-hosting-plans-tabs .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--main-color);
    color: white;
}

.web-hosting-plans-tabs .tab-content {
    background-color: transparent;
}

.web-hosting-plans-tabs .plan-card,
.shared-hosting-plans .plan-card,
.windows-vps-content .plan-card {
    background-color: white;
    border-radius: 25px;
    padding: 10px 20px;
    color: var(--main-text-color);
    transition: box-shadow 0.3s ease-in-out;
}

.web-hosting-plans-tabs .plan-card:hover,
.shared-hosting-plans .plan-card:hover,
.windows-vps-content .plan-card:hover {
    box-shadow: 0px 4.63px 42.86px rgba(0, 0, 0, 0.25);
}

.web-hosting-plans-tabs .plan-card .plan-name,
.shared-hosting-plans .plan-card .plan-name,
.windows-vps-content .plan-card .plan-name {
    font-weight: 600;
    font-size: 23px;
    margin: 20px 0;
}

.web-hosting-plans-tabs .plan-card .features,
.shared-hosting-plans .plan-card .features,
.windows-vps-content .plan-card .features {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
}

.web-hosting-plans-tabs .plan-card i,
.shared-hosting-plans .plan-card i,
.windows-vps-content .plan-card i {
    color: #7bdd26;
}
.web-hosting-plans-tabs .plan-card p,
.shared-hosting-plans .plan-card p,
.windows-vps-content .plan-card p {
    font-weight: 400;
    font-size: 18px;
}
.web-hosting-plans-tabs .plan-card .price,
.shared-hosting-plans .plan-card .price,
.windows-vps-content .plan-card .price {
    float: left;
    color: var(--main-text-color);
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
    margin-top: -10px;
}
.web-hosting-plans-tabs .plan-card .price span,
.shared-hosting-plans .plan-card .price span,
.windows-vps-content .plan-card .price span {
    font-weight: 400;
    font-size: 14px;
    color: #0a222e;
    opacity: 0.5;
}
.web-hosting-plans-tabs .plan-card .price .price-number,
.shared-hosting-plans .plan-card .price .price-number,
.windows-vps-content .plan-card .price .price-number {
    font-weight: 700;
    font-size: 35px;
}
.web-hosting-plans-tabs .plan-card .know-more-button,
.shared-hosting-plans .plan-card .know-more-button,
.windows-vps-content .plan-card .know-more-button {
    margin: 20px 0;
    margin-top: 50px;
}
.web-hosting-plans-tabs .plan-card .know-more-button,
.shared-hosting-plans .plan-card .know-more-button,
.windows-vps-content .plan-card .know-more-button {
    margin: 20px 0;
    margin-top: 60px;
}
.web-hosting-plans-tabs .plan-card .know-more-button button,
.shared-hosting-plans .plan-card .know-more-button button,
.windows-vps-content .plan-card .know-more-button button {
    width: 100%;
    text-align: center;
    padding: 20px;
    border: none;
    outline: none;
    background-color: #f4f6ff;
    color: var(--main-color);
    border-radius: 15px;
    font-weight: 500;
    font-size: 25px;
}

.web-hosting-plans-tabs .plan-card .not-allowed,
.web-hosting-plans-tabs .plan-card .not-allowed i,
.shared-hosting-plans .plan-card .not-allowed,
.shared-hosting-plans .plan-card .not-allowed i,
.windows-vps-content .plan-card .not-allowed,
.windows-vps-content .plan-card .not-allowed i {
    color: #0a222e99;
}

.web-hosting-plans-tabs .primuim,
.shared-hosting-plans .primuim,
.windows-vps-content .primuim {
    background-color: #102d59;
    color: white;
    position: relative;
    margin-top: -50px;
    background-image: url(../assets/images/premuim-backg.svg);
    background-size: cover;
    background-color: #102d59;
    transition: box-shadow 0.3s ease-in-out;
}

.web-hosting-plans-tabs .primuim:hover,
.shared-hosting-plans .primuim:hover,
.windows-vps-content .primuim:hover {
    box-shadow: 0px 4.63px 42.86px #6cceff;
}

.web-hosting-plans-tabs .primuim .not-allowed,
.web-hosting-plans-tabs .primuim .not-allowed i,
.shared-hosting-plans .primuim .not-allowed,
.shared-hosting-plans .primuim .not-allowed i,
.windows-vps-content .primuim .not-allowed,
.windows-vps-content .primuim .not-allowed i {
    color: white;
    opacity: 0.6;
}

.web-hosting-plans-tabs .primuim .price,
.web-hosting-plans-tabs .primuim .price span,
.shared-hosting-plans .primuim .price,
.shared-hosting-plans .primuim .price span,
.windows-vps-content .primuim .price,
.windows-vps-content .primuim .price span {
    color: white;
}

.web-hosting-plans-tabs .primuim .know-more-button button,
.shared-hosting-plans .primuim .know-more-button button,
.windows-vps-content .primuim .know-more-button button {
    background-color: var(--main-color);
    color: white;
}

.web-hosting-plans-tabs .primuim .dicount,
.shared-hosting-plans .primuim .dicount,
.windows-vps-content .primuim .dicount {
    padding: 10px;
    background-color: white;
    color: var(--main-color);
    width: fit-content;
    border-radius: 10px;
    position: absolute;
    top: 3%;
    left: 10%;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 20px;
}

.windows-vps-content-plans {
    margin-top: 60px;
}

.web-hosting-taps div#v-pills-tab {
    border-top-right-radius: 25px !important;
    text-align: right !important;
}

.web-hosting-taps .offers-head .vectores {
    left: 35%;
}

.web-hosting-taps-content {
    margin: 50px 30px;
}
.web-hosting-taps-content .taps-head-content {
    position: relative;
    margin: 15px 0;
}
.web-hosting-taps-content .taps-head-content .title {
    color: #222222;
    font-weight: 400;
    font-size: 24px;
    margin-right: 100px;
}

.web-hosting-taps-content .taps-head-content .vectorone,
.web-hosting-taps-content .taps-head-content .vectortwo {
    position: absolute;
}

.web-hosting-taps-content .taps-head-content .vectortwo {
    top: -3px;
    left: 78%;
}
.web-hosting-taps-content .taps-head-content .vectorone {
    top: 2px;
    left: 78%;
}

.web-hosting-taps-content .taps-body-content {
    color: #3b3c3d;
    font-weight: 300;
    font-size: 18px;
    line-height: 36px;
    width: 75%;
}

.row.tabs-content-holder .col-3 {
    padding-right: 0;
    overflow: hidden;
}

.web-hosting-location .map-image img {
    width: 100%;
}

.web-hosting-location .web-hosting-location-text .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 28px;
    margin: 10px 0;
    margin-bottom: 20px;
}
.web-hosting-location .web-hosting-location-text .explain {
    color: #3b3c3d;
    font-weight: 300;
    font-size: 18px;
}
.web-hosting-location .web-hosting-collapse {
    width: 70%;
    margin: 20px 0;
}

.web-hosting-location .web-hosting-collapse .card {
    border: none;
    margin-bottom: 30px;
    padding: 5px;
    background-color: transparent;
}
.web-hosting-location .web-hosting-collapse .card .card-header {
    border-radius: 24px;
}

.web-hosting-location .web-hosting-collapse .card button.btn.btn-link.collapsed,
.web-hosting-location .web-hosting-collapse .card button.btn.btn-link {
    color: var(--main-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.web-hosting-location .web-hosting-collapse .icon-holder {
    background-color: #f8f4ff;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.web-hosting-location .web-hosting-collapse .icon-holder i {
    margin: 0;
    font-size: 15px;
    color: var(--main-color) !important;
}

.web-hosting-location .card-body {
    font-weight: 300;
    font-size: 18px;
    color: white;
    border: none;
    margin: 20px 0;
    background-color: #279dd8;
    border-radius: 24px;
    background-image: url(../assets/images/premuim-backg.svg);
    background-size: cover;
}
.web-hosting-location .card-body .title {
    font-weight: 400;
    font-size: 18px;
    margin: 10px 0;
}
.web-hosting-location .card-body .places {
    font-weight: 400;
    font-size: 14px;
    margin: 10px 0;
}
.web-hosting-location .card-body .features {
    font-weight: 400;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.web-hosting-location .card-body .features i {
    color: #7bdd26;
}

.web-hosting-working-with .customer-vector {
    left: 35%;
    top: 10px;
}
.web-hosting-working-with .customer-card,
.web-hosting-working-with .customer-carddd {
    background-color: transparent;
}
.web-hosting-working-with .customer-card img,
.web-hosting-working-with .customer-carddd img {
    filter: none;
}

.shared-hosting-plans {
    margin: 150px 0;
}

.shared-hosting-hero-section {
    display: flex;
    justify-content: center;

    flex-direction: column;
    background-image: url(../assets/images/shared-hosting-bg.png);
}

.shared-hosting-hero-section .hero-text {
    /* top: 70px; */
}

.shared-hosting-content .head-content .title,
.windows-vps-content .head-content .title {
    color: var(--main-text-color);
    margin: 10px 0;
    font-weight: 600;
    font-size: 35px;
}

.shared-hosting-content .head-content .choose-your-plan,
.windows-vps-content .head-content .choose-your-plan {
    color: var(--main-text-color);
    margin: 10px 0;
    font-weight: 400;
    font-size: 18px;
}

.shared-hosting-plans {
    background-color: white;
}

.shared-hosting-plans .plan-card .plan-name {
    display: flex;
    align-items: center;
    gap: 10px;
}
.shared-hosting-plans .plan-card .card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shared-hosting-plans .plan-card i {
    color: #35353f;
}

.shared-hosting-plans hr {
    border: none;
    border-top: 2px dashed #35353f;
}

.shared-hosting-plans .primuim i {
    color: white;
}
.shared-hosting-plans .primuim hr {
    border-color: white;
}

.shared-hosting-plans .primuim .price {
    margin: 40px 0;
}
.shared-hosting-plans .plan-card .price .price-number {
    font-size: 27px;
}

.web-hosting-search-content .search-field {
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    border-radius: 15px;
}
.web-hosting-search-content .search-field .search-input {
    width: 90%;
    direction: ltr;
    height: 70px;
    color: #ffcf38;
    caret-color: #ffcf38;
    font-weight: 500;
    font-size: 28px;
    border: none;
}
.web-hosting-search-content .search-field .search-input:focus {
    outline: none;
}
.web-hosting-search-content .search-field .search-icon,
.web-hosting-search-content .search-field .x-icon {
    font-size: 20px;
    cursor: pointer;
}

/* ========================================
   Hosting Dropdown Menu - Amazing Design
   ======================================== */

.hosting-dropdown-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 20px;
    padding: 40px 0;
    margin: 0;
    list-style: none;
    display: none;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 999;
}

.hosting-dropdown-menu.show {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center !important;
    opacity: 1;
    transform: translateY(0);
}

.hosting-dropdown .hosting-dropdown-menu {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px 20px;
}

.hosting-dropdown-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hosting-dropdown-item:not(:last-child) {
    margin-bottom: 15px;
}

.hosting-link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    background: #ffffff;
    border-radius: 12px;
    text-decoration: none;
    width: 268px;
    color: #0a222e;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hosting-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(39, 157, 216, 0.15);
    border-color: #279dd8;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
}

.hosting-link.active {
    border-color: #279dd8;
    background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
}

.hosting-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #279dd8 0%, #1e88c7 100%);
    border-radius: 10px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.hosting-link:hover .hosting-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 5px 15px rgba(39, 157, 216, 0.4);
}

.hosting-link.active .hosting-icon {
    background: linear-gradient(135deg, #1e88c7 0%, #279dd8 100%);
}

.hosting-content {
    flex: 1;
    text-align: right;
    margin-top: 14px;
}

.hosting-content h4 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: 600;
    color: #0a222e;
    transition: color 0.3s ease;
}

.hosting-link:hover .hosting-content h4 {
    color: #279dd8;
}

.hosting-link.active .hosting-content h4 {
    color: #279dd8;
}

.hosting-content p {
    margin: 0;
    font-size: 14px;
    color: #0a222e99;
    line-height: 1.4;
}

/* Animation for dropdown appearance */
@keyframes hostingDropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hosting-dropdown-menu.show {
    animation: hostingDropdownSlideIn 0.4s ease-out forwards;
}
.web-hosting-search-content .search-field .x-icon {
    color: #ed4126;
}

.search-results .not-match {
    background-color: white;
    border-radius: 14px;
}

.search-results .result {
    color: #0a222e99;
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.search-results .result .add-to-cart {
    display: flex;
    align-items: center;
    gap: 25px;
}

.search-results .result .add-to-cart .add-to-cart-price .price {
    font-weight: 500;
    font-size: 23px;
    color: var(--main-text-color);
}
.search-results .result .add-to-cart .add-to-cart-btn button {
    padding: 10px 20px;
    border: none;
    color: white;
    background-color: #0a222e;
    border-radius: 10px;
}
.search-results .result .add-to-cart .add-to-cart-price .renew {
    font-weight: 500;
    font-size: 16px;
}
.search-results .result .search-text-result {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    font-size: 28px;
    color: var(--main-text-color);
}
.search-results .not-match hr {
    margin: 0;
}

.search-results .match-result {
    background-color: #173460;
    display: flex;
    justify-content: space-between;
    box-shadow: 4px 4px 30px 0px #279dd84d;
    align-items: center;
    padding: 15px;
    border-radius: 15px;
    color: white;
    margin: 25px 0;
}

.search-results .match-result .add-to-cart {
    display: flex;
    align-items: center;
    gap: 25px;
}
.search-results .match-result .add-to-cart .add-to-cart-price .price {
    font-weight: 500;
    font-size: 28px;
    color: white;
}
.search-results .match-result .add-to-cart .add-to-cart-btn button {
    padding: 10px 20px;
    border: none;
    color: white;
    background-color: var(--main-color);
    border-radius: 10px;
}
.search-results .match-result .add-to-cart .add-to-cart-price .renew {
    font-weight: 500;
    font-size: 16px;
}
.search-results .match-result .search-text-result {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 500;
    font-size: 28px;
    color: white;
}

.e-marketing-hero-section,
.software-testing-hero-section {
    background-color: #dcf0f566;
    background-image: url(../assets/images/bg.svg);
    height: 600px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.e-marketing-hero-section .e-marketing-hero-section-content,
.software-testing-hero-section .software-testing-hero-section-content {
    padding: 0 100px;
    position: relative;
}
.e-marketing-hero-section .e-marketing-hero-section-content .text-content,
.software-testing-hero-section
    .software-testing-hero-section-content
    .text-content {
    position: absolute;
    width: 40%;
    top: 150px;
}
.e-marketing-hero-section-content .text-content .main-title,
.software-testing-hero-section-content .text-content .main-title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 49px;
    margin: 15px 0;
}
.e-marketing-hero-section-content .text-content .explain,
.software-testing-hero-section-content .text-content .explain {
    color: #0a222e99;
    font-weight: 300;
    font-size: 16px;
    margin: 15px 0;
    line-height: 40px;
}
.e-marketing-hero-section-content .text-content .explain-btn {
    display: flex;
    justify-content: start;
    align-items: center;
    margin: 15px 0;
    gap: 30px;
}
.e-marketing-hero-section-content .text-content .they-have-skill,
.software-testing-hero-section-content .text-content .they-have-skill {
    display: flex;
    gap: 15px;
    align-items: center;
    margin: 15px 5px;
    color: #646464;
    font-weight: 300;
    font-size: 16px;
}
.e-marketing-hero-section-content .text-content .they-have-skill i,
.software-testing-hero-section-content .text-content .they-have-skill i {
    color: #fa9b0f;
}
.e-marketing-hero-section-content .text-content .they-have-skill div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.e-marketing-hero-section-content .girl-image img {
    position: absolute;
    left: 15%;
    top: 110px;
    height: 490px;
}
.e-marketing-hero-section-content .number-one {
    padding: 10px;
    background-color: #279dd821;
    width: fit-content;
    border-radius: 40px;
    position: absolute;
    top: 57px;
    left: 30%;
}
.e-marketing-hero-section-content .number-one .best {
    color: var(--main-text-color);
    font-weight: 300;
    font-size: 20px;
}
.e-marketing-hero-section-content .number-one .best span {
    color: white;
    background-color: var(--main-color);
    border-radius: 37px;
    padding: 8px 16px;
    text-align: center;
}
.e-marketing-hero-section-content .simone-brown {
    position: absolute;
    height: 200px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    border-radius: 10px;
    box-shadow: 0px 89.49px 145.41px 0px #0000000d;
    left: 8%;
    top: 100px;
}

.simone-brown .simone-image {
    width: 70px;
}

.e-marketing-hero-section-content .simone-brown .simone-button {
    margin-top: 10px;
    width: 100%;
}
.e-marketing-hero-section-content .simone-brown .icon {
    position: absolute;
    top: -10px;
    right: -10px;
}

.e-marketing-hero-section-content .our-team {
    background-color: white;
    box-shadow: 0px 89.49px 145.41px 0px #0000000d;
    position: absolute;
    color: var(--main-text-color);
    padding: 5px 10px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 18px;
    width: 210px;
    left: 35%;
    top: 292px;
}
.e-marketing-hero-section-content .our-team .team-images {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 15px 0;
}

.e-marketing-hero-section-content .our-team .team-images img {
    width: 40px;
}

.e-marketing-hero-section-content .our-team .icon {
    position: absolute;
    top: -10px;
    left: -10px;
}

.e-marketing-hero-section-content .high-quality {
    width: 280px;
    background-color: white;
    box-shadow: 0px 89.49px 145.41px 0px #0000000d;
    position: absolute;
    color: var(--main-text-color);
    padding: 5px 10px;
    font-weight: 500;
    font-size: 16px;
    border-radius: 18px;
    left: 10%;
    top: 475px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.e-marketing-hero-section-content .high-quality .first {
    display: flex;
    align-items: center;
    gap: 10px;
}
.e-marketing-hero-section-content .high-quality .first .high-image {
    background-color: #ffcf38;
    box-shadow: 0px 89.49px 145.41px 0px #0000000d;
    padding: 10px;
    border-radius: 10px;
}
.e-marketing-hero-section-content .high-quality .first .feedback {
    color: #646464;
    font-weight: 500;
    font-size: 16px;
}
.e-marketing-hero-section-content .high-quality .first .feedback-name {
    color: #323232;
    font-weight: 500;
    font-size: 17px;
}

.e-marketing-hero-section-content .high-quality .high-quality-button {
    width: fit-content;
}

.e-marketing-conten-head {
    width: 85%;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
}
.e-marketing-conten-head .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 35px;
    margin: 15px 0;
}
.e-marketing-conten-head .explain {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
}

.e-marketing-serv .service-card .title {
    color: #3f444a;
    font-weight: 500;
    font-size: 22px;
}
.e-marketing-serv .service-card .details {
    color: #5c6873;
    font-weight: 300;
    font-size: 17px;
}

.e-amrketing-about .floating-img {
    position: absolute;
    width: 300px;
    height: 220px;
    z-index: 100;
    top: 65px;
    left: 45%;
}

.e-amrketing-about .title {
    font-size: 25px;
    font-weight: 500;
    color: #0a222e;
}
.e-amrketing-about button {
    margin: 25px 0;
}

.e-marketing-growth .about-wp-header .title {
    font-size: 27px;
    font-weight: 600;
    color: #0a222e;
}
.e-marketing-growth .btn-and-more {
    margin: 25px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.e-marketing-growth .btn-and-more .they-have-skill {
    display: flex;
}
.e-marketing-growth .btn-and-more button {
    width: 200px;
}
.e-marketing-growth .btn-and-more .icon-and-text {
    color: #646464;
    font-weight: 300;
    font-size: 16px;
}
.e-marketing-growth .btn-and-more .icon-and-text i {
    color: #fa9b0f;
}

.e-marketing-record {
    background-color: white;
    border-radius: 18px;
    padding: 20px;
    text-align: center;
}
.e-marketing-record .title {
    margin: 15px 0;
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 30px;
}
.e-marketing-record .presentage {
    color: var(--main-color);
    font-weight: 300;
    font-size: 60px;
}
.e-marketing-record .increasment {
    color: #0a222e99;
    font-weight: 400;
    font-size: 20px;
}

.e-marketing-content .claim-free {
    background-image: url(../assets/images/Frame\ 26086988.svg);
    background-position: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 18px;
    padding: 20px;
}
.e-marketing-content .claim-free .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 30px;
}
.e-marketing-content .claim-free .limited-chances {
    color: #0a222e99;
    font-weight: 400;
    font-size: 18px;
    margin: 15px 0;
}
.e-marketing-content .claim-free .read-mor {
    color: var(--main-color);
    font-weight: 400;
    font-size: 17px;
}

.e-marketing-content .claim-free .get-30-min {
    background-color: #f4f6ff;
    width: fit-content;
    padding: 20px;
    border-radius: 15px;
    margin-top: 15px;
}
.e-marketing-content .claim-free .get-30-min a {
    text-decoration: none;
    color: var(--main-color);
    font-weight: 600;
    font-size: 16px;
}

.website-design-hero-section {
    background-image: url(../assets/images/web-design.png);
}
.website-design-hero-section .theway {
    background-color: #26323869;
}

.software-testing-hero-section {
    background-image: url(../assets/images/software-testing-bg.svg);
    background-color: #dcf0f566;
    margin-top: 85px;
}

.software-testing-hero-section-content .back-image {
    position: absolute;
    width: 300px;
    left: 2%;
    top: 75px;
}

.software-testing-hero-section-content .guy-image {
    position: absolute;
    width: 420px;
    left: 11%;
    top: 115px;
    z-index: 5;
}

.software-testing-hero-section-content .text-content {
    top: 110px;
}

.software-testing-content .text-content .explain {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
    line-height: 40px;
    width: 88%;
}
.software-testing-content .text-content .title,
.software-testing-content .services .title,
.software-testing-content .we-good-at .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 28px;
    margin: 20px 0;
}
.software-testing-content .services .title-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.software-testing-content .services .card,
.graphic-desing-page-content .services .card {
    background-color: white;
    border-radius: 8px;
    border: 1px solid #605e5e1f;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.graphic-desing-page-content .services .card {
    transition: transform 0.3s ease-in-out;
}

.graphic-desing-page-content .services .card .card-image {
    transition: transform 0.3s ease-in-out;
    height: 65% !important;
    max-height: 65%;
}

.graphic-desing-page-content .services .card:hover .card-image {
    transform: scale(1.2);
}

.software-testing-content .services .card .span-image,
.graphic-desing-page-content .services .card .span-image {
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 12.98px 77.85px 0px #00000012;
    width: fit-content;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.graphic-desing-page-content .services .card .span-image {
    transition: transform 0.3s ease-in-out, background-color 0.2s ease-in-out;
}

.graphic-desing-page-content .services .card:hover .span-image {
    background-color: var(--main-color);
}
.graphic-desing-page-content .services .card .span-image img {
    width: 52px;
}
.graphic-desing-page-content .services .card:hover .span-image img {
    filter: brightness(0) invert(1);
}

.software-testing-content .services .card .card-text,
.graphic-desing-page-content .services .card .card-text {
    margin: 70px 0 20px 0;
    color: #0f0f0f;
    font-weight: 600;
    font-size: 18px;
}

.graphic-desing-page-content .services .card .card-text {
    transition: padding-top 0.3s ease-in-out;
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    padding-top: 60px;
}

.graphic-desing-page-content .services .card:hover .card-text {
    padding-top: 65px;
}

.software-testing-content .services .special-card {
    background-color: #f0f9f8;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    padding: 15px;
    line-height: 40px;
}
.software-testing-content .services .special-card .text-regular {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
}
.software-testing-content .services .special-card .special-text {
    margin: 10px 0;
    color: #0f0f0f;
    font-weight: 600;
    font-size: 16px;
}

.we-good-at .card {
    background-color: white;
    border-radius: 18px;
    border: none;
    padding: 20px;
    height: 320px;
}
.we-good-at .card .card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.we-good-at .card .card-head .head-image {
    background-color: var(--main-color);
    border-radius: 50%;
    padding: 10px;
    width: fit-content;
}
.we-good-at .card .card-head .head-image img {
    width: 50px;
    height: 50px;
}
.we-good-at .card .card-head .card-title {
    color: var(--main-text-color);
    font-weight: 400;
    font-size: 22px;
}
.we-good-at .card .card-body {
    padding: 0;
}
.we-good-at .card .card-body ul,
.software-testing-programming-testing ul {
    padding: 0;
    margin: 0;
    padding-right: 20px;
    color: #0a222e99;
    width: 40%;
}
.we-good-at .card .card-body ul li,
.software-testing-programming-testing ul li {
    color: #0a222e99;
    margin: 10px 0;
    font-weight: 300;
    font-size: 18px;
}
.we-good-at .card .card-body ul li::marker,
.software-testing-programming-testing ul li::marker {
    color: #0a222e99;
    font-size: 10px;
}

.software-testing-services-title,
.software-testing-tools .title,
.software-testing-programming-testing .title,
.digital-transformation-content .how-we-work .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 28px;
    margin: 25px 0;
}

.software-testing-programming-testing ul {
    width: 90%;
}

.digital-transformation-hero-section button.btn.btn-outline-primary {
    outline: none;
    border-color: var(--main-color);
    width: fit-content;
}

.digital-transformation-hero-section .digital-hero-image {
    position: absolute;
    height: 500px;
    top: 50%;
    left: -90%;
    transform: translateY(-50%);
}

.digital-transformation-content .services .special-card {
    background-color: #279dd833;
    line-height: 40px;
}

.digital-transformation-content .how-we-work .row {
    display: flex;
    flex-wrap: wrap;
}

.digital-transformation-content .how-we-work .row > .col-md-6 {
    display: flex;
}

.digital-transformation-content .how-we-work .card {
    background-color: white;
    border-radius: 18px;
    margin: 20px 0;
    border: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.digital-transformation-content .how-we-work .card .how-we-work-card-content {
    padding: 20px;
    flex: 1;
}
.digital-transformation-content .how-we-work .card .card-title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 22px;
}

.digital-transformation-content .how-we-work .card .steps {
    color: #0a222e99;
    font-weight: 350;
    font-size: 18px;
}
.digital-transformation-content .how-we-work .card ul {
    padding: 0;
    margin: 0;
    padding-right: 20px;
}

.digital-transformation-content .how-we-work .card ul li {
    color: #0a222e99;
    font-weight: 350;
    font-size: 16px;
    margin: 10px 0;
}
.digital-transformation-content .how-we-work .card ul li::marker {
    color: #0a222e99;
    font-size: 10px;
}
.digital-transformation-content .how-we-work .card .card-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.go-ahead-with-wp {
    background-color: white;
    overflow: hidden;
    border-radius: 18px;
}
.go-ahead-with-wp .content-text {
    padding: 20px;
}
.go-ahead-with-wp .content-text .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 22px;
    margin: 15px 0;
}
.go-ahead-with-wp .content-text .parag,
.go-ahead-with-wp .content-text ul li {
    color: #0a222e99;
    font-weight: 350;
    font-size: 16px;
}
.go-ahead-with-wp .content-text ul {
    margin: 0;
    padding: 0;
    padding-right: 20px;
}
.go-ahead-with-wp .content-text ul li {
    margin: 10px 0;
}
.go-ahead-with-wp .content-text ul li::marker {
    font-size: 10px;
    color: #0a222e99;
}

.seo-hero-section {
    background-image: url(../assets/images/seo-bg.png);
    background-color: #edf8fb;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 85px;
}
.seo-hero-section .seo-hero-content {
    padding-right: 100px;
}
.seo-hero-section .seo-hero-content .image-hold img {
    width: 100%;
    height: 100%;
    margin-right: 0px;
    margin-top: 40px;
    object-fit: cover;
}
.object-fit-contain-image {
    object-fit: contain !important;
}
.seo-hero-section .seo-hero-content .title {
    color: var(--main-text-color);
    font-weight: 500;
    font-size: 52px;
    margin: 15px 0;
}
.seo-hero-section .seo-hero-content .title span {
    color: var(--main-text-color);
    font-weight: 500;
    font-size: 49px;
}
.seo-hero-section .seo-hero-content .text {
    margin: 100px 0;
}
.seo-hero-section .seo-hero-content .text button {
    width: fit-content;
}
.seo-hero-section .seo-hero-content .details {
    color: #0a222e99;
    margin: 20px 0;
    font-weight: 300;
    font-size: 18px;
    line-height: 35px;
}

.seo-content .seo-head {
    text-align: center;
}

.seo-content .seo-head .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 28px;
    margin: 15px 0;
}
.seo-content .seo-head .answer {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
    line-height: 30px;
}

.seo-content .service-card {
    height: 100%;
}
.seo-content .service-card .card-img {
    padding: 25px;
    width: fit-content;
}

.explainment-section .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 28px;
    margin: 15px 0;
}

.explainment-section .text-explain {
    color: #0a222e99;
    font-weight: 300;
    font-size: 17px;
    line-height: 35px;
}

.explainment-section .images {
    position: relative;
}
.explainment-section .images .seo-pseudo {
    position: absolute;
    z-index: -1;
    left: 0;
}
.explainment-section .images .seo-pseudo img {
    height: 400px;
}
.explainment-section .main {
    position: absolute;
    top: 20px;
}
.explainment-section .upper {
    z-index: 10;
    position: absolute;
    top: 100px;
    left: 0;
}
.explainment-section .upper img {
    width: 65%;
}
.explainment-section .main img {
    width: 95%;
}

.backlinks .images .seo-pseudo {
    right: 0;
}
.backlinks .images .main {
    display: flex;
    justify-content: end;
}
.explainment-section ul {
    margin: 0;
    padding: 0 20px 0 0;
}
.explainment-section ul li {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
    margin: 10px 0;
}
.explainment-section ul li::marker {
    color: #0a222e99;
    font-size: 10px;
}

.whyseo {
    background-color: white;
    overflow: hidden;
    border-radius: 18px;
}
.whyseo .text-content {
    padding: 20px;
}
.whyseo ul li {
    margin: 5px 0;
}
.whyseo .text-explain {
    line-height: 30px;
}

.seo-content .why-working-with-us {
    text-align: center;
}
.seo-content .why-working-with-us .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 28px;
}
.seo-content .why-working-with-us .card {
    border: none;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0px 8px 15px 0px #0000000d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 20px;
}
.seo-content .why-working-with-us .card .card-text {
    color: var(--main-text-color);
    font-weight: 400;
    font-size: 22px;
}
.seo-content .why-working-with-us .card .card-paragrph {
    color: #0a222e99;
    font-weight: 300;
    font-size: 16px;
}

/* RTL Support */
[dir="rtl"] .hosting-link {
    direction: rtl;
}

[dir="rtl"] .hosting-content {
    text-align: right;
}

.comprehesive-services-hero-section {
    background-image: url(../assets/images/comprehensive-bg.png);
}

.comprehesive-services-hero-section .they-have-skill {
    display: flex;
    align-items: center;
    gap: 40px;
    color: #646464;
    font-weight: 300;
    font-size: 18px;
}
.comprehesive-services-hero-section .they-have-skill div {
    display: flex;
    align-items: center;
    gap: 15px;
}
.comprehesive-services-hero-section .they-have-skill i {
    color: #fa9b0f;
}

.comprehesive-serv-head {
    text-align: center;
}
.comprehesive-serv-head .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 28px;
    margin: 20px 0;
}
.comprehesive-serv-head .answer {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
}

.sales-management-app .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 27px;
    margin: 15px 0;
}
.sales-management-app .details {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
    margin: 15px 0;
}
.sales-management-app ul li {
    font-weight: 300;
    font-size: 18px;
    margin: 15px 0;
}
.sales-management-app ul li::marker {
    color: black;
    font-size: 10px;
}
.sales-management-app .images-holder {
    position: relative;
}
.sales-management-app .images-holder .vector-image img {
    position: absolute;
    z-index: -1;
    width: 100%;
}
.sales-management-app .images-holder .home-image img {
    width: 100%;
}
.sales-management-app .head {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sales-management-app .head ul {
    margin: 0;
    padding: 0;
}
.sales-management-app .head ul li {
    margin: 0;
}
.sales-management-app .head .answer {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
    margin: 15px 0;
}
.sales-management-app .third-vector img {
    width: 85% !important;
}
.sales-management-app .third img {
    position: absolute;
    top: 40px;
}

.wp-best-partner .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}
.wp-best-partner .head .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 27px;
}
.wp-best-partner .head ul li {
    color: black;
    font-weight: 300;
    font-size: 15px;
}
.wp-best-partner .head ul li::marker {
    color: black;
    font-size: 10px;
}

.wp-best-partner-serv {
    margin: 20px 0;
}

.wp-best-partner-serv .service-card {
    height: 275px;
}

.servers-management-hero-section {
    background-image: none;
    background-color: white;
}

.server-managment-serveices .service-card {
    height: 300px;
    display: block;
}

.servers-management-plans .head {
    text-align: center;
    margin: 15px 0;
}
.servers-management-plans .head .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 28px;
}
.servers-management-plans .card {
    background-color: white;
    border: none;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 20px 20px 0px #0000000d;
    margin: 15px 0;
}
.servers-management-plans .card .card-title {
    color: #3f444a;
    font-weight: 600;
    font-size: 21px;
    text-align: center;
}
.servers-management-plans .card ul {
    margin: 0;
    padding: 0;
    padding-right: 20px;
}
.servers-management-plans .card ul li {
    margin: 5px 0;
    color: #5c6873;
    font-weight: 300;
    font-size: 17px;
}

.servers-management-plans .card ul li::marker {
    font-size: 10px;
    color: #5c6873;
}

.graphic-desin-page-hero {
    overflow: hidden;
}

.graphic-desin-page-hero .image-hold img {
    height: 670px !important;
    width: 100%;
}

.graphic-desin-page-hero .they-have-skill {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    color: #646464;
    font-weight: 300;
    font-size: 18px;
}
.graphic-desin-page-hero .they-have-skill i {
    color: #fa9b0f;
}

.graphic-desing-page-services .head {
    text-align: center;
}

.graphic-desing-page-services .title {
    margin: 20px 0;
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 28px;
}
.graphic-desing-page-services .explain {
    color: #0a222e99;
    font-weight: 300;
    font-size: 17px;
}

.graphic-desing-page-services .card {
    margin: 20px 0;
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    border: 2px dashed var(--main-color);
    overflow: hidden;
    text-align: center;
    height: 320px;
    justify-content: space-around;
    position: relative;
}

.graphic-desing-page-services .card::after {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 70px;
    right: 195px;
    transform: translate(50%, -50%);
    background-color: var(--main-color);
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}

.graphic-desing-page-services .card:hover::after {
    width: 1200px;
    height: 1200px;
}

.graphic-desing-page-services .card .card-img {
    width: fit-content;
    padding: 10px;
    background-color: var(--main-color);
    border-radius: 50%;
    position: relative;
    z-index: 3;
}

.graphic-desing-page-services .card .card-title {
    color: var(--main-text-color);
    font-weight: 400;
    font-size: 22px;
    margin: 0;
    position: relative;
    z-index: 3;
    transition: color 0.65s ease-in-out;
    margin: 10px 0;
}
.graphic-desing-page-services .card .card-text {
    color: #0a222e99;
    font-weight: 300;
    font-size: 18px;
    position: relative;
    z-index: 3;
    transition: color 0.65s ease-in-out;
}

.graphic-desing-page-services .card:hover .card-title,
.graphic-desing-page-services .card:hover .card-text {
    color: white;
    transition: color 0.2s ease-in-out;
}

.slogans {
    margin: 20px 0;
}
.navbar-brand .logo {
    width: 11rem;
}

.slogans .icon-and-text {
    color: var(--main-text-color);
    font-weight: 300;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.slogans .icon-and-text img {
    width: 42px;
}

.slogans:last-child {
    margin-bottom: 100px;
}

.graphic-desing-page-content .services .head {
    text-align: center;
    margin: 20px 0;
}
.graphic-desing-page-content .services .head .title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 32px;
}

.graphic-desing-page-content .services .card {
    border: none;
    box-shadow: 0px 25.95px 25.95px 0px #00000008;
    height: 330px;
}

.more-than-u-think {
    background-color: #eefaff;
    padding: 20px;
}

.more-than-u-think .title {
    color: var(--main-color);
    font-weight: 600;
    font-size: 35px;
    margin: 20px 0;
    text-align: center;
}

.more-than-u-think .left-side,
.more-than-u-think .right-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.more-than-u-think .charactristics {
    margin-bottom: 30px;
}

.more-than-u-think .charactristics .head {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.more-than-u-think .charactristics .head img {
    position: absolute;
    right: -45px;
    width: 35px;
}

.more-than-u-think .charactristics .head .head-title {
    color: var(--main-text-color);
    font-weight: 600;
    font-size: 22px;
}
.more-than-u-think .charactristics .details {
    color: var(--main-text-color);
    font-weight: 300;
    font-size: 18px;
    margin: 5px 0;
}
.more-than-u-think .charactristics .head .professionl {
    border-bottom: 1px dashed #f86466;
}
.more-than-u-think .charactristics .head .experience {
    border-bottom: 1px dashed #f8d266;
}
.more-than-u-think .charactristics .head .prices {
    border-bottom: 1px dashed #e743c6;
}
.more-than-u-think .right-side {
    direction: ltr;
}
.more-than-u-think .right-side .charactristics .head img {
    left: -45px;
}
.more-than-u-think .right-side .charactristics .service-quality {
    border-bottom: 1px dashed #8ad1c3;
}
.more-than-u-think .right-side .charactristics .affective {
    border-bottom: 1px dashed #f864cb;
}
.more-than-u-think .right-side .charactristics .custamization {
    border-bottom: 1px dashed #5f73ff;
}

.more-than-u-think .image img {
    width: 100%;
}

.penetration-hero-section,
.haking-test-goal {
    background-image: url(../assets/images/Penetration-hero-section.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: -1px;
}

.penetration-hero-section .image-content img {
    width: 70%;
    margin: 90px 85px 0px 0px;
}
.penetration-hero-section .text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: white;
    margin-right: 100px;
    margin-top: 45px;
}
.penetration-hero-section .text-content .title {
    margin: 15px 0;
    font-weight: 600;
    font-size: 50px;
}
.penetration-hero-section .text-content .details {
    margin: 10px 0;
    font-weight: 300;
    font-size: 20px;
    line-height: 45px;
}
.penetration-hero-section .text-content .details {
    margin: 10px 0;
    font-weight: 300;
    font-size: 19px;
    line-height: 45px;
}
.penetration-hero-section .text-content .buttons {
    width: 80%;
    display: flex;
    /* justify-content: space-between; */
    margin: 15px 0;
    gap: 30px;
}

.haking-test-goal {
    background-image: url(../assets/images/Sectionnn.png);
    color: white;
    padding: 50px 100px;
}
.haking-test-goal .head p {
    color: #ffffffcc;
    font-weight: 300;
    font-size: 19px;
    margin-bottom: 70px;
}
.haking-test-goal .text .title,
.hacking-value .title {
    font-weight: 500;
    font-size: 22px;
    margin: 15px 0;
}
.haking-test-goal .text ul {
    margin: 0;
    padding: 0;
    margin-right: 15px;
}
.haking-test-goal .text ul li {
    color: white;
    font-weight: 350;
    font-size: 18px;
    margin: 10px 0;
}
.haking-test-goal .text ul li::marker {
    font-size: 10px;
    color: white;
}
.haking-test-goal .images {
    position: relative;
}
.haking-test-goal .images img {
    width: 400px;
    max-width: 100%;
}
.haking-test-goal .images .back-image {
    position: absolute;
    bottom: -40px;
    left: 0;
}
.haking-test-goal .images .front-image {
    position: relative;
    margin-left: 30px;
    z-index: 10;
}

.hacking-value {
    background-color: #161c33;
    padding: 50px;
    color: white;
}
.hacking-value .details {
    font-weight: 300;
    font-size: 18px;
    width: 85%;
    line-height: 40px;
}

.hacking-tests-type,
.hacking-test-steps {
    background-color: #171d34;
    padding: 50px 100px;
    color: white;
}

.hacking-tests-type .title,
.hacking-test-steps .title {
    margin: 20px 0;
    font-weight: 600;
    font-size: 28px;
    text-align: center;
}

.hacking-tests-type .cards {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.hacking-tests-type .cards .card {
    border: none;
    border-radius: 15px;
    background-color: #1d233c;
    padding: 20px;
    height: 250px;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    user-select: none;
}
.hacking-tests-type .cards .card .card-image {
    width: fit-content;
    background-color: #292f48;
    padding: 20px;
    border-radius: 50%;
}
.hacking-tests-type .cards .card .card-text {
    font-weight: 400;
    font-size: 22px;
    text-align: center;
    color: white;
}

.hacking-tests-type .ellipsis {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
}
.hacking-tests-type .ellipsis i {
    color: #2a3150;
    cursor: pointer;
    font-size: 13px;
}
.hacking-tests-type .ellipsis .active {
    color: #05a2f0;
}

.hacking-test-steps {
    position: relative;
}

.hacking-test-steps .step {
    margin-top: 60px;
}
.hacking-test-steps .step .image img {
    width: 100%;
    border-radius: 20px;
    border: 4px solid white;
}
.hacking-test-steps .step .text .step-title {
    margin: 15px 0;
    font-weight: 600;
    font-size: 22px;
}
.hacking-test-steps .step .text ul {
    margin: 0;
    padding: 0;
    padding-right: 15px;
}
.hacking-test-steps .step .text ul li {
    margin: 10px 0;
    color: #ffffffcc;
    font-weight: 350;
    font-size: 16px;
}
.hacking-test-steps .step .text ul li::marker {
    color: #ffffffcc;
    font-size: 10px;
}

.hacking-test-steps .first-arrow {
    width: 600px;
    position: absolute;
    left: 35%;
    margin-top: 20px;
}

.hacking-test-steps .second-arrow {
    margin-top: 10px;
    width: 450px;
    position: absolute;
    top: 65%;
    left: 35%;
}

.hacking-test-steps .second-step {
    margin: 150px 0;
}

.hacking-sammary {
    background-image: url(../assets/images/Sectionnn.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    padding: 50px 100px;
}

.hacking-sammary .title {
    text-align: center;
    margin: 20px 0;
    font-weight: 600;
    font-size: 28px;
}

.hacking-sammary p {
    margin: 15px 0;
}

.hacking-sammary .text {
    font-weight: 350;
    font-size: 18px;
}

.hacking-sammary .summeries {
    font-weight: 350;
    font-size: 18px;
    color: #ffffffcc;
}
.hacking-sammary .summeries i {
    color: #d88730;
    margin-left: 5px;
}
.hacking-sammary .image img {
    width: 100%;
}

.hacking-ask-for-payment-method {
    background-image: url(../assets/images/Sectionnn.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    padding: 50px 100px;
}

.hacking-ask-for-payment-method .write-your-question {
    background: rgba(50, 59, 92, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 20px;
    border-radius: 10px;
}

.hacking-ask-for-payment-method .write-your-question .form .form-control:focus {
    background-color: #4a5275;
    color: white;
}

.hacking-ask-for-payment-method .write-your-question .u-ask,
.hacking-ask-for-payment-method .write-your-question .u-ask span,
.hacking-ask-for-payment-method .write-your-question .u-share,
.hacking-ask-for-payment-method input,
.hacking-ask-for-payment-method textarea {
    color: white;
}

.hacking-ask-for-payment-method .write-your-question .form-inputs {
    background-color: #4a5275;
}

.hacking-ask-for-payment-method .write-your-question .form-inputs::placeholder,
.hacking-ask-for-payment-method .write-your-question .flag p {
    color: white;
}

button.navbar-toggler {
    border: none;
}

.nav-bar .icons {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: default;
}

.content-section .text-for-res {
    color: var(--main-text-color);
    font-weight: 700;
    font-size: 28px;
    display: none;
    margin-top: 15px;
}

.content-section .text-for-res span {
    color: var(--main-color);
}

.line-for-res {
    display: none;
}

.wp-services .serv-body .serv-img {
    width: fit-content;
    padding: 15px;
    background-color: var(--main-color);
    border-radius: 50%;
    z-index: 50;
}

.wp-services .serv-body .res {
    display: none;
}

.res-analysis {
    display: none;
}

.res-analysis-card {
    background-color: white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    position: relative;
}

.res-analysis-card .image-content {
    width: 100%;
    height: 100%;
}

.res-analysis-card .image-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.res-analysis-card .text-content .title {
    font-weight: 400;
    font-size: 16px;
    color: var(--main-text-color);
    margin: 10px 0;
}
.res-analysis-card .text-content .details {
    color: #0a222e99;
    font-weight: 300;
    font-size: 14px;
}
.res-analysis-card .text-content .card-analsis-number {
    color: white;
    font-weight: 600;
    font-size: 24px;
    background-color: var(--main-color);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: -40px;
    left: -40px;
}
.res-analysis-card .text-content .card-analsis-number p {
    margin: 5px 18px 0 0;
}

.res-customer-opinion {
    background-image: url(../assets/images/Frame\ 26086972.png);
    background-position: center;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 15px 12px;
    display: none;
}

.res-customer-opinion .res-customer-opoinion-head {
    color: white;
    position: relative;
}
.res-customer-opinion .res-customer-opoinion-head .top p {
    font-weight: 600;
    font-size: 18px;
    margin: 10px 0;
}
.res-customer-opinion .res-customer-opoinion-head .top img {
    position: absolute;
}

.res-customer-opinion .res-customer-opoinion-head .bottom {
    display: flex;
    justify-content: space-between;
}
.res-customer-opinion .res-customer-opoinion-head .bottom p {
    font-weight: 400;
    font-size: 14px;
}
.res-customer-opinion .res-customer-opoinion-head .bottom .more {
    color: #279dd899;
    cursor: pointer;
}

.sticky-column {
    position: sticky;
    top: 20px;
    /* height: fit-content; */
    /* max-height: 80vh; */
    /* Prevents it from being too tall */
    overflow-y: auto; /* Enables scroll inside if needed */
}

.res-customer-opinion .cards,
.res-latest-blog .cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
}

.res-customer-opinion .cards .card {
    background-color: white;
    padding: 20px 25px;
    position: relative;
    border-radius: 6px;
    width: 300px;
    box-shadow: 0px 0px 8.17px 0px #0000001a;
    margin: 15px 0;
    flex: 0 0 auto;
}
.res-customer-opinion .cards::-webkit-scrollbar {
    display: none;
}
.res-customer-opinion .cards .card .card-text {
    color: #414a59;
    font-weight: 400;
    font-size: 10px;
}
.res-customer-opinion .cards .card .card-auther {
    display: flex;
    justify-content: space-between;
}
.res-customer-opinion .cards .card .card-auther .name {
    font-weight: 400;
    font-size: 13.07px;
}
.res-customer-opinion .cards .card .card-auther .profession {
    font-weight: 300;
    font-size: 9.8px;
}
.res-customer-opinion .cards .card .card-auther .quate-image img {
    width: 35px;
}
.res-customer-opinion .cards .card .rating {
    width: 100px;
    position: absolute;
    right: 0;
    bottom: -10px;
}

.res-latest-blog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    opacity: 0.1;
    z-index: -1;
}
.res-latest-blog .head {
    margin-left: 16rem;
    padding: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
}
.res-latest-blog .more {
    color: #279dd899;
    font-size: 14px;
    cursor: pointer;
}
.res-latest-blog .head .title p {
    color: var(--main-text-color);
}
.res-latest-blog .head .title img {
    width: 25px;
    position: absolute;
    right: 46%;
    top: 75px;
}
.res-latest-blog .cards .card {
    background-color: transparent;
    border: none;
    width: 250px;
    margin: 15px 0;
    flex: 0 0 auto;
}
.res-latest-blog .cards .card img {
    width: 100%;
    border-radius: 10px;
}
.res-latest-blog .cards .card .blog-content {
    background-color: white;
    padding: 10px;
    width: calc(100%);
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0px 0px 15px 0px #0000001a;
    position: relative;
    z-index: 20;
    margin-top: -30px;
}
.res-latest-blog .cards .card .blog-content .data-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

.res-latest-blog .cards .card .blog-content .data-more .date {
    padding: 5px 10px;
    background-color: var(--main-color);
    color: white;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 300;
}
.res-latest-blog .cards .card .blog-content .data-more .blog-read-more {
    font-size: 14px;
    font-weight: 400px;
}
.res-latest-blog .cards .card .blog-content .thenew {
    color: #0a222e99;
    font-weight: 400;
    font-size: 14px;
}
.res-accounts-holder {
    width: 100%;
    display: none;
    padding: 15px 0;
    border-top: 1px dashed #ffffff26;
    border-bottom: 1px dashed #ffffff26;
}

.footer .footer-content .res-payment {
    display: none;
}
.footer .res-privacy-conditions {
    display: none;
}
.res-blog-details-content {
    display: none;
}

.res-blog-details-content .card {
    background-color: white;
    width: 100%;
    border-radius: 8px;
    padding: 35px;
    border: none;
    margin: 20px 0;
}

.res-blog-details-content .saves .date {
    display: flex;
    align-items: center;
    gap: 7px;
}

.res-blog-details-content .rest-arti {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 7px 0;
}

.res-blog-details-content .card .title {
    color: #0a222e;
    font-size: 24px;
    font-weight: 600;
}

.res-blog-details-content .card .date p,
.res-blog-details-content .rest-arti p {
    color: #0a222e99;
    font-size: 18px;
    font-weight: 300;
}

.latest-blogs .news-info .profile-details .name {
    font-weight: 400;
    font-size: 18px;
    color: #0a222e;
}

.latest-blogs .news-info .profile-details .date {
    font-weight: 400;
    font-size: 12px;
    color: #6c6a72;
    text-align: left;
}

.why-need-app img,
.prices-card img,
.profit-ways-card img,
.control-screen img,
.used-languages img {
    width: 100%;
}

.explainment-section .contracting-row {
    margin-top: 85px;
}

.whyseo {
    margin-top: 190px !important;
}

.comprehesive-services-hero-section .seo-hero-content .res-title,
.servers-management-hero-section .seo-hero-content .res-title {
    display: none;
}

.navbar-toggler-icon {
    display: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.no-scroll {
    overflow: hidden;
    height: 100vh;
}

.nav-bar-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 105%;
    height: 103%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 160;
}

.nav-bar-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.nav-footer {
    display: none;
}

/* .res-navbar-nav {
  display: none;
} */

.sub-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.graphic-desin-page-hero .res-title,
.software-testing-hero-section-content .res-main-title,
.software-testing-hero-section-content .res-explain,
.seo-hero-section .res-title,
.seo-hero-section .res-details {
    display: none;
}

.servers-management-hero-section .seo-hero-content .image-hold img {
    width: 100%;

    object-fit: cover;
}

.servers-management-hero-section .seo-hero-content .text button {
    width: 200px;
}

button.navbar-toggler {
    display: none;
}

.res-navbar-nav {
    position: relative;
}

.for-servieces-links,
.for-about-company-links,
.for-more-links {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-image: url(../assets/images/nav-bar-bg.svg);
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.for-servieces-links .head,
.for-about-company-links .head,
.for-more-links .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.for-servieces-links ul,
.for-about-company-links ul,
.for-more-links ul {
    padding: 15px;
}
.for-servieces-links ul li,
.for-about-company-links ul li,
.for-more-links ul li {
    padding: 10px;
    margin: 5px 0;
    border-bottom: 1px solid #d8d8d866;
}
.for-servieces-links ul li a,
.for-about-company-links ul li a,
.for-more-links ul li a {
    text-decoration: none;
    color: white;
    font-size: 14px;
    font-weight: 400;
}

.nav-footer {
    position: absolute;
    bottom: 50px;
}

.for-servieces-links .nav-footer .wp-and-logo,
.for-about-company-links .nav-footer .wp-and-logo,
.for-more-links .nav-footer .wp-and-logo {
    margin: 0 10px 0 0;
}
.for-servieces-links .nav-footer .nav-accounts-holder,
.for-about-company-links .nav-footer .nav-accounts-holder,
.for-more-links .nav-footer .nav-accounts-holder {
    margin-left: -10px;
}

.colse-icon-holder {
    padding: 10px;
    margin-right: -10px;
    margin-top: -1px;
}

.res-navbar-nav {
    top: 55px;
    width: 75%;
    height: 100vh;
    position: fixed;
    background-image: url(../assets/images/nav-bar-bg.svg);
    background-size: cover;
    left: -100%;
    z-index: 200;
    padding: 5px 10px;
    transition: left 0.3s ease-in-out;
}

.res-navbar-nav.active,
.navbar-collapse.show .res-navbar-nav {
    left: 0;
}

.nav-bar .nav-item ul {
    border: none;
    padding: 10px;
    text-align: right;
    background-color: rgb(92 104 115 / 40%) !important;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    color: white !important;
    position: relative;
    right: 0 !important;
}

.nav-bar .nav-item ul .wp-logo {
    position: absolute;
    top: 35px;
    left: -45px;
    width: 400px;
    height: 400px;
}

.nav-bar .nav-item ul .content {
    display: flex;
    padding: 35px 115px;
    gap: 45px;
}

.nav-bar .nav-item ul .content .dropdown-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 15px;
}
.nav-bar .nav-item ul .content .dropdown-section .data .title {
    display: flex;
    gap: 10px;
    font-size: 12px;
    font-weight: 300;
}
.nav-bar .nav-item ul .content .dropdown-section .data ul {
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding-right: 50px;
    width: fit-content;
}
.nav-bar .nav-item ul .content .dropdown-section .data ul li {
    font-weight: 400;
    font-size: 14px;
}

ul ul {
    list-style: disc;
}

.nav-bar .nav-item ul .content .dropdown-section .data ul li::marker {
    color: white;
}

.nav-item ul li {
    padding: 5px;
    margin: 5px 0;
}

.nav-item ul li a {
    text-decoration: none;
    color: white;
    font-weight: 400;
    font-size: 14px;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.nav-item ul li:hover a {
    transform: scale(1.1);
}

.ask-for-services-one {
    margin-left: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ask-for-services-one:hover {
    background: var(--main-color) !important;
}
.payment-cards-holder {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap !important;
    /* justify-content: space-around; */
}

.payment-cards-holder img {
    width: 43px;
}

.location-on-map {
    margin-top: 0 !important;
}

.footer .bottom-content {
    display: flex;
    align-items: center;
    padding: 15px 0 0 0;
    justify-content: space-between;
}

.signeture .quate-iconn {
    height: 42px;
}

.blog-details-content,
.mobile-app-container {
    position: relative;
}

.blog-details-content .cards-fixed-col,
.mobile-app-container .sticky-column {
    transition: top 0.3s ease, position 0.3s ease;
    max-height: 99vh;
    overflow: hidden;
}
.mobile-app-container .sticky-column {
    max-height: 100vh;
}
.blog-details-content .cards-fixed-col:hover,
.mobile-app-container .sticky-column:hover {
    overflow-y: auto;
    scrollbar-width: none;
}
.blog-details-content .cards-fixed-col:hover::-webkit-scrollbar,
.mobile-app-container .sticky-column:hover::-webkit-scrollbar {
    display: none;
}
.blog-details-content .cards-fixed-col.fixed,
.mobile-app-container .sticky-column.fixed {
    position: fixed;
    top: 90px;
    right: 92px;
    z-index: 1000;
}
.blog-details-content .cards-fixed-col.stop-at-footer,
.mobile-app-container .sticky-column.stop-at-footer {
    position: absolute;
    bottom: 55px;
    right: -29px;
    top: auto;
}

.mobile-app-container .sticky-column.fixed,
.mobile-app-container .sticky-column.stop-at-footer {
    right: auto;
    width: 27%;
}

.fac-header .left-line {
    position: absolute;

    left: -160px;

    top: 35px;
}
.fac-header .right-line {
    position: absolute;

    right: -160px;

    top: 35px;
}

.fac-header .left-line img,
.fac-header .right-line img {
    width: 285px;
}

.e-marketinig-callus-btn {
    height: 60px;
}

.e-amrketing-about button {
    width: 200px;
}

.e-marketing-content .question-vector {
    left: 38%;
    top: 24px;
}

.software-testing-hero-section
    .software-testing-hero-section-content
    .text-content {
    top: 60px;
}

.software-testing-hero-section-content .text-content .they-have-skill {
    margin-top: 30px;
}

.digital-transformation-hero-section button.btn.btn-outline-primary i {
    margin-right: 5px;
}

.fourth-card-text {
    margin: 45px 0 19px 0 !important;
}

.go-ahead-with-wp .image img {
    width: 100%;
}

.penetration-hero-section .text-content .buttons button {
    height: 60px;
}
.penetration-hero-section {
    min-height: 630px;
    margin-top: 85px;
}

.write-your-question .form button {
    height: 60px !important;
}

.seo-hero-section .seo-hero-content .text button i {
    margin-right: 5px;
}

.seo-servieces .service-card::after {
    top: 80px;
    right: 60px;
}

.stay-in-touch-content .inputs-menu button {
    height: 60px;
}

.info .btns .call-us {
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.apply-online-btn {
    height: 55px;
}

.taj-comments .form button {
    height: 60px;
}

.customer-opinion .slider {
    display: flex;
}
.customer-opinion .customer-opinion-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.owl-theme .owl-dots .owl-dot {
    display: none !important;
}
.customer-opinion .slider::-webkit-scrollbar {
    display: none;
}

.our-customer .customer-card {
    display: flex;
    /* flex-wrap: nowrap;
  overflow-x: auto; 
  gap: 32px; */
}

.owl-carousel .owl-item img {
    display: block;
    width: auto !important;
}

.our-customer .customer-card::-webkit-scrollbar {
    display: none;
}

.our-customer .customer-card .customer-card-img {
    flex: 0 0 auto;
}
.customer-card-img {
    flex: 0 0 18% !important; /* Adjusts width to fit 4 items per row */
    margin: 0 1%; /* Spacing between items */
}
.collapse {
    transition: height 0.5s ease-in-out;
    overflow: hidden;
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out;
}

.popup {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.5s;
}

.popup-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 700px;
    position: relative;
    animation: slideDown 0.5s;
}

.close {
    position: absolute;
    top: 5px;
    right: 15px;
    color: var(--main-color);
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
}

#videoFrame {
    border-radius: 7px;
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.question-menu .card-body {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.question-menu .card-body {
    animation: fadeIn 0.6s ease-in-out;
    animation-delay: 0.1s;
    animation-fill-mode: both;
}

.web-hosting-services .service-card::after {
    right: 12%;
}

.navbar-nav .dropdown .show .menu p {
    color: var(--main-color) !important;
    font-weight: 600;
}

.navbar-nav .nav-item {
    white-space: nowrap;
}

.navbar-nav .dropdown {
    position: static !important;
}

.navbar-nav .dropdown .show .menu .arrow {
    transform: rotate(180deg);
    filter: invert(46%) sepia(77%) saturate(471%) hue-rotate(164deg)
        brightness(94%) contrast(90%);
}

.nav-bar .nav-btns .btn {
    display: flex;
    gap: 3px;
    align-items: center;
    font-size: 13px;
    font-weight: 300;
    color: var(--text-color);
}
.nav-bar .nav-btns .btn :hover {
    color: var(--main-color);
    text-decoration: underline;
}
.nav-bar .nav-btns .call {
    color: #7bc3e8;
    text-decoration: underline;
}

.navbar-nav .dropdown:focus,
.nav-link.show:focus {
    border: none;
    box-shadow: none;
}
.carousel-item {
    transition: transform 0.4s ease-in-out; /* Faster transition */
}

.owl-carousel.owl-theme.slider.owl-rtl.owl-loaded.owl-drag
    .owl-nav.disabled
    + .owl-dots {
    width: fit-content;
    margin-right: -340px;
    margin-top: -115px !important;
}

.slider .owl-dots .owl-dot span {
    margin: 5px !important;
    background: white !important;
    border-radius: 50% !important;
    width: 13px !important;
    height: 13px !important;
}

.slider .owl-dots .owl-dot.active span,
.slider .owl-dots .owl-dot:hover span {
    background: var(--main-color) !important;
}

.slider .owl-dots .owl-dot.active span {
    width: 18px !important;
    height: 18px !important;
}

.mouse-img {
    position: absolute;
    left: 47%;
    bottom: 10px;
    cursor: pointer;
}

.customer-opinion-content .owl-carousel {
    width: 100% !important;
}

.res-latest-blog .owl-stage,
.iphone-row .owl-stage,
.similar-projects-row .owl-stage,
.presentage-row .owl-stage,
.hacking-tests-type .owl-stage,
.cards-row .owl-stage {
    padding-right: 0 !important;
}

.customer-opinion .customer-opinion-content {
    margin-bottom: 90px;
}

.owl-carousel .owl-item .rating img {
    width: 150px !important;
    height: 45px !important;
}

.footer .res-privacy-conditions {
    margin-top: 5px;
    background-color: #0f0e0e;
    border-top-left-radius: 100px;
    padding: 5px;
}

.card-inputs .inputs-menu .dropdown i {
    color: #0a222e99;
    position: absolute;
    top: 41%;
    left: 5%;
}

.second-apply .card .card-inputs .dropdown-field:focus {
    box-shadow: none;
    border: none;
}

.testimonial .rating {
    right: 25px;
    bottom: -15px;
}

.testimonial .rating img {
    width: 160px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.collapse {
    display: none;
    transition: height 0.3s ease;
}

.collapse.show {
    display: block;
}

/* .custom-dropdown {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  display: block !important;
  visibility: hidden;
  pointer-events: none;
} */
/* Slide from bottom to top */
/* @keyframes dropdownSlideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
} */

/* .custom-dropdown {
  opacity: 0;
  transform: translateY(30px);
  transition: none; 
  animation: none;
} */ /* Blur layer */
/* Blur Layer */
/* Blur Overlay - initially hidden and positioned at top */
/* Already exists */
@keyframes blurFadeInTop {
    0% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}

@keyframes blurFadeOutTop {
    0% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
    100% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top;
    }
}

.blur-layer {
    position: fixed;
    left: 0;
    width: 100%;
    background: rgba(118, 118, 118, 0.4);
    backdrop-filter: blur(6px);
    z-index: 998;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: none;
}
.blue-layer2 {
    display: none !important;
}
.blur-layer.active {
    animation: blurFadeInTop 0.3s ease-out forwards;
}

.blur-layer.fade-out {
    animation: blurFadeOutTop 0.2s ease-in forwards;
    /* Add this to ensure it stays hidden after animation */
    animation-fill-mode: forwards;
}

.custom-dropdown {
    opacity: 0;
    transform: translateY(-30px); /* Start higher for pronounced slide-down */
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: none; /* Hidden by default */
    z-index: 999;

    position: fixed;
    top: 0; /* Set dynamically in JS to align under nav */
    left: 0;
    width: 100%; /* Full-width as per your request */
}

.custom-dropdown.show {
    opacity: 1;

    transform: translateY(0);
    display: block; /* Show when active */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes dropdownFadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

.custom-dropdown.fade-out-up {
    animation: dropdownFadeOutUp 0.3s ease-in forwards;
}
/* Hide by default */
.custom-dropdown,
.blur-background {
    display: none;
    opacity: 0;
}

/* Show animation */
.custom-dropdown.show {
    opacity: 1;
    animation: dropdownFadeInDown 0.3s ease-out forwards;
}

.blur-background.fade-in {
    animation: blurFadeIn 0.3s ease-in forwards;
}

.blur-background.fade-out {
    animation: blurFadeOut 0.3s ease-out forwards;
}

/* 
.nav-item.dropdown .custom-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
} */

.tabs-content-holder .tab-content .tab-pane {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.tabs-content-holder .tab-content .tab-pane.active.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
}

.res-tabs .tab-content .tab-pane {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block !important;
}

.res-tabs .tab-content .tab-pane.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
}

.fac-content {
    margin-top: 185px;
}

.online-store-design-card ul li {
    color: var(--main-color);
}

.online-store-design-card .middle-text-content {
    margin-right: 50px;
    width: 80%;
}

.job-desciption-content .search-filter .drop-menu {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.job-desciption-content .search-filter .drop-menu:focus {
    outline: none;
    box-shadow: none;
}

.job-desciption-content .search-filter .dropdown i {
    position: absolute;
    color: rgba(10, 34, 46, 0.6);
    top: 33%;
    left: 6%;
}

.web-hosting-search-content {
    margin-top: 140px !important;
}

.mobile-app-container .sticky-column.stop-at-footer {
    width: 32%;
}

.hacking-tests-type .cards .owl-dots {
    margin: 50px 0 0 0 !important;
}

.hacking-tests-type .owl-theme .owl-dots .owl-dot span {
    background: #2a3150;
    width: 13px !important;
    height: 13px !important;
}

.hacking-tests-type .owl-dots .owl-dot.active span,
.hacking-tests-type .owl-dots .owl-dot:hover span {
    background: var(--main-color) !important;
}

.hacking-test-steps {
    padding-top: 5px;
}

.more-back-btn,
.about-back-btn,
.services-back-btn {
    cursor: pointer;
}

/*rana */

/* تنسيق حاوية Select2 لتطابق form-inputs */
.select2-container--default .select2-selection--single {
    padding: 20px;
    font-size: 16px;
    border-radius: 10px;
    background-color: #cccccc29;
    caret-color: #0a222e99;
    height: auto; /* أو قيمة محددة مثل 40px لتطابق الإدخال */
    transition: border-color 0.3s ease;
}

/* تنسيق عند التركيز (Focus) */
.select2-container--default.select2-container--focus
    .select2-selection--single {
    background-color: #cccccc29;
}

/* تنسيق النص داخل القائمة */
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #333;
    line-height: normal; /* لضمان محاذاة النص */
}

/* تنسيق السهم (Dropdown Arrow) */
.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 10px;
}

/* تنسيق القائمة المنسدلة */
.select2-container--default .select2-results__option {
    font-size: 16px;
    padding: 10px;
    color: #333;
}

/* تنسيق العنصر المحدد في القائمة */
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--main-color);
    color: #fff;
}

/* دعم الاتجاه من اليمين إلى اليسار (RTL) */
.select2-container--default[dir="rtl"]
    .select2-selection--single
    .select2-selection__rendered {
    padding-right: 30px;
    padding-left: 10px;
}
.footer-card.payment {
    margin-top: -14px;
}
.res-tabs {
    display: none;
}
.offers-head .servies-desc::before {
    content: "";
    position: absolute;
    top: -5px; /* always stick to the top */
    left: 578px !important; /* always stick to the left */
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
.web-hosting-hero-section .hero-text-holder .text::before {
    content: "";
    position: absolute;
    top: 72px;
    left: 217px;
    width: 30px;
    height: 30px;
    background-image: url("../assets/images/Group 48095520.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.fixed-height-card {
    height: fit-content !important;
    min-height: 350px;
}
   .btn.call{
        margin-top: -1px !important;
    }
/* ==========================================
   RESPONSIVE MEDIA QUERIES - ORGANIZED
   ========================================== */

/* ==========================================
   MAX-WIDTH: 1200px - Large Tablets/Small Desktops
   ========================================== */
/* Large Desktop - fix image position */

@media (max-width: 1200px) {
    .nav-bar .lang {
        display: none;
    }
}

/* ==========================================
   MIN-WIDTH: 1200px - Large Tablets/Small Desktops
   ========================================== */
/*  */
@media (min-width: 1200px) and (max-width: 1400px) {
    .services-container .services-head .vectores {
        position: absolute;
        top: -10px;
        left: 440px;
    }
}
@media (min-width: 1200px) {
    .mobile-app-hero-section .hero-text {
        padding: 6rem 10rem;
    }
}

/* ==========================================
   MAX-WIDTH: 1199px - Tablets
   ========================================== */
@media (max-width: 1199px) {
    .online-store-design-card {
    background-color: white;
    border-radius: 18px;
    overflow: hidden;
    padding: 15px;
    height: 100%;
}
.your-feature-content .feature-card .card-img {
    background-color: var(--main-color);
    width: 200px;
    height: 200px;
    padding: 20px;
    border-radius: 50%;
    margin-top: -53px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.your-feature-content .feature-card .text-card-content {
    padding: 15px;
    height: 100%;
}
    .online-store-design-head img {
    position: absolute;
    top: -11px;
    left: 28%;
}
  .your-online-store-feature-haed .vector img {
    position: absolute;
    top: 0;
    left: 20%;
}
    .graphic-desing-page-services .card::after {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 70px;
    right: 156px;
    transform: translate(50%, -50%);
    background-color: var(--main-color);
    transition: width 0.5s 
ease-in-out, height 0.5s 
ease-in-out;
}
    .software-testing-hero-section {
        height: 611px;
    }
    .web-hosting-hero-section .hero-text-holder .text::before {
        content: "";
        position: absolute;
        top: 47px;
        left: 86px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    nav.navbar.navbar-expand-lg.bg-body-tertiary {
    padding: 15px 0px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
    background: white;
    box-shadow: 0px 7px 50px 0px #00000014;
    width: 100%;
}
    .navbar-brand .logo {
        width: 10rem;
    }
    .btn.call{
        margin-top: -4px !important;
    }
    .services-container .service-card .title {
        font-weight: 400;
        font-size: 18px;
        color: #0a222e;
        margin: 15px 0;
        position: relative;
        z-index: 20;
        text-align: center !important;
        transition: color 0.3s ease-in-out;
        height: 60px;
    }
    .navbar-nav p,
    .navbar-nav span,
    .navbar-nav .menu p {
        font-size: 11px !important;
    }

    .offers-head .servies-title::before {
        content: "";
        position: absolute;
        top: -5px; /* always stick to the top */
        left: 390px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .offers-head .servies-desc::before {
        content: "";
        position: absolute;
        top: -5px; /* always stick to the top */
        left: 378px !important; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .bullets {
        margin-top: 10px;
    }
    .wp-services .servies-title::before {
        content: "";
        position: absolute;
        top: 10px; /* always stick to the top */
        right: 570px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .bullets ul li {
        margin: 0;
        color: #3b3c3d;
        font-weight: 300;
        font-size: 18px;
    }

    .condtion-holder {
        background-color: #0f0e0e;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
        font-size: 14px;
        font-weight: 300;
        margin-top: 4px;
        width: 625px;
    }

    .copyright-holder {
        background-color: #0f0e0e;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        border-bottom-right-radius: 100px;
        border-bottom-left-radius: 100px;
        border-top-right-radius: 0;
        margin-top: 4px;
        width: 625px;
    }
    .card-content,
    .why-wp-best-company .the-card-content {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 10px;
    }
    .logo {
        width: 13.5rem;
        margin-left: 0px;
        cursor: pointer;
    }

    .services-container .services-head .vectores {
        position: absolute;
        top: -10px;
        left: 354px;
    }
    /* Logo & Branding */
    .wp-logo {
        width: 160px !important;
    }
    .contact-us a {
        direction: rtl !important;
    }

    /* Footer */
    .footer-card-heading {
        margin: 15px 0;
        font-weight: 400;
        font-size: 13px !important;
    }

    .footer-card.payment {
        margin-top: 16px !important;
    }

    .footer .footer-content .res-payment .payment-cards-holder {
        display: flex;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 15px !important;
    }

    /* Navigation */
    .nav-bar .next-to-logo {
        display: none;
    }

    /* Buttons */
    .last-btns {
        display: flex;
        align-items: center;
        gap: 10px !important;
        justify-content: space-around;
        margin-bottom: 20px;
    }

    .footer .bottom-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap !important;
        padding: 15px 0 0 0;
        justify-content: center !important;
    }
    .question-vector {
        position: absolute;
        top: 35px;
        left: 270px !important;
    }
    .design {
        font-size: 35px;
    }
    .avatar-col {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .e-wp-header .title::before {
        content: "";
        position: absolute;
        top: 35px;
        right: 57px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .first-vector,
    .second-vector {
        display: none;
    }
    a.contact {
        padding: 10px 22px !important;
    }

    /* Customer Reviews */
    .cutomer-review {
        margin: 80px 50px 50px 0;
    }

    .customer-vector {
        position: absolute;
        top: 5px;
        left: 360px;
    }
    .first-apply .card .card-inputs {
        padding: 35px 30px;
    }
    .analysis {
        display: none !important;
    }
    .res-analysis {
        display: block;
    }
    .serv-vector {
        position: absolute;
        top: 10px;
        left: 357px;
    }
    .dropdown-menu.custom-dropdown.fade-out.show {
        top: 0 !important;
    }
    .res-analysis-card .text-content .details {
        margin-bottom: 25px;
    }

    .vectores {
        position: absolute;
        top: -10px;
        left: 384px;
        width: 30px;
    }
    .analysis-vector {
        left: 308px;
    }
    .first-apply .card-title img {
        position: absolute;
        top: -10px;
        left: 200px;
    }
    /* === CONTACT SECTION === */
    .contact-ways .card {
        gap: 8px;
        height: 260px;
        justify-content: space-between;
    }
    .category-name {
        text-align: center;
    }
    /* === ABOUT SECTION === */
    .about-wp-header .vector {
        position: absolute;
        top: -8px;
        left: 98px;
    }
    /* Navigation Collapse */
    .navbar-collapse {
        display: none;
    }

    .navbar-collapse.show {
        display: block;
    }

    .custom-menu-icon {
        width: 18px;
        height: 20px;
    }
    .custom-menu-icon {
        color: #279dd8 !important; /* or fill if your SVG uses fill */
    }

    .serv-vector {
        position: absolute;
        top: 10px;
        left: 304px;
    }
    .customer-vector {
        left: 351px;
    }
    .card-holder .card::after {
        display: none;
    }
    button.navbar-toggler {
        display: block;
    }
    .menu {
        justify-content: space-between;
        margin-left: 0;
    }

    .menu .arrow {
        transform: rotate(90deg);
    }

    .nav-btns {
        display: flex;
        justify-content: center;
        margin-right: 0;
    }

    .menu p,
    .apps {
        margin: 0;
        font-weight: 300;
        font-size: 18px;
    }
    /* === OFFERS === */
    .offer-destails {
        width: 100%;
    }

    .fac-header .title::before {
        content: "";
        position: absolute;
        top: -12px; /* always stick to the top */
        left: 120px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .customer-qustion .servies-title::before {
        content: "";
        position: absolute;
        top: 30px; /* always stick to the top */
        right: 580px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .customer-qustion .working-title::before {
        content: "";
        position: absolute !important;
        top: 20px !important; /* always stick to the top */
        right: 620px !important; /* always stick to the left */
        width: 30px !important;
        height: 30px !important;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .our-customer .servies-title::before {
        content: "";
        position: absolute;
        top: 10px; /* always stick to the top */
        right: 495px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .stay-in-touch-head .title::before {
        content: "";
        position: absolute;
        top: -12px; /* always stick to the top */
        right: 255px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .card-holder .card:hover .card-title {
        color: #0a222e !important;
        transition: color 0.3s ease-in-out;
    }
    .first-apply .card-title p::before {
        content: "";
        position: absolute;
        top: -12px; /* always stick to the top */
        left: 250px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .customer-card .customer-card-img {
        flex: 0 0 auto;
    }
    .analysis-head .servies-title::before {
        content: "";
        position: absolute;
        top: -2px; /* always stick to the top */
        left: 336px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .customer-opinion-card {
        margin: 20px 0;
        background-color: white;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-width: 1px;
        padding: 30px 30px;
        height: 587px;
        box-shadow: 0px 0px 15px 0px #0000001a;
        position: relative;
    }
    .offers-head .servies-title::before {
        left: 294px;
    }

    /* Web Hosting Page */
    .web-hosting-hero-section .hero-text-holder .text {
        font-size: 32px;
        margin-bottom: 20px;
    }
    /* .web-hosting-hero-section .hero-text-holder img {
      position: absolute;
    left: 36%;
    top: 51%;
    width: 35px;
} */
    /* ________________ */
    .seo-hero-section .seo-hero-content .title {
        font-size: 28px;
    }
    .seo-hero-section .seo-hero-content .details {
        color: #0a222e99;
        margin: 0;
        font-weight: 300;
        font-size: 14px;
        line-height: 35px;
    }
    .image-hold {
        margin-top: 80px;
    }
    .e-marketing-hero-section-content .text-content .explain,
    .software-testing-hero-section-content .text-content .explain {
        color: #0a222e99;
        font-weight: 300;
        font-size: 16px;
        margin: 15px 0;
        width: 80%;
        line-height: 40px;
    }
    .e-wp-header2 .title::before {
        content: "";
        position: absolute;
        top: 40px; /* always stick to the top */
        right: 257px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* -------------------- */
    .graphic-desin-page-hero .title,
    .graphic-desing-page-services .title,
    .explainment-section .title,
    .graphic-desing-page-content .services .title,
    .more-than-u-think .title,
    .ask-for-similar-project .title {
        font-size: 20px !important;
    }

    .graphic-desing-page-services .card .card-text,
    .more-than-u-think .details {
        font-size: 17px !important;
    }

    .graphic-desing-page-content .services .card .card-text {
        font-size: 15px;
    }

    /* -------------------- */

    /* ---------app-like-upper----------- */

    .web-app-dev-cards .store img,
    .upper-careem-first-card .store img {
        width: 170px;
    }

    /* -------------------- */

    .digital-transformation-hero-section {
        height: auto;
        min-height: 500px;
        padding: 30px 0;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content {
        padding: 0 50px;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content {
        width: 48%;
        position: relative;
        top: auto;
        transform: none;
        margin-right: 30px;
    }

    .digital-transformation-hero-section .digital-hero-image {
        height: 350px;
        margin-left: 30px;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content
        .main-title {
        font-size: 36px;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content
        .explain {
        font-size: 14px;
        line-height: 28px;
    }
    .software-testing-content .services .card .span-image, .graphic-desing-page-content .services .card .span-image {
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 12.98px 77.85px 0px #00000012;
    width: fit-content;
    padding: 20px;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}
.seo-hero-section.graphic-desin-page-hero .image-hold {
        margin-top: -125px;
    }
    .seo-hero-section .seo-hero-content .image-hold img {
    width: 100%;
    height: 100%;
    margin-right: 0;
    margin-top: 40px;
    object-fit: cover;
}
}

/* ==========================================
   MAX-WIDTH: 991px - Small Tablets
   ========================================== */
@media (max-width: 991px) {
        .online-store-design-head img {
        position: absolute;
        top: -11px;
        left: 20%;
    }
        .your-online-store-feature-haed .vector img {
        position: absolute;
        top: 0;
        left: 8%;
    }
    .graphic-desing-page-content .explainment-section {
        margin-top: 50px !important;
    }
        .software-testing-content .services .card .span-image, .graphic-desing-page-content .services .card .span-image {
        background-color: white;
        border-radius: 50%;
        box-shadow: 0px 12.98px 77.85px 0px #00000012;
        width: fit-content;
        padding: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
    }

    .graphic-desing-page-content .explainment-section .main {
    position: absolute;
    top: 74px;
}
    .graphic-desing-page-services .card {
    margin: 20px 0;
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    border: 2px dashed var(--main-color);
    overflow: hidden;
    text-align: center;
    height: 100%;
    justify-content: space-around;
    position: relative;
}

    .graphic-desing-page-services .card::after {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 70px;
    right: 122px;
    transform: translate(50%, -50%);
    background-color: var(--main-color);
    transition: width 0.5s 
ease-in-out, height 0.5s 
ease-in-out;
}
    .software-testing-hero-section {
        height: 734px;
    }
    .fac-header {
        margin: 50px auto;
        margin-bottom: 20px;
        position: relative;
    }
    .e-wp-header2 .title::before {
        content: "";
        position: absolute;
        top: 81px;
        right: 158px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .web-hosting-hero-section .hero-text-holder .text::before {
        content: "";
        position: absolute;
        top: 89px;
        left: 86px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .web-hosting-hero-section .hero-text-holder .text {
        font-size: 31px;
        margin-bottom: 20px;
    }
    .e-marketing-hero-section .e-marketing-hero-section-content,
    .software-testing-hero-section .software-testing-hero-section-content {
        padding: 0 11px;
        position: relative;
    }
    .e-marketing-hero-section .e-marketing-hero-section-content .text-content,
    .software-testing-hero-section
        .software-testing-hero-section-content
        .text-content {
        position: absolute;
        width: 40%;
        top: 81px;
    }

    .wp-best-partner-serv .service-card {
        height: 100%;
    }
    .servers-management-hero-section .seo-hero-content .image-hold img {
        object-fit: contain;
    }
    .hosting-dropdown-menu {
        top: 50px !important;
    }
    .offers-head .servies-desc::before {
        content: "";
        position: absolute;
        top: -5px; /* always stick to the top */
        left: 328px !important; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .offers-head .servies-title::before {
        content: "";
        position: absolute;
        top: -5px; /* always stick to the top */
        left: 320px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .analysis-head .servies-title::before {
        content: "";
        position: absolute;
        top: -2px; /* always stick to the top */
        left: 260px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .wp-services .servies-title::before {
        content: "";
        position: absolute;
        top: 10px; /* always stick to the top */
        right: 500px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .nav-bar .nav-item ul .content {
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        gap: 0;

        height: 50vh;
        overflow-x: hidden;
        overflow-y: auto;
        top: 0 !important;
    }
    .customer-qustion .servies-title::before {
        content: "";
        position: absolute;
        top: 30px; /* always stick to the top */
        right: 520px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .customer-qustion .working-title::before {
        content: "";
        position: absolute !important;
        top: 20px !important; /* always stick to the top */
        right: 510px !important; /* always stick to the left */
        width: 30px !important;
        height: 30px !important;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .our-customer .servies-title::before {
        content: "";
        position: absolute;
        top: 10px; /* always stick to the top */
        right: 420px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    /* === ABOUT SECTION === */
    .about-wp-header .vector {
        position: absolute;
        top: -8px;
        left: 0px;
    }
    .contact-ways-row .col-md-3,
    .contact-ways .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .first-apply .card-title img {
        position: absolute;
        top: -10px;
        left: 104px;
    }
    .fac-header .title::before {
        content: "";
        position: absolute;
        top: -12px; /* always stick to the top */
        left: 50px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .first-apply .card-title p::before {
        content: "";
        position: absolute;
        top: -12px; /* always stick to the top */
        left: 160px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .services-container .services-head .vectores {
        position: absolute;
        top: -10px;
        left: 229px;
    }

    .vectores {
        position: absolute;
        top: -10px;
        left: 284px;
        width: 30px;
    }
    .serv-vector {
        position: absolute;
        top: 10px;
        left: 201px;
    }
    .question-vector {
        position: absolute;
        top: 35px;
        left: 160px !important;
    }

    .customer-vector {
        position: absolute;
        top: 5px;
        left: 246px;
    }
    .analysis-vector {
        left: 180px;
    }
    .first-card {
        height: 60%;
    }
    /* === WP SERVICES === */
    .wp-services .card-holder .card {
        padding: 10px;
        height: 250px;
        justify-content: space-around;
    }
    .menu {
        justify-content: space-between;
        margin-left: 0;
    }
    .hosting-dropdown-menu.show {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        opacity: 1;
        transform: translateY(0);
    }
    .customer-card-img img {
        width: 150px;

        object-fit: contain;
    }
    .offers-head .servies-title::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 175px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .seo-hero-section .seo-hero-content {
        padding-right: 10px;
    }

    .e-marketing-hero-section-content .high-quality {
        width: 280px;
        background-color: white;
        box-shadow: 0px 89.49px 145.41px 0px #0000000d;
        position: absolute;
        color: var(--main-text-color);
        padding: 5px 10px;
        font-weight: 500;
        font-size: 16px;
        border-radius: 18px;
        left: 1%;
        top: 475px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .e-marketing-hero-section-content .simone-brown {
        position: absolute;
        height: 200px;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 20px 10px;
        border-radius: 10px;
        box-shadow: 0px 89.49px 145.41px 0px #0000000d;
        left: 1%;
        top: 113px;
    }
    .e-marketing-hero-section-content .number-one {
        padding: 10px;
        background-color: #279dd821;
        width: fit-content;
        border-radius: 40px;
        position: absolute;
        top: 57px;
        left: 22%;
    }
    .e-marketing-hero-section-content .text-content .they-have-skill,
    .software-testing-hero-section-content .text-content .they-have-skill {
        display: flex;
        gap: 15px;
        align-items: center;
        margin: 15px 5px;
        color: #646464;
        font-weight: 300;
        font-size: 13px;
    }
    .e-marketing-hero-section-content .text-content .main-title,
    .software-testing-hero-section-content .text-content .main-title {
        color: var(--main-text-color);
        font-weight: 600;
        font-size: 44px;
        margin: 15px 0;
    }

    .e-wp-header .title::before {
        content: "";
        position: absolute;
        top: 35px;
        right: 160px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .digital-transformation-hero-section {
        min-height: auto;
        padding: 30px 0;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content {
        padding: 0 30px;
        flex-direction: column;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content {
        width: 100%;
        margin-right: 0;
        order: 1;
    }

    .digital-transformation-hero-section .digital-hero-image {
        height: 280px;
        margin-left: 0;
        margin-bottom: 20px;
        order: 2;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content
        .main-title {
        font-size: 28px;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content
        .explain {
        font-size: 14px;
        line-height: 26px;
    }

    .digital-transformation-hero-section button.btn.btn-outline-primary {
        font-size: 13px;
        padding: 10px 15px;
    }
    .customer-qustion .servies-title::before {
        content: "";
        position: absolute;
        top: 20px; /* always stick to the top */
        right: 478px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .web-hosting-services .service-card::after {
        right: 23%;
    }

    .web-hosting-content .search-bar button {
        left: -2%;
    }
}

@media (max-width: 769px) {
        .online-store-design-head img {
        position: absolute;
        top: -11px;
        left: 29%;
    }
    .your-online-store-feature-haed .vector img {
        position: absolute;
        top: -12px;
        left: 22%;
    }
    .web-hosting-search-content .search-field .search-input {
        width: 90%;
        direction: ltr;
        height: 70px;
        color: #ffcf38;
        caret-color: #ffcf38;
        font-weight: 500;
        font-size: 19px;
        border: none;
    }
    .search-results .result .search-text-result {
        display: flex;
        align-items: center;
        gap: 15px;
        font-weight: 600;
        font-size: 23px;
        color: var(--main-text-color);
    }

    .backlinks .images .main {
        display: flex;
        justify-content: center;
    }
    .web-hosting-plans-tabs .primuim,
    .shared-hosting-plans .primuim,
    .windows-vps-content .primuim {
        background-color: #102d59;
        color: white;
        position: relative;
        margin-top: 0px;
        background-image: url(../assets/images/premuim-backg.svg);
        background-size: cover;
        background-color: #102d59;
        transition: box-shadow 0.3s ease-in-out;
    }

    .customer-qustion .servies-title::before {
        content: "";
        position: absolute;
        top: 30px; /* always stick to the top */
        right: 500px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .customer-qustion .working-title::before {
        content: "";
        position: absolute !important;
        top: 10px !important; /* always stick to the top */
        right: 280px !important; /* always stick to the left */
        width: 30px !important;
        height: 30px !important;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .offers-head .servies-title::before {
        content: "";
        position: absolute;
        top: -5px; /* always stick to the top */
        left: 300px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .wp-services .servies-title::before {
        content: "";
        position: absolute;
        top: 10px; /* always stick to the top */
        right: 480px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .offers-head .servies-desc::before {
        content: "";
        position: absolute;
        top: -5px; /* always stick to the top */
        left: 300px !important; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .web-hosting-content .search-bar .search-input {
        width: 500px;
    }

    .web-hosting-content .search-bar button {
        left: 16%;
    }

    .web-hosting-plans-tabs .plan-card .plan-name,
    .shared-hosting-plans .plan-card .plan-name,
    .windows-vps-content .plan-card .plan-name {
        font-size: 18px;
    }

    .web-hosting-plans-tabs .plan-card .know-more-button button,
    .shared-hosting-plans .plan-card .know-more-button button,
    .windows-vps-content .plan-card .know-more-button button {
        padding: 15px;
        font-size: 20px;
    }

    .web-hosting-location .web-hosting-location-text .title {
        font-size: 20px;
    }

    .web-hosting-location .web-hosting-collapse {
        width: 100%;
        margin: 20px 0;
    }
    .search-results .match-result .add-to-cart .add-to-cart-btn button {
        padding: 10px 20px;
        border: none;
        color: white;
        font-size: 12px;
        background-color: var(--main-color);
        border-radius: 10px;
    }
    .search-results .result .add-to-cart .add-to-cart-btn button {
        padding: 10px 20px;
        border: none;
        color: white;
        font-size: 12px;
        background-color: #0a222e;
        border-radius: 10px;
    }

    .servers-management-hero-section .seo-hero-content > .row {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .servies-title,
    .news-container .news-head p,
    .services-container .services-head p,
    .prev-jobs-head p,
    .web-app-dev-title p {
        font-size: 20px;
    }

    .e-marketing-hero-section-content .girl-image img {
        position: absolute;
        left: 15%;
        top: 66px;
        height: 490px;
    }

    .web-hosting-location
        .web-hosting-collapse
        .card
        button.btn.btn-link.collapsed,
    .web-hosting-location .web-hosting-collapse .card button.btn.btn-link {
        font-size: 14px;
    }

    .web-hosting-location .web-hosting-collapse .card {
        margin-bottom: 15px;
    }
    .seo-hero-section {
        height: auto;
    }

    .graphic-desin-page-hero .row {
        padding: 20px;
    }
    .graphic-desin-page-hero .row .col-6:first-child {
        width: 100%;
    }
    .graphic-desin-page-hero .row .col-6:last-child {
        display: none;
    }

    /* -------------------- */
    .graphic-desin-page-hero .they-have-skill p {
        font-size: 18px !important;
    }

    .graphic-desing-page-services .card::after {
        right: 100px;
    }
    .graphic-desing-page-services .card .card-title,
    .more-than-u-think .head-title,
    .ask-for-similar-project label {
        font-size: 17px !important;
    }
    .graphic-desing-page-services .card .card-text,
    .more-than-u-think .details {
        font-size: 15px !important;
    }
    /* -------------------- */

    /* ---------app-like-upper----------- */
    .app-like-upper-hero-section .hero-text .name {
        font-size: 40px !important;
    }
    .hero-text .theway {
        font-size: 15px !important;
    }

    .web-app-dev-cards .store img,
    .upper-careem-first-card .store img {
        width: 115px;
    }
    /* -------------------- */

    /* ---------blog-details----------- */
    .blog-details-content .card .title {
        font-size: 16px !important;
    }

    .quote-box p {
        font-size: 15px;
    }
    .quote-box footer {
        padding: 10px 0;
        font-size: 14px;
    }

    .res-blog-details-content .the-new-details .updated-daily .title {
        font-size: 18px !important;
    }

    .blog-details-content .card {
        padding: 20px 15px 20px;
    }

    .latest-blogs .news-info img {
        width: 50px;
    }

    .latest-blogs .news-info .profile-details .name {
        font-weight: 400;
        font-size: 14px;
        color: #0a222e;
    }
    .latest-blogs .news-info .profile-details .date {
        font-weight: 400;
        font-size: 10px;
        color: #6c6a72;
        text-align: left;
    }
    /* -------------------- */

    /* ---------digital-transformation----------- */
    .digital-transformation-hero-section,
    .digital-transformation-hero-section.software-testing-hero-section {
        height: auto !important;
        min-height: auto;
        padding: 100px 0 40px 0;
        background: #f8f9fa !important;
        background-image: none !important;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content {
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto !important;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content {
        position: static !important;
        width: 100% !important;
        margin-top: 0 !important;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        order: 1;
    }

    /* Show responsive title and hide desktop title */
    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .res-main-title {
        display: block !important;
        color: var(--main-text-color);
        font-weight: 600;
        font-size: 26px;
        margin-bottom: 15px;
        text-align: center;
        order: 0;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content
        .main-title {
        display: none !important;
    }

    /* Show responsive explain and hide desktop explain */
    .digital-transformation-hero-section .text-content .res-explain {
        display: block !important;
        color: #0a222e99;
        font-weight: 300;
        font-size: 14px;
        line-height: 26px;
        text-align: center;
        margin-bottom: 15px;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content
        .explain {
        display: none !important;
    }

    /* Image styling for mobile */
    .digital-transformation-hero-section .digital-hero-image {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 300px;
        margin: 20px auto 15px auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        order: 2;
    }

    /* Button styling for mobile */
    .digital-transformation-hero-section .explain-btn {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        width: 100%;
    }

    .digital-transformation-hero-section button.btn.btn-outline-primary {
        font-size: 13px;
        padding: 12px 20px;
        height: auto;
        width: auto;
    }

    .digital-transformation-content .services .card .card-text {
        font-size: 14px;
    }  
 

    .digital-transformation-content .title,
    .digital-transformation-content .software-testing-services-title {
        font-size: 16px !important;
    }

    .digital-transformation-content .special-card .text-regular,
    .digital-transformation-content .special-card .special-text {
        font-size: 12px !important;
        line-height: 1.6;
    }

    .digital-transformation-content .how-we-work .card-title {
        font-size: 16px !important;
    }

    .digital-transformation-content .how-we-work .steps {
        font-size: 15px !important;
    }
    .digital-transformation-content .how-we-work ul li {
        font-size: 14px !important;
    }

    /* how-we-work section mobile fix */
    .digital-transformation-content .how-we-work .card {
        height: auto !important;
        display: flex;
        flex-direction: column;
    }

    .digital-transformation-content .how-we-work .card .card-image {
        order: 1;
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .digital-transformation-content
        .how-we-work
        .card
        .how-we-work-card-content {
        order: 2;
    }

    .digital-transformation-content .card-holder .card .card-title {
        font-size: 14px;
    }
    /* -------------------- */

    .your-online-store-feature .your-feature-content .feature-card .card-img {
        width: 120px;
        height: 120px;
    }

    .your-online-store-feature
        .your-feature-content
        .feature-card
        .card-img
        img {
        width: 40px;
        margin-top: 10px;
    }

    .your-online-store-feature
        .your-feature-content
        .feature-card
        .text-card-content {
        padding-top: 0;
    }
    .your-online-store-feature .your-feature-content .feature-card .card-title {
        margin-top: 0;
    }

    .haking-test-goal .images .back-image {
        bottom: -40px;
        left: -40px;
    }

    .hacking-test-steps .first-arrow {
        width: 400px;
        left: 25%;
        margin-top: 20px;
    }
    .hacking-test-steps .second-arrow {
        margin-top: 10px;
        width: 400px;
        top: 66%;
        left: 23%;
    }

    .write-your-question .u-ask span {
        font-size: 26px !important;
    }

    .taj-app-hero-section .title p {
        color: white;
        font-weight: 700;
        font-size: 30px;
    }

    .the-app-idea-section .the-steps .step-img img {
        width: 30px;
        height: auto;
    }
    .the-app-idea-section .the-steps .step-text .step-name {
        font-size: 18px;
    }
    .the-app-idea-section .the-steps .step-text .step-details {
        font-size: 16px;
    }

    .section-with-container {
        margin: 50px !important;
    }

    .penetration-hero-section .text-content .buttons button,
    .inputs-menu button,
    .taj-comments button {
        font-size: 14px;
        height: 100% !important;
    }

    .taj-app-content .comments-you-can .comment-auther img {
        width: 80px;
    }

    .taj-app-content .comments-you-can .comment-auther .ather-data .name,
    .taj-app-content .comments-you-can .comment-auther .ather-data .request {
        font-size: 16px !important;
    }

    .taj-comments .your-rating {
        gap: 5px;
    }

    .taj-comments .your-rating p {
        font-size: 12px;
    }

    .taj-comments .your-rating .rate i {
        font-size: 12px;
    }

    .form-inputs::placeholder,
    .area-field::placeholder,
    .flag p {
        font-size: 15px;
    }

    .flag img {
        width: 26px;
    }

    /* todo769 */

    /* Reusable classes */
    .hero-section-title {
        font-size: 22px !important;
    }

    .branch-title {
        font-size: 18px !important;
    }

    .section-description-font {
        font-size: 16px !important;
    }

    .section-list-items li {
        font-size: 13px !important;
    }
}

/* ==========================================
   MAX-WIDTH: 767px - Mobile & Small Tablets
   ========================================== */
@media (max-width: 767px) {
    .online-store-design-head img {
        position: absolute;
        top: -18px;
        left: 20%;
    }
        .your-online-store-feature-haed .vector img {
        position: absolute;
        top: -12px;
        left: 11%;
    }
    .graphic-desing-page-content .explainment-section .main{
        position: static;
    }
    .graphic-desing-page-content .col-md-4{
        margin-bottom: 20px;
    }
        .graphic-desing-page-services .card::after {
        right: 182px;
    }
        .seo-hero-section .seo-hero-content .image-hold img {
        width: 100%;
        height: 100%;
     
        margin-top: 40px;
        object-fit: cover;
    }


    .customer-card-img img,
    .owl-carousel .owl-item img {
        width: 100px !important;
    }
    .customer-opinion-card {
        margin: 20px 0;
        background-color: white;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-width: 1px;
        padding: 30px 30px;
        height: 774px;
        box-shadow: 0px 0px 15px 0px #0000001a;
        position: relative;
    }
    .fac-header {
        margin: -36px auto;
        margin-bottom: 20px;
        position: relative;
    }

    .web-hosting-hero-section .hero-text-holder .text::before {
        content: "";
        position: absolute;
        top: -14px;
        left: -13px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .web-hosting-hero-section .hero-text-holder .text {
        font-size: 11px;
        margin-bottom: 20px;
    }
    .e-marketing-hero-section-content .number-one {
        padding: 10px;
        background-color: #279dd821;
        width: fit-content;
        border-radius: 40px;
        position: absolute;
        top: 37px;
        left: 30%;
    }
    .e-marketing-hero-section-content .number-one .best {
        color: var(--main-text-color);
        font-weight: 300;
        font-size: 15px;
    }
    .e-marketing-hero-section,
    .software-testing-hero-section {
        background-color: #dcf0f566;
        background-image: url(../assets/images/bg.svg);
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* Digital Transformation - Override software-testing styles */
    .digital-transformation-hero-section.software-testing-hero-section,
    .digital-transformation-hero-section {
        height: auto !important;
        min-height: auto;
        padding: 100px 0 40px 0;
        background: #f8f9fa !important;
        background-image: none !important;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content {
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto !important;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content {
        position: static !important;
        width: 100% !important;
        margin-top: 0 !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        order: 1;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .res-main-title {
        display: block !important;
        color: var(--main-text-color);
        font-weight: 600;
        font-size: 26px;
        margin-bottom: 15px;
        text-align: center;
        order: 0;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content
        .main-title {
        display: none !important;
    }

    .digital-transformation-hero-section .text-content .res-explain {
        display: block !important;
        color: #0a222e99;
        font-weight: 300;
        font-size: 14px;
        line-height: 26px;
        text-align: center;
        margin-bottom: 15px;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .text-content
        .explain {
        display: none !important;
    }

    .digital-transformation-hero-section .digital-hero-image {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 300px;
        margin: 20px auto 15px auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        order: 2;
    }

    .digital-transformation-hero-section .explain-btn {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        width: 100%;
    }

    .digital-transformation-hero-section button.btn.btn-outline-primary {
        font-size: 13px;
        padding: 12px 20px;
        height: auto;
        width: auto;
    }
    /* End Digital Transformation */

    .e-marketing-hero-section .e-marketing-hero-section-content .text-content {
        position: static;
        width: 100%;
        margin-top: 39rem;
    }
    .wp-best-partner-serv .service-card {
        margin-top: 10px;
    }
    .servers-management-hero-section .seo-hero-content > .row {
        display: flex;
        flex-direction: column-reverse;
    }
    .image-hold {
        margin-top: 0;
    }
    .explainment-section .images .seo-pseudo img {
        display: none;
    }
    .servers-management-hero-section .seo-hero-content .image-hold img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .seo-hero-section {
        height: auto;
    }
    .analysis-head .servies-title::before {
        content: "";
        position: absolute;
        top: -2px; /* always stick to the top */
        left: 230px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .about-wp-header .title::before {
        content: "";
        position: absolute;
        top: 0px; /* always stick to the top */
        right: 160px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .about-wp-header .title.special-title::before {
        content: "";
        position: absolute;
        top: 0px; /* always stick to the top */
        right: 128px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .e-wp-header .title::before {
        content: "";
        position: absolute;
        top: -5px;
        right: 301px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .wp-services .servies-title::before {
        content: "";
        position: absolute;
        top: -2px; /* always stick to the top */
        right: 140px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .customer-qustion .servies-title::before {
        content: "";
        position: absolute;
        top: -15px; /* always stick to the top */
        right: 147px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .customer-qustion .working-title::before {
        content: "";
        position: absolute !important;
        top: 10px !important; /* always stick to the top */
        right: 290px !important; /* always stick to the left */
        width: 30px !important;
        height: 30px !important;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .our-customer .servies-title::before {
        content: "";
        position: absolute;
        top: 0px; /* always stick to the top */
        right: 210px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .stay-in-touch-head .title::before {
        content: "";
        position: absolute;
        top: -12px; /* always stick to the top */
        right: 170px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .hero-text {
        padding: 0;
    }
    .apply-first-hero-section .hero-text {
        padding: 0;
    }
    /* === GENERAL LAYOUT === */
    .first-apply .card-title p::before {
        content: "";
        position: absolute;
        top: -12px; /* always stick to the top */
        left: 20px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .serv-card::after,
    .service-card::after {
        content: "";
        width: 29px;
        height: 29px;
        border-radius: 50%;
        background-color: #279dd8;
        position: absolute;
        top: 61px;
        right: 220px;
        /* left: 45px; */
        transform: translate(50%, -50%);
        transition: width 0.4s ease, height 0.4s ease;
    }
    .first-apply .card-title img {
        position: absolute;
        top: -10px;
        left: -12px;
    }
    .right-4 .the-text-content {
        text-align: right;
        margin-right: -127px;
        /* padding: 0 121px; */
    }
    nav.navbar.navbar-expand-lg.bg-body-tertiary {
        width: 100%;
        padding: 0px 100px;
    }

    .content-section {
        margin: 50px 0;
        margin-top: 90px;
    }

    .content-section .text-for-res {
        display: block;
    }

    /* === HERO SECTIONS === */
    .hero-text {
        position: absolute;

        right: 20px;
    }
    .services-container .services-head .vectores {
        position: absolute;
        top: -10px;
        left: 270px;
        right: auto;
    }
    .contact-us-hero-section .name,
    .about-us-hero-section .name,
    .apply-first-hero-section .name,
    .apply-second-hero-section .name,
    .customer-testimonials-hero-section .name,
    .wp-news-hero-section .name,
    .blog-details-hero-section .name,
    .wp-services-hero-section .name,
    .mobile-app-hero-section .name,
    .prev-jobs-hero-section .name,
    .web-app-dev-hero-section .name,
    .online-store-design-hero-section .name,
    .app-like-upper-hero-section .name,
    .payment-methods-hero-section .name,
    .job-decription-hero-section .name,
    .techniques-hero-section .name,
    .privacy-policy-hero-section .name,
    .user-agreement-hero-section .name,
    .terms-conditions-hero-section .name,
    .shared-hosting-hero-section .name {
        font-size: 35px;
    }

    .contact-us-hero-section .theway p,
    .about-us-hero-section .theway p,
    .apply-first-hero-section .theway p,
    .apply-second-hero-section .theway p,
    .customer-testimonials-hero-section .theway p,
    .wp-news-hero-section .theway p,
    .blog-details-hero-section .theway p,
    .wp-services-hero-section .theway p,
    .mobile-app-hero-section .theway p,
    .taj-app-hero-section .theway p,
    .prev-jobs-hero-section .theway p,
    .web-app-dev-hero-section .theway p,
    .app-like-upper-hero-section .theway p {
        font-size: 18px;
    }
    .explainment-section .main {
        position: static;
    }
    /* === NAVIGATION === */
    .icons .logo {
        display: flex;
        align-items: center;
    }

    .icons .logo img {
        width: 35px;
    }

    .nav-links-holder .nav-link {
        padding: 10px;
    }

    .bullets {
        display: block;
    }

    /* === HIDE/SHOW ELEMENTS === */
    .fac-header .left-line,
    .fac-header .right-line,
    .img-container,
    .second-img-container,
    .question-card,
    .stay-in-touch-card,
    .floating-img,
    #animatedText,
    .description,
    .tabs-content-holder,
    .latest-blog,
    .analysis,
    .accounts-holder {
        display: none;
    }
    .sales-management-app .third img {
        position: relative;
    }

    .res-tabs,
    .res-customer-opinion,
    .res-latest-blog,
    .res-blog-details-content,
    .res-analysis,
    .res-accounts-holder,
    .blog-details-content {
        display: block;
    }

    .blog-details-content {
        display: none;
    }

    /* === FOOTER === */
    .footer-content {
        margin: 0px 110px;
    }
    .search-results .result .add-to-cart .add-to-cart-price .renew {
        font-weight: 500;
        font-size: 11px;
    }
    .footer .bottom-content,
    .footer .footer-content .last-btns {
        display: none;
    }

    .footer .cards-holder {
        padding: 0;
    }

    .footer .footer-content .middle-row {
        border-bottom: 1px dashed #ffffff26;
    }

    .footer .footer-content .contact-with-us {
        border-bottom: 1px dashed #ffffff26;
    }

    .footer .footer-content .icon-and-text {
        width: 70%;
    }
    .gradient-custom .card-body.mb-5 {
        padding-left: 0px;
    }
    .footer-card-content p,
    .footer .footer-content .contact-us a {
        color: #ffffffdb;
        font-weight: 300;
        font-size: 14px;
    }

    .middle-row .payment {
        display: none;
    }

    .footer .res-privacy-conditions {
        display: block;
        margin-right: -110px;
    }

    .footer .res-privacy-conditions .res-condtion-holder {
        display: flex;
        align-items: center;
        margin: 10px 0;
        padding: 0 10px;
        justify-content: center;
    }

    .footer
        .res-privacy-conditions
        .res-condtion-holder
        .condtion-holder-paragraph {
        font-weight: 300;
        font-size: 12px;
    }

    .footer .res-privacy-conditions .res-copyright-holder {
        direction: ltr;
        text-align: center;
        color: #888c8f;
        font-size: 12px;
        font-weight: 400;
    }

    .footer .footer-content .res-payment {
        display: block;
        padding: 15px 0;
    }

    .footer .footer-content .res-payment .footer-card-heading {
        margin: 10px 0;
    }

    .res-accounts-holder {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 15px;
    }

    /* === FORMS & BUTTONS === */
    .info {
        margin-top: 0;
    }

    .info .btns {
        display: block;
    }

    .info .call-us,
    .info .ask-for-service {
        width: 95%;
        margin: 10px 0;
    }

    /* === CARDS & CONTENT === */
    .design {
        font-size: 35px;
    }

    .one,
    .two,
    .three,
    .four {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .two,
    .four {
        right: auto;
    }
    .res-customer-opinion .res-customer-opoinion-head .top img {
        position: absolute;
        top: -12px;
        left: 187px;
    }

    .text-container {
        width: 100%;
    }

    .text-container .text {
        width: 100%;
        max-width: 100%;
    }

    .text-container .heading {
        text-align: center;
    }

    .customer-opinion {
        padding: 35px;
    }

    .cutomer-review {
        margin: 0 auto;
    }

    .customer-card-img img {
        height: 150px;
        object-fit: contain;
    }

    .customer-card {
        padding: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
    }

    .customer-card::-webkit-scrollbar {
        display: none;
    }

    .customer-card .customer-card-img {
        flex: 0 0 auto;
    }

    .customer-card .customer-card-img img {
        filter: grayscale(0);
        object-fit: contain;
    }

    /* === SERVICES === */
    .wp-services .serv-body .res {
        display: block;
    }

    .wp-services .serv-body .not-res {
        display: none;
    }

    .serv-img {
        display: flex;
        justify-content: center;
    }

    .serv-name {
        text-align: center;
    }

    .first-card {
        align-items: center;
        margin-top: 20px;
    }

    .serv-body .res .serv-card {
        border-radius: 10px;
        padding: 10px;
    }

    .serv-body .res .serv-card .serv-card-head {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .serv-body .res .serv-card .serv-card-head .serv-img img {
        width: 30px;
    }

    .serv-body .res .serv-card .serv-card-head .serv-name {
        color: var(--main-text-color);
        font-weight: 400;
        font-size: 18px;
    }

    .serv-body .res .serv-card .serv-description {
        font-weight: 400;
        font-size: 14px;
    }

    /* === QUESTION MENU === */
    .question-menu .card {
        border: none;
        padding: 0;
        margin-bottom: 10px;
    }

    .question-menu .card .card-header {
        padding-right: 10px;
    }

    .question-head .question {
        display: none;
    }

    /* === VECTORS & DECORATIONS === */
    .serv-vector {
        position: absolute;
        top: 10px;
        left: 100px;
    }

    .vectores {
        position: absolute;
        top: -10px;
        left: 200px;
        width: 30px;
    }

    .analysis-vector {
        position: absolute;
        top: -4px;
        left: 140px;
        width: 30px;
    }

    .opinion-vector {
        position: absolute;
        top: 10px;
        left: 150px;
    }

    .customer-vector {
        position: absolute;
        top: 5px;
        left: 180px;
    }

    .question-vector {
        position: absolute;
        top: 35px;
        left: 80px;
    }

    .blog-vector {
        position: absolute;
        top: 45px;
        left: 85px;
    }

    /* === TABS === */
    .res-tabs .offer-details .offer-details-head {
        font-weight: 400;
        font-size: 16px;
    }

    .res-tabs .offer-details .offer-description {
        font-weight: 300;
        font-size: 14px;
        color: #0a222e99;
    }

    .res-tabs .second-vector {
        position: absolute;
        left: 240px;
        top: 13px;
    }

    .res-tabs .first-vector {
        position: absolute;
        left: 244px;
        top: 20px;
    }

    .line-for-res {
        display: block;
        margin: 10px 0;
        width: 200px;
    }

    .opinion {
        display: none;
    }

    /* === OFFERS === */
    .offer-destails {
        width: 100%;
    }

    /* === LAST BUTTONS === */
    .last-btns {
        width: 70%;
        justify-content: space-around;
    }

    /* === ABOUT SECTION === */
    .about-wp-header .vector {
        position: absolute;
        top: -8px;
        left: 205px;
    }

    .software-testing-content .services .title {
        margin: 30px 0 !important;
    }

    .for-servieces-links .nav-footer,
    .for-about-company-links .nav-footer,
    .for-more-links .nav-footer {
        margin: 0 10px;
    }

    .fourth-card-text {
        margin: 0;
    }

    /* === MARGIN ADJUSTMENTS === */
    .middle-row {
        margin: 0;
        margin-top: 25px;
    }

    /* === RESPONSIVE NAVIGATION === */
    .res-navbar-nav {
        width: 50%;
    }

    .res-navbar-nav li {
        list-style: none;
    }

    .res-navbar-nav .nav-btns {
        display: none;
    }

    .res-navbar-nav li.nav-item {
        margin: 25px 5px;
    }

    .menu {
        justify-content: space-between;
        margin-left: 0;
    }

    .menu .arrow {
        transform: rotate(90deg);
    }

    .nav-btns {
        display: flex;
        justify-content: center;
        margin-right: 0;
    }

    .menu p,
    .apps {
        margin: 0;
        font-weight: 300;
        font-size: 18px;
    }

    .res-navbar-nav .close-ico {
        width: 40px;
        cursor: pointer;
    }

    .nav-footer,
    .nav-footer .nav-accounts-holder {
        display: block;
    }

    .nav-footer .wp-and-logo {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .nav-footer .nav-accounts-holder {
        display: flex;
        align-items: center;
        gap: 15px;
        justify-content: center;
        margin: 10px 0;
        flex-wrap: wrap;
    }

    /* === HERO SECTION SPACING === */
    .contact-us-hero-section,
    .about-us-hero-section {
        margin-top: 55px;
    }

    .apply-first-hero-section,
    .blog-details-hero-section,
    .wp-services-hero-section,
    .prev-jobs-hero-section,
    .web-app-dev-hero-section,
    .online-store-design-hero-section,
    .app-like-upper-hero-section,
    .payment-methods-hero-section,
    .job-decription-hero-section,
    .techniques-hero-section,
    .privacy-policy-hero-section,
    .user-agreement-hero-section,
    .terms-conditions-hero-section,
    .web-hosting-hero-section,
    .shared-hosting-hero-section,
    .e-marketing-hero-section {
        margin-top: 55px;
    }

    .taj-app-content,
    .fac-content {
        margin-top: 140px;
    }

    .mobile-app-hero-section,
    .software-testing-hero-section {
        margin-top: 50px;
    }

    .error-holder {
        margin-top: 85px;
    }

    .customer-testimonials-hero-section {
        margin-top: 50px;
    }

    .apply-second-hero-section {
        margin-top: 50px;
        min-height: 400px;
    }

    .apply-online-last .recieved {
        margin-top: 90px;
    }

    .web-hosting-search-content {
        margin-top: 100px !important;
    }
    .taj-app-header .title p,
    .fac-header .title p {
        color: #0a222e;
        margin: 30px 0;
        padding-top: 80px;
        font-weight: 700;
        font-size: 21px;
    }
    .fac-header .title::before {
        top: 59px !important;
        left: 27px;
    }
    .mobile-app-hero-section {
        min-height: 400px;
    }

    .hosting-dropdown-menu {
        padding: 20px 15px;
    }

    .hosting-link {
        padding: 15px 20px;
        gap: 15px;
    }

    .hosting-icon {
        width: 45px;
        height: 45px;
    }

    .hosting-content h4 {
        font-size: 12px;
    }

    .hosting-content p {
        font-size: 13px;
    }

    /* Web Hosting Page */
    .web-hosting-hero-section .hero-text-holder {
        width: 100%;
        padding: 100px;
        position: relative;
    }

    /* .web-hosting-hero-section .hero-text-holder img {
          position: absolute;
        left: 38%;
        top: 41%;
        width: 24px;
}  */
    .web-hosting-hero-section .hero-text-holder .hero-para {
        font-weight: 300;
        font-size: 14px;
    }
    /* ________________ */

    .offers-head .servies-title::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 178px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .e-wp-header2 .title::before {
        content: "";
        position: absolute;
        top: 36px;
        right: 312px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
}

/* ==========================================
   MAX-WIDTH: 479px - Mobile Phones
   ========================================== */
@media (max-width: 479px) {
    .e-marketing-hero-section-content .number-one .best {
        color: var(--main-text-color);
        font-weight: 300;
        font-size: 12px;
    }
    /* === NAVIGATION === */
    .customer-vector {
        position: absolute;
        top: 5px;
        left: 100px;
    }

    li.nav-item {
        margin: 5px;
    }

    .res-customer-opinion .res-customer-opoinion-head .top img {
        position: absolute;
        top: -12px;
        left: 230px;
    }
    nav.navbar.navbar-expand-lg.bg-body-tertiary {
        padding: 0;
    }

    .res-navbar-nav {
        width: 75%;
    }

    .res-navbar-nav li.nav-item {
        margin: 25px 5px;
    }

    /* === BUTTONS === */
    .info .btns .call-us,
    .apply-online-btn,
    .taj-comments .form button {
        height: 40px;
    }

    .stay-in-touch-content .inputs-menu button {
        height: 45px;
    }

    .info .call-us,
    .info .ask-for-service {
        width: 140px;
    }

    .btn-outline-primary,
    .btn-primary {
        height: 40px;
        border-radius: 8px;
    }

    /* === LOGO & ICONS === */
    .icons .logo {
        display: flex;
        align-items: center;
    }

    .icons .logo img {
        width: 30px;
    }

    /* === CONTENT SECTIONS === */
    .content-section {
        margin: 95px 0;
    }

    .content-section .text-for-res {
        font-size: 20px;
        display: block;
    }

    /* === HERO SECTIONS === */
    .hero-text {
        position: absolute;
    }

    .design {
        font-size: 25px;
    }

    .contact-us-hero-section .name,
    .apply-first-hero-section .name,
    .apply-second-hero-section .name,
    .customer-testimonials-hero-section .name,
    .blog-details-hero-section .name,
    .wp-services-hero-section .name,
    .mobile-app-hero-section .name,
    .prev-jobs-hero-section .name,
    .web-app-dev-hero-section .name,
    .online-store-design-hero-section .name,
    .app-like-upper-hero-section .name,
    .payment-methods-hero-section .name,
    .job-decription-hero-section .name,
    .techniques-hero-section .name,
    .privacy-policy-hero-section .name,
    .user-agreement-hero-section .name,
    .terms-conditions-hero-section .name
 {
        font-size: 30px;
    }

      .shared-hosting-hero-section .name {
        font-size: 25px;
    }
    .contact-us-hero-section .theway p,
    .about-us-hero-section .theway p,
    .apply-first-hero-section .theway p,
    .apply-second-hero-section .theway p,
    .customer-testimonials-hero-section .theway p,
    .blog-details-hero-section .theway p,
    .wp-services-hero-section .theway p,
    .mobile-app-hero-section .theway p,
    .taj-app-hero-section .theway p,
    .fac-hero-section .theway p,
    .prev-jobs-hero-section .theway p,
    .web-app-dev-hero-section .theway p,
    .online-store-design-hero-section .theway p,
    .app-like-upper-hero-section .theway p,
    .payment-methods-hero-section .theway p,
    .job-decription-hero-section .theway p,
    .shared-hosting-hero-section .theway p {
        font-size: 15px;
    }

    .contact-us-hero-section,
    .about-us-hero-section {
        height: 400px;
    }

    /* === FOOTER === */
    .footer-content {
        margin: 0 15px;
    }

    .footer .footer-content .wp-logo {
        width: 150px;
    }

    .footer .footer-content .details {
        text-align: center;
        font-size: 14px;
        width: 70%;
    }

    .footer .res-privacy-conditions {
        margin-right: -15px;
    }

    .footer .res-privacy-conditions .res-condtion-holder {
        margin-left: 15px;
    }

    .footer .footer-content .res-payment .payment-cards-holder {
        gap: 10px;
    }

    /* === FORMS === */
    .form-inputs {
        padding: 10px;
    }

    .form-inputs::placeholder,
    .area-field::placeholder,
    .flag p {
        color: #0a222e80;
        font-weight: 300;
        font-size: 10px;
    }

    .flag {
        top: 10px;
        right: 4px;
    }

    .flag img {
        width: 20px;
    }

    /* === CARDS === */
    .customer-card-img img {
        height: 150px;
        object-fit: contain;
    }

    .customer-card {
        padding: 0;
    }

    .customer-card .customer-card-img img {
        height: 65px;
        object-fit: contain;
    }

    /* === VECTORS === */
    .vectores {
        position: absolute;
        top: -10px;
        right: 13%;
        width: 25px;
    }

    .analysis-vector {
        position: absolute;
        top: -5px;
        right: 39%;
        width: 25px;
    }

    .question-vector {
        position: absolute;
        top: -11px;
        right: 41%;
        width: 25px;
    }

    /* === SERVICES === */
    .wp-services .serv-head {
        display: block;
    }

    .wp-services .serv-head .servies-title {
        text-align: right;
        font-size: 18px;
        font-weight: 400;
        margin: 10px 0;
    }

    .wp-services .serv-head .serv-vector {
        width: 25px;
        right: 38%;
        top: -5px;
    }

    .servies-title,
    .news-container .news-head p,
    .services-container .services-head p,
    .prev-jobs-head p,
    .web-app-dev-title p {
        text-align: right;
        font-size: 18px;
        font-weight: 400;
        color: var(--main-text-color);
        margin: 10px 0;
    }

    /* === TABS === */
    .res-tabs .offer-destails .bullets ul {
        margin: 0;
        margin-top: 10px;
        padding: 0;
        padding-right: 15px;
    }

    .res-tabs .offer-destails .bullets ul li {
        margin: 5px 0;
        font-weight: 400;
        font-size: 14px;
    }

    /* === QUESTION MENU === */
    button.btn.btn-link,
    button.btn.btn-link.collapsed {
        color: #0a222e;
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
    }

    .question-menu .card-body {
        font-weight: 300;
        font-size: 13px;
        color: #5abff1;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* === STAY IN TOUCH === */
    .stay-in-touch .title {
        font-size: 18px;
    }

    .stay-in-touch-vector {
        width: 25px;
        right: 47%;
        top: -10px;
    }

    .stay-in-touch-content button {
        width: 100%;
        border-radius: 7px;
    }

    /* === LINE DECORATIONS === */
    .line-for-res {
        display: block;
        margin: 5px 0;
        width: auto;
    }

    /* === AVATAR === */
    .avatar {
        height: 100%;
        width: 100%;
    }

    /* === NAV FOOTER === */
    .for-servieces-links .nav-footer,
    .for-about-company-links .nav-footer,
    .for-more-links .nav-footer {
        margin: 0 0;
    }

    .nav-footer .wp-and-logo {
        justify-content: start;
    }

    .for-servieces-links ul li,
    .for-about-company-links ul li,
    .for-more-links ul li {
        padding: 10px;
        margin: 5px 0;
    }

    .for-servieces-links .nav-footer .wp-and-logo,
    .for-about-company-links .nav-footer .wp-and-logo,
    .for-more-links .nav-footer .wp-and-logo {
        margin: 0 10px;
    }

    /* === RESPONSIVE CONTENT === */
    .res-customer-opinion,
    .res-latest-blog {
        padding: 15px 12px;
    }

    .res-customer-opinion .owl-item .quate-iconn {
        width: 35px !important;
        height: 25px !important;
    }

    .res-customer-opinion .owl-item .rating {
        width: 120px !important;
        height: 35px !important;
        bottom: -15px !important;
    }

    /* === ABOUT SECTION === */
    .about-wp-header .title {
        font-size: 18px;
    }

    .about-wp-header .vector {
        position: absolute;
        top: -5px;
        left: 50%;
        width: 25px;
    }

    .about-wp-header .history-vector {
        position: absolute;
        top: -5px;
        right: 34% !important;
        width: 25px;
    }

    .about-wp .discription,
    .wp-history .discription {
        font-size: 14px;
    }

    .wp-history .title {
        margin: 10px 0;
    }

    /* === WP SERVICES === */
    .wp-services .card-holder .card {
        padding: 10px;
        height: 175px;
        justify-content: space-around;
    }

    .wp-services .card-holder .card .card-title {
        font-size: 16px;
        margin: 0;
    }

    /* === ERROR PAGE === */
    .error-holder .no-page {
        font-size: 25px;
    }

    .error-holder .sorry {
        font-size: 14px;
    }

    /* === CONTACT SECTION === */
    .contact-ways .card {
        padding: 15px;
        gap: 8px;
        height: 180px;
        justify-content: space-between;
    }

    .contact-ways .card .icon img {
        width: 40px;
    }

    .contact-ways .card .category-name {
        font-size: 18px;
        margin: 0;
    }

    .contact-ways .card .category-details {
        font-size: 14px;
    }

    .web-hosting-content .search-bar .search-input {
        width: 300px;
        padding: 10px;
        border-radius: 50px;
        border: none;
        background-color: #f4f4f4;
        margin-top: -30px;
    }
    .web-hosting-content .search-bar .search-input:focus {
        border: none;
        outline: none;
    }
    .web-hosting-content .search-bar .search-input::placeholder {
        color: #0a222e99;
        font-weight: 400;
        font-size: 12px;
    }

    .web-hosting-content .search-bar button {
        position: absolute;
        border: none;
        background-color: var(--main-color);
        color: white;
        padding: 6px;
        border-radius: 50px;
        width: 100px;
        font-size: 14px;
        font-weight: 400;
        top: -5px;
        left: 14%;
    }

    .web-hosting-content .domains {
        gap: 20px;
    }

    .web-hosting-content .domains p {
        font-size: 12px;
    }

    .services-container .service-card .title {
        font-size: 14px;
        height: 20px !important;
    }

    .service-card .card-img {
        margin-top: 10px;
        background-color: var(--main-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: fit-content;
        height: auto;
        padding: 15px;
        position: relative;
        z-index: 20;
    }
    .service-card .card-img img {
        width: 30px;
        height: 30px;
    }

    .web-hosting-location .web-hosting-location-text .title {
        font-size: 16px;
    }

    .web-hosting-location
        .web-hosting-collapse
        .card
        button.btn.btn-link.collapsed,
    .web-hosting-location .web-hosting-collapse .card button.btn.btn-link {
        font-size: 14px;
    }

    .more-faq {
        margin-top: 20px;
        display: inline-block;
    }

    /* -------------------- */
    .graphic-desin-page-hero .title,
    .graphic-desing-page-services .title,
    .explainment-section .title,
    .graphic-desing-page-content .services .title,
    .more-than-u-think .title,
    .ask-for-similar-project .title {
        font-size: 17px !important;
    }
    .graphic-desin-page-hero .they-have-skill p {
        font-size: 14px !important;
    }

    .graphic-desing-page-services .card::after {
        right: 170px;
    }
    .graphic-desing-page-services .card .card-title,
    .explainment-section .text-explain,
    .more-than-u-think .head-title,
    .ask-for-similar-project label {
        font-size: 15px !important;
    }
    .graphic-desing-page-services .card .card-text,
    .more-than-u-think .details {
        font-size: 14px !important;
    }

    .explainment-section .slogans .icon-and-text p {
        font-size: 15px !important;
    }

    .explainment-section .slogans .icon-and-text img {
        width: 30px !important;
    }

    .more-than-u-think {
        align-items: center !important;
        text-align: center;
    }

    .more-than-u-think .charactristics .head {
        justify-content: center;
    }

    .more-than-u-think .left-side .charactristics .head {
        flex-direction: row-reverse;
    }

    .more-than-u-think .charactristics .head img {
        position: static;
    }
    /* -------------------- */

    /* ---------app-like-upper----------- */
    .app-like-upper-hero-section .hero-text .name {
        font-size: 20px !important;
    }

    .hero-text .theway {
        font-size: 12px !important;
    }
    .upper-careem-first-card .title,
    .online-store-design-content .title {
        font-size: 17px !important;
    }

    .upper-careem-first-card .store {
        flex-direction: column;
        align-items: center;
        margin: 20px 0;
    }

    .web-app-dev-cards .store img,
    .upper-careem-first-card .store img {
        width: 200px;
    }
    /* -------------------- */

    /* ---------blog-details----------- */
    .res-blog-details-content .card .title {
        font-size: 20px;
    }

    .res-blog-details-content .the-new-details .updated-daily .title {
        font-size: 18px !important;
    }

    .quote-box footer {
        padding: 20px 0;
    }
    /* -------------------- */

    /* ---------digital-transformation----------- */
    .digital-transformation-hero-section {
        padding: 90px 0 30px 0;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content {
        padding: 0 15px;
    }

    .digital-transformation-hero-section
        .software-testing-hero-section-content
        .res-main-title {
        font-size: 22px;
    }

    .digital-transformation-hero-section .text-content .res-explain {
        font-size: 13px;
        line-height: 24px;
    }

    .digital-transformation-hero-section .digital-hero-image {
        max-width: 250px;
    }

    .digital-transformation-hero-section button.btn.btn-outline-primary {
        font-size: 12px;
        padding: 10px 15px;
    }

    .digital-transformation-content .explain {
        font-size: 15px !important;
    }
    .digital-transformation-content .title,
    .digital-transformation-content .software-testing-services-title {
        font-size: 16px !important;
    }

    .digital-transformation-content .card {
        margin: 10px 0 !important;
    }
    /* ---------------------------------- */

    .customer-opinion .why-important .presentage {
        font-size: 26px;
    }
    .customer-opinion .why-important .presentage-content {
        font-size: 14px;
    }

    .your-online-store-feature
        .your-feature-content
        .feature-card
        .card-img
        img {
        margin-top: 20px;
    }

    .penetration-hero-section .image-content {
        text-align: center !important;
    }
    .penetration-hero-section .image-content img {
        margin: 50px;
    }

    .penetration-hero-section .text-content {
        margin: 0;
        padding: 0 20px;
    }

    .haking-test-goal,
    .hacking-value,
    .hacking-tests-type,
    .hacking-test-steps,
    .hacking-sammary,
    .hacking-ask-for-payment-method {
        padding: 40px 20px;
    }

    .haking-test-goal ul li,
    .hacking-value .details {
        font-size: 15px !important;
    }

    .penetration-hero-section .text-content .buttons button,
    .inputs-menu button,
    .taj-comments button {
        font-size: 10px;
        height: auto;
    }

    .owl-carousel .owl-item img {
        width: 50px !important;
    }

    .owl-carousel .owl-item .card-text {
        font-size: 14px !important;
    }

    .hacking-test-steps .first-arrow {
        width: 250px;
        left: 13%;
        margin-top: 38px;
    }
    .hacking-test-steps .second-arrow {
        margin-top: 10px;
        width: 250px;
        top: 70%;
        left: 13%;
    }

    .write-your-question .u-ask span {
        font-size: 20px !important;
    }

    .taj-app-hero-section .title p {
        color: white;
        font-weight: 700;
        font-size: 20px;
    }

    .the-app-idea-section .the-steps .step-img img {
        width: 24px;
        height: auto;
    }
    .the-app-idea-section .the-steps .step-text .step-name {
        font-size: 16px;
    }
    .the-app-idea-section .the-steps .step-text .step-details {
        font-size: 14px;
    }

    .section-with-container {
        margin: 50px 20px !important;
    }

    .taj-app-content .comments-you-can .comment-auther img {
        width: 60px;
    }

    .taj-app-content .comments-you-can .comment-auther .ather-data .name,
    .taj-app-content .comments-you-can .comment-auther .ather-data .request {
        font-size: 12px !important;
    }

    .taj-comments .your-rating {
        margin: 10px 0;
    }
    .taj-comments .your-rating p {
        font-size: 14px;
    }

    .taj-comments .your-rating .rate i {
        font-size: 15px;
    }

    .taj-comments {
        padding: 20px !important;
    }

    /* todo479 */

    /* Reusable classes */
    .hero-section-title {
        font-size: 18px !important;
    }

    .branch-title {
        font-size: 15px !important;
    }

    .section-description-font {
        font-size: 15px !important;
    }

    .section-list-items li {
        font-size: 11px !important;
    }

    .item-title-font {
        font-size: 11px !important;
        line-height: normal !important;
    }
}

/* ==========================================
   MIN-WIDTH: 401 AND MAX-WIDTH: 400px - Mobile Phones
   ========================================== */
@media (min-width: 401px) and (max-width: 550px) {
    .services-container .services-head .vectores {
        left: 260px;
        right: auto;
    }

    .serv-card::after,
    .service-card::after {
        right: 202px;
    }
    .serv-card2::after {
        right: 45px !important;
        top: 70px !important;
    }

    /* Web Hosting Page */
    /* .web-hosting-hero-section .hero-text-holder img {
        position: absolute;
        left: 56%;
        top: 40%;
        width: 24px;
} */
    /* ________________ */
}
/* ==========================================
   MAX-WIDTH: 400px - Mobile Phones
   ========================================== */
@media (max-width: 400px) {
    .online-store-design-head img {
        position: absolute;
        top: -18px;
        left: 15%;
    }
        .your-online-store-feature-haed .vector img {
        position: absolute;
        top: -12px;
        left: 5%;
    }
    .fac-header .title::before {
        top: 59px !important;
        left: 15px;
    }
    .e-marketing-growth .about-wp-header .title {
        font-size: 26px;
        font-weight: 600;
        color: #0a222e;
    }
    .web-hosting-hero-section .hero-text-holder .text {
        font-size: 9px;
        margin-bottom: 20px;
    }
    .web-hosting-hero-section .hero-text-holder .hero-para {
        font-weight: 300;
        font-size: 12px;
    }
    .res-customer-opinion .res-customer-opoinion-head .top img {
        position: absolute;
        top: -12px;
        left: 207px;
    }
    .customer-qustion .working-title::before {
        content: "";
        position: absolute !important;
        top: 10px !important; /* always stick to the top */
        right: 280px !important; /* always stick to the left */
        width: 30px !important;
        height: 30px !important;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .analysis-head .servies-title::before {
        content: "";
        position: absolute;
        top: -2px; /* always stick to the top */
        left: 190px; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .services-container .services-head .vectores {
        position: absolute;
        top: -10px;
        left: 230px;
        right: auto;
    }

    .serv-card::after,
    .service-card::after {
        right: 170px;
    }
    .offers-head .servies-title::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 143px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .offers-head .servies-desc::before {
        content: "";
        position: absolute;
        top: -5px; /* always stick to the top */
        left: 257px !important; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Web Hosting Page */
    .web-hosting-content .search-bar button {
        left: 9%;
    }

    .web-hosting-plans-tabs .plan-card .plan-name,
    .shared-hosting-plans .plan-card .plan-name,
    .windows-vps-content .plan-card .plan-name {
        font-size: 14px;
    }
    .web-hosting-plans-tabs .plan-card p,
    .shared-hosting-plans .plan-card p,
    .windows-vps-content .plan-card p {
        font-size: 12px;
    }

    .web-hosting-plans-tabs .plan-card .know-more-button button,
    .shared-hosting-plans .plan-card .know-more-button button,
    .windows-vps-content .plan-card .know-more-button button {
        padding: 10px;
        font-size: 14px;
    }
    /* ________________ */
}

.sticky-column {
    max-width: 400px;
}

/* ==========================================
   MAX-WIDTH: 350px - Mobile Phones
   ========================================== */
@media (max-width: 365px) {
    .offers-head .servies-title::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 128px;
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .services-container .services-head .vectores {
        position: absolute;
        top: -10px;
        left: 175px;
        right: auto;
    }
    .customer-qustion .working-title::before {
        content: "";
        position: absolute !important;
        top: 10px !important; /* always stick to the top */
        right: 191px !important; /* always stick to the left */
        width: 30px !important;
        height: 30px !important;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .customer-qustion .working-title::before {
        content: "";
        position: absolute !important;
        top: 10px !important; /* always stick to the top */
        right: 247px !important; /* always stick to the left */
        width: 30px !important;
        height: 30px !important;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* Web Hosting Page */
    .web-hosting-hero-section .hero-text-holder .text {
        font-size: 14px;
        margin-bottom: 20px;
    }
    /* .web-hosting-hero-section .hero-text-holder img {
         position: absolute;
        left: 38%;
        top: 41%;
        width: 24px;
} */
    .offers-head .servies-desc::before {
        content: "";
        position: absolute;
        top: -5px; /* always stick to the top */
        left: 247px !important; /* always stick to the left */
        width: 30px;
        height: 30px;
        background-image: url("../assets/images/Group 48095520.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .web-hosting-hero-section .hero-text-holder .hero-para {
        font-weight: 300;
        font-size: 14px;
    }

    .web-hosting-content .search-bar button {
        left: 1%;
    }

    .app-like-upper-hero-section .hero-text .theway {
        font-size: 10px !important;
    }
}

.bg-red {
    background-color: red;
}