@font-face {
    font-display: swap;
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/archivo-v24-latin-regular.woff2') format('woff2'), url('../fonts/archivo-v24-latin-regular.ttf') format('truetype');
}

@font-face {
    font-display: swap;
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/archivo-v24-latin-600.woff2') format('woff2'), url('../fonts/archivo-v24-latin-600.ttf') format('truetype');
}

@font-face {
    font-display: swap;
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/archivo-v24-latin-700.woff2') format('woff2'), url('../fonts/archivo-v24-latin-700.ttf') format('truetype');
}

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

body {
    font-family: "Archivo", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

a {
    text-decoration: none;
}

:root {
    --primary_color: #0B59DB;
    --secondary-color: #14133B;
    --body-taxt: #6f6f6f;
    --sub-title: #0B1422;
    --text_white: #fff;
    --text_muted: #7A7A7A;
}

/* =============================================== Start Header  ===============================================  */
.top_headre {
    background-color: var(--primary_color);
}

.top_content p {
    font-size: 16px;
    color: var(--text_white);
    margin: 0;
}

.top_content img {
    margin: 0 5px;
}

.top_content .get_quote {
    height: 50px;
    width: 170px;
    background-color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.top_content a {
    color: var(--text_white);

}

.main_header li {
    padding: 0 10px;
}

.navbar-nav .nav-link.active {
    color: var(--primary_color);
}

.main_header li a {
    color: #000;
    font-size: 14px;
    font-weight: 500;

    &:hover {
        color: var(--primary_color);
    }
}

.dropdown-menu li {
    padding: 0;
}

.nav-item.dropdown:hover>.dropdown-menu {
    display: block;
    margin-top: 0;
}

.dropdown-menu {
    background-color: var(--sub-title);
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: 230px;
}

.dropdown-menu .dropdown-item {
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
    transition: background 0.3s ease;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #007bff;
    color: #fff;
}

.nav-link i {
    margin-left: 5px;
    font-size: 12px;
}

/* =============================================== End Header  ===============================================  */
/* =============================================== Start Banner  ===============================================  */
.banner_section {
    position: relative;
    width: 100%;
    height: 570px;
    overflow: hidden;
}

.banner_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 811px;
    object-fit: cover;
}

.banner_overlay {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 800px;
    width: 100%;
    padding: 100px 0;
}

.banner_section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.banner_subtitle {
    display: block;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
}

.banner_subtitle img {
    padding-right: 10px;
}

.banner_title {
    font-size: 55px;
    font-weight: bold;
    margin-bottom: 20px;
}

.banner_desc {
    font-size: 20px;
    margin-bottom: 20px;
}

.banner_buttons a {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    text-decoration: none;
    border-radius: 5px;
}

.banner_buttons i {
    transform: rotate(-45deg);
}

.discover_more {
    background: var(--primary_color);
    color: white;
}

.our_services {
    border: 1px solid #fff;
    color: var(--text_white);
}

/* =============================================== Ens Banner  ===============================================  */
/* =============================================== Start Home Page ===============================================  */
.experience_circle {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid var(--secondary-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--text_white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: var(--primary_color);
    opacity: .3;
    /*clip-path: path("M0 50 Q 75 0 150 50 T 300 50 V150 H0 Z");*/
    animation: waveMove 6s linear infinite, waveRise 2s ease-in-out forwards;
    z-index: 0;
}

@keyframes waveMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes waveRise {
    0% {
        bottom: -60%;
    }

    100% {
        bottom: 0;
    }
}

.experience_circle span {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
}

.number {
    font-size: 28px;
    font-weight: bold;
    color: var(--primary_color);
}

.text {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary_color);
}

.about_company {
    max-height: 470px;
    object-fit: cover;
}

.about_company h6 {
    font-size: 18px;
    font-weight: 600;
    color: var(--sub-title);
}

.about_company h4 {
    font-size: 38px;
    font-weight: 700;
    color: var(--sub-title);
}

.about_company h4 span {
    color: var(--primary_color);
}

.about_company p span {
    color: var(--primary_color);
}

.manage_services {
    display: flex;
}

.manage_services_img img {
    background-color: var(--primary_color);
    width: 55px;
    height: 55px;
    border-radius: 12px;
    padding: 10px;
    margin-right: 10px;
}

.manage_services h5 {
    font-size: 18px;
    font-weight: 700;
}

.founder_card {
    display: flex;
    background-color: var(--text_white);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.founder_image_section {
    background-color: var(--primary_color);
    color: var(--text_white);
    padding: 10px;
    text-align: center;
    width: 380px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 30px;
}

.founder_content_section p {
    font-size: 16px;
    color: var(--body-taxt);
}

.founder_image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.founder_name {
    font-weight: 600;
    font-size: 16px;
}

.founder_role {
    font-size: 14px;
    opacity: 0.9;
}

.founder_signature img {
    margin-top: 15px;
    /* width: 80px; */
}

.founder_content_section {
    padding: 20px;
    font-size: 14px;
    color: var(--body-taxt);
    line-height: 1.6;
    border-left: 2px solid var(--text_white);
}

.our_services_section {
    text-align: center;
    padding: 20px;
}

.our_services_label {
    /* display: inline-flex; */
    align-items: center;
    color: var(--secondary-color);
    font-size: 24px;
    margin-bottom: 10px;
}

.our_services_title {
    font-size: 24px;
    font-weight: bold;
    color: var(--secondary-color);
    margin: 0;
}

.our_services_title p {
    color: var(--sub-title);
    font-size: 36px;
    font-weight: 700;
}

.our_services_title span {
    color: var(--primary_color);
}

.service_card {
    background: var(--text_white);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease, background-color 0.3s ease;
    height: 100%;
}

.service_card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/home/our_services_1.webp");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.aap_servcies::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/home/our_services_2.webp");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.ui_ux::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/home/our_services_4.webp");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.seo_img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/home/our_services_6.webp");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.social_media::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/home/our_services_5.webp");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.qa_services::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/home/our_services_3.webp");
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

/* Left border line */
.service_card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border: 3px solid var(--secondary-color);
    height: 50%;
    transition: border-color 0.3s ease;
    z-index: 1;
}

/* Hover effects */
.service_card:hover::after {
    opacity: 1;
}

.service_card:hover {
    color: var(--text_white);
}

.service_card:hover::before {
    border-color: var(--primary_color);
    height: 100%;
    transition: 0.3s ease;
}

.service_card:hover .service_title,
.service_card:hover .service_number,
.service_card:hover .service_content {
    color: var(--text_white);
    transition: color 0.3s ease;
}

.service_card:hover .read_more_btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--text_white);
    border: 1px solid var(--text_white);
    transition: all 0.3s ease;
}

.service_title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary_color);
    margin-bottom: 10px;
    width: 60%;
    position: relative;
    z-index: 2;
}

/* Number */
.service_number {
    font-size: 49px;
    font-weight: 600;
    color: var(--text_muted);
    position: relative;
    z-index: 2;
}

.service_number::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -140%;
    width: 70px;
    border: 3px solid var(--text_muted);
    transform: translateY(-50%);
}

/* Content */
.service_content {
    font-size: 14px;
    color: var(--sub-title);
    line-height: 1.6;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.read_more_btn {
    background-color: var(--primary_color);
    color: var(--text_white);
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    position: relative;
    z-index: 2;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.service_icon img {
    position: absolute;
    bottom: 5%;
    right: 3%;
    z-index: 5;
    &:hover{
        display: none;
    }
}
.service_icons img{
    position: absolute;
    bottom: 5%;
    right: 3%;
    z-index: 5;
    display: none;
}
.service_card:hover .service_icons img{
    display: block;

}
.stats_card {
    background: var(--text_white);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    /* width: 280px; */
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
}

.stats_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.stats_title {
    font-size: 20px;
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.stats_icon {
    margin-bottom: 10px;
}

.stats_desc {
    font-size: 14px;
    color: var(--body-taxt);
    line-height: 1.5;
}

.tech-item {
    text-align: center;
    position: relative;
    display: none
}

.tech-item.active {
    display: block
}

.tech-item img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: var(--text_white);
    border-radius: 16px;
    padding: 12px;
    border: .25px solid var(--text_muted);
    margin-bottom: 8px
}

.tech-item span {
    display: block;
    font-size: 14px;
    color: var(--primary_color);
    margin-top: 5px
}

.arrow-line {
    position: absolute;
    top: -50px;
    height: 30px;
    border: 1px dashed var(--primary_color);
    left: 50%;
    transform: translateX(-50%)
}

.arrow-line::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--primary_color)
}

.tech-item {
    text-align: center;
    position: relative;
    display: none
}

.tech-item.active {
    display: block
}

.tech-item img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: var(--text_white);
    border-radius: 16px;
    padding: 12px;
    border: .25px solid var(--text_white);
    margin-bottom: 8px
}

.tech-grid {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 65px;
    position: relative;
    margin-top: 40px;
    border-top: 1px dashed var(--primary_color);
    padding-top: 50px
}

.tech-grid::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--primary_color);
    border-radius: 20px
}

.tech-grid::after {
    content: '';
    position: absolute;
    top: -4px;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: var(--primary_color);
    border-radius: 20px
}

.tabs {
    display: inline-flex;
    background: var(--text_white);
    border-radius: 50px;
    position: relative;
    justify-content: center
}

.tab {
    position: relative;
    padding: 10px 40px;
    cursor: pointer;
    font-weight: 500;
    color: var(--secondary-color);
    transition: .3s;
    border-radius: 50px;
    text-align: center
}

.tab.active {
    position: relative;
    background: var(--primary_color);
    color: var(--text_white)
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -41px;
    left: 50%;
    height: 42px;
    border-left: 1px dashed var(--primary_color);
}

.process_card {
    background: var(--text_white);
    border-radius: 150px 150px 100px 100px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    max-height: 395px;
    margin: 20px;
}

.process_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.process_img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
    border: 4px solid transparent;
    transition: border-color 0.3s ease;
}

.process_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process_title {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.process_text {
    font-size: 14px;
    color: var(--body-taxt);
    line-height: 1.5;
    min-height: 60px;
}

.process_step {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: bold;
    color: var(--secondary-color);
}

.owl-dot span {
    width: 10px;
    height: 10px;
    background: var(--text_muted);
    display: block;
    border-radius: 50%;
    transition: 0.3s ease;
}

.owl-dot.active span {
    background: var(--secondary-color);
}

.case_card {
    background: var(--text_white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.case_image {
    position: relative;
    overflow: hidden;
    flex: 1;
}

.case_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.case_image:hover img {
    transform: scale(1.05);
}

.case_content {
    padding: 15px;
}

.case_title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary_color);
    margin-bottom: 5px;
    text-decoration: none;
    padding-bottom: 10px;
}

.case_description {
    font-size: 14px;
    color: var(--body-taxt);
    margin-bottom: 15px;
    border-top: 1px solid var(--text_muted);
    padding-top: 10px;
    font-weight: 500;
}

.case_btn {
    background: var(--secondary-color);
    color: var(--text_white);
    padding: 10px 18px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 12px;
    display: inline-block;
}

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

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 0 40px;
    padding: 0 15px;
}

.section-title {
    max-width: 700px;
}

.section-title span {
    color: #0052cc;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.section-title h2 {
    font-size: 28px;
    font-weight: 700;
    margin-top: 10px;
}

.section-title h2 span {
    color: #0052cc;
}

.nav-arrows {
    display: flex;
    gap: 12px;
}

.nav-arrows button {
    background: none;
    border: 1px solid #111;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.nav-arrows button:hover {
    background: #111;
}

.nav-arrows button:hover i {
    color: #fff;
}

.nav-arrows i {
    color: #111;
    font-size: 14px;
}

.testimonial-item {
    text-align: center;
    padding: 20px;
}

.testimonial-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-line {
    flex: 1;
    height: 2px;
    background: var(--text_muted);
    position: relative;
}
.testimonial-item:hover .testimonial-line {
    background-color: var(--primary_color);
}

.testimonial-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 5;
}
.testimonial-image::before{
    content:'';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    border: 3px solid var(--primary_color);
    width: 50%;
    z-index: -1;
}
.testimonial-item:hover .testimonial-image {
    border: 3px solid var(--primary_color);
}

.testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-content {
    margin-top: 20px;
}

.testimonial-name {
    font-weight: bold;
    font-size: 18px;
}

.testimonial-role {
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
}

.testimonial-text {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
    min-height: 60px;
}

.quote-icon img {
    width: 57px;
    height: 41px;
    align-items: center;
}

.owl-dots {
    display: none;
}

.gallery_images {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.gallery_columns {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gallery_columns img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.gallery_center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* =============================================== End Home Page ===============================================  */
/* =============================================== Start About Page ===============================================  */
.years_of_experience {
    width: 177px;
    height: 240px;
    background: var(--primary_color);
    text-align: end;
    align-items: end;
    display: flex;
    justify-content: end;
    font-size: 24px;
    color: var(--text_white);
    position: relative;
}

.experience_num {
    position: absolute;
    top: 0;
    left: -12%;
}

.dots_img {
    text-align: end;
    justify-content: end;
    align-items: end;
    display: flex;
}

.about_gif img {
    width: 8%
}

.about_gif span {
    color: var(--primary_color);
    font-size: 16px;
    font-weight: 600;
}

.about_content h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
    position: relative
}

.about_content h2 {
    font-size: 32px;
    font-weight: 600;
    color: var(--secondary-color);
}

.about_content h2 span {
    font-family: "Dancing Script", cursive;
    font-size: 36px;
    font-weight: 700;
    color: var(--secondary-color)
}

.about_content p {
    font-size: 14px;
    font-weight: 400;
    color: var(--body-taxt)
}

.progress_bar {
    border-bottom: 1px solid gray;
    padding: 25px 0 10px 0;
    position: relative
}

.progress_bar h4 {
    font-size: 35px;
    font-weight: 500;
    color: var(--secondary-color)
}

.prog_barr img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22%
}

.meter--ranger {
    width: 50%;
    color: var(--primary_color) !important;
}

.meter-info {
    box-sizing: border-box;
    font-weight: 700;
    align-items: center
}

.itservices h6 {
    font-size: 20px;
    font-weight: 500;
    color: var(--primary_color);
}

.itservices h4 {
    font-size: 40px;
    font-weight: 700;
    color: var(--secondary-color);
}

.itservices button {
    width: 206px;
    height: 47px;
    font-size: 16px;
    color: var(--secondary-color);
    border-radius: 10px;
    border: 1px solid var(--secondary-color);
    margin-bottom: 20px;
}

/* =============================================== End About Page ===============================================  */
/* =============================================== Start services Pages ===============================================  */

.services_banner_section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/*
.services_banner_section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
} */

.services_banner {
    position: absolute;
    left: 0;
    width: 100%;
    height: 811px;
    object-fit: cover;
}

.services_banner img {
    width: 100%;
    object-fit: cover;
    max-height: 621px;
    height: 100%;
}

.services_banner_overlay {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 965px;
    width: 100%;
    padding: 100px 0;
}

.about_company h5 {
    font-size: 36px;
    font-weight: 700;
    color: var(--sub-title);
}

.about_company h5 span {
    color: var(--primary_color);
}

.our_services_content img {
    width: 120px;
    height: 120px;
}

.our_services_content h5 {
    font-size: 24px;
    font-weight: 800;
    color: var(--sub-title);
    margin: 20px 0 10px 0;
}

.our_services_content p {
    font-size: 16px;
    font-weight: 400;
    color: var(--text_muted);
    margin: 0;
}

.progress_bar h5 {
    font-size: 26px;
    font-weight: 500;
    color: var(--sub-title);
}

.progress_bar {
    border-bottom: 1px solid gray;
    padding: 25px 0;
    position: relative;
    cursor: pointer;
}

.progress_bar p {
    font-size: 16px;
    font-weight: 400;
    color: var(--text_muted);
    width: 60%;
    margin: 0;
}

.development_images {
    position: absolute;
    right: 0;
    top: 0;
}

.progress_bar .development_images {
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease
}

.progress_bar:hover .development_images {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.development_img {
    width: 180px;
}

.support_content_items {
    box-shadow: 0 0 4px 1px #0000000F;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    padding: 30px 20px;
    width: 100%;
    height: 100%;
}

.support_content_items h5 {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary_color);
    margin: 20px 0 10px 0;
}

.support_content_items p {
    font-size: 15px;
    font-weight: 400;
    color: var(--secondary-color);
    margin: 0;
}

.process_content_items {
    box-shadow: 0 0 4px 1px #0000000F;
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
}

.process_content_items span {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary_color);
    opacity: 20%;
    padding-right: 10px;
}

.process_content_items h5 {
    font-size: 24px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
}

.process_content_items p {
    font-size: 16px;
    font-weight: 400;
    color: var(--text_muted);
    margin: 0;
}

.contact_form {
    box-shadow: 0 0 4px 1px #0000000F;
    background-color: #fff;
    border-radius: 15px;
    padding: 40px;
    max-width: 93%;
}

.contact_form_items span {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
}

.contact_primary_border {
    border: 1px solid var(--primary_color);
    width: 34.7%;
    margin: 10px 0 20px 0;
}

.contact_form_items h3 {
    font-size: 45px;
    font-weight: 700;
    color: var(--sub-title);
}

.contact_form_items p {
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-color);
}

.contact_dark_border {
    border: 0.25px solid var(--text_muted);
    margin: 20px 0 30px 0;
    opacity: 0.2;
}

.contact_form_items h4 {
    display: inline-block;
    font-size: 24px;
    font-weight: 600;
    color: var(--secondary-color);
}

.contact_details span {
    font-size: 16px;
    font-weight: 400;
    color: var(--secondary-color);
}

.form-control {
    box-shadow: 0 0 5px 0 #0000000F;
    background-color: var(--text_white);
    padding: 15px;
    border: none !important;
}

.contact_form_info input::placeholder,
.contact_form_info textarea::placeholder {
    color: var(--body-taxt);
    font-size: 15px;
    font-weight: 300;
}

.submit_btn button {
    box-shadow: 0 0 5px 0 #0000000F;
    background-color: var(--text_white);
    border: none !important;
    padding: 10px 20px;
}

.submit_btn i {
    background-color: var(--primary_color);
    color: var(--text_white);
    padding: 14px 20px;
    display: inline-flex;
    justify-content: center;
    margin-left: -3px;
}

.contact_image img {
    position: absolute;
    right: -8%;
    top: -12%;
    width: 30%;
}


.mobile_services_content img {
    width: 106px;
    height: 120px;
}

.mobile_services_content h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--sub-title);
    margin: 20px 0 10px 0;
}

.mobile_services_content p {
    font-size: 16px;
    font-weight: 400;
    color: var(--text_muted);
    margin: 0;
}

.card {
    background-color: var(--text_white);
    border-radius: 16px;
    margin-bottom: 15px;
    box-shadow: 0 0 13.2px 0 #0B59DB17;
    overflow: hidden;
    border: none !important;
    padding: 20px;
}
.card-header {
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--text_white);
    color: var(--primary_color);
    font-weight: 700;
    font-size: 20px;
    border: none !important;
}

.card-content {
    margin-top: 20px;
    display: none;
}

.card-content.open {
    display: block;
    transition: transform 0.3s ease;
}

.service {
    display: flex;
    align-items: flex-start;
}

.service img {
    margin-right: 20px;
}

.service i {
    font-size: 20px;
    color: #0056d2;
    margin-right: 20px;
    background: #e6f0ff;
    padding: 10px 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
}

.service h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
}

.service p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text_muted);
    padding-top: 10px;
    margin-bottom: 20px;
}

.arrow {
    transition: transform 0.3s ease;
}

.arrow.rotate {
    transform: rotate(90deg);
}

.technologie_content_items {
    box-shadow: 0 0 4px 1px #0000000F;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    padding: 20px 10px;
    width: 100%;
    height: 100%;
}

.technologie_content_items h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--sub-title);
    margin-bottom: 20px;
}

.technologie_content_items p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text_muted);
}

.technologie_content_items img {
    height: 54px;
    margin-bottom: 10px;
}

/* =============================================== End services Pages ===============================================  */
/* =============================================== Start Team Pages ===============================================  */

.our_team_items {
    border: 1px solid #D5D7DA;
    border-radius: 16px;
    padding: 10px;
    text-align: center;
    position: relative;
}

.image_wrapper {
    position: relative;
    display: inline-block;
}

.our_team_items img {
    width: 150px;
    height: 150px;
    margin: -80px 0 20px 0;
    transition: 0.3s ease;
}

.linkedin_icon {
    position: absolute;
    top: -80px;
    left: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: rgba(11, 89, 219, 0.85);
    /* LinkedIn blue overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s ease;
    text-decoration: none;
}

.linkedin_icon i {
    color: #fff;
    font-size: 22px;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 15px 26px;
    display: flex;
    justify-content: center;
}

.our_team_items:hover .linkedin_icon {
    opacity: 1;
}

.our_team_content {
    background-color: #F2F5FA;
    padding: 20px;
    border-radius: 16px;
}

.our_team_content h5 {
    color: var(--secondary-color);
    font-size: 24px;
    font-weight: 600;
}

.our_team_content p {
    color: var(--text_muted);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

/* =============================================== End Team Pages ===============================================  */

/* =============================================== Start Footer ===============================================  */
.footer {
    background-color: var(--sub-title);
    padding: 50px 0 20px 0;
}

.footer .logo {
    font-size: 24px;
    font-weight: bold;
}

.footer p {
    font-size: 16px;
    font-weight: 400;
    color: var(--text_white);
    margin: 0;
}

.contact-info p {
    font-size: 16px;
    font-weight: 700;
    color: var(--text_white);
    margin: 0;
}

.contact-info div {
    margin-bottom: 30px;
}

.social-icons a {
    display: inline-block;
    margin-right: 10px;
    color: var(--text_white);
    font-size: 16px;
    background-color: var(--body-taxt);
    padding: 8px 10px;
    border-radius: 50%;
    transition: 0.3s;
}

.footer h5 {
    font-size: 18px;
    margin-bottom: 30px;
    color: var(--text_white);
}

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

.footer ul li {
    margin-bottom: 30px;
}

.footer ul li a {
    text-decoration: none;
    color: var(--text_white);
    font-size: 16px;
}

.contact-info i {
    margin-right: 10px;
    color: #007bff;
}

.gallery img {
    width: 78px;
    height: 78px;
    object-fit: cover;
    margin: 3px;
    border-radius: 5px;
}

/* =============================================== End Footer ===============================================  */
/* =============================================== Start Disclaimer ===============================================  */
.disclaimer h4 {
    font-size: 36px;
    font-weight: 500;
    color: var(--secondary-color);
}

.disclaimer p {
    font-size: 16px;
    color: var(--body-taxt);

}

.disclaimer h6 {
    font-size: 20px;
    font-weight: 500;
    color: var(--secondary-color);
}

.disclaimer ul {
    font-size: 16px;
    color: var(--body-taxt);
}

/* =============================================== End Disclaimer ===============================================  */
/* =============================================== Start 404 ===============================================  */
.error_content {
    width: 50%;
    margin: auto;
    text-align: center;
}

.back_home {
    width: 204px;
    height: 47px;
    background-color: var(--primary_color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    margin: auto;
}

.back_home a {
    color: var(--text_white);
    font-size: 20px;
    font-weight: 500;
}

/* =============================================== End 404 ===============================================  */
/* =============================================== Start SEO ===============================================  */

.service_card_box {
    border: 1px solid var(--text_muted);
    border-radius: 8px;
    padding: 20px;
    text-align: left;
    background-color: var(--text_white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    /* max-height: 263px; */
    height: 100%;
}

.service_card_box:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.service_icon_box img {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;

}

.service_title_text {
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.service_desc_text {
    font-size: 14px;
    color: var(--body-taxt);
    line-height: 1.5;
}

.expert_seo {
    color: var(--body-taxt);
}

/* =============================================== End SEO ===============================================  */
/* =============================================== Start Carrer ===============================================  */
.carrers h5 {
    font-size: 32px;
    font-weight: 700;
    color: var(--secondary-color);
}

.carrers p {
    font-size: 16px;
    color: var(--body-taxt)
}

.carrers button {
    /* width: 135px; */
    height: 40px;
    background: var(--primary_color);
    border-radius: 30px;
    border: none;
    color: var(--text_white);
    padding: 10px;
    margin-bottom: 10px;
}

.carrers ul {
    color: var(--body-taxt);
    font-size: 16px;
}

.career_card {
    background-color: #fafcfe;
    border-radius: 12px;
    padding: 20px;
    color: var(--secondary-color);
    box-shadow: 0 0 4px 0 #0B59DB24;

}

.career_title {
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 12px;
}

.career_text {
    font-size: 14px;
    color: var(--body-taxt);
    margin-bottom: 6px;
    line-height: 1.5;
}

.career_text strong {
    font-weight: 600;
    color: var(--secondary-color);
}

.career_button {
    display: inline-block;
    background-color: var(--primary_color);
    color: var(--text_white);
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s ease;
    margin-top: 10px;
}

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

.careers_card {
    box-shadow: 0 0 5px rgba(11, 89, 219, 0.14);
    padding: 20px;
    border-radius: 27px;
}

/* =============================================== End Carrer ===============================================  */
/* =============================================== Start Our Projects ===============================================  */
.ourprojects-case-study-card {
    background-color: var(--text_white);
    /* border: 1px solid rgba(176, 176, 176, .5); */
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 380px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ourprojects-case-study-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.ourprojects-card-image {
    width: 100%;
    display: block;
}

.ourprojects-card-content {
    padding: 24px;
}

.ourprojects-card-title {
    color: var(--primary_color);
    font-size: 22px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 8px;
}

.ourprojects-card-description {
    color: var(--body-taxt);
    font-size: 16px;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 20px;
    border-top: 1px solid rgba(176, 176, 176, .5);
    padding-top: 5px;
}

.ourprojects-card-button {
    display: inline-block;
    background-color: var(--primary_color);
    color: var(--text_white);
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.ourprojects-card-button:hover {
    background-color: var(--primary_color);
}

/* =============================================== End Our Projects ===============================================  */
/* =============================================== Srat FAQ ===============================================  */
.title_faq h5 {
    color: var(--body-taxt);
    font-weight: 600;
    font-size: 24px;
}

.title_faq h2 {
    font-weight: 700;
    font-size: 36px;
}
.title_faq p{
    font-size: 16px;
    color: var(--body-taxt);
}
.left_form_faq {
    background: #F2F5FA;
    border-radius: 10px;
    padding: 25px;
}

.left_form_faq input,
.left_form_faq textarea {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 10px 40px 10px 15px;
}

.left_form_faq button {
    width: 100%;
    background: var(--primary_color);
    border: none;
    padding: 12px;
    border-radius: 8px;
    color: var(--text_white);
    font-weight: 600;
}

.accordion_faq .accordion-item {
    border: none;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    background:var(--text_white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.accordion_faq .accordion-button {
    background: #F2F5FA;
    font-weight: 600;
    border: none;
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion_faq .accordion-button::after {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('https://cdn-icons-png.flaticon.com/512/1828/1828925.png');
    /* plus icon */
    border-radius: 50%;
    /* background-color: #0d6efd; */
    content: '';
}

.accordion_faq .accordion-button:not(.collapsed)::after {
    background-image: url('https://cdn-icons-png.flaticon.com/512/1828/1828778.png');
    font-size: 18px;
}

.accordion_faq .accordion-button:not(.collapsed) {
    color: #000;
}

.accordion_faq .accordion-body {
    font-size: 16px;
    color: #555;
}
.accordion_faq .accordion-body{
    background-color: #F2F5FA;
}
/* =============================================== End FAQ ===============================================  */
/* =============================================== Start Contect ===============================================  */
.contact_info_box {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
  }
  .contact_info_icon {
    width: 60px;
    height: 60px;
     border: 1.5px solid var(--primary_color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary_color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    flex-shrink: 0;
  }
  .contact_info_content h5 {
    font-weight: bold;
    color: #0b0b3b;
    margin-bottom: 5px;
  }
  .contact_info_content p {
    color: #666;
    font-size: 14px;
    margin: 0;
  }
.contact_title {
    color: var(--primary_color);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
  }
  .contact_heading {
    font-size: 36px;
    font-weight: bold;
    margin: 10px 0;
    color: var(--secondary-color);
  }
  .contact_text {
    color: var(--body-taxt);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .contact_socials a {
    display: inline-block;
    margin-right: 10px;
    background: var(--secondary-color);
    color: var(--text_white);
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 14px;
    text-decoration: none;
  }
  .contact_socials a:hover {
    background: var(--primary_color);
  }
  .contact_captcha {
    font-family: monospace;
    background: #f0f0f0;
    display: inline-block;
    padding: 5px 12px;
    font-size: 14px;
    border-radius: 2px;
    margin-top: 5px;
  }
  .contact_btn {
    background: var(--primary_color);
    color: var(--text_white);
    padding: 14px 20px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    border-radius: 2px;
    transition: background 0.3s;
  }
  .contact_btn:hover {
    background: var(--secondary-color);
  }
/* =============================================== End Contect ===============================================  */
/* =============================================== Start our projed Detail ===============================================  */
.project_detail h4{
    font-size: 32px;
    font-weight: 600;
}
.project_detail p{
    font-size: 16px;
    color: var(--secondary-color);
    margin: 0;
}
.project_detail ul{
    font-size: 16px;
    color: var(--secondary-color);
}
.project_overview{
    background-color: rgba(230, 241, 255, 0.3);
    padding: 20px;
}
.project_overview h4{
    color: #0050B2;
}
.problem{
    background-color: rgba(255, 197, 197, 0.15);
    padding: 20px;
}
.problem h4{
    color: #FA2A2A;
}
.solution{
    background-color: rgba(236, 255, 233, 0.3);
}
.solution h4{
    color: #108C00;
}
/* =============================================== End our projed Detail ===============================================  */
/* =============================================== Start Qa services ===============================================  */
.qa_section {
        display: flex;
        align-items: center;
        padding: 20px;
        gap: 20px;
        flex-wrap: wrap;
    }
    .qa_title {
        font-size: 24px;
        font-weight: bold;
        color: #0a0a23;
        flex: 1 1 250px;
    }
    .qa_divider {
        width: 2px;
        background-color: #2a6df4;
        height: 50px;
    }
    .qa_text {
        color: #666;
        font-size: 14px;
        line-height: 1.6;
        flex: 2 1 300px;
    }
    .qa_text p{
        color: var(--primary_color);
    }
    .qa_card {
        flex: 1 1 300px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        background: #fff;
    }
    /* White default card style */
    .qa_card_white {
        padding: 30px 20px;
        text-align: center;
    }
    .qa_card_white .icon_wrap {
        background: var(--primary_color);
        width: 74px;
        height: 74px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
    }
    .qa_card_white h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        color: var(--secondary-color);
    }
    .qa_card_white p {
        font-size: 14px;
        color: #555;
    }
    /* Hover state turns into blue image style */
    .qa_card_white:hover {
        background: url('../images/qa_services/approch.webp') center/cover no-repeat;
        color: var(--text_white);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        /* padding: 20px; */
    }
    .qa_card_white:hover h3,
    .qa_card_white:hover p {
        color: var(--text_white);
    }
    .qa_card_white:hover .icon_wrap {
        background: rgba(255,255,255,0.2);
    }
    .qa_card_white:hover .icon_wrap img {
        filter: brightness(0) invert(1);
    }
/* =============================================== End Qa services ===============================================  */
.uiux_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    .uiux_card {
        background:var(--text_white);
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        font-weight: 500;
        font-size: 18px;
        color: var(--secondary-color);
        box-shadow: 0 0 5px rgba(0,0,0,0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .uiux_card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    .tools_section {
        padding: 40px 0;
    }

    .tools_heading {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 25px;
        position: relative;
        display: inline-block;
    }
    .tools_heading span {
        color: #0056d2;
        display: block;
        font-size: 14px;
    }

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

    .tool_card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 5px rgba(0,0,0,0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

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

    .tool_card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }

    .robot_hands {
        display: flex;
        align-items: center;;
    }
    .robot_hands img {
        max-width: 550px;
        height: auto;
    }
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    outline: 0;
    margin: 10px 0;
    padding: 0
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0b59db;
    cursor: pointer;
    margin-top: -6px;
    position: relative;
    z-index: 2
}

input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 5px;
    background: 0 0;
    position: relative;
    z-index: 1
}