/* ================== Root Variables ================== */
:root {
    /* Primary Colors */
    --primary-blue: #023be2;
    --secondary-blue: #00a1c5;
    --dark-blue: #3b5bdb;
    --primary-dark: #1a1a1a;
    --primary-green: #00d563;
    --whatsapp-green: #25d366;
    --whatsapp-dark: #128c7e;
    --primary-purple: #9b59ff;
    --primary-color: #1a73e8;
    --secondary-color: #4285f4;
    --blue-accent: #0d6efd;
    /* Gradients */
    --gradient-blue: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    --gradient-whatsapp: linear-gradient(90deg, #25d366, #128c7e);
    --gradient-email: linear-gradient(90deg, #0072ff, #00c6ff);
    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Grays & Neutrals */
    --light-gray: #f8f9fa;
    --dark-gray: #6c757d;
    --text-dark: #1a1a1a;
    --text-gray: #6c757d;
    --text-light: #6c757d;
    --text-dark-gray: #555555;
    --white: #ffffff;
    --bg-light: #f8f9fa;
    --border-color: #e9ecef;
    --sidebar-bg: #f5f6fa;
    --hover-bg: #f0f2f5;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Status Colors */
    --success-color: #28a745;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    /* Font styles */
    --font-body: "DM Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: "Saira Condensed", Arial, sans-serif;
}

.form-select {
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
    appearance: none; /* Standard */
    background-image: none !important; /* Removes default icon */
}




/* ================== Reset & Base ================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

.global_heading {
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 600;
    line-height: 100%;
}

.global_description {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    color: var(--text-dark-gray);
}

/* ============================================================================================================================================================ */
/* ======================================================================== NAVBAR ====================================================================== */
/* ============================================================================================================================================================ */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 90px;
    padding: 1rem 0;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    background: var(--white);
}

.navbar_main {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 67%;
    /* Default for 1601px and above */
}

/* 2XL and larger screens (1537px and above) */
@media (min-width: 1537px) {
    .navbar_main {
        width: 67%;
    }
}

/* 1281px to 1600px → Large screens */
@media (max-width: 1536px) and (min-width: 1281px) {
    .navbar_main {
        width: 90%;
    }
}

/* 1280px and below → Laptop, Tablet, Mobile */
@media (max-width: 1280px) {
    .navbar_main {
        width: 96%;
    }
}

/*   */

/* ================== Branding ================== */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--primary-blue) !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-brand img {
    height: 35px;
    width: auto;
}

/* ================== Navbar Links ================== */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Hide desktop elements on tablets and mobiles */
@media (max-width: 1024px) {
    .navbar-nav,
    /* Desktop Contact Button */
    .navbar-nav .navbar-nav {
        /* Desktop navbar links */
        display: none !important;
    }
}

/* small_screen */
@media (min-width: 1000px) {
    /* large screens start from 1024px */
    .small_screen {
        display: none;
    }
}

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

/* Divider line between nav items (except last) */
.navbar-nav .nav-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: rgba(8, 106, 218, 0.3);
}

.navbar-nav .nav-link {
    color: var(--primary-dark) !important;
    font-weight: 500;
    font-size: 16px;
    margin: 0 10px;
    padding: 0;
    transition: all 0.3s ease;
    text-decoration: none;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-blue) !important;
    transform: translateY(-2px);
}

/* ================== Toggler ================== */
.navbar-toggler {
    border: none;
    background: transparent;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}

.navbar-toggler-icon {
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ================== Hamburger Icon ================== */
.menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    cursor: pointer;
}

.menu-icon span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--primary-blue);
    border-radius: 2px;
    transition: all 0.4s ease;
}

/* Hamburger open state */
.menu-icon.open span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}

.menu-icon.open span:nth-child(2) {
    opacity: 0;
}

.menu-icon.open span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

/* ================== Buttons ================== */
.btn-gradient {
    background: var(--gradient-blue);
    color: var(--white);
    padding: 10px 25px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.btn-gradient::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: var(--gradient-blue);
    border-radius: 17px;
    z-index: -1;
    opacity: 0.15;
    animation: pulseOut 3s infinite;
    transition: opacity 0.3s ease-out;
}

.btn-gradient:hover::before {
    opacity: 0.3;
    animation: pulseOut 3s infinite;
}

.btn-gradient:hover {
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.3);
}

.btn-gradient .arrow {
    width: 18px;
    transition: transform 0.3s ease;
}

.btn-gradient:hover .arrow {
    transform: rotate(35deg);
}

/* ================== Responsive Visibility ================== */
.mobile_screen {
    display: flex;
}

@media (min-width: 1200px) {
    .mobile_screen {
        display: none;
    }
}

.large_screen {
    display: flex;
}

@media (max-width: 900px) {
    .large_screen {
        display: none;
    }
}

/* ================== Mobile Collapse ================== */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: fixed;
        top: 90px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 90px);
        z-index: 1050;
        transition: left 0.3s ease-in-out;
        padding: 1rem;
        overflow-y: auto;
        background-color: var(--white);
    }

    .navbar-collapse.show {
        left: 0;
    }

    .navbar-nav {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid #f2f0f0;
    }

    .nav-link {
        color: #000 !important;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
    }

    .action-buttons {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 20px;
        padding: 0 1rem;
    }

    body.offcanvas-open {
        overflow: hidden;
    }
}

/* ================== Animations ================== */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(8, 106, 218, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(8, 106, 218, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(8, 106, 218, 0);
    }
}

@keyframes pulseOut {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    5% {
        transform: scale(1);
        opacity: 0.3;
    }

    95% {
        transform: scale(1.3);
        opacity: 0;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/*  ======================== For mega menu ======================== */

/* ================== Mega Menu ================== */
.mega-menu {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    position: fixed;
    /* changed from absolute to fixed */
    top: 89px;
    /* adjust as needed */
    left: 12%;
    /* center horizontally */
    transform: translate(-50%, 10px);
    /* center and keep original translateY */
    width: 1400px;
    background: #fff;
    z-index: 999;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #f0f4f9;
    border-radius: 0.5rem;
    height: auto;
}

.nav-item.active .mega-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.mega-menu-contact-values {
    width: 100%;
    display: flex;
}

/* mega-menu-leftside  */

.mega-menu-leftside {
    width: 30%;
    border-right: #e5e7eb 1px solid;
}

.mega-menu-inner-content {
    border-bottom: #e5e7eb 1px solid;
    padding: 12px 20px;
}

.mega-menu-inner-content-heading {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    color: #101f3f;
}

/*  right side  */

/* ===== Mega Menu Section (Full Width) ===== */
.mega-menu-list-values-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 16px;
    background-color: #ffffff;
}

/* ===== Individual Column ===== */
.mega-menu-list-values-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ===== List Items ===== */
.itemsvalues {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    background: transparent;
    padding: 13px 20px;
    border-radius: 8px;
    font-family: var(--font-body, "DM Sans", sans-serif);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    /* Needed for the arrow */
}

/* ===== Right-side arrow (default hidden) ===== */
.itemsvalues::after {
    content: "→";
    /* Right arrow */
    position: absolute;
    right: 20px;
    top: 40%;
    transform: translateY(-50%);
    opacity: 0;
    /* Hidden by default */
    color: #2b4dff;
    transition: all 0.3s ease;
    font-size: 26px;
}

/* ===== Hover Effect ===== */
.itemsvalues:hover {
    background-color: #2b4dff;
    color: #fff;
}

.itemsvalues:hover::after {
    color: #fff;
    opacity: 1;
    right: 15px;
}

/* ===== Active Item ===== */
.itemsvalues.active {
    background-color: #2b4dff;
    color: #fff;
    font-weight: 600;
}

.itemsvalues.active::after {
    color: #fff;
    /* Arrow white */
    opacity: 1;
    /* Show arrow */
    right: 15px;
    /* Align same as hover */
}

/*  Right side list values */

/* ===== Right Side Content ===== */

.mega-menu-inner-content {
    margin-bottom: 1rem;
}

/* ===== Right Side List ===== */
.mega-menu-rightside-list-values-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    position: relative;
    flex-direction: column;
    position: relative;
}

.mega-menu-rightside {
    width: 70%;
    position: relative;
    background: #ffffff;
    border-radius: 0 0 12px 0;
    overflow: hidden;
    padding-bottom: 130px;
    /* space for bottom card */
}

.mega-menu-inner-content {
    padding: 20px 25px 10px;
}

.mega-menu-inner-content-heading {
    font-size: 20px;
    color: #101f3f;
    font-weight: 600;
}

.mega-menu-rightside-list-values-section {
    padding: 10px 25px 20px;
}

.mega-menu-rightside-list-values-section-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 10px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.mega-menu-rightside-list-values-section-items li {
    color: #333;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s ease;
    font-family: var(--font-body);
}

.mega-menu-rightside-list-values-section-items li:hover {
    color: #086ada;
}

/* ================= Bottom Card ================= */
.bottomeCard {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafb;
    border-top: 1px solid rgba(193, 193, 193, 0.3);
    border-radius: 0 0 12px 12px;
    flex-wrap: wrap;
    gap: 20px;
    box-sizing: border-box;
}

/* Left Side */
.bottomeCard-content-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
}

/* Review Info */
.review-info {
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.review-info p {
    font-size: 14px;
    color: #444;
    margin: 0;
    font-family: var(--font-body);
    text-transform: uppercase;
}

.textreviews {
    font-size: 14px;
    color: #444;
    margin: 0;
    font-family: var(--font-body);
    text-transform: uppercase;
}

.review-info img {
    width: 70px;
    height: auto;
}

/* Star Section */
.star-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.star-section-images {
    display: flex;
    gap: 4px;
}

.star-section img {
    width: 16px;
    height: 16px;
}

.star-section span {
    font-size: 13px;
    color: #666;
}

/* Certificate Section */
.certificate-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.certificate-section img {
    width: 75px;
    height: auto;
}

/* Right Side Button */
.bottomeCard-content-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-btn {
    background-color: #086ada;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.build-btn:hover {
    background-color: #054fa5;
}

/* ================= Responsive ================= */
@media (max-width: 1024px) {
    .bottomeCard {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .bottomeCard-content-left {
        width: 100%;
        justify-content: space-between;
        gap: 20px;
    }

    .bottomeCard-content-right {
        width: 100%;
        margin-top: 10px;
    }

    .build-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .bottomeCard-content-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .certificate-section img {
        width: 40px;
    }

    .star-section img {
        width: 14px;
    }

    .review-info img {
        width: 60px;
    }
}

/* ===== List Item ===== */
.listname {
    font-size: 18px;
    line-height: 1.6;
    color: #4d525d;
    font-weight: 400;
    font-family: var(--font-body, "DM Sans", sans-serif);
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.listname:hover {
    text-decoration: underline;
    color: #0066ff;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .mega-menu-rightside-list-values-section-items {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mega-menu-inner-content-heading {
        text-align: center;
        font-size: 18px;
    }
}

/*  Header for mobile screen */

.small_screen {
    background: #fff;
    border-bottom: 1px solid #ddd;
    border-radius: 8px;
    font-family: var(--font-body);
    margin-top: -2rem;
}

/* ====== Base Menu ====== */
.small_screen_menu,
.small_screen_submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.small_screen_menu-item {
    border-bottom: 1px solid #eee;
}

.menu-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    cursor: pointer;
    font-weight: 500;
    color: #333;
    position: relative;
    font-size: 18px;
    font-family: var(--font-body);
}

.menu-label-item {
    text-decoration: none;
    color: #333;
}

.submenuitem {
    margin-left: 1rem;
}

/* ====== Toggle Icon ====== */
.toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.toggle-icon::before,
.toggle-icon::after {
    content: "";
    position: absolute;
    background: #555;
    transition: 0.3s;
}

/* PLUS */
.toggle-icon::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
    background: #023be2;
    /* Blue horizontal line */
}

.toggle-icon::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: #023be2;
    /* Green vertical line */
}

/* MINUS (when active) */
.small_screen_menu-item.active > .menu-label > .toggle-icon::after {
    opacity: 0;
}

.small_screen_menu-item.active > .menu-label > .toggle-icon::before {
    background: #023be2;
    /* Red horizontal line when open */
}

/* ====== Submenu ====== */
.small_screen_submenu {
    display: none;
    background: #fafafa;
}

.small_screen_menu-item.active > .small_screen_submenu {
    display: block;
}

/* ============================================================================================================================================================ */
/* ======================================================================== FOOTER CSS ====================================================================== */
/* ============================================================================================================================================================ */

.footer-section {
    background: #edf4ff;
    padding: 160px 0 0px;
    color: #000;
    font-family: var(--font-body, Arial, sans-serif);
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer-col p {
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 35px;
    color: var(--primary-blue);
    font-family: var(--font-heading);
}

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

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

.footer-col ul li a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--font-body);
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: #0346d4;
}

.footer-bottom {
    margin-top: 30px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    font-family: var(--font-body);
    background: var(--primary-blue);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ----------- Responsive Screens ----------- */

/* Tablets */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }

    .footer-col ul li a {
        display: inline-block;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }

    .footer-col p {
        font-size: 28px;
    }

    .footer-col ul li a {
        font-size: 16px;
    }
}

/* ============================================================================================================================================================ */
/* ========================================================================  LOCATION SECTION  ====================================================================== */
/* ============================================================================================================================================================ */
.location-section {
    padding: 60px 0;
    margin-bottom: -150px;
    z-index: 2;
    position: relative;
}

.container_location-section {
    width: 67%;
    margin: auto;
}

@media (max-width: 1400px) {
    .container_location-section {
        width: 90%;
        margin: auto;
    }
}

.location-section-design {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 40px 100px;
    border-radius: 43.18px;
    background: linear-gradient(269.98deg, #86b6ff 0.01%, #023be2 99.98%);

    position: relative;
    gap: 20px;
}

.location-card {
    position: relative;
    padding: 20px;
    border-radius: 12px;
    background: transparent;
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.location-card p {
    margin-bottom: 10px;
    font-size: 38px;
    font-weight: 600;
    color: white;
}

.location-card span {
    font-size: 15.42px;
    margin-bottom: 10px;
    font-weight: 400;
    font-family: var(--font-body);
    max-width: 250px;
}

.location-card .contact {
    display: flex;
    align-items: center;
    font-size: 16.96px;
    font-weight: 400;
    font-family: var(--font-body);
    gap: 11px;
}

.location-card .map-bg {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 140px;
    opacity: 0.2;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 992px) {
    .location-section-design {
        grid-template-columns: repeat(2, 1fr);
        padding: 10px 10px;
    }
}

@media (max-width: 600px) {
    .location-section-design {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .location-section-design {
        padding: 40px 20px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== HERO SECTION ====================================================================== */
/* ============================================================================================================================================================ */

.hero-section {
    min-height: 90vh;
    background: url("https://res.cloudinary.com/primocys/image/upload/v1768301577/Primocys%20Website%20Images%20SVG/hero-banner_mw7e3d.svg") center center / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 40px 1rem 0px;
}

/* ================== Container ================== */
.container_hero-section {
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3.5rem;
}

/* small screnn and mid screnn  */

@media (max-width: 1400px) {
    .container_hero-section {
        padding-top: 0rem;
    }
}

/* ================== Growth Solution ================== */
.growth-solution {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.growth-solution p {
    color: var(--text-dark-gray);
    font-weight: 400;
    font-family: var(--font-body);
    margin: 0;
    white-space: nowrap;
    opacity: 0;
    font-size: 1.6rem;
    transform: translateY(20px);
}

/* Container */
.growth-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Buttons */
.growth-btn {
    background: rgba(2, 59, 226, 0.04);
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
    font-size: 1rem;
    padding: 0.25rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    /* Initial hidden (for JS animation on reload) */
    opacity: 0;
    transform: translateY(30px);

    /* Animation timing */
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* Ripple background effect container */
.growth-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(2, 59, 226, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
        width 0.4s ease,
        height 0.4s ease;
    z-index: -1;
}

/* Hover + Active Effect */
.growth-btn:hover,
.growth-btn.active {
    transform: translateY(-5px);
    opacity: 1;
    /* fully visible */
}

.growth-btn:hover::before,
.growth-btn.active::before {
    width: 300px;
    height: 300px;
}

/* ================== Hero Titles ================== */
.hero-title {
    font-size: 5rem;
    font-weight: 400;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(50px);
    font-family: var(--font-heading);
}

.gradient-text {
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.hero-subtitle {
    font-size: 2rem;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 3rem !important;
    opacity: 0;
    transform: translateY(30px);
    font-family: var(--font-body);
}

.ai-sparkle {
    display: inline-flex;
    align-items: center;
    /*margin-left: 0.25rem;*/
    color: var(--secondary-blue);
    animation: sparkle 2s ease-in-out infinite;
}

.ai-sparkle img {
    width: 80px;
    height: 80px;
}

@media (max-width: 1024px) and (min-width: 576px) {

    .ai-sparkle img {
        width: 60px;
        height: 60px;
    }
}


@media (max-width: 575px) {
    .hero-title {
        font-size: 2.2rem;
        line-height: 1.3;
        text-align: center;
    }

    .ai-sparkle {
        margin-left: 0.25rem;
        vertical-align: middle;
    }

    .ai-sparkle img {
        width: 35px;
        height: 35px;
    }
}



/* ================== Shimmer Button ================== */
.shimmer-btn {
    background: var(--gradient-blue);
    color: #fff;
    padding: 1rem 3.5rem;
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 500;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    text-decoration: none;
    animation: gradientPulse 3s ease-in-out infinite;
}

@media (max-width: 1280px) {
    .shimmer-btn {
        font-size: 1.2rem;
        padding: 1rem 3rem;
    }
}

@media (max-width: 976px) {
    .shimmer-btn {
        font-size: 1.1rem;
        padding: 0.9rem 2.6rem;
    }
}

@media (max-width: 768px) {
    .shimmer-btn {
        font-size: 1rem;
        padding: 0.85rem 2.3rem;
    }
}

@media (max-width: 480px) {
    .shimmer-btn {
        font-size: 0.95rem;
        padding: 0.70rem 2rem;
    }
}


.shimmer-btn:hover {
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.3);
}

.shimmer-btn .arrow {
    width: 30px;
    transition: transform 0.3s ease;
}

.shimmer-btn:hover .arrow {
    transform: rotate(37deg);
}

.shimmer_btn_Global::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s;
}

.shimmer_btn_Global:hover::after {
    opacity: 1;
    animation: shimmerSlide 0.8s forwards;
}

/* ================== Hero Bottom ================== */
.hero-bottom {
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(40px);
    width: 70%;
    margin-bottom: 6rem;
}

.col-lg-6.mt-5 {
    position: relative;
    flex: 0 0 50%;
    padding-right: 40px; /* space for divider */
}

/* VERTICAL DOTTED DIVIDER */
.col-lg-6.mt-5::after {
    content: "";
    position: absolute;
    top: 40%;
    right: 0;
    transform: translateY(-50%);
    height: 90px;
    width: 2px;

    background: repeating-linear-gradient(
        to bottom,
        #1e6bff 0,
        #1e6bff 4px,
        transparent 4px,
        transparent 8px
    );
}

@media (max-width: 768px) {
    .col-lg-6.mt-5::after {
        display: none;
    }

    .we-container {
        margin-top: 0;        /* moves div down */
        padding-top: 20px;    /* optional fine-tuning */
    }

}


/* 1281px to 1600px → Large screens */
@media (max-width: 1536px) and (min-width: 1281px) {
    .hero-bottom {
        width: 90%;
    }
}

/* 1280px and below → Laptop, Tablet, Mobile */
@media (max-width: 1280px) {
    .hero-bottom {
        width: 96%;
    }
}

.we-section {
    padding: 2rem;
    backdrop-filter: blur(20px);
    margin-bottom: 0.5rem;
    display: flex;
    gap: 10px;
    transition: var(--transition);
    cursor: pointer;
}

.we-container {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: -35px;
} 
.we-circle {
       background: var(--gradient-blue);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.e-text {
    font-size: 40px;
    color: white;
    margin-left: 20px;
}

.w-text{
    font-size: 40px;
}
/* Wrapper ensures sliding track doesn't overlap fixed image */
.trusted-track-wrapper {
    overflow: hidden;
    flex: 1;
     
}


/* Sliding track */
.trusted-track {
    display: flex;
    flex-wrap: nowrap;
    animation: slideLeft 20s linear infinite;
}

/* Animation */
@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }

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

/* Responsive */
@media (max-width: 992px) {
    .logo-img {
        height: 56px;
    }
}

@media (max-width: 768px) {
    .logo-img {
        height: 50px;
    }
}

@media (max-width: 400px) {
    .logo-img {
        height: 45px;
    }
}

.we-text {
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-dark-gray);
    margin: 0;
    text-align: left !important;
    /* Force text to align left */
}

@media (max-width: 1024px) {
    .we-text {
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    .we-text {
        font-size: 16px;
    }
}

.trusted-track {
    display: flex;
    flex-wrap: nowrap;
}

.trusted-track img {
    flex: 0 0 auto;
    max-height: 60px;
    margin-right: 2rem;
}

/* ================== Animations ================== */
@keyframes sparkle {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.2) rotate(10deg);
        opacity: 0.7;
    }
}

@keyframes shimmerSlide {
    0% {
        left: -120%;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

/* ================== Responsive ================== */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 4rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .hero-section {
        min-height: 50vh;
    }

    .hero-bottom {
        width: 90% !important;
        margin: auto;
    }

     .container_hero-section {
        width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }

    .hero-bottom {
        width: 90% !important;
        margin: auto;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .growth-btn {
        font-size: 0.9rem;
        padding: 0.25rem 1.5rem;
    }

    .hero-bottom {
        flex-direction: column;
        gap: 1.5rem;
        width: 90%;
        margin: auto;
    }

    .we-section {
        padding: 0rem;
        align-items: start;
        text-align: left;
        margin-top: 2rem;
    }

    .container_hero-section {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5em;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .growth-btn {
        font-size: 0.8rem;
        padding: 0.25rem 1rem;
    }

    .hero-bottom {
        width: 90%;
        margin: auto;
    }

    .we-section {
        padding: 0rem;
        align-items: start;
        text-align: left;
        margin-top:-1px;
    }

 .container_hero-section {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

}

@media (max-width: 1024px) and (min-width: 769px) {
    .we-text {
        font-size: 17px;
        max-width: 480px;     /* allow proper line flow */
        line-height: 1.7;
    }

  .we-container {
        margin-top: -20px; /* move up */
        align-items: flex-start;
    }


 .col-lg-6.mt-5 {
        flex: 0 0 55%;
        padding-right: 24px; /* reduced divider space */
    }

    /* Right column slightly smaller */
    .col-lg-6.mt-5 + .col-lg-6.mt-5 {
        flex: 0 0 45%;
        padding-left: 16px;
    }

    /* Adjust divider position & height */
    .col-lg-6.mt-5::after {
        height: 70px;
        right: 4px;
    }

    /* Balance hero bottom width */
    .hero-bottom {
        width: 92%;
        margin: auto;
    }


}

/* ============================================================================================================================================================ */
/* ======================================================================== HAPPY CUSTOMER ====================================================================== */
/* ============================================================================================================================================================ */

.happy_customer_main {
    width: 100%;
     padding-inline: 16px;
}

.happy_customer {
    width: 70%;
    margin: auto;
    padding-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .happy_customer {
        width: 87% 
    }
}

/* Left side card wrapper */
.happy-customer-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.happy-customer-card {
    background: #fff;
    border: 2px solid #023be280;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 245px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    padding: 1rem;
    text-align: center;
}

@media (min-width: 1030px) and (max-width: 1690px) {
    .happy-customer-card {
        height: 235px !important;
    }
}

.happy-customer-card:hover {
    transform: translateY(-5px);
}


.happy-customer-count {
    color: var(--primary-blue);
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    font-family: var(--font-heading);
}

.happy-customer-title {
    color: #000;
    font-size: 1.25rem;
    font-family: var(--font-body);
}

/* Right side content */
.happy_customer_rightside {
    background: #023be2;
    border: 2px solid #023be280;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.happy_customer_rightside_tittle {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}

.happy_customer_rightside_descripotion {
    color: #fff;
    font-size: 18px;
    text-align: center;
    max-width: 600px;
    margin-bottom: 2rem;
}

.happy_customer_rightside_ratingsection {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.happy_customer_rightside_bgimage {
    padding: 12px 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: transparent;
}

.rating-logo {
    width: 34px;
    height: 34px;
}

.rating-score {
    width: 40px;
    height: 20px;
    object-fit: contain;
}

.rating-stars {
    height: 20px;
}

.happy_customer_rightside_ImageSection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    width: 100%;
}

.happy_customer_rightside_ImageSection img {
    width: 100%;
    height: 110px;
    object-fit: contain;
}

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

@media (max-width: 1480px) {
    .happy_customer {
        width: 93%;      
        margin: auto;        
    }

    .happy-customer-wrapper {
        height: fit-content;
    }
}

/*@media (max-width: 1200px) {
    .happy_customer {
        width: 90%;
        gap: 20px;
    }

    .happy-customer-card {
        height: 220px;
    }

    .happy_customer_rightside_tittle {
        font-size: 1.75rem;
    }
}*/

@media (max-width: 1300px) {
    .happy_customer {
        grid-template-columns: 1fr;
    }

    .happy_customer > div:first-child {
        order: 2;
        /* move first div below */
    }

    .happy_customer > div:last-child {
        order: 1;
        /* move second div above */
    }

    .happy-customer-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .happy_customer_rightside {
        padding: 1.5rem;
    }

    .happy_customer_rightside_tittle {
        font-size: 1.5rem;
    }

    .happy_customer_rightside_descripotion {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {


    .happy-customer-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .happy-customer-card {
        height: 180px;
    }

    .happy-customer-count {
        font-size: 2.25rem;
    }

    .happy-customer-title {
        font-size: 1rem;
    }

    .happy_customer_rightside_tittle {
        font-size: 1.375rem;
    }

    .happy_customer_rightside_descripotion {
        font-size: 0.95rem;
    }

    .happy_customer_rightside_ImageSection img {
        height: 90px;
    }
}

@media (max-width: 480px) {
    .happy_customer_main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 2.5rem;
    }

.happy_customer_main.mb-5 {
        margin-bottom: 0 !important;
    }

    .happy_customer {
        width: 95%;
        padding-top: 10px;
    }

    .happy-customer-card {
        height: 150px;
        padding: 0.75rem;
    }

    .happy-customer-count {
        font-size: 2rem;
    }

    .happy-customer-title {
        font-size: 0.95rem;
    }

    .happy_customer_rightside_tittle {
        font-size: 1.25rem;
    }

    .happy_customer_rightside_descripotion {
        font-size: 0.9rem;
    }

    .happy_customer_rightside_ImageSection {
        gap: 12px;
    }

    .happy_customer_rightside_ImageSection img {
        height: 70px;
    }
}



/* ============================================================================================================================================================ */
/* ======================================================================== TRANSFORMATION SECTION ====================================================================== */
/* ============================================================================================================================================================ */
.transformation-section {
    background: #f9fafc;
    position: relative;
    display: flex;
    align-items: center;
    padding: 60px 0;
    overflow: hidden;
}

/* =================== Main Wrapper =================== */
.tranformation_main_section {
    width: 66.5%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* =================== Heading Section =================== */
.tranformation_heading_values {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* =================== Content Wrapper =================== */
.content-wrapper {
    display: flex;
    align-items: stretch;
    gap: 40px;
}

/* =================== Tabs Sidebar =================== */
.tabs-sidebar {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px;
    border-radius: 20px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90.38deg, rgba(2, 59, 226, 0.1), rgba(0, 161, 197, 0.1)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}


/* Mobile & iPad (1024px and below) */
@media (max-width: 1024px) {
    .tabs-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        gap: 10px;
        padding: 20px;
        white-space: nowrap;
        /* prevents items from wrapping */
        flex-wrap: nowrap;
    }

     .tab-item.active {
        margin-left: auto;
        margin-right: auto;
    }
}


/* =================== Tabs Detail =================== */
.tabs-sidebar_detail {
    flex: 1;
    display: flex;
    border-radius: 20px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90.38deg, rgba(2, 59, 226, 0.1), rgba(0, 161, 197, 0.1)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* =================== Inner Content =================== */
.maincontent_tabsidebar {
    background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.06) 2.06%, rgba(0, 161, 197, 0.06) 99.67%);
    width: 95%;
    padding: 30px;
    margin: 35px 35px;
    border-radius: 1rem;
}

/* =================== Tab Buttons =================== */
.tab-item {
    padding: 14px 22px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: left;
    background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.06), rgba(0, 161, 197, 0.06));
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-item:hover {
    transform: translateX(5px);
}

.tab-item.active {
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%) !important;
    color: #fff;
    border-radius: 16px;
}

/* =================== Tab Content =================== */
.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

/* =================== Content Header =================== */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.content-title {
    font-size: 2rem;
    font-weight: 700;
    color: #023be2;
}

/* =================== Arrow Icon =================== */
.arrow-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0066ff, #00bfff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index:1;

}
.arrow-icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: var(--gradient-blue);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.15;
    animation: pulseOut 3s infinite;
    transition: opacity 0.3s ease-out;
}

.arrow-icon:hover::before {
    opacity: 0.3;
    animation: pulseOut 3s infinite;
}


.arrow-icon img {
    width: 34px;
    transition: transform 0.3s ease;
}

.arrow-icon:hover img {
    transform: rotate(38deg) scale(1.1);
}

/* =================== Description =================== */
.content-description {
    font-size: 18px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 35px !important;
}

/* =================== Services Grid =================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

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

.services-grid li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 1rem;
    color: #222;
}

.services-grid li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: url("https://dev.primocys.com/wp-content/uploads/2026/01/Group-13.webp") ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* =================== Animations =================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ---------- XL Screens (≤ 1600px) ---------- */
@media (max-width: 1600px) {
    .tranformation_main_section {
        width: 85%;
    }
}

/* ---------- Large Screens (≤ 1400px) ---------- */
@media (max-width: 1400px) {
    .tranformation_main_section {
        width: 90%;
    }

    .tabs-sidebar {
        width: 300px;
    }
}

/* ---------- Laptops (≤ 1200px) ---------- */
@media (max-width: 1200px) {
    .tranformation_heading_values {
        width: 85%;
    }

    .content-title {
        font-size: 1.8rem;
    }

    .content-description {
        font-size: 1rem;
    }

    .tabs-sidebar {
        width: 280px;
    }
}

/* ---------- Tablets (≤ 992px) ---------- */
@media (max-width: 1112px) {
    .content-wrapper {
        flex-direction: column;
        gap: 30px;
         
    }

    .tabs-sidebar {
        width: 100%;
        display: flex;
        flex-direction: row;      /* keep horizontal */
        flex-wrap: nowrap;        /* NO wrapping */
        overflow-x: auto;         /* ✅ allow scroll */
        overflow-y: hidden;
        justify-content: flex-start;
        gap: 10px;
        padding: 20px;
         box-sizing: border-box;

        -webkit-overflow-scrolling: touch; /* smooth mobile scroll */
        scrollbar-width: none;             /* Firefox hide */
    }

    .tab-item {
        flex: 0 0 auto;           /* ✅ prevent shrinking */
        white-space: nowrap;      /* keep text in one line */
        font-size: 15px;
        padding: 12px 16px;
    }

    .tabs-sidebar_detail {
        width: 100%;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .arrow-icon {
        width: 48px;
        height: 48px;
    }

    .content-title {
        font-size: 1.7rem;
    }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
    .transformation-section {
        padding: 60px 0;
    }

    .tranformation_heading_values {
        width: 90%;
        text-align: left;
    }

    .global_heading {
        font-size: 3rem;
        text-align: center;
    }

    .global_description {
        font-size: 1rem;
    }

    .tab-item {
        flex: 1 1 100%;
        font-size: 15px;
        padding: 12px 14px;
    }

    .maincontent_tabsidebar {
        padding: 20px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap:0px;
    }

    .content-title {
        font-size: 1.5rem;
    }
}

/* ---------- Small Mobile (≤ 480px) ---------- */
@media (max-width: 480px) {
    .global_heading {
        font-size: 2.5rem;
    }

    .global_description {
        font-size: 0.95rem;
    }

    .tab-item {
        font-size: 14px;
        padding: 10px 12px;
    }

    .content-title {
        font-size: 1.25rem;
    }

    .content-description,
    .services-grid li {
        font-size: 0.95rem;
    }

     .arrow-icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .arrow-icon img {
        width: 18px;
        height: auto;
        object-fit: contain;
    }

      .tranformation_main_section {
        width: 100%;
        margin: 0;
        padding-left: 12px;
        padding-right: 12px;
        gap: 40px;
    }
}

/* ---------- Extra Small (≤ 360px) ---------- */
@media (max-width: 360px) {
    .tab-item {
        font-size: 13px;
        padding: 8px 10px;
    }

    .content-description {
        font-size: 0.9rem;
    }

     .arrow-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        aspect-ratio: 1 / 1;
    }

    .arrow-icon img {
        width: 16px;
        height: auto;
    }

    .tranformation_main_section {
        padding-left: 10px;
        padding-right: 10px;
        gap: 32px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== Our_Excellence ====================================================================== */
/* ============================================================================================================================================================ */

/* Main container */
.Our_Excellence {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
}

/* Inner container */
.Our_Excellence_main {
    position: relative;
    width: 66.5%;
    margin: auto;
    min-height: 344px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    border-radius: 2rem;
    color: #fff;
    overflow: hidden;
    text-align: center;
}

/* Background image */
.Our_Excellence_main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://dev.primocys.com/wp-content/uploads/2026/01/Frame38486.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    z-index: 1;
}

/* Gradient overlay */
/*.Our_Excellence_main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    z-index: 0;
}*/

/* Content wrapper */
.Our_Excellence_content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

/* Heading */
.Our_Excellence_content_tittl {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 45px;
    color: #fff;
    margin: 0;
}

/* Description */
.Our_Excellence_content_Des {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 1.5;
    max-width: 800px;
}

/* Button container */
.btn-gradient-showcase-cardOur_Excellence_content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    padding: 18px 30px;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Button text */
.btncolorview {
    font-weight: 600;
    transition: color 0.3s ease;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Icon */
.btncolorview_cardOur_Excellence_content {
    width: 24px;
    height: 24px;
    transform: rotate(-8deg);
    transition: transform 0.3s ease;
}

/* Hover animation */
.btn-gradient-showcase-cardOur_Excellence_content:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-gradient-showcase-cardOur_Excellence_content:hover .btncolorview_cardOur_Excellence_content {
    transform: rotate(37deg) translateX(5px);
}

.btn-gradient-showcase-cardOur_Excellence_content:hover .btncolorview {
    color: #00a1c5;
}

/* ================= Responsive ================= */
@media screen and (max-width: 1024px) {
    .Our_Excellence_main {
        width: 90%;
        padding: 1.5rem;
    }

    .Our_Excellence_content_tittl {
        font-size: 36px;
    }

    .Our_Excellence_content_Des {
        font-size: 18px;
    }
}

@media screen and (max-width: 480px) {
    .Our_Excellence_main {
        width: 95%;
        border-radius: 1rem;
        padding: 1.5rem 1rem;
    }

    .Our_Excellence_content_tittl {
        font-size: 26px;
    }

    .Our_Excellence_content_Des {
        font-size: 16px;
    }

    .btn-gradient-showcase-cardOur_Excellence_content {
        padding: 12px 22px;
        font-size: 15px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== WHY CHOOSE US UPDATED CODE ====================================================================== */
/* ============================================================================================================================================================ */

.whychooseusupdatecode {
    width: 100%;
    padding: 60px 0;
    /*background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);*/
    overflow: hidden;
}

/* ===========================
   Section Title
=========================== */
.Why_Choose_Us_Tittle {
    width: 60%;
    margin: 0 auto 60px;
    text-align: center;
}



@media (max-width: 480px) {
    .responsivemobile {
        margin: 0 auto -40px !important;
    }
}



.Why_Choose_Us_Tittle_slider {
    width: 70%;
    margin: 0 auto 60px;
    text-align: center;
}

@media (max-width: 1600px) {
    .Cardlistingwhychooseus {
        width: 90% !important;
    }
}

/* ===========================
   CARD GRID LAYOUT
=========================== */
.Cardlistingwhychooseus {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Left & Right Card Columns */
.Cardlistingwhychooseus_leftcard,
.Cardlistingwhychooseus_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    width: 28%;
}

/* ===========================
   INDIVIDUAL CARD DESIGN
=========================== */
.why-choose-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    border: 1px solid #023be280;
    border-radius: 18px;
    padding: 20px;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    align-items: center;
}

.why-choose-card:hover {
    transform: translateY(-6px);
    border-color: #0b5ed7;
      box-shadow: 0 10px 25px rgba(80, 80, 80, 0.2);
}

/* Card Icon */
.why-choose-card-icon {
    flex: 0 0 60px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.why-choose-card-icon img {
    width: 55px;
    height: 55px;
}

/* Card Content */
.why-choose-card-content {
    flex: 1;
}

.why-choose-card-title {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 6px;
    font-family: var(--font-body);
}

.why-choose-card-description {
    color: var(--text-dark-gray);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    margin: 0;
    display: -webkit-box;
    /* required for line clamping */
    -webkit-line-clamp: 2;
    /* limit to 2 lines */
    -webkit-box-orient: vertical;
    /* vertical text flow */
    overflow: hidden;
    /* hide overflowing text */
    text-overflow: ellipsis;
}

/* Arrow Icon */
.why-choose-card-arrow img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}

.why-choose-card:hover .why-choose-card-arrow img {
    transform: translateX(4px);
}

/* ===========================
   CENTER IMAGE STYLING
=========================== */
.why-choose-center-image {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.center-image-wrapper {
    position: relative;
    display: inline-block;
    z-index: 2;
    max-width: 330px;
}

.why-choose-image {
    width: 280px;
    height: 380px;
    border-radius: 60px 10px 60px 10px;
    object-fit: cover;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.why-choose-image:hover {
    transform: scale(1.05);
}

/* ===========================
   CORNER IMAGES
=========================== */
.corner-image {
    position: absolute;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 16px;
    z-index: 1;
    transition: transform 0.3s ease;
}

.corner-image:hover {
    transform: scale(1.08);
}

.corner-top-left {
    top: -40px;
    left: -30px;
}

.corner-top-right {
    top: -10px;
    right: -10px;
}

.corner-bottom-left {
    bottom: 70px;
    left: -50px;
    opacity: 0.9;
}

.corner-bottom-right {
    bottom: -25px;
    right: -20px;
    z-index:-1;
    opacity: 0.7;
}

.corner-bottom-left-horizontal {
    bottom: -40px;
    left: 30px;
    opacity:0.9;
}

/*  all card listing */

.cardone {
    position: relative;
    right: -5rem;
}

.Cardtwo {
    position: relative;
    left: -6rem;
    z-index:2;
}

/* ===========================
   RESPONSIVE DESIGN
=========================== */

/*  lap screnn  */

@media (max-width: 1400px) {
    .Cardlistingwhychooseus {
        gap: 20px;
        width: 90%;
    }

    .cardone {
        position: relative;
        right: -2rem;
    }

    .Cardtwo {
        position: relative;
        left: -2rem;
    }
}

@media (max-width: 1200px) {
    .Cardlistingwhychooseus {
        gap: 20px;
        width: 90%;
    }

    .Cardlistingwhychooseus_leftcard,
    .Cardlistingwhychooseus_right {
        width: 30%;
    }

    .why-choose-image {
        width: 260px;
        height: 380px;
    }
}

@media (max-width: 992px) {
    .Why_Choose_Us_Tittle {
        width: 80%;
        text-align: left;
    }

    .Why_Choose_Us_Tittle_slider {
        width: 80%;
        text-align: left;
    }

    .Cardlistingwhychooseus {
        flex-direction: column;
        align-items: center;
    }

    .cardone {
        right: -0rem;
    }

    .Cardtwo {
        position: relative;
        left: -0rem;
    }

    .Cardlistingwhychooseus_leftcard,
    .Cardlistingwhychooseus_right {
        width: 100%;
        align-items: center;
    }

    .why-choose-center-image {
        margin: 40px 0;
    }

    .why-choose-image {
        width: 240px;
        height: 340px;
    }

    .corner-image {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 576px) {
    .whychooseusupdatecode {
        padding: 60px 0;
    }

    .Why_Choose_Us_Tittle {
        width: 90%;
        margin-bottom: 40px;
    }

    .Why_Choose_Us_Tittle_slider {
        width: 90%;
        margin-bottom: 40px;
    }

   /* .Why_Choose_Us_Tittle .global_heading {
        font-size: 1.8rem;
    }*/

    .why-choose-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .why-choose-card-icon {
        margin-bottom: 10px;
    }

    .why-choose-card-arrow {
        display: none;
    }

    .why-choose-image {
        width: 200px;
        height: 300px;
    }

    .corner-image,
    .why-choose-image,
    .Cardlistingwhychooseus_center {
        display: none;
    }
}

@media (max-width: 480px) {

    /* Force section to match hero spacing */
    .whychooseusupdatecode {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Kill container auto-centering space */
    .Cardlistingwhychooseus {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 14px;
    }

    /* Ensure cards touch same grid as top section */
    .Cardlistingwhychooseus_leftcard,
    .Cardlistingwhychooseus_right {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 14px;
    }

    /* Card internal spacing */
    .why-choose-card {
        margin: 0 !important;
        padding: 14px !important;
    }

    /* Remove any transform offsets */
    .cardone,
    .Cardtwo {
        left: 0 !important;
        right: 0 !important;
    }
}




/* ============================================================================================================================================================ */
/* ======================================================================== OUR SHOWCASE ====================================================================== */
/* ============================================================================================================================================================ */



/* Container Section */
.showcase-section {
    background: linear-gradient(
        90deg,
        rgba(2, 59, 226, 0.2) 2%,
        rgba(0, 161, 197, 0.2) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    height: auto;          /* height adjusts according to content */
    padding-top: 60px;
    box-sizing: border-box; /* ensures padding is included in height */
   

}


/* Card */
.showcase-card {
    background: #ffffffeb;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 100%;
}

/* ======================
   SHOWCASE SLIDER DOTS
   ====================== */
.showcase-dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
  align-self: center;
}

.showcase-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #c5c5c5; /* inactive */
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}

/* ✅ ACTIVE DOT (FIXED) */
.showcase-dots .dot.active {
  background: linear-gradient(90deg, #023be2, #00a1c5) !important;
  transform: scale(1.3);
}


/* Left Side */
.showcase-card-left {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 3rem;
}

/* Card Title */
.showcase-card-title {
    font-family: var(--font-body);
    font-size: 1.8rem;
    font-weight: 600;
    color: #555;
}

/* Category Buttons */
.card-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-category {
    padding: 0.5rem 1.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 1.5rem;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-category:hover {
    transform: translateY(-2px);
}

/* Button Colors */
.btn1 {
    background-color: #4bad5c;
}

.btn2 {
    background-color: #4badad;
}

.btn3 {
    background-color: #4b81ad;
}

/* Description */
.showcase-card-description {
    font-family: var(--font-body);
    font-size: 18px;
    color: #555;
    line-height: 1.6;

    /* allow full text */
    display: block;
    overflow: visible;
    white-space: normal;
}


/* Action Buttons */
.card-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Gradient Border Button */
.btn-gradient-wrap {
    background: linear-gradient(90deg, #023be2, #00a1c5);
    padding: 2px;
    border-radius: 1rem;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-gradient-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(2, 59, 226, 0.3);
}

.btn-gradient-showcase-card {
    background: #fff;
    border: none;
    border-radius: calc(1rem - 2px);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

/* Gradient Fill Button */
.btn-fill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 1rem;
    border: none;
    color: #fff;
    background: linear-gradient(90deg, #023be2 2%, #00a1c5 100%);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-fill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(2, 59, 226, 0.3);
}

.btn-fill img {
    width: 1.2rem;
    height: 1.2rem;
}

.btn-fill:hover img {
    transition: transform 0.2s ease;
    rotate: 34deg;
}

/* Right Side Image */
.showcase-card-right {
    flex: 1 1 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin-bottom: -5.5rem;*/
    padding-right:3rem;
    padding-left:3rem;
}

.showcase-card-right img {
    width: 100%;
    border-radius: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .showcase-card {
        padding: 2rem 2rem 0 2rem; /* bottom = 0 */
    }

    .showcase-card_mainslide {
        width: 90% !important;
    }

    .showcase-card-right {
        margin-bottom: 0;
        padding-bottom: 0;
        align-items: flex-end;
    }

    .showcase-card-right img {
        display: block;
        margin-bottom: 0;
    }
}

/*  laptop screnn  */

@media (max-width: 1280px) {
    .showcase-card_mainslide {
        width: 90% !important;
    }
    .showcase-section {
        align-items: start;
         padding-bottom: 60px;
    }

     .showcase-card-right img {
        max-height: 520px;   /* increase as needed */
        width: auto;
    }
}

@media (max-width: 768px) {
    .showcase-card {
        flex-direction: column;
        align-items: center;
          padding: 1.5rem 1.5rem 0 1.5rem; 
    }

    .showcase-section {
        align-items: start;
         padding-bottom: 60px;
    }

    .showcardvalues{
        padding-bottom: 0.5rem !important;
    }

    .showcase-card-left {
        padding: 0rem !important;
    }

    .showcase-card_mainslide {
        width: 90% !important;
    }

    .showcase-card-right {
        flex: 1 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-action-btns {
        justify-content: center;
    }

    .showcase-card-right img {
        max-width: 100%;
    }
}

@media (max-width: 480px) {

.showcase-card {
        padding-bottom: 0 !important;
    }

    .showcase-title {
        font-size: 2rem;
    }

    .showcase-card_mainslide {
        width: 90% !important;


    }

    .showcase-card-title {
        font-size: 1.5rem;
    }

    .btn-category {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }

    .btn-gradient-showcase-card,
    .btn-fill {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }

     .showcase-card-right {
        margin-bottom: 0;
        padding-left: 1rem;
        padding-right: 1rem;

        /* IMPORTANT */
        align-items: flex-end;   /* stick image to bottom */
    }

    .showcase-card-right img {
        width: 100%;
        height: auto;
        max-height: 400px;       /* slightly taller */
        object-fit: contain;
        display: block;          /* remove inline-image gap */
    }

     .showcase-card-left {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

@media (min-width: 1025px) {
    .showcase-card {
        align-items: stretch;
    }

    .showcase-card-right {
        margin-bottom: 0;
        align-items: flex-end;
    }
}


.btncolorview {
    font-family: var(--font-body);
    font-weight: 700;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);

    /* Clip the background to text */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* for Firefox */
}

/*  arrow css */

.leftarrowbg {
    background-color: transparent;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: #515151 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 999;
}

.leftarrowbgimage {
    height: 50%;
    width: 50%;
    rotate: -180deg;
}

.rightarrowbg {
    background-color: transparent;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: #515151 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -5rem;
    top: 44%;
    cursor: pointer;
}

.rightarrowbgimage {
    height: 50%;
    width: 50%;
}

/* Common hover effect for both arrows */
.leftarrowbg,
.rightarrowbg {
    transition: all 0.3s ease;
    /* Smooth animation */
}

.leftarrowbg:hover,
.rightarrowbg:hover {
    transform: scale(1.2);
    /* Slightly bigger */
    border-color: #023be2;
    /* Change border color on hover */
    background-color: rgba(2, 59, 226, 0.1);
    /* optional subtle background */
}

/* slider */

.showcase-card_mainslide {
    overflow: hidden;
    position: relative;
    width: 67%;
    margin: auto;
    border-radius: 1rem;
}

@media (max-width: 1600px) {
    .showcase-card_mainslide {
        width: 80% !important;
    }
}

/* Track holds all slides horizontally */
.showcase-card-track {
    display: flex;
    transition: transform 0.7s ease-in-out;
}

.showcase-card {
    min-width: 100%;
    flex-shrink: 0;
}

/* Arrows */
.leftarrowbg,
.rightarrowbg {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Responsive for mobile screens */
@media (max-width: 640px) {
    .leftarrowbg,
    .rightarrowbg {
        /*top: auto;*/
        /* remove top alignment */
        /*bottom: 1%;*/
        /* move to bottom */
        /*transform: translateY(0);*/
        /* reset transform for proper placement */
        display: none;

    }
}



.leftarrowbg {
    left: 3%;
}

.rightarrowbg {
    right: 3%;
}

/* Extra-large screens (1536px and above) */
@media (min-width: 1536px) {
    .leftarrowbg {
        left: 12%;
    }

    .rightarrowbg {
        right: 12%;
    }
}

.leftarrowbg:hover,
.rightarrowbg:hover {
    transform: translateY(-50%) scale(1.2);
    border-color: #023be2;
    background-color: rgba(2, 59, 226, 0.1);
}

/*   resposive desing on all screnn  */

/* ============================================================================================================================================================ */
/* ======================================================================== SEAMLESS WHITE-LABEL MOBILE APP DEVELOPMENT SERVICES ====================================================================== */
/* ============================================================================================================================================================ */

/* Main Section */
.slider-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0rem 0;
    width: 100%;
    background: #fff;
    position: relative;
    margin-bottom: 3rem;
    margin-top: 60px;
}

.Seamless_WhiteLabel_Mobile_App_Development {
    width: 67%;
    margin: auto;
    display: flex;
    position: relative;
}

@media (max-width: 1600px) {
    .Seamless_WhiteLabel_Mobile_App_Development {
        width: 87% !important;
    }
}

/* Slider container */
.slider-container {
    position: relative;
    overflow: hidden;
    padding: 0px 15px 0px 10px;
}

.slider-track {
    display: flex;
    gap: 16px;
    transition: transform 0.5s ease-in-out;
}

.card-content {
    display: none; /* hidden by default */
    margin: 3rem auto 0; /* top margin + horizontal centering */
}

/* Show flex when active */
.card-content.active {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    flex-direction: row; /* default row for large screens */
}

/* Extra large screens (1600px and above) */
@media (min-width: 1600px) {
    .card-content.active {
        width: 67%;
    }
}

/* Large screens / desktops (1440px - 1599px) */
@media (min-width: 1440px) and (max-width: 1599px) {
    .card-content.active {
        width: 85%;
    }
}

/* Medium screens / laptops (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .card-content.active {
        width: 85%;
    }
}

/* Tablets / iPads (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .card-content.active {
        width: 90%;
        gap: 20px;
        flex-direction: column; /* stack vertically on tablets */
    }
}

/* Small tablets / large phones (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .card-content.active {
        width: 95%;
        gap: 15px;
        flex-direction: column; /* stack vertically */
    }
}

/* Mobile screens (below 480px) */
@media (max-width: 479px) {
    .card-content.active {
        width: 95%;
        gap: 10px;
        flex-direction: column; /* stack vertically */
        margin-top: 0rem !important;
    }
}




/* Card Border */
.slider-card-border {

    border:2px solid #a9a9a9;
    border-radius: 1rem;
    cursor: pointer;
    flex: 0 0 calc((100% - 16px * 5) / 6);
    box-sizing: border-box;
    background: transparent;
}
/* Card Inner */
.slider-card {
    background: #fff;
    border-radius: calc(1rem - 2px);
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    text-align: center;
}

/* ACTIVE CARD — GRADIENT BORDER */
.slider-card-border.active-card {
    border: 2px solid transparent;
    border-radius: 1rem;

    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(
            90.38deg,
            #023be2 2.06%,
            #00a1c5 99.67%
        ) border-box;
}

.slider-card img {
    width: 40px;
    height: 40px;
}

.slider-card p {
    font-size: 18px;
    margin: 0;
}

/* Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    padding: 8px;
    z-index: 10;
}

.arrow-left {
    left: -30px;
}

.arrow-right {
    right: -30px;
}

.arrow-left img,
.arrow-right img {
    width: 22px;
    height: 22px;
}

.Mobile_App_Development_Modern_Mobile_SolutionsTitltMain {
    margin-bottom: 2rem !important;
    text-align: center;
}

@media (max-width: 1480px) {
    .Mobile_App_Development_Modern_Mobile_SolutionsTitltMainslider-section {
        width: 97%;
        display: flex;
        flex-direction: column;
    }

    .slider-content_rightside {
        margin-top: 0rem;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .slider-card-border {
        flex: 0 0 calc((100% - 16px * 3) / 4);
    }
}

@media (max-width: 768px) {
    .slider-card-border {
        flex: 0 0 calc((100% - 16px) / 2);
    }
}

@media (max-width: 480px) {
    .slider-card-border {
        flex: 0 0 100%;
    }
}

.Seamless_WhiteLabel_Mobile_App_Development_arrowLeft {
    position: absolute;
    left: -1rem;
    z-index: 999;
    top: 40%;
    cursor: pointer;
}

@media (max-width: 767px) {
    .Seamless_WhiteLabel_Mobile_App_Development_arrowLeft {
        top: 30%;
        left: -0.8rem;
    }

    .Seamless_WhiteLabel_Mobile_App_Development_arrowright {
        top: 31% !important;
        right: -0.8rem !important;
    }
}

.Seamless_WhiteLabel_Mobile_App_Development_arrowLeftImage {
    height: 24px;
    width: 24px;
}

.Seamless_WhiteLabel_Mobile_App_Development_arrowright {
    position: absolute;
    z-index: 999;
    top: 40%;
    right: -1rem;
    cursor: pointer;
}

.Seamless_WhiteLabel_Mobile_App_Development_arrowrightImage {
    height: 24px;
    width: 24px;
}

/* Container */
.slider-content {
    width: 67%;
    margin: auto;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-top: 3rem;
}





@media (max-width: 1600px) {
    .slider-content {
        width: 87% !important;
    }
}

.slider-content_leftside {
    box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.13);
    border: 1px solid rgba(2, 59, 226, 0.5);
    background: #ffffff;
    padding: 30px;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: fit-content;
}

/* Header & Image */
.applications-included {
    display: flex;
    align-items: center;
    gap: 12px;
}

.applications-included-circle {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(2, 59, 226, 0.5);
}

.applications-included-circle-image {
    width: 55%;
    height: auto;
}

/* Tablets */
@media (max-width: 1024px) {

    .applications-included-circle-image {
        width: 60%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .applications-included-circle-image {
        width: 65%;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .applications-included-circle {
        min-width: 50px;
        min-height: 50px;
        flex-shrink: 0;          /* prevents oval shape */
    }

    .applications-included-circle-image {
        max-width: 70%;
        height: auto;
        display: block;
    }
}



.applications-included-title {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.36;
    color: #000;
}

.applications-included-des {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: #918f8f;
}

/* Cards */
.applications-included-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.applications-included-card {
    background-color: rgba(0, 161, 197, 0.06);
    padding: 25px 20px;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.applications-included-card-circle {
    display: flex;
    align-items: center;
    gap: 10px;
}

.applications-included-card-circle-icon {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #00a1c5;
}

.applications-included-card-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    color: #000;
}

.applications-included-card-description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    color: #555;
}

.applications-included-card-platform {
    border: 2px solid rgba(0, 161, 197, 0.25);
    padding: 6px 18px;
    border-radius: 0.7rem;
    color: #00a1c5;
    width: fit-content;
    cursor: pointer;
    font-size: 16px;
}

/* laptopn */

@media (max-width: 1280px) {
    .slider-content {
        width: 90%;
        margin: auto;
    }

    .Seamless_WhiteLabel_Mobile_App_Development {
        width: 90%;
        margin: auto;
    }

    .slider-content_leftside {
        padding: 20px;
    }
}

.slider-section_btnT {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn_group {
    width: fit-content;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 3rem;
}

.btn-fill_slider_section {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 3.7rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 1rem;
    border: none;
    color: #fff;
    background: linear-gradient(90deg, #023be2 2%, #00a1c5 100%);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-fill_slider_section:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(2, 59, 226, 0.3);
}

.btncolorview_slider-section {
    color: #fff;
}

/* Gradient Border Button */
.btn-gradient-wrap_slider-section {
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    padding: 2px;
    border-radius: 1rem;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-gradient-wrap_slider-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(2, 59, 226, 0.3);
}

.btn-gradient-showcase-card_slider-section {
    background: #fff;
    border: none;
    border-radius: calc(1rem - 2px);
    padding: 0.75rem 3rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .slider-content {
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin: auto;
    }

    .btn_group {
        display: flex;
        gap: 12px;
        margin-top: 3rem;
        justify-content: center;
    }

    .btn-fill_slider_section {
        padding: 0.75rem 3rem;
    }

    .slider-content_leftside {
        padding: 20px;
        margin-top: 2rem;
    }

    .Seamless_WhiteLabel_Mobile_App_Development {
        width: 90%;
        margin: auto;
    }

    .slider-content_rightside_Core_FeatureImagesListing {
        display: grid;
        grid-template-columns: 1fr !important;
        /* single column */
        gap: 1rem;
        /* optional spacing between items */
    }

    .applications-included-cards {
        gap: 15px;
    }

    .applications-included-card {
        padding: 20px 15px;
    }

    .applications-included-title {
        font-size: 20px;
    }

    .applications-included-des {
        font-size: 16px;
    }

    .applications-included-card-title {
        font-size: 18px;
    }

    .applications-included-card-description {
        font-size: 14px;
    }
}

.slider-content_rightside {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 29px;
}

.slider-content_rightside_Core_Feature {
    box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.13);
    border: 1px solid rgba(2, 59, 226, 0.5);
    background: #ffffff;
    padding: 30px;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.slider-content_rightside_Core_FeatureImagesListing {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* two equal columns */
    gap: 20px;
    /* optional: spacing between columns */
}

.slider-content_rightside_Core_FeatureImagesListingcheack {
    display: flex;
    gap: 8px;
}

.slider-content_rightside_Core_FeatureImagesListingcheackImage {
    width: 28px;
    height: 28px;
}

.slider-content_rightside_Core_FeatureImagesListingcheactittle {
    font-family: var(--font-body);
    color: #000;
    font-weight: 400;
    font-size: 16px;
}

.slider-content_rightside_technology_used {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.slider-content_rightside_WebRTC {
    padding: 8px 18px;
    background-color: #00a1c50a;
    border-radius: 0.5rem;
}

.slider-content_rightside_technology_used_WebRTC_tittle {
    border: none;
    color: #00a1c5;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 136%;
    background-color: transparent;
}

.slider-content_rightside_Quick_Launch {
    font-size: 18px;
    color: #555555;
    font-weight: 400;
    font-family: var(--font-body);
}

/* ============================================================================================================================================================ */
/* ======================================================================== WHAT OUR CLIENT LOVE ABOUT US ====================================================================== */
/* ============================================================================================================================================================ */

.what-our-clients-love_main {
    background-color: #023be20a;
}

.what-our-clients-love {
    display: flex;
    gap: 20px;
    width: 67%;
    margin: auto;
    padding: 60px 10px;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 480px) {

    .what-our-clients-love {
        width: 100% !important;
        margin: 0 !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        padding-top: 40px;
        padding-bottom: 40px;

        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
}



.clientIconApp {
    width: 44px;
    height: 40px;
}

.clients-love-left {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertical centering inside itself */
    align-items: flex-start;
    /* left-align the text */
}

.clients-love-heading {
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 600;
    color: #000;
    line-height: 1.1;
}

.clients-love-desc {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    color: #555555;
    line-height: 1.5;
}

.clients-love-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* always 2 columns */
    gap: 20px;
    width: 70%;
}

/* Optional: responsive adjustment for smaller screens */
@media (max-width: 768px) {
    .clients-love-right {
        grid-template-columns: 1fr;
        /* single column on tablets/mobiles */
        width: 100%;
    }

    .clients-love-heading {
        font-size: 50px;
    }

    .clients-love-left {
        width: 100%;
    }

    .what-our-clients-love {
        width: 90%;
        display: flex;
        flex-direction: column;
        
    }
}

/* 1281px to 1600px → Large screens */
@media (max-width: 1536px) and (min-width: 1281px) {
    .what-our-clients-love {
        width: 90%;
    }
}

/* 1280px and below → Laptop, Tablet, Mobile */
@media (max-width: 1280px) {
    .what-our-clients-love {
        width: 96%;
    }
}

.client-card {
    background: #ffffff;
    border: 2px solid #023be20a;
    /*box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.13);*/
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: fit-content;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    /* smooth animation */
    cursor: pointer;
}

/* Hover effect */
.client-card:hover {
    transform: translateY(-5px);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15);
}


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

.client-info {
    display: flex;
    gap: 12px;
    align-items: center;
}

.client-image-wrapper {
    width: 66px;
    height: 66px;
    border: 2px solid #55555540;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.client-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.client-name p {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    margin: 0;
    color: #000;
}

.client-name span {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    margin: 0;
    color: #555555;
}

.client-play {
    width: 50px;
    height: 50px;
   background: linear-gradient(135deg, #0066ff, #00bfff);
    border-radius: 50%;
    display: flex;
    padding: 1px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;

}

.client-play::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: var(--gradient-blue);
    border-radius: 60%;
    z-index: -1;
    opacity: 0.15;
    animation: pulseOut 3s infinite;
    transition: opacity 0.3s ease-out;
}

.client-play:hover::before {
    opacity: 0.3;
    animation: pulseOut 3s infinite;
}


.client-play img {
    width: 50%;
    height: 50%;
}

.card-divider {
    border-bottom: 1px solid #e4e1e1;
    border-radius: 2px;
}

.client-description {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: #555555;
    line-height: 1.5;
}

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 220px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.modal-content {
    position: relative;
    margin: auto;
    width: 80%;
    max-width: 800px;
    border-radius: 12px;
    overflow: hidden;
}

.modal-content .close {
    position: absolute;
    top: 12px;
    right: 18px;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
}

/* Responsive video */
.modal-content iframe {
    width: 100%;
    height: 450px;
}

@media (max-width: 768px) {
    .modal-content iframe {
        height: 250px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== Custom Mobile Apps Section ====================================================================== */
/* ============================================================================================================================================================ */

.custom-mobile-apps-section {
    background-image: url("https://dev.primocys.com/wp-content/uploads/2026/01/Group1410116770.webp");
    background-size: cover;
    background-position: center;
    padding-top: 60px;
    overflow: hidden;
    margin-top: 0px;
    /*margin-bottom: 3rem;*/
}

.custom-mobile-container {
    width: 67%;
    margin: 0 auto;
}

@media (max-width: 1400px) {
    .custom-mobile-container {
        width: 90%;
    }
}

@media (max-width: 1600px) {
    .custom-mobile-container {
        width: 87% !important;
    }
}

/* Content */
.Mobile_App_Development_title {
    color: #000;
    font-weight: 600;
    font-size: 58px;
    font-family: var(--font-heading);
    line-height: 120%;
    margin-bottom: 10px;
}

.Mobile_App_Development_description {
    color: #555;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 1.5rem;
}

.content-divider {
    background-color: #ddd;
    height: 2px;
    width: 90%;
    margin-bottom: 30px;
}

/* Features */
.features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
    margin-bottom: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
    padding: 10px 25px;
    border-radius: 12px;
    background: linear-gradient(90deg, #b3c6ff 0%, #ffffff 100%);
    font-size: 20px;
    color: #000;
    font-family: var(--font-body);
    font-weight: 400;
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-4px);
    background: linear-gradient(90deg, #a8bbff 0%, #f2f2ff 100%);
}

.feature-icon {
    background: #fff;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* ===== Base Button Style ===== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* space between text and image */
    padding: 15px 40px;
    border-radius: 30px;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Hover effect for button background */
.btn-primary:hover {
    background: linear-gradient(90.38deg, #00a1c5 2.06%, #023be2 99.67%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 59, 226, 0.3);
}

/* ===== Image (Arrow) Styling ===== */
.btn-primary span img {
    width: 22px;
    height: 22px;
    transition: transform 0.4s ease;
}

/* Rotate arrow when hovered */
.btn-primary:hover span img {
    transform: rotate(40deg);
}

.btn-primary:hover {
    opacity: 0.9;
}

/* Image */
.image-box {
    text-align: center;
}

.image-box img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 1rem;
}

@media (max-width: 991px) {
    .image-box img {
        display: none;
    }
}

/* ==============================
   Responsive Adjustments
============================== */

/* Tablets */
@media (max-width: 992px) {
    .Mobile_App_Development_title {
        font-size: 46px;
        text-align: center;
    }

    .Mobile_App_Development_description {
        text-align: center;
        font-size: 20px;
    }

    .features {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .btn-primary {
        display: block;
        margin: 0 auto;
    }

    .content-box {
        text-align: center;
    }

    .image-box {
        margin-top: 40px;
    }
}

/* Mobile Screens */
@media (max-width: 576px) {
    .custom-mobile-apps-section {
        margin-top: 60px;
        padding: 0;
    }

    .Mobile_App_Development_title {
        font-size: 32px;
        line-height: 130%;
        padding: 0 10px;
    }

    .Mobile_App_Development_description {
        font-size: 18px;
        padding: 0 10px;
    }

    .feature-item {
        font-size: 18px;
        padding: 8px 20px;
        gap: 15px;
    }

    .feature-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    .btn-primary {
        padding: 12px 30px;
        font-size: 18px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== HIRE EXPERTS ====================================================================== */
/* ============================================================================================================================================================ */

.hire-experts-section {
    padding-top: 60px;
    /*margin-bottom: 50px;*/
}

.hire-experts-subtitle {
    font-size: 24px;
    color: var(--text-dark-gray);
    font-family: var(--font-body);
    text-align: center;
    margin-bottom: 2rem;
}

.technologies {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 90%;
    /* default for all screens */
    margin: 3rem auto 0 auto;
}

@media (min-width: 1480px) {
    /* extra-large screens */
    .technologies {
        width: 67%;
    }
}

@media (max-width: 1600px) {
    .technologies {
        width: 87% !important;
    }
}

@media (max-width: 700px) {
    /* extra-large screens */
    .technologies {
        grid-template-columns: repeat(1, 1fr);
    }

    .hire-experts-section{
        padding-top: 30px;
    }

}

@media (max-width: 480px) {

    .technologies {
        width: 100% !important;      /* stop floating inset */
        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 8px !important; /* SAME spacing */
        padding-right: 8px !important;

        gap: 16px;                   /* tighter grid on mobile */
    }
}


.technologies-item {
    border-radius: 22px;
    background: linear-gradient(90deg, rgba(2, 59, 226, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
    padding: 2px;
    box-shadow: 2px 2px 8px 0px #0000001a;
    transition: all 0.4s ease-in-out;
    /* smooth outer border change */
}

.technologies-item:hover {
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    box-shadow: 4px 4px 12px 0px #0000001a;
}

.technologies-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 24px 22px;
    border: none;
    border-radius: 20px;
    background: #fff;
    font-size: 20px;
    font-family: var(--font-body);
    font-weight: 400;
    cursor: pointer;
    width: 100%;
    transition:
        background 0.4s ease-in-out,
        color 0.4s ease-in-out;
    /* animation */
    text-decoration: none;
    color: #000;
}

.technologies-item:hover .technologies-button {
    background: linear-gradient(90deg, #023be2 0%, #00a1c5 100%);
    color: #fff;
    /* optional text color change */
}

.button-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("/images/ButtonImage.webp") no-repeat center;
    background-size: contain;
    transition: background 0.3s ease-in-out;
}

/* When hovered, change to another image */
.technologies-item:hover .button-icon {
    background: url("/images/ButtonImagewhite.webp") no-repeat center;
    background-size: contain;
}

.technologies-button-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.arrow-circle{
    width: 40px;
    height: 40px;
    background: var(--gradient-blue);
    border-radius: 50%;
    position:relative;
}


.ArrrowrightImageApp {
    width: 27px;
    height: 27px;
    position: absolute;
    display: block;
    top: 12%;
    left: 16%;
    transition: transform 0.3s ease;
    filter: brightness(0) invert(1);

}

.technologies-item:hover .arrow-circle {
    background: white;
}

.technologies-item:hover .ArrrowrightImageApp {
    filter: none; /* arrow turns original color */
}




/* ============================================================================================================================================================ */
/* ======================================================================== FAQ ====================================================================== */
/* ============================================================================================================================================================ */

.Mobile_App_Development_Platform_Main_FAQ {
    width: 100%;
    background-color: #fff;

}

.Mobile_App_Development_Platform_Main_FAQ_main {
    display: flex;
    justify-content: space-between;
    width: 67%;
    margin: auto;
    gap: 30px;
    padding-top: 60px;
    align-items: flex-start; 
}

@media (max-width: 1600px) {
    .Mobile_App_Development_Platform_Main_FAQ_main {
        width: 87% !important;
    }
}

.happy_customer_btn {
    width: 40%;
}

.ClintRating_Appdevelopemt_main {
    margin-top: 2rem;
}

.ClintRating_Appdevelopemt_main,
.ClintRating_Appdevelopemt_main_mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: fit-content;
}

.ClintRating_Appdevelopemt_main_mobile {
    margin-top: 2rem;
    width: 100% !important;
}

@media (min-width: 1025px) {
    .ClintRating_Appdevelopemt_main_mobile {
        display: none;
    }
}

@media (max-width: 1024px) {
    .ClintRating_Appdevelopemt_main {
        display: none;
    }
}

.Mobile_App_Development_Platform_Main_FAQ_main_leftside {
    background-color: #023be20a;
    padding: 0px 47px;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.ClintRating_Appdevelopemt_main_card {
    background: linear-gradient(270.06deg, #f5f7fe 17.28%, #023be2 137.05%);
    padding: 1px;
    /* thickness of gradient border */
    border-radius: 10px;
    display: inline-block;
    width: fit-content;
}

.ClintRating_Appdevelopemt_main_card_content {
    background: linear-gradient(90deg, #b3c6ff 0%, #ffffff 100%);
    border-radius: 10px;
    /* slightly smaller to fit inside gradient */
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.ClintRating_Appdevelopemt_main_card_contentDes {
    font-family: var(--font-body);
    color: #000000;
    font-family: 600;
    font-size: 18px;
}

.ClintRating_Appdevelopemt_main_card_content_Image {
    width: 24px;
    height: 24px;
}

/*  right side */

.Mobile_App_Development_Platform_Main_FAQ_main_rightside {
    width: 100%;
    display: flex;
    flex-direction: column;
     overflow-y: auto; 
     height: 710px;
}

.Mobile_App_Development_Platform_Main_FAQ_main_rightside_blogdetail {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cardfaq {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #f0f0f0;
    /* default */
    padding: 15px 10px;
    cursor: pointer;
    position: relative;
    transition: border-bottom 0.3s ease;
    gap: 0px;
}

.faqtitle {
    font-weight: 500;
    font-size: 16px;
    font-family: var(--font-body);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000000;
}

.faqbtncontact {
    border: none;
}

.arrowicon img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.faqdescription {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.3s ease,
        padding 0.3s ease;
    padding: 0 0;
    font-size: 16px;
    color: #555555;
    font-family: var(--font-body);
}

.cardfaq.active {
    border-bottom: 2px solid #023be280;
    border-radius: 1rem;
}

.cardfaq.active .faqdescription {
    max-height: 200px;
    /* adjust if content is bigger */
    padding: 10px 0;
}

.cardfaq.active .arrowicon img {
    transform: rotate(180deg);
}

.faqvalues {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.faqbtncontact {
    width: 40rem;
}

/* Tablet */
@media (max-width: 1024px) {
    .Mobile_App_Development_Platform_Main_FAQ_main {
        width: 90%;
        gap: 30px;
    }

    .faqtitle {
        font-size: 18px;
    }

    .faqdescription {
        font-size: 14px;
    }

    .Mobile_App_Development_Platform_Main_FAQ_main_rightside {
        height:auto;
        overflow-y: visible;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .Mobile_App_Development_Platform_Main_FAQ_main {
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .happy_customer_btn {
        width: 60%;
    }

    .Mobile_App_Development_Platform_Main_FAQ_main_leftside {
        padding: 40px 0px;
        align-items: start;
        text-align: left;
    }

    .Mobile_App_Development_Platform_Main_FAQ_main_rightside {
        width: 90%;
        margin: auto;
        height:auto;
        overflow-y: visible;
    }

    .ClintRating_Appdevelopemt_main {
        gap: 15px;
        width: 95%;
        margin: auto;
    }

    .faqtitle {
        font-size: 16px;
    }

    .faqdescription {
        font-size: 14px;
    }

    .faqbtncontact {
        width: 100%;
        justify-content: center;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .Mobile_App_Development_Platform_Main_FAQ {
        padding: 60px 10px;
    }

   .Mobile_App_Development_Platform_Main_FAQ_main {
        width: 100% !important;
        margin: 0 !important;

        padding-left: 0 !important;   /* SAME spacing everywhere */
        padding-right: 0 !important;

        padding-top: 60px;
        gap: 16px;

        flex-direction: column;         /* FAQ stacks nicely on mobile */
        align-items: stretch;
    }

    .faqtitle {
        font-size: 15px;
    }

    .faqdescription {
        font-size: 13px;
    }


}

/* fdfdfdfd */

/* Main FAQ Section */
.Mobile_App_Development_Platform_Main_FAQ {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;



}

/* Left side */
.Mobile_App_Development_Platform_Main_FAQ_main_leftside {
    background-color: #D1DCFA;
    padding: 40px 20px;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 45%;
    /* left side width on laptop & large screens */
    box-sizing: border-box;

    position: sticky;
    top: 90px; /* space from top */
    height: fit-content;


}

/* Right side */
.Mobile_App_Development_Platform_Main_FAQ_main_rightside {
    width: 50%;
    /* right side width on laptop & large screens */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* FAQ Card */
.cardfaq {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 10px;
    cursor: pointer;
    position: relative;
    transition: border-bottom 0.3s ease;
    box-sizing: border-box;
}

.faqtitle {
    font-weight: 500;
    font-size: 18px;
    font-family: var(--font-body);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000000;
}

.arrowicon img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.faqdescription {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.3s ease,
        padding 0.3s ease;
    padding: 0 0;
    font-size: 16px;
    color: #555555;
    font-family: var(--font-body);
}

.cardfaq.active {
    border-bottom: 2px solid #023be280;
    border-radius: 1rem;
}

.cardfaq.active .faqdescription {
    max-height: 200px;
    padding: 10px 0;
}

.cardfaq.active .arrowicon img {
    transform: rotate(180deg);
}

/* Tablet */
/*@media (max-width: 1024px) {
    .Mobile_App_Development_Platform_Main_FAQ_main {
        width: 90%;
        gap: 30px;
    }

    .Mobile_App_Development_Platform_Main_FAQ_main_leftside,
    .Mobile_App_Development_Platform_Main_FAQ_main_rightside {
        width: 100%;*/
        /* stack on tablet */
  /*  }

    .faqtitle {
        font-size: 18px;
    }

    .faqdescription {
        font-size: 14px;
    }
}
*/
/* Mobile */
@media (max-width: 1024px) {
    .Mobile_App_Development_Platform_Main_FAQ_main {
        flex-direction: column;
        width: 100%;
        gap: 20px;
        align-items: center;
    }

    .Mobile_App_Development_Platform_Main_FAQ_main_leftside,
    .Mobile_App_Development_Platform_Main_FAQ_main_rightside {
        width: 100%;
        padding: 20px 10px;
    }

 .Mobile_App_Development_Platform_Main_FAQ_main_leftside {
        position: relative;   /* or relative */
        top: auto;
    }

    .faqtitle {
        font-size: 16px;
    }

    .faqdescription {
        font-size: 14px;
    }

    .faqbtncontact {
        width: 100%;
        justify-content: center;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .Mobile_App_Development_Platform_Main_FAQ {
        padding: 0px 10px;
    }

    .faqtitle {
        font-size: 15px;
    }

    .faqdescription {
        font-size: 13px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== Blog ====================================================================== */
/* ============================================================================================================================================================ */

.blogs-section {
    margin-bottom: 100px;
}

.blog-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: stretch;
    /* Important for equal height */
    margin-top: 2rem;
}

.left-blog,
.right-blogs {
    flex: 1;
    /* min-width: 300px; */
    display: flex;
    flex-direction: column;
}

.left-blog {
    box-shadow: 2px 2px 12px 0px #00000021;
    border-radius: 20px;
}

/* .blog-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      box-shadow: 2px 2px 14px 0px #00000021;
      margin-bottom: 20px;
      border: 1px solid #023BE280;
      padding: 18px 24px;
    } */
.left-blog .blog-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0px !important;
    /* Remove inner padding */
}

.right-blogs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.right-blogs .blog-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 30px;
}

.blog-card {
    background: #fff;
    border: 1px solid #023be280;
    border-radius: 20px;
    box-shadow: 2px 2px 14px 0px #00000021;
}

.blog-card img {
    width: 100%;
    height: auto;
    object-fit: cover !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    /* border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important; */
    display: block;
    border: none;
}

.blog-meta {
    font-size: 16px !important;
    color: var(--text-dark-gray);
    font-family: var(--font-body);
    font-weight: 400;
    padding-bottom: 7px;
}

.blog-meta span {
    color: #00a1c5;
    font-size: 18px;
    font-weight: 500;
    padding: 3px 12px;
    margin-right: 10px;
    border-radius: 20px;
    background: #00a1c514;
}

.blog-title {
    font-size: 22px;
    font-weight: 500;
    color: #000;
    font-family: var(--font-body);
    padding-top: 6px;
}

.left-blog-title {
    font-size: 22px;
    font-weight: 500;
    color: #000;
    font-family: var(--font-body);
    max-width: 520px;
    padding-top: 10px;
}

.left-blog .blog-meta {
    padding: 32px 40px !important;
}

.left-blog .blog-card .blog-meta .learn-more {
    margin-top: 5px;
}

.learn-more {
    color: var(--primary-blue);
    font-size: 20px;
    text-decoration: none;
    font-weight: 520;
    font-family: var(--font-body);
    display: inline-block;
}

@media (max-width: 768px) {
    .blog-cards {
        flex-direction: column;
    }

    .left-blog .blog-meta {
        padding: 15px 20px !important;
    }

    .why-choose-card-right-2 {
        margin-left: 0px !important;
    }

    .why-choose-card-left-2 {
        margin-right: 0px !important;
    }
}

/* ====== Responsive ====== */
@media (max-width: 992px) {
    .custom-mobile-apps-section {
        text-align: center;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .content-divider {
        max-width: 100%;
    }

    .feature-item {
        font-size: 18px;
    }

    .technologies {
        grid-template-columns: 1fr !important;
    }
}

/* ipad */
@media (max-width: 768px) {
    .features {
        margin-left: 10px;
        margin-right: 10px;
    }

        .custom-mobile-apps-section {
        background-size: cover;
        background-position: center;

        width: 100vw;
        max-width: 100vw;

        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);

        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .feature-item {
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    .content-box {
        padding-right: 40px !important;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== CONTACT US  ====================================================================== */
/* ============================================================================================================================================================ */

.contactmainfirst {
    margin-top: 8rem;
    margin-bottom: 3rem;
}

/* Tablet (iPad: 768px - 1024px) */
@media (max-width: 1024px) {
    .contactmainfirst {
        margin-top: 6rem;
        margin-bottom: 2.5rem;
    }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    .contactmainfirst {
        margin-top: 5rem;
        margin-bottom: 2rem;
    }
}

/* Section width */
.custom-width {
    width: 67%;
    margin: 0 auto;
}

@media (max-width: 1600px) {
    .custom-width {
        width: 87% !important;
    }
}

.ContactMainCardRow {
    width: 100%;
    display: flex;
    gap: 40px;
}

.contactleftside {
    width: 60%;
}

.contactrightside {
    width: 41%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
}

.required-star {
    position: absolute;
    color: red;
    font-size: 16px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.input-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

.floating-input {
    width: 100%;
    padding: 18px 12px 6px 12px;
    font-size: 16px;
    border: 1px solid #00a1c580 !important;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
    background: #fff;
}

.floating-input:focus {
    border-color: #00a1c5 !important;
    box-shadow: 0 0 5px #00a1c5 !important;
}

.floating-label {
    position: absolute;
    top: 16px;
    left: 12px;
    color: #555;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.2s ease-out;
    background: #fff;
    padding: 0 4px;
}

.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #00a1c5;
}

.red-star {
    color: red;
    font-size: 14px;
    margin-left: 2px;
}

/* Heading */

/* Heading: Our Services */
.ourservice {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 90px;
    line-height: 124%;
    letter-spacing: 0;

    /* Gradient Text */
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    /* for Safari/Chrome */
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* standard */
    color: transparent;
    /* fallback for unsupported browsers */
}

/* Paragraph */
.paragraph {
    font-size: 24px;
    color: #000;
    font-weight: 500;
}

/* Service Cards */

/* Grid container for multiple cards */
.ContactMainCard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    width: 80%;
}

.service-card {
    background: #fff;
    border: 2px solid rgba(0, 161, 197, 0.5);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    width: 355px;
    height: 192px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    padding: 20px 20px 20px 20px;
}

.service-card:hover .icon-image1 {
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

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

/* Icon with gradient */
.ImageIcon {
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    height: 60px;
    width: 60px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ImageIcon img {
    height: 30px;
    width: 30px;
}

/* Arrow icon */
.ArrowIcon {
    width: 40px;
    height: 40px;
    background: rgba(0, 161, 197, 0.04);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ArrowIcon img {
    width: 50%;
    height: 50%;
}

/* Card text */
.cardHeading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    color: #000000;
    margin-top: 15px;
}

.cardparagraph {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: #555555;
    margin-top: 5px;
}

/* Right  side form */

/* Contact Form */
.contact-form {
    width: 627px;
    min-height: 602px;
    max-height: fit-content;
    border: 2px solid rgba(0, 161, 197, 0.5);
    border-radius: 16px;
    box-shadow: 2px 2px 14px 0px #00000021;
    background: #fff;
    padding: 30px;
}

.form-title {
    font-weight: 600 !important;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Optional for non-WebKit browsers */
    background-clip: text;
    color: transparent;
    font-size: 24px !important;
    font-family: var(--font-heading);
}
.form-description {
    font-size: 18px !important;
    color: #000000;
    font-weight: 500;
    font-family: var(--font-body);
}

.form-descriptionsecond {
    font-size: 14px !important;
    font-family: var(--font-body);
    color: #555555;
    font-weight: 400;
    line-height: 24px;
    padding-bottom: 1rem !important;
}

.form-control,
.form-select {
    width: 100%;
    padding-left: 10px;
    height: 50px;
    padding-right: 20px;
    /* space for star */
    border: 1px solid #00a1c580;
    box-sizing: border-box;
    font-size: 16px;
}

.form-select {
    height: 100px !important;
}

textarea {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: #00a1c580;
    outline: none;
    box-shadow: 0 0 5px #00a1c580;
}

.required-star {
    position: absolute;
    top: 50%;
    color: #ff0000;
    font-weight: bold;
    pointer-events: none;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity 0.2s;
}

.required-star-textarea {
    position: absolute;
    top: 50%;
    color: #ff0000;
    font-weight: bold;
    pointer-events: none;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity 0.2s;
}

.required-star-project-details {
    position: absolute;
    top: 10px;
    left: 23%;
    color: #ff0000;
    font-weight: bold;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s;
}

.project-details {
    height: 100px;
}

/*  submit-btn-wrapper */

.submit-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.submit-btn {
    width: 80%;
    margin: auto;
    height: 50px;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 12px;
    margin-bottom: 12px;
}

.submit-btn:hover {
    background: linear-gradient(90.38deg, #00a1c5 2.06%, #023be2 99.67%);
}

.submit-btn img {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    rotate: 34deg;
    /* Initial state */
    transition: transform 0.4s ease;
    /* Smooth rotation */
}

.submit-btn img {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    transition: transform 0.4s ease;
    /* Smooth rotation */
}

.submit-btn:hover img {
    transform: rotate(-40deg);
    /* Full rotation */
}

/* for laptop   */

@media (max-width: 1440px) {
    .custom-width {
        width: 90%;
    }

    .contactrightside {
        margin-top: 5rem;
    }

    .ContactMainCard {
        width: 90%;
        gap: 20px;
    }

    .service-card {
        width: 100%;
        height: 180px;
        gap: 10px;
    }

    .contact-form {
        width: 100%;
        padding: 25px;
        min-height: auto;
    }
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 1024px) {
    .ContactMainCardRow {
        flex-direction: column;
        /* stack left and right side */
        gap: 2rem;
    }

    .contactleftside,
    .contactrightside {
        width: 100%;
        margin-top: 2rem;
    }

    .contactrightside {
        justify-content: flex-start;
    }

    .ContactMainCard {
        grid-template-columns: repeat(2, 1fr);
        /* single column for cards */
        width: 100%;
        gap: 20px;
    }

    .service-card {
        width: 100%;
        /* full width in smaller screens */
        height: auto;
        /* let height adjust to content */
    }

    .contact-form {
        width: 100%;
        padding: 20px;
        min-height: auto;
    }

    .ourservice {
        font-size: 60px;
        /* smaller heading */
        line-height: 1.1;
    }

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

@media (max-width: 480px) {
    .ourservice {
        font-size: 35px;
    }

    .ContactMainCard {
        grid-template-columns: 1fr;
        /* stack cards */
        gap: 15px;
        width: 100%;
    }

    .paragraph {
        font-size: 16px;
    }

    .service-card {
        padding: 15px;
    }

    .contact-form {
        padding: 15px;
    }

    .required-star-project-details {
        left: 41%;
    }

    .contact-form .form-description {
        font-size: 18px;
        color: #000000;
        font-weight: 500;
    }

    .contact-form .form-descriptionsecond {
        font-size: 12px;
        line-height: 24px;
    }
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  Contact Detail  section 2  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++   */

/*  respons */
.contact-detail-values {
    width: 55%;
    height: auto;
    display: grid;
    padding: 30px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    /* Apply semi-transparent gradient background */
    background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.05) 2.06%, rgba(0, 161, 197, 0.05) 99.67%);
}

.contact-detail-values {
    width: 55%;
    padding: 30px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.05) 2.06%, rgba(0, 161, 197, 0.05) 99.67%);
    /* subtle gradient background only */
}

.contact-detail-values-card {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 71%;
    margin-left: auto;
}

@media (max-width: 1600px) {
    .contact-detail-values-card {
        width: 90% !important;
    }
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .contact-detail-values {
        width: 100%;
    }

    .contact-detail-values-card {
        flex-direction: column;
        gap: 15px;
    }

    .contact-carddesing {
        width: 100%;
    }
}

/*  md screeen */

@media screen and (max-width: 1024px) {
    .contact-detail-values {
        width: 100%;
    }

    .contact-detail-values-card {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        width: 95%;
        margin: auto;
    }
}

.contact-carddesing {
    height: 131px;
    flex: 1;
    /* equal width for all cards */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 7px solid rgba(0, 161, 197, 0.5);
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
    border-radius: 12px;
    cursor: pointer;
    padding: 10px;
    gap: 8px;
    text-align: center;
    /* center content */
}

.contact-carddesing:hover {
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-carddesing img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.contact-carddesing p {
    font-size: 16px;
    color: #555555;
    font-weight: 300;
    margin: 0;
}

.contact-carddesing a {
    font-size: 14px;
    color: #000000;
    font-weight: 500;
    text-decoration: none;
    margin: 0;
    word-break: break-word;
    /* prevent overflow */
}

.contact-carddesing a:hover {
    text-decoration: underline;
    color: #023be2;
}

/*  for lap top  */

@media screen and (max-width: 1440px) {
    .contact-detail-values {
        width: 100%;
    }

    .contact-detail-values-card {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        width: 95%;
        margin: auto;
    }
}

/*  extra large screee */

@media screen and (min-width: 1920px) {
    .contact-detail-values {
        margin-top: -7rem;
    }
}

@media (max-width: 760px) {
    .custom-width {
        width: 90%;
    }

    .ourservice {
        font-size: 40px;
        text-align: center;
    }

    .paragraph {
        font-size: 16px;
        text-align: center;
    }

    .contactleftside,
    .contactrightside {
        width: 100%;
    }

    .contactrightside {
        margin-top: 1.5rem;
    }

    .ContactMainCard {
        grid-template-columns: repeat(1, 1fr);
        /* stack cards */
        gap: 15px;
        width: 100%;
    }

    .contact-detail-values {
        width: 100%;
        padding: 15px;
    }

    .contact-detail-values-card {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .contact-carddesing {
        width: 100%;
        padding: 15px;
        height: auto;
    }

    .submit-btn {
        width: 100%;
        font-size: 18px;
        height: 45px;
    }
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  Global Presence Section  section 3  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++   */
/* Global Presence Section */
.global-presence-section {
    width: 100%;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.1) 2%, rgba(0, 161, 197, 0.1) 100%);
    box-sizing: border-box;
    margin: 60px 0;
}

/* Title */
.global-presence-section h2 {
    font-size: 64px;
    color: #000;
    font-weight: 700;
    font-family: "Saira Condensed", sans-serif;
    text-align: center;
    line-height: 1.2;
}

/* Subtitle */
.global-presence-section p {
    font-size: 20px;
    color: #555;
    font-weight: 400;
    font-family: "DM Sans", sans-serif;
    text-align: center;
}

/* Cards Grid */
.global-presence-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    width: 70%;
    margin: auto;
}

@media (max-width: 1600px) {
    .global-presence-card {
        width: 90% !important;
        margin-top: 2rem !important;
    }
}
/* extra large screnn */

@media screen and (min-width: 1920px) {
    .global-presence-card {
        margin-top: 3rem;
    }
}

/* Card Item */
.global-presence-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background-color: #fff;
    border-radius: 16px;
    height: 180px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    text-align: center;
    cursor: pointer;
}

.global-presence-card-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Flag Image */
.global-presence-card-item-flag {
    width: 55px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    margin-top: 1rem;
}

/* Country Name */
.global-presence-card-item-country {
    font-size: 20px;
    font-weight: 500;
    color: #000 !important;
    font-family: var(--font-heading);
    margin-top: 0.6rem;
}

/* Address */
.global-presence-card-item-address {
    font-size: 14px;
    color: #555555;
    font-weight: 400;
    font-family: "DM Sans", sans-serif;
}

/* ✅ Responsive Adjustments */
@media (max-width: 1024px) {
    .global-presence-section h2 {
        font-size: 52px;
    }

    .global-presence-section p {
        font-size: 20px;
    }
}

/*  for laptop  */

@media (max-width: 1440px) {
    .global-presence-card {
        gap: 20px;
        width: 93%;
    }
}

@media (max-width: 768px) {
    .global-presence-section {
        padding: 60px 15px;
        gap: 10px;
    }

    .global-presence-section h2 {
        font-size: 38px;
    }

    .global-presence-section p {
        font-size: 18px;
    }

    .global-presence-card {
        gap: 20px;
        width: 95%;
    }

    .global-presence-card-item {
        min-height: auto;
        padding: 20px;
    }

    .global-presence-card-item-flag {
        width: 55px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .global-presence-section {
        padding: 40px 10px;
    }

    .global-presence-section h2 {
        font-size: 28px;
    }

    .global-presence-section p {
        font-size: 16px;
    }

    .global-presence-card {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .global-presence-card-item {
        padding: 16px;
    }

    .global-presence-card-item-country {
        font-size: 18px;
    }

    .global-presence-card-item-address {
        font-size: 15px;
    }
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  what-our-clients-say-section  section 4  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++   */

/* Section Wrapper */
.what-our-clients-say-section {
    width: 100%;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f9f9f9;
    box-sizing: border-box;
}

/* Section Title */
.what-our-clients-say-section h2 {
    font-size: 60px;
    color: #000;
    font-weight: 700;
    font-family: "Saira Condensed", sans-serif;
    text-align: center;
}

@media (max-width: 1600px) {
    .what-our-clients-say-section h2 {
        font-size: 49px;
    }
}

.what-our-clients-say-section p {
    font-size: 20px;
    color: #555;
    font-weight: 400;
    font-family: "DM Sans", sans-serif;
    text-align: center;
}

/* Cards Grid */
.card-client-review {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    width: 70%;
    margin: auto;
}

@media (max-width: 1600px) {
    .card-client-review {
        width: 90% !important;
        margin-top: 2rem !important;
    }
}

/*  extra large screeen */

@media screen and (min-width: 1920px) {
    .card-client-review {
        margin-top: 3rem;
    }
}

/* Single Card */
.card-client-review-item {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
    border: 2px solid rgba(0, 161, 197, 0.5);
    align-items: flex-start;
    text-align: left;
    padding: 30px;
    gap: 10px;
}

/* Hover Effect */
.card-client-review-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.rating {
    display: flex;
    gap: 5px;
}

.rating img {
    width: 20px;
    height: 20px;
}

.review-text {
    font-size: 14px !important;
    color: #555555 !important;
    font-weight: 400;
    font-family: var(--font-body);
    text-align: left !important;
}

.client-details {
    display: flex;
    flex-direction: column;
}

.client-name {
    font-size: 16px !important;
    color: #000000 !important;
    font-weight: 600 !important;
    font-family: var(--font-body);
}

.client-company {
    font-size: 14px !important;
    color: #555555 !important;
    font-weight: 400 !important;
    font-family: var(--font-body) !important;
    text-align: left !important;
}

/* ========================= */
/* Responsive Media Queries  */
/* ========================= */

/*  laptop */

@media screen and (max-width: 1440px) {
    .card-client-review {
        width: 90%;
        gap: 25px;
    }
}

/* Tablets */
@media screen and (max-width: 1024px) {
    .what-our-clients-say-section h3 {
        font-size: 50px;
    }

    .what-our-clients-say-section p {
        font-size: 22px;
    }

    .card-client-review {
        width: 90%;
    }
}

/* Mobile Devices */
@media screen and (max-width: 768px) {
    .what-our-clients-say-section {
        padding: 60px 15px;
        gap: 10px;
    }

    .what-our-clients-say-section h3 {
        font-size: 36px;
    }

    .what-our-clients-say-section p {
        font-size: 18px;
    }

    .card-client-review {
        width: 100%;
        gap: 20px;
    }

    .card-client-review-item {
        padding: 20px;
    }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
    .what-our-clients-say-section h3 {
        font-size: 28px;
    }

    .what-our-clients-say-section p {
        font-size: 16px;
    }

    .review-text {
        font-size: 13px;
    }

    .client-name {
        font-size: 14px;
    }

    .client-company {
        font-size: 12px;
    }

    .rating img {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== MOBILE APP DEVELOPEMT ====================================================================== */
/* ============================================================================================================================================================ */

/* Main container */
.Mobile_App_Development_Platform_Main {
    margin: 0 auto;
    width: 67%;
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Mobile_App_Development_Platform_Main {
        width: 87% ;
    }
}

/* Section One */
.Mobile_App_Development_Platform_SectionOne {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 30px;
    flex-wrap: wrap;
    /* Allows wrapping on smaller screens */
}

/* Left & Right Section */
.Mobile_App_Development_Platform_SectionOne_left,
.Mobile_App_Development_Platform_SectionOne_right {
    box-sizing: border-box;
    min-width: 300px;
}

/* LEFT – grows more */
.Mobile_App_Development_Platform_SectionOne_left {
    flex: 1.3;                  /* 👈 wider */
    padding-right: 15px;
}

/* RIGHT – grows less */
.Mobile_App_Development_Platform_SectionOne_right {
    flex: 1;                    /* 👈 narrower */
    padding-left: 15px;
}

/* Left Section */
.Mobile_App_Development_Platform_Heading {
    display: block;                /* 🔥 force its own line */

    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 80px;
    line-height: 1.05;
    margin: 0 0 0.75rem 0;          /* spacing before sub-heading */

    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


.Mobile_App_Development_Platform_Sub_Heading {
    display: block;                /* 🔥 ALWAYS next line */

    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 80px;
    line-height: 1.1;
    margin: 0;

    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: #000 !important;
}

.Mobile_App_Development_Platform_Description {
    color: #555;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 19px;
    margin-top: 1rem;
}

/* Platform icons list */
.Mobile_App_Development_Platform_Icons {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    padding: 0 10px;
}

.Mobile_App_Development_Platform_IconAndText {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.Mobile_App_Development_Platform_Icon {
    width: 24px;
    height: 24px;
    margin-top: 0.5rem;
}

.Mobile_App_Development_Platform_Text {
    color: #000;
    font-weight: 500;
    font-size: 22px;
    font-family: var(--font-body);
}

.Platform_Trust_Badges {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 28px; /* space below icons */
    width: 100%;      /* same width as left section */
}

.Trust_Badge_Item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #000000;
    white-space: nowrap;
    font-family: var(--font-body);
    font-weight: 500;

}

.Trust_Badge_Item img {
    width: 36px;
    height: auto;
}

.Trust_Badge_Divider {
    width: 1px;
    height: 32px;
    background: #ddd;
}


/* Right Section - Form */
.Mobile_App_Development_Platform_Form {
    width: 100%;
    min-height: 502px;
    /*border: 2px solid rgba(0, 161, 197, 0.5);*/
    border-radius: 40px;
    /*box-shadow: 2px 2px 14px 0px #00000021;*/
    background: #f5f7fe;
    padding: 30px;
    margin: 0 auto;
}

@media (max-width: 1536px) {
    .Mobile_App_Development_Platform_Form {
        width: 100%;
    }

    .Mobile_App_Development_Platform_SectionOne_right {
        padding-left: 0px !important;
    }
}

.Mobile_App_Development_Platform_Form_Title {
    font-weight: 600;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    margin-bottom: 2rem;
}

.Mobile_App_Development_Platform_InputWrapper {
    position: relative;
    margin-bottom: 1rem;
}

.mobileAppFullName {
    margin-top: 1rem;
}

.Mobile_App_Development_Platform_Input {
    width: 100%;
    padding: 18px 12px 6px 12px;
    font-size: 16px;
    border: 1px solid #00a1c580;
    border-radius: 6px;
    background: #f5f7fe;
    outline: none;
}

.Mobile_App_Development_Platform_Input:focus {
    border-color: #00a1c5;
    box-shadow: 0 0 5px #00a1c5;
}

.Mobile_App_Development_Platform_Label {
    position: absolute;
    top: 16px;
    left: 12px;
    color: #555;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.2s ease-out;
    background: #f5f7fe;
    padding: 0 4px;
}

.Mobile_App_Development_Platform_Input:focus + .Mobile_App_Development_Platform_Label,
.Mobile_App_Development_Platform_Input:not(:placeholder-shown) + .Mobile_App_Development_Platform_Label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: #00a1c5;
}

.Mobile_App_Development_Platform_RedStar {
    color: red;
    font-size: 14px;
    margin-left: 2px;
}

/* Submit Button */
.Mobile_App_Development_Platform_SubmitWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.Mobile_App_Development_Platform_SubmitBtn {
    width: 80%;
    height: 50px;
    background: var(--gradient-blue);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 2rem auto 12px;
    transition: background 0.3s ease;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    text-decoration: none;
}

.Mobile_App_Development_Platform_SubmitBtn:hover {
    background: linear-gradient(90.38deg, #00a1c5 2.06%, #023be2 99.67%);

    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(2, 59, 226, 0.3);
}

.Mobile_App_Development_Platform_SubmitBtn img {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    transition: transform 0.4s ease;
    rotate: -15deg;
}

.Mobile_App_Development_Platform_SubmitBtn:hover img {
    transform: rotate(50deg);
}

.Mobile_App_Development_Platform_twoinput {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.InputBothValues {
    width: 100% !important;
}

/* File Upload */
.upload-wrapper {
    border: 1.5px dashed #00a1c580;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    background: #f5f7fe;
    cursor: pointer;
    transition: border-color 0.3s ease;
    width: 100%;
}

.upload-wrapper:hover {
    border-color: #00a1c5;
}

.upload-icon {
    width: 20px;
    height: 20px;
    margin: auto;
}

.upload-text {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #555;
    font-family: var(--font-body);
}

.upload-subtext {
    font-size: 12px;
    color: #918f8f;
    font-family: var(--font-body);
    font-weight: 400;
}

input[type="file"] {
    display: none;
}

label {
    display: block;
}

/* ========== RESPONSIVE STYLES ========== */
@media (max-width: 1440px) {
    .Mobile_App_Development_Platform_Form {
        padding: 25px;
        min-height: auto;
    }

    .Mobile_App_Development_Platform_Heading,
    .Mobile_App_Development_Platform_Sub_Heading {
        font-size: 66px;
          line-height: 1.15;


    }

    .Mobile_App_Development_Platform_Main {
        width: 90%;
        margin: auto;
        margin-top: 3rem;
    }
}

@media (max-width: 1024px) {
    .Mobile_App_Development_Platform_SectionOne {
        flex-direction: column;
        gap: 2rem;
    }

    .Mobile_App_Development_Platform_SectionOne_left {
        width: 100%;
        /*padding-top: 4rem;*/
    }

    .Mobile_App_Development_Platform_Heading,
    .Mobile_App_Development_Platform_Sub_Heading {
        font-size: 60px;
          line-height: 1.15;
    }

.Platform_Trust_Badges {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.Trust_Badge_Item {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 0;                 /* 👈 CRITICAL */
    flex: 1;                      /* 👈 auto shrink */
    font-size: 12px;
}


    .Trust_Badge_Item img {
        width: 32px;
        flex-shrink: 0;             /* 👈 icon never jumps */
    }
    
}

@media (max-width: 768px) {
    .Mobile_App_Development_Platform_Main {
        width: 90%;
    }

    .Mobile_App_Development_Platform_twoinput {
        width: 100%;
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .InputBothValuesMobile {
        margin-top: -1rem;
    }

    .Mobile_App_Development_Platform_Heading,
    .Mobile_App_Development_Platform_Sub_Heading {
        font-size: 45px;
        line-height: 54px;
    }

    .Mobile_App_Development_Platform_Description {
        font-size: 18px;
        line-height: 28px;
    }

    .Mobile_App_Development_Platform_Text {
        font-size: 20px;
    }

    .Mobile_App_Development_Platform_Form_Title {
        font-size: 28px;
    }

   .Platform_Trust_Badges {
    flex-direction: column;
    align-items: center;     /* 👈 center items horizontally */
    justify-content: center; /* 👈 safe for consistency */
    gap: 16px;
    text-align: center;
}


    .Trust_Badge_Divider {
        display: none;
    }

 .Trust_Badge_Item {
        white-space: normal;
        font-size: 14px;
        min-width: 260px;     /* 👈 increase width */
        max-width: 90%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
      .Platform_Trust_Badges {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .Trust_Badge_Item {
        justify-content: center;
        gap: 8px;
    }

    .Trust_Badge_Item img {
        width: 30px;
    }
}




/*  app devlopemt  */

.trusted-by-section {
    width: 100%;
    background-color: #eeeeee;
    padding: 2rem 0;
    margin-top: 4rem;
    overflow: hidden;
    margin-bottom: 3rem;
}

.trusted-carousel {
    display: flex;
    align-items: center;
    width: 67%;
    margin: 0 auto;
    overflow: hidden;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .trusted-carousel {
        width: 87% !important;
    }
}

/* Fixed logo */
.trusted-fixed {
     position: relative;
    flex: 0 0 auto;
    /* prevent shrinking */
    margin-right: 21.5px;
    /* space between fixed and sliding */
}


/* Vertical dotted divider */
.trusted-fixed::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;              /* controls gap from left content */
    transform: translateY(-50%);

    height: 60px;
    border-right: 2px dotted #2b78ff; /* blue dotted line */
}

/* Wrapper ensures sliding track doesn't overlap fixed image */
.trusted-track-wrapper {
    overflow: hidden;
    flex: 1;
    /* take remaining width */
}

/* Sliding track */
.trusted-track {
    display: flex;
    flex-wrap: nowrap;
    animation: slideLeft 20s linear infinite;
}

/* Mobile speed (50s) */
@media (max-width: 1024px) {
    .trusted-track {
        animation: slideLeft 50s linear infinite;
        margin-bottom: 2rem;
    }

    .mobileapp {
        animation: slideLeft 10s linear infinite !important;
        margin-bottom: 0rem !important;
    }
}

/* Logos */
.logo-img {
    height: 64px;
    width: auto;
    object-fit: contain;
}

/* Animation */
@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }

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

/* Responsive */
@media (max-width: 992px) {
    .logo-img {
        height: 56px;
    }
}

@media (max-width: 768px) {
    .logo-img {
        height: 50px;
    }
}

@media (max-width: 400px) {
    .logo-img {
        height: 45px;
    }


}

/* ============================================================================================================================================================ */
/* ======================================================================== Mobile_App_Development_Services  ====================================================================== */
/* ============================================================================================================================================================ */

/* Section Container */
.Mobile_App_Development_Services {
    width: 100%;
    background-color: #5d5d5d08;
    padding: 50px 0;
    text-align: center;
    /* Center the title and description */
    margin-top: 3rem;
}

/* Main Title */
.Mobile_App_Development_title {
    color: #000000;
    font-weight: 600;
    font-size: 60px;
    font-family: var(--font-heading);
    line-height: 123%;
    margin: 0 0 10px 0;

    /* Add horizontal padding for responsiveness */
}

/* Description */
.Mobile_App_Development_description {
    color: #555555;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    /* Add horizontal padding for responsiveness */
}

/* Card Listing Grid */
.Mobile_App_Development_cardlisting {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns in one row */
    gap: 30px;
    /* Space between cards */
    margin: 0 auto;
    /* Center the grid */
    width: 67%;
    padding-top: 2.4rem;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Mobile_App_Development_cardlisting {
        width: 87%;
    }
}

/* Individual Cards */
.Mobile_App_Development_card {
    background: #ffffff21;
    border: 1px solid #023be280;
    box-shadow: 4px 4px 9px 0px #00000029;
    padding: 30px;
    /* Increase padding for better content spacing */
    border-radius: 10px;
    text-align: left;
    /* Align card content to left for readability */
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    /* Add hover effect */
    cursor: pointer;
}

.Mobile_App_Development_card:hover {
    transform: translateY(-5px);
    /* Slight lift on hover */
    box-shadow: 6px 6px 15px 0px #00000040;
    /* Enhanced shadow on hover */
}

/* Card Title */
.Mobile_App_Development_card_tittle {
    display: flex;
    align-items: center;
    gap: 16px;

    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 15px 0;

    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* for future support */
}

/* icon circle */
.card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #EAF2F7;

    display: flex;                 /* 🔥 critical */
    align-items: center;
    justify-content: center;

    flex-shrink: 0;                /* 🔥 prevent wrap */
}

/* icon image */
.card-icon img {
    width: 28px;
    height: 28px;

    display: inline-block;         /* 🔥 OVERRIDES global img{display:block} */
    vertical-align: middle;
}


/* Card Description */
.Mobile_App_Development_descrition {
    color: #555555;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 20px;
    margin: 0;
    /* Reset margin */
    line-height: 150%;
    /* Improve readability with more line height */
}

.happy_customer_btn_main {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.Schedulecallbtn{
    width: 30% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
}


.Schedulecallmainsection{
    width: 100%;
    background-color: #5d5d5d08;
    padding: 60px 0 !important;
    text-align: center;
    margin-top: 60px
}

.happy_customer_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}



@media (max-width: 1500px) {
    .Mobile_App_Development_Platform_SubmitBtn {
        width: 85%;
        font-size: 18px;
        height: 48px;
    }
}


@media (max-width: 1480px) {
    .Mobile_App_Development_cardlisting {
        width: 90%;
        margin: auto;
    }

    .happy_customer_btn {
        width: 70%;
    }
}

@media (max-width: 1024px) {
    .Mobile_App_Development_Platform_SubmitBtn {
        width: 100%;
        font-size: 16px;
        height: 46px;

    }

     
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .Mobile_App_Development_title {
        font-size: 48px;
    }

    .Mobile_App_Development_Services {
        padding: 70px 0;
        text-align: left;
    }

    .happy_customer_btn {
        width: 100%;
    }

    .Schedulecallbtn{
    width: 87% !important;
    padding-bottom: 1rem;

}

    .Mobile_App_Development_Platform_SubmitBtn {
       width: 100%;
        font-size: 16px;
        height: 45px;
    }

    .Mobile_App_Development_description {
        font-size: 20px;
        /* Smaller description on mobile */
    }

    .Mobile_App_Development_cardlisting {
        grid-template-columns: 1fr;
        /* Stack cards vertically on small screens */
        gap: 20px;
        width: 90%;
    }

    .Mobile_App_Development_card {
        padding: 20px;
        /* Reduce padding on mobile */
    }

    .Mobile_App_Development_card_tittle {
        font-size: 24px;
        /* Smaller card title on mobile */
    }

    .Mobile_App_Development_descrition {
        font-size: 16px;
        /* Smaller card description on mobile */
    }
}

@media (max-width: 480px) {
   .Mobile_App_Development_Platform_Main {
        width: 100%;
        margin-top: 3rem;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

     .Mobile_App_Development_cardlisting {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        width: 100%;
        gap:14px;
    }

    .Mobile_App_Development_Platform_Heading,
    .Mobile_App_Development_Platform_Sub_Heading {
        font-size: 32px;
        line-height: 40px;
    }

    .Mobile_App_Development_Platform_Description {
        font-size: 16px;
        line-height: 24px;
    }

    .Mobile_App_Development_Platform_Text {
        font-size: 18px;
    }

    .Mobile_App_Development_Platform_Form {
        padding: 20px;
    }

    .Mobile_App_Development_Platform_Form_Title {
        font-size: 22px;
    }

    .Mobile_App_Development_Platform_SubmitBtn {
        font-size: 14px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    .Mobile_App_Development_Services {
        padding: 0px 0;
        /* Reduce section padding on very small screens */
    }

    .Mobile_App_Development_title {
        font-size: 36px;
    }

    .Mobile_App_Development_description {
        font-size: 18px;
    }


}

/* ============================================================================================================================================================ */
/* ======================================================================== Mobile_App_Development_Modern_Mobile_Solutions   ====================================================================== */
/* ============================================================================================================================================================ */

/* Section Container */
.Mobile_App_Development_Modern_Mobile_Solutions {
    width: 100%;
    background: #023be2cc;
    /* Semi-transparent blue background */
    padding: 60px 0;
    /* Top and bottom padding for spacing */
    text-align: center;
    /* Center the title and description */
    color: #ffffff;
    /* Default text color for white theme */
    margin-bottom: 3rem;
}

/* Main Title */
.Mobile_App_Development_Modern_Mobile_Solutions_title {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 60px;
    line-height: 123%;
    font-weight: 600;
    margin: 0 0 10px 0;
    /* Bottom margin for spacing */
    padding: 0 20px;
    /* Horizontal padding for responsiveness */
}

/* Description */
.Mobile_App_Development_Modern_Mobile_Solutions_description {
    color: #ffffff;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 28px;
    line-height: 150%;
    /* Improved readability */
    margin: 0 0 40px 0;
    /* Bottom margin before cards */
    padding: 0 20px;
    /* Horizontal padding for responsiveness */
}

/* Card Listing Grid: One row, 4 equal columns */
.Mobile_App_Development_Modern_Mobile_Solutions_Cardlisting {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Four equal columns in one row */
    gap: 20px;
    /* Space between cards */
    margin: 0 auto;
    /* Center the grid */
    padding: 0 20px;
    /* Horizontal padding for smaller screens */
    width: 67%;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Mobile_App_Development_Modern_Mobile_Solutions_Cardlisting {
        width: 87% ;
    }
}

/* Individual Cards */
.Mobile_App_Development_Modern_Mobile_Solutions_Card {
    background: #ffffff03;
    /* Subtle transparent white background */
    border: 1px solid #ffffff;
    /* White border */
    box-shadow: 4px 4px 9px 0px #00000029;
    padding: 30px 20px;
    /* Padding for content spacing */
    border-radius: 14px;
    /* Rounded corners */
    display: flex;
    flex-direction: column;
    /* Stack content vertically */
    justify-content: center;
    /* Center vertically */
    align-items: center;
    /* Center horizontally */
    text-align: center;
    /* Center text within card */
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    /* Smooth hover effect */
    height: 360px;
    cursor: pointer;
}

.Mobile_App_Development_Modern_Mobile_Solutions_Card:hover {
    transform: translateY(-5px);
    /* Slight lift on hover */
    box-shadow: 6px 6px 15px 0px #00000040;
    /* Enhanced shadow on hover */
}

/* Card Number (e.g., 01) */
.Mobile_App_Development_Modern_Mobile_Solutions_Card_number {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 48px;
    line-height: 100%;
    font-weight: 700;
    /* Extra bold for emphasis */
    margin: 0 0 10px 0;
    /* Bottom margin */
}

/* Card Subtitle (e.g., Android App Development) */
.Mobile_App_Development_Modern_Mobile_Solutions_Card_subtitle {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 123%;
    font-weight: 600;
    margin: 0 0 15px 0;
    /* Bottom margin */
}

/* Card Description */
.Mobile_App_Development_Modern_Mobile_Solutions_Card_description {
    color: #ffffff;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 16px;
    /* Smaller for descriptions */
    line-height: 150%;
    /* Improved readability */
    margin: 0;
    /* Reset margin */
}

@media (max-width: 1480px) {
    .Mobile_App_Development_Modern_Mobile_Solutions_Cardlisting {
        width: 90%;
        margin: auto;
    }

    .Mobile_App_Development_Modern_Mobile_SolutionsTitltMain {
        width: 100%;
    }
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .Mobile_App_Development_Modern_Mobile_Solutions_Cardlisting {
        grid-template-columns: repeat(2, 1fr);
        /* Two columns on tablets */
        gap: 25px;
        padding: 0;
        width: 90%;
        margin: auto;
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_title {
        font-size: 56px;
        /* Slightly smaller title */
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_description {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .Mobile_App_Development_Modern_Mobile_Solutions {
        /*padding: 50px 0;*/
        /* Reduce section padding */
        text-align: left;
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_title {
        font-size: 48px;
        /* Smaller title on mobile */
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_description {
        font-size: 20px;
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_Cardlisting {
        grid-template-columns: 1fr;
        /* Single column on small screens */
        gap: 20px;
        padding: 0;
        width: 90%;
        margin: auto;
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_Card {
        padding: 25px 15px;
        height: 200px;
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_Card_number {
        font-size: 36px;
        /* Smaller number on mobile */
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_Card_subtitle {
        font-size: 20px;
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_Card_description {
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
   /* .Mobile_App_Development_Modern_Mobile_Solutions {
        padding: 40px 0;
    }*/

    .Mobile_App_Development_Modern_Mobile_Solutions_title {
        font-size: 36px;
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_description {
        font-size: 18px;
    }

    .Mobile_App_Development_Modern_Mobile_Solutions_Card_number {
        font-size: 32px;
    }

     .Mobile_App_Development_Modern_Mobile_Solutions_Cardlisting {
        width: 100%;
        margin: 0;
        gap:14px;
        padding-left: 10px;
        padding-right: 10px;
        grid-template-columns: 1fr;
        box-sizing: border-box;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== Our mobile app development tech stack  ====================================================================== */
/* ============================================================================================================================================================ */

/* Main Container */
.Mobile_App_Development_Platform_tech_stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    width: 100%;
    background: #fff;
    text-align: center;
}

.Mobile_App_Development_Platform_tech_stack_Heading {
    width: 65%;
    margin: auto;
    margin-bottom: 2rem;
}

/* Modal Container */
.Mobile_App_Development_Platform_tech_stack_language_modal {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Mobile_App_Development_Platform_tech_stack_language_modal {
        width: 87% ;
    }
}

/* Each Section Container */
.Mobile_App_Development_Platform_tech_stack_language {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 2px solid #023be2;
    border-radius: 1rem;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    gap: 30px;
}

/* Left Button */
.Mobile_App_Development_Platform_tech_stack_languagebtn {
    background-color: #0156d9;
    color: #fff;
    font-weight: 600;
    border: none;
    padding: 1rem 1.5rem;
    min-width: 25%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}

.Mobile_App_Development_Platform_tech_stack_languagebtn:hover {
    background-color: #023be2;
}

/* Right Content List */
.language-frameworks-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
    flex: 1;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    gap: 40px;
}

.language-frameworks-list span {
    white-space: nowrap;
}

.language-frameworks-list .divider {
    color: #000;
}


@media (max-width: 1280px) {
    .Mobile_App_Development_Platform_tech_stack_language_modal {
        width: 90%;
    }

    .Mobile_App_Development_Platform_tech_stack_Heading {
        width: 90%;
        margin: auto;
        /* removes auto centering */
        text-align: left;
        /* ensures text aligns to left */
        /* optional: add left margin if needed */
        /* margin-left: 5%; */
    }

     .Mobile_App_Development_Platform_tech_stack_languagebtn {
        min-height: 90px;   /* increase height when text wraps */
        padding: 0rem 1.5rem;
    }
}


/* Responsive for Tablets & Small Laptops */
@media (max-width: 1024px) {
    .Mobile_App_Development_Platform_tech_stack_language_modal {
        width: 85%;
        gap: 40px;
    }

    .language-frameworks-list {
        gap: 1rem 1.5rem;
    }


}

/* Responsive for Tablets & Mobile */
@media (max-width: 768px) {
    .Mobile_App_Development_Platform_tech_stack_language_modal {
        width: 90%;
        gap: 30px;
    }

    .Mobile_App_Development_Platform_tech_stack_Heading {
        width: 97%;
        margin: auto;
        /* removes auto centering */
        text-align: left;
        /* ensures text aligns to left */
        /* optional: add left margin if needed */
        /* margin-left: 5%; */
    }

    .Mobile_App_Development_Platform_tech_stack {
        padding-top: 30px;
    }

    .Mobile_App_Development_Platform_tech_stack_language {
        gap: 0;
    }

    .Mobile_App_Development_Platform_tech_stack_language_modal {
        /* margin: 0 0; */
        margin-top: 2rem !important;
    }

    .Mobile_App_Development_Platform_tech_stack_language {
        flex-direction: column;
        align-items: stretch;
    }

    .Mobile_App_Development_Platform_tech_stack_languagebtn {
        width: 100%;
        border-radius: 1rem 1rem 0 0;
    }

    .language-frameworks-list {
        justify-content: flex-start;
        padding: 0.75rem 1rem;
        gap: 0.5rem 0.75rem;
    }
}

/* Responsive for Small Mobile */
@media (max-width: 480px) {
    .language-frameworks-list {
        font-size: 14px;
        gap: 0.4rem 0.5rem;
    }

    .Mobile_App_Development_Platform_tech_stack_languagebtn {
        padding: 0.8rem 1rem;
        font-size: 14px;
    }

     .Mobile_App_Development_Platform_tech_stack_language_modal {
        width: 100%;
         margin-left: 0;
        margin-right: 0;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        gap: 14px; /* optional: tighter spacing on mobile */
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== Our Mobile App Development Process  ====================================================================== */
/* ============================================================================================================================================================ */

.Mobile_App_Development_Platform_App_Development_Process {
    width: 100%;
    background-color:#5D5D5D08;
    padding: 60px 0 60px 0;
    /* top | right | bottom | left */
    text-align: center;
}

.Mobile_App_Development_Platform_App_Development_Process_tittle {
    width: 70%;
    margin: auto;
}

.Mobile_App_Development_Platform_App_Development_Process_CardDesing {
    width: 67%;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 10rem;
    padding-top: 2rem;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Mobile_App_Development_Platform_App_Development_Process_CardDesing {
        width: 87% ;
    }
}

.Mobile_App_Development_Platform_App_Development_Process_CardDesing_leftsideImage {
    width: 30%;
    height: 765px;
}

.Mobile_App_Development_Platform_App_Development_Process_CardDesing_leftsideImageValues {
    height: 95%;
    width: 95%;
}

.Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside {
    width: 65%;
    height: 826px;
    background-color: #fff;
    padding: 40px 0;
    border-radius: 1rem;
    overflow-y: auto;
}

/* Card Container */
.Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside_card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 2rem;
    padding: 0 50px 1.5rem;
    /* even spacing left-right + bottom */
    border-bottom: 2px solid rgba(2, 59, 226, 0.1);
}

.Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside_card:last-child {
    border-bottom: none;
    margin-bottom: 0;
    /* remove extra gap after last card */
    padding-bottom: 0;
}

/* Title + Number Row */
.Process_CardDesing_rightside_card_tittleNumber {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* title left, number right */
    align-items: flex-end;
    /* align text baseline nicely */
    margin-bottom: 0.75rem;
}

/* Title */
.WireframingPrototyping {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.3;
    color: #023be2;
}

/* Number */
.WireframingPrototypingNumber {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 48px;
    line-height: 1.2;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #023be2;
}

/* Description */
.WireframingPrototypingDescription {
    font-family: var(--font-body);
    color: #555;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    margin-top: 0.5rem;
    max-width: 90%;
    /* keep readable line length */
}

/* Always show red scrollbar */
.Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside::-webkit-scrollbar {
    width: 8px;
    /* scrollbar width */
}

.Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside::-webkit-scrollbar-track {
    background: transparent;
}

.Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside::-webkit-scrollbar-thumb {
    background: rgba(2, 59, 226, 0.3);  
    border-radius: 6px;
}

/* Optional: smooth red animation (glowing effect) */
.Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside::-webkit-scrollbar-thumb:hover {
background: rgba(2, 59, 226, 0.3);
}

.Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside::-webkit-scrollbar-thumb {
    animation: pulseRed 1.5s infinite alternate;
}

@keyframes pulseRed {
    0% {
        background: #00a1c5;
    }

    100% {
        background: #00a1c5;
    }
}

/* Base (Desktop/Laptop >= 1200px) is already fine */

/* Large Laptop (1024px – 1199px) */
@media (max-width: 1199px) {
    .Mobile_App_Development_Platform_App_Development_Process_tittle,
    .Mobile_App_Development_Platform_App_Development_Process_CardDesing {
        width: 85%;
    }

    .Mobile_App_Development_Platform_App_Development_Process_CardDesing {
        gap: 6rem;
    }

    .WireframingPrototyping {
        font-size: 24px;
    }

    .WireframingPrototypingNumber {
        font-size: 42px;
    }
}

/* Tablet / Medium (768px – 1023px) */
@media (max-width: 1023px) {
    .Mobile_App_Development_Platform_App_Development_Process_tittle,
    .Mobile_App_Development_Platform_App_Development_Process_CardDesing {
        width: 90%;
    }

    .Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside_card {
        padding: 3px 0px 10px 20px;
    }

    .Mobile_App_Development_Platform_App_Development_Process_CardDesing {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .Mobile_App_Development_Platform_App_Development_Process_CardDesing_leftsideImage {
        width: 70%;
        height: auto;
    }

    .Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside {
        width: 100%;
        height: auto;
        max-height: 600px;
    }
}

/* Mobile (<= 767px) */
@media (max-width: 767px) {
    .Mobile_App_Development_Platform_App_Development_Process {
        text-align: left;
    }

    .Mobile_App_Development_Platform_App_Development_Process_tittle {
        width: 100%;
    }

    .Mobile_App_Development_Platform_App_Development_Process_CardDesing {
        width: 90%;
    }

    .Mobile_App_Development_Platform_App_Development_Process_CardDesing {
        flex-direction: column;
        gap: 2rem;
    }

    .Mobile_App_Development_Platform_App_Development_Process_CardDesing_leftsideImage {
        width: 100%;
        height: auto;
    }

    .Mobile_App_Development_Platform_App_Development_Process_CardDesing_rightside {
        width: 100%;
        height: auto;
        padding: 20px;
    }

    .WireframingPrototyping {
        font-size: 22px;
    }

    .WireframingPrototypingNumber {
        font-size: 36px;
    }

    .WireframingPrototypingDescription {
        font-size: 16px;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .Mobile_App_Development_Platform_App_Development_Process_CardDesing {
        width: 100%;
        margin: 0;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
}



/* ============================================================================================================================================================ */
/* ======================================================================== Our Mobile App Development 24/7 Support  ====================================================================== */
/* ============================================================================================================================================================ */

.Mobile_App_Development_Platform_Main_Support_Main {
    background-color: white;
    /* light grey background */
    padding: 60px 10px;
    text-align: center;
    /*margin-bottom: 3rem;*/
}

.Mobile_App_Development_Platform_Main_Support_Card_listing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 67%;
    margin: auto;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Mobile_App_Development_Platform_Main_Support_Card_listing {
        width: 87% ;
    }
}

@media (max-width: 768px) {
    .Mobile_App_Development_Platform_Main_Support_Card_listing {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        width: 90%;
        margin: auto;
    }

    .Mobile_App_Development_Platform_Main_Support_Main {
        background-color: #f5f5f5;
        /* light grey background */
        padding: 60px 10px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .Mobile_App_Development_Platform_Main_Support_Card_listing {
        width: 100%;
        margin: 0;
        padding-left: 4px;
        padding-right: 4px;
        box-sizing: border-box;
        gap: 14px;
    }
}


.Support_Card {
    position: relative;
    background: #5D5D5D08;
    border-radius: 1rem;
    /*box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);*/
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* align content from top */
    align-items: flex-start;
    /* align everything to the left */
    overflow: visible;
    /* allow number to appear outside */
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    /* smooth animation */
    cursor: pointer;
}

/* Hover effect */
.Support_Card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
}


.Support_Card_Number {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: 700;
    font-size: 50px;
    color: #c5c5c5;
    background: #ffffff;
border-top-right-radius: 1rem;
    font-family: var(--font-heading);
    z-index: 999;
    backdrop-filter: blur(5px);
}

.Support_Card_Title {
    font-family: var(--font-heading);
    font-weight: 600;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 30px;
    margin-bottom: 10px;
    text-align: left;
    /* ensure left alignment */
}

.Support_Card_Top {
    display: flex;
    justify-content: flex-start;
    /* icon stays left */
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
    /* optional spacing between icon and title/content */
}

.Support_Card_Description {
    color: #555555;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 15px;
    text-align: left;
    /* ensure left alignment */
}

.Support_Card_Icon {
    width: 80px;
    height: 80px;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: #ffffff;*/
    /*box-shadow: -5px 4px 22px rgba(0, 0, 0, 0.2);*/
     background: linear-gradient(
        90.38deg,
        rgba(2, 59, 226, 0.04) 2.06%,
        rgba(0, 161, 197, 0.04) 99.67%
    );
}

.Support_Card_IconImage {
    width: 46%;
    height: 46%;
}

/* ============================================================================================================================================================ */
/* ======================================================================== Whatsapp Clone  ====================================================================== */
/* ============================================================================================================================================================ */

/* Container for all social media items */
.Mobile_App_Development_Platform_SocialMedia {
    width: 100%;
    display: flex;
    gap: 40px;
    /* spacing between items */
    flex-wrap: wrap;
    /* responsive wrap on smaller screens */
}

/* Individual social media clone card */
.Instagram_Clone {
    flex: 1 1 calc(50% - 20px);
    /* 2 items per row with spacing */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* align icon and text to start */
    gap: 15px;
    /* space between icon and text */
    padding: 20px;
    height: 131px;
    background-color: rgba(0, 161, 197, 0.04);
    border-left: 13px solid #00a1c5;
    border-radius: 8px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    border-radius: 2rem;
    cursor: pointer;
}

.Instagram_Clone:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Icon styling */
.Instagram_Clone_Icon {
    height: 60px;
    width: 60px;
    object-fit: contain;
    /* keep aspect ratio */
}

/* Heading styling */
.Instagram_Clone_heading {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 20px;
    color: #000000;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .Instagram_Clone {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    .Instagram_Clone_Icon {
        height: 50px;
        width: 50px;
    }

    .Instagram_Clone_heading {
        font-size: 18px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== Whatsapp Clone  ====================================================================== */
/* ============================================================================================================================================================ */

.Messaging_Solutions {
    width: 100%;
    background-color: #023be20a;
    padding: 20px 0px;
}

/* ✔ Mobile: content starts from left */
@media (max-width: 768px) {
    .Messaging_Solutions {
        padding: 9px 20px !important;
        /* Optional: small left padding */
    }
}

.whatshopp_clone_section_top {
    margin-top: 3rem;
}

.Messaging_Solutions_heading {
    width: 70%;
    margin: auto;
    text-align: center;
}

.Messaging_Solutions_Imagesection {
    width: 67%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    /* makes responsive */
    margin-top: 4rem;
}

@media (max-width: 768px) {
    .whatshopp_clone_section_top_reverse {
        display: flex;
    }

    .whatshopp_clone_section_top_reverse .child1 {
        order: 2;
        /* move 1st div to 2nd */
    }

    .whatshopp_clone_section_top_reverse .child2 {
        order: 1;
        /* move 2nd div to 1st */
    }
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Messaging_Solutions_Imagesection {
        width: 87% !important;
    }
}

.Messaging_Solutions_Imagesection_left img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    background: #d9d9d9;
    border-radius: 1rem;
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
}

.btngradint_SubmitBtn {
    height: 50px;
    background: var(--gradient-blue);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    margin: 2rem auto 12px;
    padding: 0 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.3s ease;
}

.btngradint_SubmitBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.btngradint_SubmitIcon {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    transform: rotate(-20deg);
    transition: transform 0.4s ease;
}

.btngradint_SubmitBtn:hover .btngradint_SubmitIcon {
    transform: rotate(33deg) translateX(4px);
}

.Messaging_Solutions_Imagesection_rightside {
    flex: 1;
    min-width: 300px;
    display: flex;
    gap: 15px;
    flex-direction: column;
}

.Messaging_Solutions_Imagesection_rightside_tittle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #555555;
}

.Messaging_Solutions_Imagesection_rightside_list {
    margin: 0;
    padding-left: 30px;
}

.Messaging_Solutions_Imagesection_rightside_listing {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #555555;
    margin-bottom: 10px;
}

/* ✅ Responsive Design */
@media (max-width: 1024px) {
    .Messaging_Solutions_Imagesection {
        width: 90%;
        flex-direction: column;
        text-align: center;
    }

    .Messaging_Solutions_Imagesection_rightside {
        align-items: center;
        text-align: left;
    }

    .Messaging_Solutions_Imagesection_rightside_list {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .Messaging_Solutions_heading {
        width: 100%;
    }

    .Messaging_Solutions_Imagesection {
        width: 100%;
        gap: 20px;
    }

    .Messaging_Solutions_Imagesection_rightside_tittle,
    .Messaging_Solutions_Imagesection_rightside_listing {
        font-size: 16px;
        line-height: 24px;
    }
}

.App_Development_Solutions {
    background-color: #fff;
    width: 100%;
    margin: 3rem 0;
}

/* ============================================================================================================================================================ */
/* ======================================================================== Key Features of Whatsapp Clone App  ====================================================================== */
/* ============================================================================================================================================================ */

.Features_Whatsapp {
    width: 100%;
    padding: 3rem 0 0 0;
    /* Only top padding */
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 768px) {
    .Features_Whatsapp {
        padding: 0rem 0;
    }
}

.Features_Whatsapp_Heading {
    width: 70%;
    margin: auto;
    text-align: center;
}

@media (max-width: 1400px) {
    .Features_Whatsapp_Heading {
        width: 100%;
        margin: 0 auto;
        text-align: left !important;
    }

    .Features_Whatsapp_Heading h2,
    .Features_Whatsapp_Heading h5 {
        text-align: left !important;
    }
}

.Features_Whatsapp_btnMain {
    width: 67%;
    margin: 2rem auto 0;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Features_Whatsapp_btnMain {
        width: 87% !important;
    }
}

.Features_Whatsapp_btn {
    display: flex;
    width: 100%;
    height: 70px;
    background: #023be20a;
    border-radius: 1rem;
    overflow: hidden;
}

.Features_Whatsapp_btn button {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    color: #000;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.Features_Whatsapp_btn_user.active {
    width: 40%;
    background: #023be221;
    border-radius: 1rem;
}

.Features_Whatsapp_btn_admin {
    width: 60%;
    background: transparent;
    border-radius: 1rem;
}

.Features_Whatsapp_btn_admin.active {
    width: 40%;
    background: #023be221;
}

.Features_Whatsapp_btn_user:not(.active) {
    width: 60%;
    background: transparent;
}

/* Card styles */
.Features_Whatsapp_content {
    width: 80%;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background: #ffffff;
    border: 2px solid #023be20a;
    box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.13);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

/* Container grid */
.Features_Content_Card {
    width: 67%;
    margin: 4rem auto 0 auto;
    /* Only top margin */
    display: grid;
    grid-template-columns: 1fr;
    /* mobile: 1 card */
    gap: 25px;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Features_Content_Card {
        width: 87% !important;
    }
}

@media (max-width: 768px) {
    .Features_Content_Card {
        grid-template-columns: repeat(1, 1fr);
        /* tablet: 2 cards */
        width: 90%;
    }

    .Features_Whatsapp_btnMain {
        width: 90% !important;
        margin: 2rem auto 0;
    }

    .Features_Whatsapp_btn button {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .Features_Whatsapp_btnMain {
        margin: 2rem auto 0;
    }

    .Features_Content_Card {
        grid-template-columns: repeat(3, 1fr);
        /* desktop: 3 cards */
    }
}

/* Outer card with gradient border */
.Features_Content_CardListing {
    background: linear-gradient(180deg, #023be2 0%, #ffffff 100%);
    padding: 2px;
    border-radius: 1rem;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    cursor: pointer;
}

/* Outer card with gradient border */
.Features_Content_CardListingOtherbordercolor {
    background: linear-gradient(360deg, #023be2 0%, #ffffff 100%);
    padding: 2px;
    border-radius: 1rem;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    cursor: pointer;
}

.Features_Content_CardListingOtherbordercolor:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.Features_Content_CardListing:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Inner content */
.Features_Content_CardListing_content {
    background: #fff;
    border-radius: calc(1rem - 2px);
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Heading row: circle + title */
.Features_Content_CardListing_Heading {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Circle */
.Features_Content_CardListing_content_circle {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    font-size: 22px;
    font-family: var(--font-heading, Arial, sans-serif);
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

/* Title */
.Features_Content_CardListing_content_circle_tittle {
    color: #023be2;
    font-family: var(--font-heading, Arial, sans-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
}

/* Description */
.Features_Content_CardListing_content_des {
    font-family: var(--font-body, Arial, sans-serif);
    color: #555555;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

/* ============================================================================================================================================================ */
/* ========================================================================  Defining Our Excellence with Projects ====================================================================== */
/* ============================================================================================================================================================ */

/* Inner container */
.Our_Excellence_mainapp {
    position: relative;
    width: 67%;
    margin: auto;
    min-height: 344px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    border-radius: 2rem;
    color: #fff;
    overflow: hidden;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Our_Excellence_mainapp {
        width: 87% !important;
    }
}

/* Background image */
.Our_Excellence_mainapp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://dev.primocys.com/wp-content/uploads/2026/01/Frame38486.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2;
    z-index: 1;
    border-radius: 2rem;
}

/* Gradient overlay */
.Our_Excellence_mainapp::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    z-index: 0;
    border-radius: 2rem;
}

.Our_Excellence_contentApp {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .Our_Excellence_mainapp {
        width: 90%;
    }

    .Our_Excellence_contentApp {
        flex-direction: column;
    }
}

/* ============================================================================================================================================================ */
/* ========================================================================  Driven Social Networking  ====================================================================== */
/* ============================================================================================================================================================ */

/* Main Section */
.social_networking {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 12px 0px 60px 0px;
}

@media (max-width: 768px) {
    .social_networking {
        padding: 20px 00px;
    }
}

/* Heading */
.social_networking_heading {
    width: 90%;
    margin: auto;
    text-align: left;
    margin-bottom: 40px;
}

/* Tablet and larger: center the heading again */
@media (min-width: 768px) {
    .social_networking_heading {
        width: 70%;
        text-align: center;
    }
}

/* Grid container for cards */
.social_networking_cardlisting {
    width: 67% !important;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* Mobile default */
    gap: 40px;
    margin-top: 1rem;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .social_networking_cardlisting {
        width: 87% !important;
    }
}

/* Responsive grid */
@media (min-width: 768px) {
    .social_networking_cardlisting {
        grid-template-columns: repeat(2, 1fr);
        /* Medium (tablet) */
    }

    .social_networking_heading {
        width: 70%;
    }

    .social_networking_cardlisting {
        width: 80%;
    }
}

@media (min-width: 1024px) {
    .social_networking_cardlisting {
        grid-template-columns: repeat(3, 1fr);
        /* Large screens */
    }
}

@media (min-width: 1280px) {
    .social_networking_cardlisting {
        grid-template-columns: repeat(4, 1fr);
        /* Extra large screens */
    }
}

/* Individual card */
.social_networking_cardlisting_cardOne {
    height: 400px;
    padding: 20px;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(0.76deg, #e7edfc 0.65%, #ffffff 99.37%);
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.social_networking_cardlisting_cardOne:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 20px rgba(2, 59, 226, 0.15);
}

/* Top Section (Optional image or content) */
.cardtopnewrtwork {
    flex: 1;
}

/* Bottom Section */
.cardsocial_networking_cardlisting {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
}

/* Icon Container */
.supporticonwithimage {
    background: #ffffff;
    height: 70px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.supporticonwithimageicon {
    height: 50%;
    width: 50%;
}

/* Card Title */
.cardtittlenewtwork {
    color: #023be2;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

/* Card Description */
.carddescriptionnewtwokr {
    font-weight: 400;
    color: #555555;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
}

/* ============================================================================================================================================================ */
/* ========================================================================  LET'S TALK BUSINESS FORM   ====================================================================== */
/* ============================================================================================================================================================ */

/* ================================
   Let's Talk Business Section
===================================*/
.lets_talk_businessMain {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 3rem;
    background-image: url(./images/LetsTalkBusinessBackground.svg);
}

/* Wrapper width */
.lets_talk_businessMain_contentmain {
    width: 67%;
    margin: auto;
}

@media (max-width: 1600px) {
    .lets_talk_businessMain_contentmain {
        width: 87% !important;
    }
}



/* Layout */
.lets_talk_businessMain_content {
    display: flex;
    gap: 40px;
    align-items: center;
    /* Vertically center */
}

/* Left Side */
.lets_talk_businessMain_content_left {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Right Side */
.lets_talk_businessMain_content_rightside {
    width: 60%;
}

/* ================================
   Contact Info
===================================*/
.contact_info,
.contact_info_mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 1.5rem;
}

@media (min-width: 1025px) {
    .contact_info_mobile {
        display: none;
    }
}

@media (max-width: 1025px) {
    .contact_info {
        display: none;
    }
}

.whatsapp_section,
.email_section {
    display: flex;
    gap: 15px;
}

.whatsapp_section img,
.email_section img {
    width: 30px;
    height: 30px;
}

.phone_numbers {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.phone_numbers a,
.email_section a {
    color: #000000;
    text-decoration: none;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 20px;
}

.social_media {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social_media p {
    margin-bottom: 5px;
    font-weight: 400;
    color: #918f8f;
    font-family: var(--font-body);
    font-size: 20px;
}

.social_icons {
    display: flex;
    gap: 10px;
}

.social_icons img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* ================================
   Form Section
===================================*/
.lets_talk_businessMain_content_rightside_form {
    border: 2px solid rgba(0, 161, 197, 0.5);
    border-radius: 16px;
    box-shadow: 2px 2px 14px 0px #00000021;
    background: #fff;
    padding: 30px;
    margin: 0 auto;
}

.form-service {
    font-family: var(--font-body);
    color: #000;
    font-size: 18px;
    font-weight: 400;
}

.services-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
    padding-bottom: 1.5rem;
}

.service-option {
    padding: 5px 0px;
    width: 150px;
    border: 1px dashed #00a1c580;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-dark-gray);
    background-color: #00a1c50a;
    font-weight: 500;
    transition: all 0.2s ease;
}

.service-option:hover {
    background-color: #00a1c515;
}

.service-option.selected {
    background-color: #00a1c5;
    color: white;
    border: 1px solid #00a1c5;
}

/* ================================
   Responsive Design
===================================*/

/* 💻 Laptop / Tablet */
@media (max-width: 1400px) {
    .lets_talk_businessMain_contentmain {
        width: 90%;
    }
}

/* 📱 Tablet & Mobile */
@media (max-width: 1024px) {
    .lets_talk_businessMain_content {
        flex-direction: column;
        align-items: flex-start;
        /* Align content to left */
        text-align: left;
        /* Left-align text */
        gap: 30px;
    }

    .lets_talk_businessMain_content_left,
    .lets_talk_businessMain_content_rightside {
        width: 100%;
    }

    .contact_info {
        align-items: flex-start;
        /* Icons & text left aligned */
    }

    .social_media {
        justify-content: flex-start;
    }

    .lets_talk_businessMain_content_rightside_form {
        width: 100%;
        padding: 15px;
    }
}

/* 📱 Small Screens */
@media (max-width: 768px) {
    .services-options {
        justify-content: center;
    }

    .service-option {
        width: 45%;
    }
}

/* 📱 Extra Small Screens */
@media (max-width: 480px) {
    .service-option {
        width: 100%;
    }

    .phone_numbers a,
    .email_section a {
        font-size: 16px;
    }

    .social_media p {
        font-size: 16px;
    }

    .social_icons img {
        width: 26px;
        height: 26px;
    }

    .lets_talk_businessMain {
        padding: 50px 0;
    }


}

/* ============================================================================================================================================================ */
/* ========================================================================  Various_languages  ====================================================================== */
/* ============================================================================================================================================================ */

.Various_languages {
    background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.8) 2.06%, rgba(0, 161, 197, 0.8) 99.67%),
        url(./images/imagebg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
    border-radius: 0.2rem;

    /* Center content */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.Mobile_App_Development_Modern_Mobile_SolutionsTitltMainLangugae {
    padding-top: 4rem;
}

/* Main Wrapper */
.Various_languages_CardMain {
    width: 67%;
    margin: auto;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Various_languages_CardMain {
        width: 87% !important;
    }
}

/* Grid Layout */
.Various_languages_CardGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 100%;
}

/* Single Card */
.Various_languages_Card {
    background-color: #ffffff;
    border-radius: 1rem;
    display: flex;
    justify-content: flex-start;
    /* Align content to left */
    align-items: center;
    padding: 20px 25px;
    width: 100%;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* Hover Effect */
.Various_languages_Card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Card Content */
.Various_languages_Cardcontent {
    display: flex;
    align-items: center;
    gap: 15px;
    /* spacing between flag and text */
    width: 100%;
}

/* Flag Image */
.Various_languages_Cardcontent img {
    width: 50px;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

/* Language Text */
.EnglishLanguage {
    font-family: var(--font-body, "Poppins", sans-serif);
    color: #023be2;
    font-size: 1.5rem;
    /* 24px */
    font-weight: 500;
    margin: 0;
    text-align: left;
}

/* 🖥️ Extra Large Screens (≥1280px) */
@media (min-width: 1280px) {
    .Various_languages_CardGrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 💻 Laptop (1025px – 1279px) */
@media (max-width: 1279px) and (min-width: 1025px) {
    .Various_languages_CardGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 📱 Tablet (641px – 1024px) */
@media (max-width: 1024px) and (min-width: 641px) {
    .Various_languages_CardGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 📱 Mobile (≤640px) */
@media (max-width: 640px) {
    .Various_languages_CardGrid {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 2rem;
    }

    .Various_languages {
        height: auto;
        padding: 60px 20px;
        margin-top: 3rem;
        /* margin-bottom: 3rem; */
    }

    .EnglishLanguage {
        font-size: 1.2rem;
    }

    .Various_languages_Cardcontent img {
        width: 40px;
    }
}

/* ============================================================================================================================================================ */
/* ========================================================================  Our_Competitors  ====================================================================== */
/* ============================================================================================================================================================ */

.Our_Competitors {
    width: 100%;
    margin: auto;
    display: flex;
    /* Enables flex layout */
    justify-content: center;
    /* Horizontal centering */
    align-items: center;
    /* Vertical centering */
    flex-direction: column;
    /* Stack children vertically (optional) */
    text-align: center;
    background-color: #5d5d5d08;
    padding: 40px 0 0 0;
}

@media (max-width: 768px) {
    .Our_Competitors {
        padding: 0px 0 !important;
    }
}

.Mobile_App_Development_Platform_tech_stack_Heading_Competitors {
    width: 65%;
    margin: auto;
    margin-bottom: 2rem;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Mobile_App_Development_Platform_tech_stack_Heading_Competitors {
        width: 87% !important;
    }
}

@media (max-width: 768px) {
    .Our_Competitors {
        display: block !important;
        /* Removes flex centering */
        text-align: left !important;
        /* Left-align text */
        padding-left: 0 !important;
        /* Reset padding */
        margin: 0 !important;
        /* Ensure full width */
        width: 100% !important;
    }
}

.Our_Competitors_description {
    width: 80%;
    margin: auto;
}

/* Main container */
.Our_Competitors_cardListing_main {
    width: 67%;
    margin: auto;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .Our_Competitors_cardListing_main {
        width: 87% !important;
    }
}

.Our_Competitors_cardListing {
    width: 95%;
    margin: auto;
}

.Our_Competitors_cardListing_MainGGG {
    width: 100%;
    gap: 80px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* comma is required */
}

.Our_Competitors_cardListing_cardOne {
    background: #ffffff;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    border-radius: 12px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    padding: 30px 20px 20px 80px;
}

.Our_Competitors_cardListing_cardTwo {
    background: #ffffff;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    border-radius: 12px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    padding: 30px 20px 20px 80px;
    margin-right: -3rem;
}

.Our_Competitors_cardListing_cardOne_supporticon {
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: -5px 4px 22px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: -50px;
    transform: translateY(-50%);
}

/* Icon image */
.Support_Card_IconImage {
    height: 50%;
    width: 50%;
    object-fit: contain;
}

.Support_Card_Description_Our_Competitors {
    color: #555555;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: 18px;
    text-align: left;
}

@media (max-width: 768px) {
    .Our_Competitors_cardListing_MainGGG {
        grid-template-columns: 1fr;
        /* single column on mobile */
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== Blog_section_first ====================================================================== */
/* ============================================================================================================================================================ */

/* Outer Section */
.Blog_section_first {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   
    margin: 10rem 0 3rem;


    background-color: #f9fafc;
}

/* Content Wrapper */
.Blog_section_first_contentsection {
    width: 70%;
    margin: auto;
}

/* Main Card with Background */
.Blog_section_first_contentsection_main {
    position: relative;
    width: 100%;
    min-height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    overflow: hidden;
    color: #fff;
    text-align: center;
    padding: 3rem 2rem;
}

/* Background Image */
.Blog_section_first_contentsection_main::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(./images/demo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.25;
    z-index: 0;
}

/* Gradient Overlay */
.Blog_section_first_contentsection_main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    z-index: 0;
    mix-blend-mode: multiply;
}

/* Inner Content */
.Blog_section_first_content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Title */
.Blog_section_first_title {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    font-family: var(--font-heading, "Poppins", sans-serif);
}

/* Button Section */
.Blog_section_first_btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 1rem;
}

/* Button Style */
.btnblog {
    border: 1px solid #ffffff8f;
    color: #ffffffb3;
    background: transparent;
    border-radius: 1rem;
    padding: 10px 20px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    font-weight: 500;
}

.btnblog:hover {
    background-color: #ffffff;
    color: #023be2;
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .Blog_section_first_contentsection {
        width: 90%;
    }

    .Blog_section_first_title {
        font-size: 1.4rem;
    }

    .Blog_section_first_desc {
        font-size: 0.9rem;
    }

    .btnblog {
        font-size: 0.85rem;
        padding: 8px 16px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== Blog_section_slider ====================================================================== */
/* ============================================================================================================================================================ */

.blog-section-slider {
    background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.06) 2.06%, rgba(0, 161, 197, 0.06) 99.67%);
    padding: 3rem 0;
}

/* Section Header */
.blog-section-header {
    text-align: center;
    width: 50%;
    margin: 0 auto 2.5rem auto;
}

/* Large & Laptop Screens */
@media (max-width: 1440px) {
    .blog-section-header {
        width: 70%;
    }
}

/* Tablet Screens */
@media (max-width: 1024px) {
    .blog-section-header {
        width: 80%;
    }
}

/* Mobile Screens */
@media (max-width: 768px) {
    .blog-section-header {
        width: 90%;
        margin-bottom: 2rem;
    }
}

.blog-slider-wrapper_main {
    width: 100%;
    position: relative;
}

.blog-slider-wrapper {
    width: 70%;
    margin: auto;
    position: relative;
    overflow: hidden;
    /* Hide extra cards */
}

.blog-slider-track {
    display: flex;
    gap: 40px;
    transition: transform 0.7s ease-in-out;
}

.blog-card_values {
    background: #fff;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 25px 30px;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    width: 100%;
    flex-shrink: 0;
    /* Prevent shrinking */
    gap: 40px;
    height: 486px;
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.blog-image {
    width: 50%;
    height: 100%;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.blog-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}

.blog-category {
    color: #00a1c5;
    font-weight: 500;
    font-size: 18px;
}

.blog-title {
    font-size: 34px;
    font-weight: 600;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-description {
    font-size: 18px;
    color: #918f8f;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-meta {
    display: flex;
    gap: 25px;
    align-items: center;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-item img {
    width: 18px;
    height: 18px;
}

.meta-item_values {
    color: #555;
    font-size: 16px;
    margin-top: 1rem;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border: 2px solid #00a1c5;
    border-radius: 50%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.left-arrow_Image,
.right-arrow_image {
    width: 22px;
    height: 22px;
    rotate: -180deg;
}

.slider-arrow:hover {
    background: #00a1c5;
    border-color: #00a1c5;
}

.slider-arrow:hover img {
    filter: brightness(0) invert(1);
}

.left-arrow {
    left: 11%;
}

.right-arrow {
    right: 11%;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .blog-slider-wrapper {
        width: 90%;
    }

    .blog-card_values {
        flex-direction: column;
        height: auto;
        gap: 20px;
    }

    .blog-image,
    .blog-content {
        width: 100%;
        height: auto;
    }

    .blog-content {
        text-align: center;
    }

    .blog-meta {
        justify-content: center;
    }

    .left-arrow {
        left: 10px;
    }

    .right-arrow {
        right: 10px;
    }
}

@media (max-width: 640px) {
    .slider-arrow {
        width: 45px;
        height: 45px;
    }

    .slider-arrow img {
        width: 18px;
        height: 18px;
    }

    .blog-title {
        font-size: 20px;
    }

    .blog-description {
        font-size: 14px;
    }

    .left-arrow {
        left: 5px;
    }

    .right-arrow {
        right: 5px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== Top_Trending_Blogs ====================================================================== */
/* ============================================================================================================================================================ */

.Top_Trending_Blogs {
    width: 100%;
    margin-top: 5rem;
}

/* ====== Container ====== */
.top-trending-blogs {
    width: 70%;
    margin: 0 auto;
    padding: 40px 0;
}

/* ====== Grid ====== */
.blog-card-listing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 cards default */
    gap: 30px;
}

/* ====== Card with Gradient Border ====== */
.blog-card_ValuesBlog {
    height: 480px;
    border-radius: 1rem;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    padding: 1px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

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

/* ====== Inner Card ====== */
.blog-card-inner {
    background: #fff;
    border-radius: calc(1rem - 2px);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ====== Image ====== */
.blog-card-image {
    width: 100%;
    overflow: hidden;

    /* Remove any spacing */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0; /* Fix inline whitespace issue */
}

/* Image */
.blog-card-image img {
    width: 100%;
    height: auto;
    display: block; /* removes bottom gap */
    object-fit: cover;
}

/* ====== Content ====== */
.blog-card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

/* ====== Blog Title Button ====== */
.blog-title-btn {
    font-family: var(--font-body);
    background: #00a1c514;
    color: #00a1c5;
    font-weight: 500;
    font-size: 18px;
    border: none;
    border-radius: 1rem;
    padding: 5px 10px;
    width: fit-content;
    cursor: pointer;
}

/* ====== Description ====== */
.blog-description {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: #000;
    margin: 15px 0;
    line-height: 1.5;
}

/* ====== Meta ====== */
.blog-meta_top {
    display: flex;
    gap: 20px;
    align-items: center;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
}

.meta-item_tittl {
    margin-top: 1rem;
}

.meta-item img {
    width: 16px;
    height: 16px;
}

/* ====== Responsive ====== */

/* Large screens: 3 cards */
@media (max-width: 1200px) {
    .top-trending-blogs {
        width: 85%;
    }
}

/* Medium screens: 2 cards */
@media (max-width: 992px) {
    .blog-card-listing {
        grid-template-columns: repeat(2, 1fr);
    }

    .top-trending-blogs {
        width: 90%;
    }
}

/* Small screens: 1 card */
@media (max-width: 600px) {
    .blog-card-listing {
        grid-template-columns: 1fr;
    }

    .top-trending-blogs {
        width: 95%;
        padding: 20px 0;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== HOME BLOG SECTION ====================================================================== */
/* ============================================================================================================================================================ */

/* ====== Blog Section ====== */
.HomeBlog_Section {
    width: 100%;
    padding-top: 40px;
    background: #fff;
}

.HomeBlog_Container {
    width: 67%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

@media (max-width: 1600px) {
    .HomeBlog_Container {
        width: 87% !important;
    }
}

/* ====== Heading ====== */
.HomeBlog_HeadingWrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.HomeBlog_Heading {
    font-size: 60px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 15px;
    font-family: var(--font-body);
}

.HomeBlog_Description {
    font-size: 20px;
    color: #555555;
    line-height: 1.7;
    font-family: var(--font-body);
}

/* ====== Blog Cards Layout ====== */
.HomeBlog_Cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
    /* ✅ Ensures equal height between left & right */
}

/* ====== Common Card Styles ====== */
.HomeBlog_Card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #023be280;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

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

/* ====== Left Card (with image) ====== */
.HomeBlog_LeftCard .HomeBlog_Card {
    height: 100%;
}

.HomeBlog_Image {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.HomeBlog_Meta {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

/* ====== Blog Title + Meta ====== */
.HomeBlogtittle {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.HomeBlog_Tag_main {
    background: #00a1c514;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 1rem;
    cursor: pointer;
}

.HomeBlog_Tag {
    color: #00a1c5;
    font-weight: 700;
    font-size: 16px;
}

.homeblogstar {
    font-weight: bold;
    font-size: 20px;
}

.HomeBlogtittleSub {
    color: #555555;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
}

/* ====== Left Blog Title ====== */
.HomeBlog_LeftTitle {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    line-height: 1.6;
    font-family: var(--font-body);
}

/* ====== Learn More ====== */
.HomeBlog_LearnMore {
    display: inline-block;
    color: #023be2;
    font-weight: 600;
    text-decoration: none;
    margin-top: 8px;
    transition: color 0.3s ease;
    font-size: 18px;
    font-family: var(--font-body);
}

.HomeBlog_LearnMore:hover {
    color: #1e40af;
}

/* ====== Right Blog Cards ====== */
.HomeBlog_RightCards {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    height: 100%;
}

.HomeBlog_RightCards .HomeBlog_Card {
    padding: 24px;
    border-radius: 12px;
    flex-grow: 1;
}

.HomeBlog_Title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    line-height: 1.6;
}

/* ====== Responsive ====== */
@media (max-width: 1200px) {
    .HomeBlog_Heading {
        font-size: 48px;
    }

    .HomeBlog_Description {
        font-size: 18px;
    }

    .HomeBlog_Cards {
        gap: 30px;
    }
}

@media (max-width: 1024px) {
    .HomeBlog_Container {
        width: 90%;
    }

    .HomeBlog_Cards {
        grid-template-columns: 1fr;
    }

    .HomeBlog_LeftCard,
    .HomeBlog_RightCards {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .HomeBlog_Heading {
        font-size: 2rem;
    }

    .HomeBlog_Description {
        font-size: 1rem;
    }

    .HomeBlog_Title,
    .HomeBlog_LeftTitle {
        font-size: 1rem;
    }

    .HomeBlog_Image {
        height: auto;
    }

    .HomeBlog_Section{
        padding-top: 0px;
    }
}

@media (max-width: 480px) {

    .HomeBlog_Container {
        width: 100% !important;
        margin: 0 !important;

        padding-left: 8px !important;   /* SAME spacing everywhere */
        padding-right: 8px !important;

        gap: 32px;                      /* reduce vertical gap for mobile */
    }
}

/* ============================================================================================================================================================ */
/* ========================================================================  Blog detail  ====================================================================== */
/* ============================================================================================================================================================ */

/* ====== Blog Detail Heading Section ====== */
.blogdetailheading {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 7rem;
    padding: 0 1rem;
    /* Add some padding for small screens */
    text-align: center;
    /* Center text inside container */
}

/* Container for heading */
.blogdetailheadingValues {
    max-width: 900px;
    /* Limit width on large screens */
    width: 100%;
    margin-top: 3rem;
}

/* Heading styles */
.HeadingBlogdetail {
    color: #000;
    font-size: 60px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    font-family: var(--font-heading);
}

/* ====== Responsive Typography ====== */
@media (max-width: 1200px) {
    .HeadingBlogdetail {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .HeadingBlogdetail {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .HeadingBlogdetail {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .HeadingBlogdetail {
        font-size: 1.5rem;
        line-height: 1.3;
    }
}

/* ====== Blog Detail Second Section ====== */
.blogdetailsectiontwomain {
    width: 100%;
    padding: 3rem 0;
    display: flex;
    justify-content: center;
}

/* Main content container */

.blogdetailsectiontwomainContent {
    width: 67%;
    border-radius: 1rem;
    padding: 2rem;
    box-sizing: border-box;

    /* Background image settings */
    background-image: url(./images/BlogImagedetail.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    /* Maintain ratio (16:9) */
    aspect-ratio: 16/6;
}

/* Large screens (1600px+) */
@media (max-width: 1600px) {
    .blogdetailsectiontwomainContent {
        width: 90%;
    }
    .blogdetailheading {
        margin-top: 4rem !important;
    }
    .blogdetailsectiontwomain {
        padding: 0 !important;
        margin-top: 1rem;
    }
}

/* Tablet screens */
@media (max-width: 1024px) {
    .blogdetailsectiontwomainContent {
        width: 90%;
        aspect-ratio: 16/10;
        padding: 1.5rem;
    }
}

/* Mobile screens */
@media (max-width: 600px) {
    .blogdetailsectiontwomainContent {
        width: 95%;
        aspect-ratio: 14/5; /* taller ratio for mobile */
    }
}

/* ====== Blog Detail Blogdetailthirdsectionmain Third Section ====== */

.Blogdetailthirdsectionmain {
    width: 100%;
    padding: 50px 0;
    margin-top: 3rem;
}

@media (max-width: 600px) {
    .Blogdetailthirdsectionmain {
        width: 100%;
        padding: 0px 0;
    }
}

.BlogdetailthirdsectionmainCard {
    width: 67%;
    margin: auto;
    border-radius: 10px;
}

@media (max-width: 1600px) {
    .BlogdetailthirdsectionmainCard {
        width: 90%;
    }
}

.BlogdetailthirdsectionmainCardListing {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* ===== Left Column Container ===== */
.BlogdetailthirdsectionmainCardListingLeft {
    width: 25%;
    padding: 20px;
    border-radius: 1rem;
    background: #ffffff21;
    border: 1px solid #023be280;
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* spacing between title and list */
    box-sizing: border-box;
}

/* ===== Left Column Title ===== */
.BlogdetailthirdsectionmainCardListingLeftTittle {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 28px;
    color: #023be2;
    margin: 0;
}

.BlogdetailthirdsectionmainCardListingLeftTittlecardtwo {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.5;
    margin: 0;
    /* remove default h6 margins */
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ===== TOC Items Container ===== */
.BlogdetailthirdsectionmainCardListingLeftContentlisting {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* spacing between TOC items */
    width: 100%;
}

/* ===== TOC Item - Gradient ===== */
.contentlistblogdetail {
    display: flex;
    gap: 12px;
    /* spacing between circle and text */
    width: 100%;
}

/* ===== TOC Item - Normal Color ===== */
.contentlistblogdetailNormalclor {
    display: flex;
    gap: 12px;
    width: 100%;
}

/* ===== Circle Normal ===== */
.blogdetailcontentcircleNormalclor {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #918f8f;
    flex-shrink: 0;
    margin-top: 0.4rem;
}

/* ===== Normal Text ===== */
.blogdetaillefttittleNormalclor {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    color: #918f8f;
}

.blogdetailsectiontwomainContentCardtwo {
    display: flex;
    gap: 2rem;
    border-radius: 1rem;
    padding: 2rem;
    min-height: 250px;
    background-image: url(./images/BlogImagedetail.webp);
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
    background-size: contain;
}

/* ===== Hover effect (optional) ===== */
.contentlistblogdetail:hover .blogdetaillefttittle,
.contentlistblogdetailNormalclor:hover .blogdetaillefttittleNormalclor {
    cursor: pointer;
}

/* ===== Responsive Adjustment ===== */
@media screen and (max-width: 1024px) {
    .BlogdetailthirdsectionmainCard {
        width: 90%;
        margin: auto;
        border-radius: 10px;
    }

    .BlogdetailthirdsectionmainCardListingLeft {
        width: 30%;
        padding: 15px;
    }

    .BlogdetailthirdsectionmainCardListingLeftTittle {
        font-size: 24px;
    }

    .blogdetaillefttittle,
    .blogdetaillefttittleNormalclor {
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    .BlogdetailthirdsectionmainCardListingLeft {
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
    }

    .BlogdetailthirdsectionmainCardListingLeftTittle {
        text-align: center;
    }
}

/* Center column */
.BlogdetailthirdsectionmainCardListingCenter {
    width: 50%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.BlogdetailthirdsectionmainCardListingCenterCardOne {
    background: #023be208;
    border: 1px solid #023be280;
    padding: 30px;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.blogdetailcentercontent {
    color: #000000;
    font-weight: 500;
    font-family: var(--font-body);
    font-size: 18px;
}

.blogdetailcentercontentCardtwo {
    color: #555555;
    font-weight: 500;
    font-family: var(--font-body);
    font-size: 18px;
}

/* Right column */
.BlogdetailthirdsectionmainCardListingRight {
    width: 25%;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-direction: column;
}

.BlogdetailthirdsectionmainCardListingCenterCardTwo {
    /* border: 1px solid #023be280; */
    /* padding: 30px; */
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.BlogdetailthirdsectionmainCardListingCenterCardTwoNew {
    border: 1px solid #023be280;
    padding: 30px;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.BlogdetailthirdsectionmainCardListingRightSectionone {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    border: 1px solid #023be280;
    padding: 30px 0px;
}

.RelatedPosts {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 28px;
    color: #023be2;
    padding: 0px 30px;
}

.contentlistblogdetailright {
    padding: 0px 30px 10px 30px;
    display: flex;
    gap: 12px;
    /* spacing between circle and text */
    width: 100%;
    border-bottom: 1px solid #023be233;
}

.BlogdetailthirdsectionmainCardListingRightSectiontwo {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    border: 1px solid #023be280;
    padding: 30px 0px;
}

.RelatedServices_list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    gap: 30px;
    margin-top: 1rem;
}

.tittlewithimagerightside {
    border-bottom: 1px solid #023be233;
    display: flex;
    align-items: center;
    padding: 0px 30px 10px 30px;
    justify-content: space-between;
    cursor: pointer;
}

.chatappbuild {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;

    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tittlewithimagerightsideimagevalues {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
    /* Smooth animation */
}

.tittlewithimagerightside:hover .tittlewithimagerightsideimagevalues {
    transform: rotate(45deg);
}

.blogdertailform {
    display: flex;
    flex-direction: column;
    padding: 0px 30px 0 30px;
    margin-top: 1rem;
}

.blogdetailulandlitag {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

.blogdetailulandlitag ul {
    list-style-type: disc;
    /* or circle */
    padding-left: 20px;
}

.blogdetailulandlitag li {
    margin-bottom: 5px;
}

/* ============================
   Tablet (≤1024px)
   ============================ */

@media screen and (max-width: 1024px) {
    .BlogdetailthirdsectionmainCardListing {
        flex-wrap: wrap;
    }

    .BlogdetailthirdsectionmainCardListingLeft,
    .BlogdetailthirdsectionmainCardListingCenter,
    .BlogdetailthirdsectionmainCardListingRight {
        width: 100%;
    }

    .BlogdetailthirdsectionmainCardListingLeft {
        padding: 15px;
        margin-bottom: 20px;
    }

    .BlogdetailthirdsectionmainCardListingCenter {
        padding: 0;
    }

    .BlogdetailthirdsectionmainCardListingRight {
        padding: 0;
    }

    .BlogdetailthirdsectionmainCardListingLeftTittle {
        font-size: 24px;
        text-align: center;
    }

    .blogdetaillefttittle,
    .blogdetaillefttittleNormalclor,
    .chatappbuild {
        font-size: 15px;
    }

    .RelatedPosts {
        font-size: 24px;
        text-align: center;
    }

    .blogdetailcentercontent,
    .blogdetailcentercontentCardtwo {
        font-size: 16px;
    }
}

/* ============================
   Mobile (≤768px)
   ============================ */

@media screen and (max-width: 768px) {
    .BlogdetailthirdsectionmainCardListing {
        flex-direction: column;
        gap: 30px;
    }

    .BlogdetailthirdsectionmainCardListingLeft,
    .BlogdetailthirdsectionmainCardListingCenter,
    .BlogdetailthirdsectionmainCardListingRight {
        width: 100%;
    }

    .BlogdetailthirdsectionmainCardListingLeftTittle,
    .RelatedPosts {
        text-align: center;
        font-size: 22px;
    }

    .blogdetaillefttittle,
    .blogdetaillefttittleNormalclor,
    .chatappbuild {
        font-size: 14px;
    }

    .blogdetailcentercontent,
    .blogdetailcentercontentCardtwo {
        font-size: 15px;
    }

    .tittlewithimagerightside {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .tittlewithimagerightsideimagevalues {
        width: 24px;
        height: 24px;
    }

    .blogdetailsectiontwomainContentCardtwo {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        min-height: 100px;
        background-position: center;
        background-size: cover;
    }

    .blogdertailform {
        padding: 0 20px;
    }
}

/* Default: Not sticky on mobile */
.sticky-sidebar {
    position: static;
    top: auto;
    align-self: auto;
    height: auto;
}

/* Sticky only on tablet and larger screens */
@media screen and (min-width: 768px) {
    .sticky-sidebar {
        position: sticky;
        top: 100px;
        align-self: flex-start;
        height: fit-content;
    }
}

/* Active TOC item highlight */
.contentlistblogdetailNormalclor.active .blogdetailcontentcircleNormalclor {
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
}

.blogdetaillefttittleRight {
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.contentlistblogdetail.active .blogdetaillefttittle,
.contentlistblogdetailNormalclor.active .blogdetaillefttittleNormalclor {
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

.keyfeaturetittl {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: #000000;
}

.blogdetaillist {
    font-family: var(--font-body);
    color: var(--text-dark-gray);
    font-size: 16px;
    font-weight: 400;
}

/* ============================================================================================================================================================ */
/* ======================================================================== <<<< ABOUT PAGE >>>> ====================================================================== */
/* ============================================================================================================================================================ */

/* ======================================================================== <<<< ABOUT PAGE SECTION ONE  >>>> ====================================================================== */

.aboutsection {
    width: 100%;
    min-height: 650px;
    position: relative;
    /*margin-top: 5rem;*/
    border-radius: 1rem;
    z-index: 1;

}

.aboutsection__background {
    width: 100%;
    height: auto;
    min-height: 100%;
    background: url("https://dev.primocys.com/wp-content/uploads/2026/01/Maskgroup3.webp");
    background-repeat: no-repeat;
    background-position: top center; /* always top */
    background-size: contain; 
    border-radius: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    
}

/* Floating Card */
.aboutsection__card {
    width: 60%;
    min-height: 250px;
    position: absolute;
    left: 20%;
    bottom: -8rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 1rem;
    background: url("https://dev.primocys.com/wp-content/uploads/2026/01/Frame1410116738.webp") center/cover no-repeat;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 10;
    transition: all 0.3s ease;
}

/* Left Side */
.aboutsection__card-left {
    width: 55%;
    padding: 2rem 0rem 2rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*z-index: 6;*/
}

.aboutsection__title {
    font-size: 46px;
    font-weight: 450;
    font-family: var(--font-body);
    color: #000;
    margin-bottom: 1rem;
}

.aboutsection__btn {
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aboutsection__btn-icon {
    width: 25px;
    height: 25px;
    margin-left: 8px;
}

/* Right Side */
.aboutsection__card-right {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 2rem 1rem;
}

.aboutsection__card-right img {
    width: 95%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
}

/* -------- Responsive Styles -------- */



@media (min-width: 1830px) {
    .aboutsection__background {
        background-size: cover;      /* fill width */
        background-position: top;    /* keep top visible */
    }
}

@media (max-width: 1500px) and (min-width: 1300px) {
    .aboutsection__card {
        bottom: -2rem;   /* adjust overlap */
    }
}

@media (max-width: 1300px) and (min-width: 1025px) {
    .aboutsection__card {
        bottom: -1rem;   /* adjust overlap */
    }
}

/* Tablets */
@media (max-width: 1024px) {
    .aboutsection {
        min-height: 550px;
    }

.aboutsection__background {
        background-size: contain;
        background-position: top center;
    }

    .aboutsection__card {
        width: 60%;
        left: 20%;
        bottom: -5.5rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.5rem 0;
    }

     .aboutsection__btn {
        justify-content: center;
        font-size: 25px;
    }

    .aboutsection__card-left,
    .aboutsection__card-right {
        width: 100%;
        max-width: 420px; 
        padding: 1rem;
    }

    .aboutsection__title {
        font-size: 32px;
    }

    .aboutsection__card-right img {
        width: 90%;
        height: auto;
        object-fit: contain;
    }
}

/* Mobile (landscape & portrait) */
@media (max-width: 768px) {
    .aboutsection {
        min-height: 500px;
        /*margin-top: 3rem;*/
    }

       .aboutsection__background {
        background-size: contain; /* NO cut */
        background-position: top center;
    }

    .aboutsection__card {
        width: 60%;
        left: 21%;
        bottom: -1.5rem;
        flex-direction: column;
        text-align: center;
    }

    .aboutsection__title {
        font-size: 26px;
    }

    .aboutsection__btn {
        justify-content: center;
        font-size: 25px;
    }
.aboutsection__card-right {
        max-width: 360px;
    }

    .aboutsection__card-right img {
        width: 85%;
        height: auto;
    }
}

/* Small mobile screens (below 480px) */
@media (max-width: 480px) {
    .aboutsection {
        min-height: 400px;
    }

    .aboutsection__background {
        background-size: contain; /* NO cut */
        background-position: top center;
    }


    .aboutsection__card {
        width: 70%;
        left: 15%;
        bottom: -2rem;
        padding: 0.5rem;
    }

    .aboutsection__title {
        font-size: 22px;
    }

    .aboutsection__btn {
        font-size: 15px;
    }

    .aboutsection__card-right {
        padding:0.5rem;
    }

    .aboutsection__card-right {
        max-width: 100%;
        padding:0.5rem;

    }

    .aboutsection__card-right img {
        width: 100%;
    }
}

@media (max-width: 390px) {
 

    .aboutsection__card {
        width: 70%;
        left: 15%;
        bottom: 0;
        padding: 0.5rem;
    }
}
/* ======================================================================== <<<< ABOUT PAGE SECTION TWO   >>>> ====================================================================== */

.Aboutpage_SectionTwoMain {
    width: 65%;
    margin: 11rem auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centers horizontally */
    text-align: center;
    /* Centers text */
    gap: 20px;
}

.aboutheadingsub {
    width: 80%;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    color: #555555;
    margin: 0 auto;
}

.aboutsubdescriptiontext {
    width: 90%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 22px;
    color: #000000;
    line-height: 1.6;
    margin: 0;
    padding-top:1.5rem;
}

/* 1500px → 1300px */
@media (max-width: 1500px) and (min-width: 1300px) {
    .Aboutpage_SectionTwoMain {
        margin-top: 5.5rem;
    }
}

/* 1300px → 1024px */
@media (max-width: 1300px) and (min-width: 1025px) {
    .Aboutpage_SectionTwoMain {
        margin-top: 4rem;
    }
}

@media (max-width: 1025px) and (min-width: 768px) {
    .Aboutpage_SectionTwoMain {
        margin-top: 8rem;
    }
}


/* ✅ Responsive for mobile screens */
@media (max-width: 768px) {
    .Aboutpage_SectionTwoMain {
        width: 90%;
        text-align: left;
        /* Align text to left */
        align-items: flex-start;
        /* Align all content left */
        margin-top: 4rem;
    }

    .aboutheadingsub,
    .aboutsubdescriptiontext {
        width: 100%;
        margin: 0;
    }

   /* .global_heading {
        font-size: 28px;
    }*/

    .aboutheadingsub {
        font-size: 16px;
    }

    .aboutsubdescriptiontext {
        font-size: 16px;
    }
}

/* ======================================================================== <<<< ABOUT PAGE SECTION THREE   >>>> ====================================================================== */

/* --- Section Styling --- */
.Aboutsectionthree {
    width: 100%;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.06) 2.06%, rgba(0, 161, 197, 0.06) 99.67%);
    margin-top: 4rem;
    box-sizing: border-box;
}

/* --- Header --- */
.blog-section-header {
    text-align: center;
    margin-bottom: 40px;
}

.blog-section-header .global_heading {
    margin-bottom: 1rem;
}


/* --- Card List --- */
.AboutsectionthreeCardList {
    width: 70%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* --- Card --- */
.AboutsectionthreeCardListCard {
    border: 1px solid #023be280;
    padding: 30px;
    border-radius: 1rem;
    background: #ffffff;
    transition: all 0.4s ease;
    cursor: pointer;
    transform: translateY(0);
}

/* --- Hover Animation --- */
.AboutsectionthreeCardListCard:hover {
    transform: translateY(-10px);
     box-shadow: 0 10px 16px rgba(0, 0, 0, 0.14);
    border-color: #00a1c5;
    /*background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.05) 2.06%, rgba(0, 161, 197, 0.05) 99.67%);*/
}

/* --- Title + Image --- */
.AboutsectionthreeCardListCardtittleandimage {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.AboutsectionthreeCardListCardCircle {
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.AboutsectionthreeCardListCardimage {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* --- Title and Description --- */
.AboutsectionthreeCardListCardTiitle {
    font-family: var(--font-body, "Open Sans", sans-serif);
    font-size: 20px;
    color: #000;
    font-weight: 600;
}

.AboutsectionthreeCardListCarddescription {
    color: #555555;
    font-weight: 400;
    font-size: 16px;
    font-family: var(--font-body, "Open Sans", sans-serif);
    line-height: 1.5;
}

/* --- Responsive --- */

/* 📱 Mobile: 1 column */
@media (max-width: 768px) {
    .AboutsectionthreeCardList {
        grid-template-columns: 1fr;
        /* ✅ One column for mobile */
        width: 100%;
    }

    .AboutsectionthreeCardListCard {
        padding: 20px;
    }

    .AboutsectionthreeCardListCardTiitle {
        font-size: 18px;
    }

    .AboutsectionthreeCardListCarddescription {
        font-size: 14px;
    }
}

/* Small mobile tweaks */
@media (max-width: 480px) {
    /*.global_heading {
        font-size: 1.5rem;
    }*/

    .AboutsectionthreeCardListCardCircle {
        height: 45px;
        width: 45px;
    }

     .Aboutsectionthree {
        padding-left: 12px;
        padding-right: 12px;
    }

    .AboutsectionthreeCardList {
    gap: 14px;
}

}

/* ======================================================================== <<<< ABOUT PAGE SECTION FOUR   >>>> ====================================================================== */

.About_locationvalues {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    flex-direction: column;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.Aboutlocation {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    background-image: url("https://dev.primocys.com/wp-content/uploads/2026/01/Group1410116820.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* ✅ ensures full image visibility */
    aspect-ratio: 16 / 6.5;
    /* ✅ keeps image proportionate on all screens */
}

/* SECTION CONTAINER */
.Aboutlocation_CountryList {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90.38deg, rgba(2, 59, 226, 0.1) 2.06%, rgba(0, 161, 197, 0.1) 99.67%);
    padding: 40px 20px;
    position: relative;
}

/* MAIN WRAPPER: Arrows + Slider */
.Aboutlocation_CountryList_cardWrapperMain {
    width: 78%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

/* ARROW BUTTONS */
.Aboutlocation_CountryListleftArrow,
.Aboutlocation_CountryListrightArrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 2;
}

.Aboutlocation_CountryListleftArrow:hover,
.Aboutlocation_CountryListrightArrow:hover {
    transform: scale(1.1);
}

.Aboutlocation_CountryListArrowImage {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* SLIDER OUTER WRAPPER: hides overflow */
.Aboutlocation_sliderWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* SLIDER TRACK: the sliding flex row */
.Aboutlocation_sliderTrack {
    display: flex;
    gap: 25px;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

/* INDIVIDUAL CARD */
.cardaboutlocation {
    flex: 0 0 auto;
    width: 250px;
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 1rem;
    gap: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

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

.cardaboutlocation_tittl {
    font-family: var(--font-body, sans-serif);
    font-weight: 600;
    font-size: 18px;
    color: #000;
    margin: 0;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .cardaboutlocation {
        width: 220px;
    }

    .Aboutlocation_CountryListArrowImage {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 768px) {
    .Aboutlocation_CountryList {
        flex-direction: column;
        padding: 30px 15px;
    }

    .Aboutlocation_CountryList_cardWrapperMain {
        flex-direction: row;
        gap: 10px;
        width: 100%;
    }

    .cardaboutlocation {
        width: 200px;
        padding: 15px 20px;
    }

    .cardaboutlocationImage {
        height: 40px;
        width: 40px;
    }

    .cardaboutlocation_tittl {
        font-size: 16px;
    }

    .Aboutlocation_CountryListArrowImage {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .cardaboutlocation {
        width: 160px;
        gap: 10px;
    }

    .cardaboutlocation_tittl {
        font-size: 14px;
    }

    .cardaboutlocationImage {
        height: 35px;
        width: 35px;
    }
}

/* ======================================================================== <<<< ABOUT PAGE SECTION  Our Work Process Banner Section   >>>> ====================================================================== */

/* .bgimageabout {
    margin-top: 5rem;
    margin-bottom: 5rem;
    box-sizing: border-box;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background-image: url('images/aboutbg1.svg');
    background-position: center;
    background-repeat: no-repeat;
} */

.AboutBannerSection11 {
    box-sizing: border-box;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    background-image: url("images/aboutbg1.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* makes image fill container fully */
    aspect-ratio: 16 / 7;
    /* keeps 16:9 ratio */
}

/* ============================================================================================================================================================ */
/* ======================================================================== <<<< PORTFOLIO PAGE >>>> ====================================================================== */
/* ============================================================================================================================================================ */

/* === Portfolio Header Section === */
.portfolio-header-section {
    margin: 10rem auto 4rem auto;
    width: 75%;
    text-align: center;
    padding: 0 1rem;
}

.portfolio-header-section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.portfolio-header-section-para {
    width: 65%;
    margin: 0 auto;
}

/* === Responsive Adjustments === */
@media (max-width: 768px) {
    .portfolio-header-section {
        width: 97%;
        margin-top: 10rem;
        margin-bottom: 3rem;
        text-align: left;
    }

    .portfolio-header-section-content {
        align-items: flex-start;
    }

    .portfolio-header-section-para {
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .portfolio-header-section {
        margin-top: 8rem;
        margin-bottom: 2rem;
    }

    .portfolio-header-section-content {
        gap: 1rem;
    }
}

/*  btn lefs connect */

/* ================== portfolio-header-section-btn-main Button ================== */

.portfolio-header-section-btn-main {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portfolio-header-section-btn {
    width: 20%;
}

@media (max-width: 480px) {
    .portfolio-header-section-btn {
        width: 70%;
    }
}

/* ========================== portfolio-filtter-section ======================================= */
/* Main Section */

.portfolio-filter-section {
    width: 67%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .portfolio-filter-section {
        width: 89% !important;
    }
}

/* Outer Gradient Border */
.portfolio-filter-section-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    padding: 2px;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
        overflow: hidden;
}

/* Inner White Background */
.portfolio-filter-section-content-inner {
    background: #ffffff;
    border-radius: calc(1rem - 2px);
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    gap: 25px;
}

/* Buttons */
.portfolio-filter-btn {
    font-family: var(--font-body, "Poppins", sans-serif);
    font-size: 20px;
    font-weight: 500;
    color: #000;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px 20px;
    border-radius: 8px;
    flex: 1;
    /* 🔥 Makes each button full width equally */
    text-align: center;
}

/* Active or Hover State */
.portfolio-filter-btn.active {
    background: #023be221;
}





/* Button click animation */
.portfolio-filter-btn.animate {
    animation: btn-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes btn-pop {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.2); /* pop bigger */
    }
    60% {
        transform: scale(0.95); /* small shrink for bounce */
    }
    100% {
        transform: scale(1.05); /* settle slightly larger than original */
    }
}



/* Responsive Adjustments */
@media (max-width: 768px) {
    .portfolio-filter-section {
        width: 90%;
    }

    .portfolio-filter-btn {
        font-size: 18px;
        padding: 8px 16px;
    }

    .portfolio-filter-section-content-inner {
        gap: 15px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .portfolio-filter-section {
        width: 95%;
    }

    .portfolio-filter-btn {
        font-size: 16px;
        padding: 6px 12px;
        width: 100%;
    }

    .portfolio-filter-section-content-inner {
        flex-direction: column;
    }
}

/*  ================== Card Section Main ======================== */

.portfolio-filter-cards-section {
    width: 100%;
    margin: 0rem auto 0rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================================================================================================================================ */
/* ======================================================================== <<<< HIRE PAGE >>>> ====================================================================== */
/* ============================================================================================================================================================ */
.hireappbgcolor {
    background: #023be20a !important;
    width: 90%;
    min-height: 502px;
    border: 0px solid rgba(0, 161, 197, 0.5) !important;
    border-radius: 40px;
    padding: 30px;
    margin: 0 auto;
}


/* Small screens (phones) */
@media (max-width: 640px) { /* You can adjust the breakpoint */
    .hireappbgcolor {
        width: 100%;
        padding: 20px; /* optional, reduce padding on small screens */
        border-radius: 20px; /* optional, smaller radius for small screens */
    }
}

.transparentcolor {
    background: transparent !important;
}

.hirebtn {
    width: 50% !important;
    height: 50px;
    background: var(--gradient-blue);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    margin: 30px 0 20px 0 !important; /* only TOP margin added */
}

/* Mobile Screen */
@media (max-width: 768px) {
    .hirebtn {
        width: auto !important; /* auto width according to content */
        padding: 0 20px !important; /* optional: keeps spacing around text */
    }
}

/* Review Card */
.clustechreview {
    flex: 1 1 calc(50% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 20px;
    min-height: 130px;

    background: rgba(0, 161, 197, 0.04);
    border-bottom: 13px solid #00a1c5;
    border-radius: 20px;
    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Hover Effect */
.clustechreview:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Icon */
.ImageWeb {
    width: 100px;
    height: auto;
    object-fit: contain;
}

/* Review Stars / Text */
.review-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.review-stars img {
    width: 18px;
    height: 18px;
}

.review-stars span {
    font-size: 14px;
    font-weight: 500;
    color: #5c5c5c;
    font-family: var(--font-body);
}

/* =================== Heading Section =================== */

.bgcolorhire {
    background-color: transparent !important;
}

.Hireheading {
    width: 60% !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column !important;
    align-items: center !important; /* horizontal center */
    justify-content: center !important; /* vertical center */
    gap: 20px;
    text-align: center !important; /* center text */
}

/* =================== Mobile View =================== */
@media (max-width: 480px) {
    .Hireheading {
        width: 100% !important;
        align-items: flex-start !important; /* content start from LEFT */
        text-align: left !important; /* text left */
        padding: 0 16px; /* add small side padding */
    }
}

/*  Hire desing Card  */

/* Card Container */
.HreCardDesing {
    background: #ffffff;
    border: 1px solid #dce6ff;
    box-shadow: 0 4px 12px rgba(0, 88, 255, 0.12);
    border-radius: 16px;
    transition: 0.3s ease;
    cursor: pointer;
    padding-top: 25px;
    padding-bottom: 25px;
    background: linear-gradient(258.54deg, #eef2fe -14.1%, #ffffff 97.93%);
}

/* Hover Effect */
.HreCardDesing:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 88, 255, 0.18);
}

/* Top Row (Left Text + Right Icon) */
.CustomeCarddesing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.Contenthire {
    background: #023be280;
    padding: 8px 14px;
    border-radius: 0 20px 20px 0; /* Top-left 0 | Top-right 20 | Bottom-right 20 | Bottom-left 0 */
    margin-left: 0;
}

/* Title Text */
.ContenthireParagraph {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17px;
    color: white;
    margin: 0;
}

/* Right Circular Icon */
.CircleimageHire {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #bcd3ff;
    background: #f4f8ff;
    margin-right: 25px;
}

.CircleimageHire img {
    height: 60%;
    width: 60%;
    object-fit: contain;
}

/* Bottom Description */
.Hiredescription {
    margin-top: 1rem !important;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #4a4a4a;
    text-align: left;
    padding-left: 25px;
}

/* ============================================================================================================================================================ */
/* ======================================================================== <<<< HIRE PAGE OurShowcaseHire >>>> ====================================================================== */
/* ============================================================================================================================================================ */



/* =================== Outer Container =================== */
.OurShowcaseHire {
    width: 90%;
    max-width: 1400px;
    margin: 3rem auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

/* =================== Left Column =================== */
.ShowCaseHireLeft {
    flex: 1 1 60%; /* Flexible width, 60% default */
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    border-radius: 1rem;
    height: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.HireTittle {
    font-family: var(--font-body);
    color: #000;
    font-size: 2rem;
    font-weight: 600;
}

.HireTittleDis {
    font-family: var(--font-body);
    color: #555555;
    font-weight: 400;
    font-size: 1.125rem;
    padding: 1rem 0;
}

.ShowCaseHireLeft_Content {
    background: #fff;
    border-radius: calc(1rem - 2px);
    padding: 3rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    flex-grow: 1;
}

/* =================== Right Column =================== */
.ShowCaseHireRight {
    flex: 1 1 35%; /* Flexible width, 35% default */
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Large screens: 2×2 grid */
@media (min-width: 1024px) {
    .ShowCaseHireRight {
        grid-template-columns: 1fr 1fr;
    }
}

/* =================== Card Container =================== */
.RightItem {
    width: 100%;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    padding: 3px;
    border-radius: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

/* Inner Card */
.RightItemContent {
    background: #fff;
    border-radius: calc(1rem - 3px);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

/* Gradient Number */
.RightItemContentshado {
    font-family: var(--font-heading, "Arial", sans-serif);
    font-weight: 700;
    font-size: 5rem;
    line-height: 1.2;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #023be2;
    background: linear-gradient(180deg, rgba(2, 59, 226, 0.8) 0%, rgba(0, 161, 197, 0.8) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Gradient Text */
.RightItemText {
    font-weight: 600;
    font-size: 1.25rem;
    color: transparent;
    background: linear-gradient(90deg, #023be2, #00a1c5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
}

/* =================== Responsive =================== */

/* Small screens */
@media (max-width: 1024px) {
    .OurShowcaseHire {
        flex-direction: column;
        width: 95%;
    }

    .ShowCaseHireLeft,
    .ShowCaseHireRight {
        width: 100%;
    }

    .ShowCaseHireLeft_Content {
        padding: 2rem 1.5rem;
    }

    .RightItem {
        max-width: 100%;
    }

    .RightItemContent {
        padding: 1.5rem 1rem;
    }

    .RightItemContentshado {
        font-size: 3rem;
    }

    .RightItemText {
        font-size: 1rem;
    }
}

/* Extra small screens */
@media (max-width: 640px) {
    .HireTittle {
        font-size: 1.5rem;
    }
    .HireTittleDis {
        font-size: 1rem;
    }

    .ShowCaseHireLeft_Content {
        padding: 1.5rem 1rem;
    }

    .RightItemContentshado {
        font-size: 2.5rem;
    }

    .RightItemText {
        font-size: 0.95rem;
    }
}


/* ============================================================================================================================================================ */
/* ======================================================================== <<<< HIRE PAGE certifiedhiredeveloper >>>> ====================================================================== */
/* ============================================================================================================================================================ */


.certifiedhiredeveloper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 3rem; /* Default top margin */
    margin-bottom: 3rem; /* Default bottom margin */
}

/* Small devices (phones, <768px) */
@media (max-width: 767px) {
    .certifiedhiredeveloper {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* Medium devices (tablets, 768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .certifiedhiredeveloper {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

/* Large devices (desktops, >1024px) */
@media (min-width: 1025px) {
    .certifiedhiredeveloper {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}



.certifiedhiredeveloperHeading {
    width: 69% !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column !important;
    align-items: center !important; /* horizontal center */
    justify-content: center !important; /* vertical center */
    gap: 20px;
    text-align: center !important;
}

/* =================== Mobile View =================== */
@media (max-width: 480px) {
    .certifiedhiredeveloperHeading {
        width: 100% !important;
        align-items: flex-start !important; /* content start from LEFT */
        text-align: left !important; /* text left */
        padding: 0 9px; /* add small side padding */
    }
}


.certifiedhiredevelopermain {
    width: 70%;                 /* Default width for large screens */
    margin: 1rem auto 0 auto;   /* Center horizontally, top margin 3rem */
    display: flex;
    gap: 20px;                  /* Gap between child elements */
    flex-direction: row;         /* Side by side on large screens */
}

/* Extra large screens: 1600px and below */
@media (max-width: 1600px) {
    .certifiedhiredevelopermain {
        width: 87%;
    }
}

/* Laptops and smaller screens: 1024px and below */
@media (max-width: 1024px) {
    .certifiedhiredevelopermain {
        flex-direction: column; /* Stack vertically */
        width: 90%;
        gap: 1.5rem;           /* Adjust spacing */
    }
}

/* Tablets: 768px and below */
@media (max-width: 768px) {
    .certifiedhiredevelopermain {
        width: 95%;             /* Almost full width */
        gap: 1rem;
    }
}

/* Small mobile screens: 480px and below */
@media (max-width: 480px) {
    .certifiedhiredevelopermain {
        width: 100%;            /* Full width */
        gap: 0.8rem;            /* Smaller spacing for tight screens */
    }
}


/* Left column */
.certifiedhiredevelopermainleft {
    flex: 0 0 40%; /* 40% width on large screens */
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
}

.hirecontent {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: #555555;
}

/* Wrapper */
.hire-certifiedhiredevelopermainright {
    width: 100%;
    background-color: #023be20a;
    padding: 30px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Arrows */
.hire-arrow {
    width: 45px;
    height: 45px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.hire-left-arrow {
    left: -5px;
}
.hire-right-arrow {
    right: -7px;
}

.hire-arrow img {
    width: 28px;
    height: 28px;
}

/* Cards viewport */
.hire-cards-container {
    display: flex;
    gap: 20px;
    transition: transform 0.45s ease-in-out;
    will-change: transform;
}

.hire-card {
    min-width: calc(35% - 13px);
    max-width: calc(35% - 13px);
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);

    display: flex;
    flex-direction: column;

    /* Center content vertically & horizontally */
    justify-content: center;
    align-items: center;

    gap: 10px;

    /* Center text inside child elements */
    text-align: center;
}

/* Title Wrap */
.hire-card-title-wrap {
    width: fit-content;
    margin: 0 auto 10px;
    position: relative;
}

.HireCardtittl {
    font-weight: 700;
    font-size: 28px;
    background: linear-gradient(90deg, #023be2, #00a1c5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 2;
}

.hire-title-underline {
    width: 100%;
    height: 10px;
    background: #86d8ee;
    position: absolute;
    bottom: 3px;
    left: 0;
    border-radius: 4px;
}

/* Description */
.hiredescriptionText {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
}

/* Mobile — show 1 card */
@media (max-width: 768px) {
    .hire-card {
        min-width: 31%;
        max-width: 90%;
    }

   .hire-arrow{
    top:93%;
   }

   .hire-certifiedhiredevelopermainright{
    padding: 10px !important;
   }
}

/* ============================================================================================================================================================ */
/* ======================================================================== <<<< HIRE PAGE  HIRE CUSTOME APPP DEVELOPER >>>> ====================================================================== */
/* ============================================================================================================================================================ */

/* MAIN WRAPPER */
.HireCustomeDeveloperAppDevelopemtmaincontent {
    width: 69%;
    margin: 0 auto 3rem auto;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .HireCustomeDeveloperAppDevelopemtmaincontent {
        width: 87%;
    }
}

/* CARD OUTER BORDER */
.HireCustomeDeveloperAppDevelopemtmaincontentCard {
    width: 100%;
    background: linear-gradient(90deg, #023be2, #00a1c5);
    padding: 2px;
    border-radius: 1rem;
    margin-top: 2rem;
}

/* INNER CARD CONTENT */
.HireCustomeDeveloperAppDevelopemtmaincontentCardContent {
    background: #fff;
    border-radius: 0.9rem;
    display: flex;
    gap: 60px;
    height: 100%;
}

/* LEFT IMAGE */
.left-image {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.borderradiusglbal img{
        border-radius: 12px 0 0 12px !important; /* top-left, top-right, bottom-right, bottom-left */
}




.borderradiusglbalright img{
    border-radius: 0 12px 12px 0 !important;
}

/* RIGHT CONTENT */
.HireCustomeDeveloperAppDevelopemtmaincontentCardContentRightside {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 40px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
}

/* TAG BUTTONS */
.serviceshire {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.hireweb,
.hireApp {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    padding: 6px 24px;
    border-radius: 1.2rem;
    border: none;
}

.hireweb {
    background-color: #ffe0e0;
}

.hireApp {
    background-color: #ffdbf8;
}

/* HEADING */
.hireheadingvalues {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 600;
    color: #000;
    line-height: 1.3;
}

/* DESCRIPTION */
.hiredescriptionvalues {
    font-family: var(--font-body);
    font-size: 20px;
    color: #555;
    line-height: 1.6;
}

.btnhire {
    width: fit-content;
}

.arrowcolorrimage {
    width: 30px;
    height: 30px;
}

.hoverchnage:hover img {
    rotate: 34deg;
}

/* ============================= */
/* RESPONSIVE FIXES (IMPORTANT) */
/* ============================= */

/* Tablet layout */
@media (max-width: 1024px) {
    .HireCustomeDeveloperAppDevelopemtmaincontent {
        width: 85%;
    }

    .HireCustomeDeveloperAppDevelopemtmaincontentCardContent {
        gap: 40px;
        /* padding: 1.5rem;  */
    }

    .hireheadingvalues {
        font-size: 32px;
    }

    .hiredescriptionvalues {
        font-size: 18px;
    }
}

/* Mobile layout */
@media (max-width: 768px) {
    .HireCustomeDeveloperAppDevelopemtmaincontent {
        width: 95%;
    }

    .HireCustomeDeveloperAppDevelopemtmaincontentCardContent {
        flex-direction: column;
        gap: 25px;
        /* padding: 1.5rem; */
    }

    .left-image {
        width: 100%;
    }

    .left-image img {
        height: auto;
    }

    .HireCustomeDeveloperAppDevelopemtmaincontentCardContentRightside {
        width: 100%;
        padding-right: 0;
    }

    .hireheadingvalues {
        font-size: 26px;
        text-align: left;
    }

    .hiredescriptionvalues {
        font-size: 16px;
        text-align: left;
    }

    .serviceshire {
        justify-content: flex-start;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .hireheadingvalues {
        font-size: 22px;
    }

    .hiredescriptionvalues {
        font-size: 15px;
    }

    .btnhire button {
        padding: 8px 18px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== <<<< HIRE PAGE  HIRE  BANNER SECTION >>>> ====================================================================== */
/* ============================================================================================================================================================ */
/* Banner Section */

/* MAIN BANNER SECTION */
.hire-banner-section {
    width: 69%;
    margin: 0 auto;
    height: 320px;
    background-image: url("./images/hirebgimage.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .hire-banner-section {
        width: 87% ;

    }
}

/* BANNER HEADING */
.hire-banner-heading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 50px;
    line-height: 1.2;
    color: #fff;
    max-width: 70%;
    margin-bottom: 20px;
}

/* BUTTON - WHITE BACKGROUND */
.hire-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 28px;
    background: #ffffff; /* White background */
    border-radius: 50px;
    border: none;

    cursor: pointer;
    transition: 0.3s ease;
}

/* GRADIENT TEXT */
.hire-btn-text {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(90deg, #086ada, #00a1c5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ICON INSIDE BUTTON */
.hire-banner-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* HOVER EFFECT */
.hire-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* MOBILE RESPONSIVE */
@media (max-width: 480px) {
    .hire-banner-section {
        width: 95%;
        height: auto;
        padding: 40px 20px;
    }

    .hire-banner-heading {
        font-size: 26px;
        max-width: 100%;
    }

    .hire-banner-btn {
        font-size: 16px;
        padding: 10px 22px;
        gap: 8px;
    }

    .hire-btn-text {
        font-size: 16px;
    }

    .hire-banner-btn img {
        width: 18px;
        height: 18px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== <<<< HIRE PAGE  HIRE  SKILLS SECTION >>>> ====================================================================== */
/* ============================================================================================================================================================ */

/* SECTION WRAPPER */
.hireskillsection {
    width: 100%;
}

/* MAIN CARD WRAPPER */
.hireskillscardmain {
    width: 70%;
    margin: 40px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 25px;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .hireskillscardmain {
        width: 87%;
    }
}

/* EACH CARD */
.hireskillscard {
    width: 48%; /* Desktop: 2 per row */
    background: #ffffff;
    padding: 25px;
    border: 1px solid #023be240;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* CARD HOVER */
.hireskillscard:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* ICON */
.hireskillscard img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* TEXT */
.hireskillscardtitttle {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    line-height: 1.4;
}

/* ------------------------------- */
/* TABLET SCREENS (max-width: 1024px) */
/* ------------------------------- */
@media (max-width: 1024px) {
    .hireskillscardmain {
        width: 85%;
        gap: 20px;
    }

    .hireskillscard {
        width: 48%; /* Still 2 per row */
        padding: 20px;
    }

    .hireskillscardtitttle {
        font-size: 17px;
    }
}

/* ------------------------------- */
/* LARGE MOBILE (max-width: 768px) */
/* ------------------------------- */
@media (max-width: 768px) {
    .hireskillscardmain {
        width: 90%;
    }

    .hireskillscard {
        width: 100%; /* 1 card per row */
        padding: 18px;
    }

    .hireskillscard img {
        width: 42px;
        height: 42px;
    }

    .hireskillscardtitttle {
        font-size: 17px;
    }
}

/* ------------------------------- */
/* SMALL MOBILE (max-width: 480px) */
/* ------------------------------- */
@media (max-width: 480px) {
    .hireskillscardmain {
        width: 95%;
    }

    .hireskillscard {
        padding: 16px;
        gap: 12px;
    }

    .hireskillscardtitttle {
        font-size: 16px;
    }
}

/* ------------------------------- */
/* BUTTON SECTION */
/* ------------------------------- */
.btnsklills {
    width: 100%;
    margin: 30px auto;
    display: flex;
    justify-content: center;
}

/* Bottom Button Styling */
.btnhirebottome {
    padding: 0.75rem 3.5rem !important;
}

@media (max-width: 768px) {
    .btnhirebottome {
        padding: 0.65rem 2.5rem !important;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .btnhirebottome {
        padding: 0.6rem 2rem !important;
        font-size: 14px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== <<<< HIRE   PROCESS >>>> ====================================================================== */
/* ============================================================================================================================================================ */

.hireprocess {
    width: 100%;
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
    flex-direction: column; /* Align content vertically */
    text-align: center; /* Center text */
}

/* MAIN ROW */
.hire-development-process-row {
    width: 67%;
    margin: auto;
    background: #023be20a;
    padding: 3rem;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    flex-wrap: wrap;
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .hire-development-process-row {
        width: 87% !important;
    }
}

/* Step */
.hire-development-step {
    width: 23%;
    text-align: center;
    position: relative;
}

/* Step Circle */
.hire-step-circle {
    width: 55px;
    height: 55px;
    margin: 0 auto 12px auto;
    border-radius: 50%;
    background: linear-gradient(90deg, #023be2, #00a1c5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 700;
    z-index: 2;
}

/* ----------------------------- */
/*    DESKTOP HORIZONTAL ARROW   */
/* ----------------------------- */
.hire-development-step:not(:nth-last-child(-n + 2))::after {
    content: "";
    position: absolute;
    top: 18px; /* center align with circle */
    left: calc(141px + 20px); /* starts after circle */
    width: calc(100% - 20px);
    height: 24px;
    background-image: url("./images/LineArrowimage.webp");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left center;
    z-index: 1;
}

/* Title */
.hire-step-title {
    font-weight: 700;
    font-size: 22px;
}

.hire-step-description {
    font-size: 15px;
    color: #555;
    font-weight: 400;
}

/* ---------------------------------- */
/* TABLETS — 2 STEPS PER ROW */
/* ---------------------------------- */
@media (max-width: 992px) {
    .hire-development-process-row {
        width: 90%;
        padding: 2rem;
    }

    .hire-development-step {
        width: 48%;
        margin-bottom: 60px;
    }

    /* Tablet Arrow (shorter but connected) */
    .hire-development-step:not(:last-child)::after {
        top: 28px;
        left: 85px;
        width: calc(100% - 100px);
        height: 20px;
        background-size: 100% auto;
    }

    /* Remove arrow after 2nd & 4th step (end of row) */
    .hire-development-step:nth-child(2n)::after {
        display: none;
    }
}

/* ---------------------------------- */
/* MOBILE — VERTICAL ARROWS */
/* ---------------------------------- */
@media (max-width: 768px) {
    .hire-development-process-row {
        flex-direction: column;
        width: 95%;
        padding: 2rem;
    }

    .hire-development-step {
        width: 100%;
        text-align: center;
    }

    /* PERFECT vertical connection */
    .hire-development-step:not(:nth-last-child(-n + 2))::after {
        content: "";
        position: absolute;
        top: 75px; /* 100% perfect under circle */
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
        width: 80px; /* large enough */
        height: 22px;
        background-image: url("./images/LineArrowimage.webp");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center;
        z-index: 1;
    }

    .hire-step-title {
        font-size: 18px;
    }
}

/* ---------------------------------- */
/* SMALL MOBILE FIXES */
/* ---------------------------------- */
@media (max-width: 480px) {
    .hire-step-circle {
        width: 48px;
        height: 48px;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .hire-development-step:not(:nth-last-child(-n + 2))::after {
        top: 163px;
        width: 70px;
        height: 18px;
    }

    .hire-step-title {
        font-size: 16px;
    }

    .hire-step-description {
        font-size: 14px;
    }
}

/* Background Section */
.hirebgimageprocess {
    width: 100%;
    padding: 40px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    background-image: url("./images/Frame\ 1410116592.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 1rem;
    box-sizing: border-box;
}

/* Left Content Box */
.hire-left-box {
    width: 60%;
    text-align: left; /* ⬅ ALWAYS LEFT */
}

/* Title */
.leftsidebgcontenttitttle {
    font-family: var(--font-heading);
    color: #fff;
    font-weight: 600;
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 10px;
    text-align: left; /* ⬅ ALWAYS LEFT */
}

/* Description */
.leftsidebgcontentdes {
    font-family: var(--font-body);
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left; /* ⬅ ALWAYS LEFT */
}

/* Right Button Box */
.rightsidecontent {
    width: 40%;
    display: flex;
    justify-content: flex-end;
}

/* Button */
.hire-banner-btn {
    background-color: #fff;
    color: #000;
    padding: 12px 22px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    gap: 10px;
}

/* Tablets */
@media (max-width: 1024px) {
    .hirebgimageprocess {
        flex-direction: column;
        align-items: flex-start; /* ⬅ Content stays LEFT */
        padding: 30px 20px;
    }

    .hire-left-box,
    .rightsidecontent {
        width: 100%;
    }

    .rightsidecontent {
        justify-content: flex-start; /* ⬅ Button also LEFT */
    }

    .leftsidebgcontenttitttle {
        font-size: 30px;
    }

    .leftsidebgcontentdes {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .hirebgimageprocess {
        padding: 20px;
    }

    .leftsidebgcontenttitttle {
        font-size: 24px;
    }

    .leftsidebgcontentdes {
        font-size: 14px;
    }

    .hire-banner-btn {
        padding: 10px 18px;
    }
}





/* ============================================================================================================================================================ */
/* ======================================================================== <<<< Hire android App Developer as per your Need  >>>> ====================================================================== */
/* ============================================================================================================================================================ */




/* =========================================================
   MAIN SECTION WRAPPER
========================================================= */
.hiredevelopernedd {
    position: relative;
    width: 100%;
    padding-top: 140px;
    padding-bottom: 120px;
    overflow: hidden;
}

/* BG SHAPE WITH CLIP-PATH */
.hiredevelopernedd-bg-shape {
    background: linear-gradient(90deg, #023BE2 2%, #00A1C5 99%);
    height: 550px;
    width: 100%;
    clip-path: polygon(
        49% 40%,
        100% 0,
        100% 100%,
        0% 100%,
        0 48%,
        0 0
    );
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


/* =========================================================
   CARD LISTING AREA
========================================================= */
.hiredeveloperneddcardlisting {
    width: 67%;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    position: relative;
    z-index: 5;
    top: -100px;
}


/* =========================================================
   CARD OUTER WRAPPER (GRADIENT BORDER)
========================================================= */
.hiredeveloperneddcard {
    width: 30%;
    height: 350px;
    padding: 3px;
    border-radius: 1.2rem;
    background: linear-gradient(90deg, #023BE2, #00A1C5);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: transform .3s ease, box-shadow .3s ease;
    cursor: pointer;
}

.hiredeveloperneddcard:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}


/* CARD INNER */
.hiredeveloperneddcardinner {
    background: #fff;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    text-align: center;
}


/* PRICE BLOCK */
.pricehiredeveloper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricedeveloper {
    font-family: var(--font-heading);
    color: #023BE2;
    font-size: 60px;
    font-weight: 700;
    margin: 0;
}

.timedevelper {
    font-family: var(--font-body);
    font-weight: 500;
    color: #000;
    font-size: 22px;
    margin: 0;
}


/* DESCRIPTION BLOCK */
.hiredeveloperdes {
    background: rgba(2, 59, 226, 0.08);
    padding: 35px 20px;
    border-radius: 10px;
    width: 100%;
}

.developerdes {
    font-family: var(--font-body);
    color: #000;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    margin: 0;
}



/* =========================================================
   XXL — EXTRA LARGE SCREENS (1600px+)
========================================================= */
@media (min-width: 1600px) {
    .hiredeveloperneddcardlisting { width: 67%; gap: 40px; }
    .hiredeveloperneddcard { width: 28%; height: 380px; }
    .pricedeveloper { font-size: 70px; }
    .developerdes { font-size: 20px; line-height: 28px; }
}


/* =========================================================
   XL — LARGE DESKTOPS (1280px - 1599px)
========================================================= */
@media (max-width: 1599px) and (min-width: 1280px) {
    .hiredeveloperneddcardlisting { width: 70%; gap: 30px; }
    .hiredeveloperneddcard { width: 30%; height: 360px; }
    .pricedeveloper { font-size: 60px; }
    .developerdes { font-size: 18px; line-height: 26px; }
    .hiredeveloperneddbtnbt{
        left: 39% !important;
    }
}


/* =========================================================
   LG — LAPTOPS (1024px - 1279px)
========================================================= */
@media (max-width: 1279px) and (min-width: 1024px) {
    .hiredeveloperneddcardlisting { width: 80%; gap: 25px; }
    .hiredeveloperneddcard { width: 32%; height: 330px; }
    .pricedeveloper { font-size: 50px; }
}


/* =========================================================
   MD — TABLETS (769px - 1023px)
========================================================= */
@media (max-width: 1023px) and (min-width: 769px) {
    .hiredeveloperneddcardlisting { width: 90%; gap: 25px; top: -80px; }
    .hiredeveloperneddcard { width: 45%; height: 330px; }
    .pricedeveloper { font-size: 45px; }
    .timedevelper { font-size: 20px; }
    .developerdes { font-size: 16px; line-height: 24px; }
}


/* =========================================================
   SM — MOBILE (481px - 768px)
========================================================= */
@media (max-width: 768px) and (min-width: 481px) {
    .hiredeveloperneddcardlisting { width: 95%; gap: 20px; top: -60px; }
    .hiredeveloperneddcard { width: 48%; height: 320px; }
    .pricedeveloper { font-size: 40px; }
    .timedevelper { font-size: 18px; }
    .developerdes { font-size: 15px; }
}


/* =========================================================
   XS — SMALL MOBILE (<=480px)
========================================================= */
@media (max-width: 480px) {
    .hiredeveloperneddcardlisting {
        width: 100%;
        gap: 20px;
        top: -50px;
        flex-direction: column;
        align-items: center;
    }
    
    .hiredevelopernedd-bg-shape{
        height: 1030px;
    }

    
    .hiredeveloperneddbtnbt{
        left: 15% !important;
        bottom: 95px !important;
    }

    .hiredeveloperneddcard {
        width: 90%;
        height: auto;
    }

    .hiredeveloperneddcardinner {
        padding: 30px 20px;
    }

    .pricedeveloper {
        font-size: 36px;
    }

    .timedevelper {
        font-size: 16px;
    }

    .developerdes {
        font-size: 14px;
        line-height: 22px;
    }
}





























.hiredeveloperneddbtnbt{
    z-index: 5 !important;
    position: absolute;
    left: 41%;
    bottom: 120px;
}





/* ============================================================================================================================================================ */
/* ======================================================================== <<<< HIRE   COMPETITORS  >>>> ====================================================================== */
/* ============================================================================================================================================================ */

.hirecompetitors {
    width: 100%;
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center;
    flex-direction: column; /* Align content vertically */
    text-align: center; /* Center text */
    background-color: #5d5d5d08;
    padding-top: 2rem;
}


.hiredeveloperasneed{
    background: transparent !important;
}

.hirecompetitorsCard {
    width: 67%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 30px 70px;
    flex-wrap: wrap; /* allow wrapping */
}

/* For screens 1506px and below */
@media (max-width: 1600px) {
    .hirecompetitorsCard {
        width: 87% !important;
    }
}

/* Card */
.card-box {
    position: relative;
    background: #ffffff;
    padding: 30px 28px 30px 30px;
    border-radius: 18px;
    box-shadow: 4px 4px 13.6px 0px #00000040;

    flex: 1 1 calc(50% - 70px); /* 2 cards per row on large screens */
    box-sizing: border-box;
    transition: all 0.35s ease;
    cursor: pointer;
}

.card-box:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0px 18px 35px rgba(0, 0, 0, 0.15);
}

/* Floating Icon */
.icon-wrapper {
    position: absolute;
    left: -35px;
    top: 50px;
    width: 70px;
    height: 70px;
    background: #ffffff;
    box-shadow: -5px 4px 22px 0px #00000030;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.icon-wrapper img {
    width: 36px;
    height: 36px;
}

/* Text Content */
.text-content {
    text-align: left;
    padding-left: 1.5rem;
}

.text-content h3 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    font-family: var(--font-heading);
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 0.5rem;
}

.text-content p {
    margin-top: 8px;
    font-size: 18px;
    font-family: var(--font-body);
    line-height: 1.55;
    color: #555555;
}

/* -----------------------------
   📱 Mobile & Tablet Responsive 
   ----------------------------- */

/* Max width 1024px (medium screens) → 1 card per row */
@media (max-width: 1024px) {
    .hirecompetitorsCard {
        width: 90%;
        gap: 30px;
    }

    .card-box {
        flex: 1 1 100%; /* full width */
    }

    .icon-wrapper {
        left: -25px;
        top: 40px;
        width: 60px;
        height: 60px;
    }

    .icon-wrapper img {
        width: 30px;
        height: 30px;
    }
}

/* Max width 600px (small mobile) */
@media (max-width: 600px) {
    .hirecompetitorsCard {
        width: 95%;
        gap: 20px;
    }

    .card-box {
        padding: 25px;
    }

    .text-content h3 {
        font-size: 24px;
    }

    .text-content p {
        font-size: 16px;
    }
}

/* =======================================================================
   MODAL OVERLAY
========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1100;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* =======================================================================
   MODAL BOX
========================================================================== */
.modal-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    background-color: #fff;
    background-image: url("./images/modalimage.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
    z-index: 12000;
    width: 80%;
    max-width: 1400px;
    height: 740px;
    overflow: hidden;
    color: #fff;
}

.modal-box.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Close Icon */
.modal-close {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1300;
}

/* =======================================================================
   LAYOUT WRAPPER
========================================================================== */
.showmodalmain {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 20px;
    padding-left: 60px;
    box-sizing: border-box;
}

/* =======================================================================
   LEFT SIDE – TEXT CONTENT
========================================================================== */
.leftsidecontent {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding-right: 20px;
}

.leftsidecontentheading {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 12px;
    font-family: var(--font-heading);
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Show only 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leftsidecontentdes {
    font-size: 20px;
    line-height: 1.5;
    font-family: var(--font-body);

    display: -webkit-box;
    -webkit-line-clamp: 2; /* Show only 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Slider Wrapper */
.modalcardslidemain {
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    position: relative;
    margin-top: 3rem;
}

/* Slider Row */
.card-slider {
    display: flex;
    transition: transform 0.45s ease;
}

/* Each Card */
.carddesign {
    flex: 0 0 100%;
    background: linear-gradient(350.78deg, #0d1520 33.5%, #375986 304.55%);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    font-family: var(--font-body);
}

/* Card Profile */
.carddesignprofile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.carddesignprofile img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Text */
.profiletext .name {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-heading);
}

.profiletext .role {
    font-size: 15px;
    color: #b4b4b4;
    font-family: var(--font-body);
}

.divider {
    height: 5px;
    margin-top:-23px;
    background: rgba(255, 255, 255, 0.3);
}

/* Description */
.description {
    font-size: 16px;
    line-height: 1.5;
    font-family: var(--font-body);
    font-weight: 400;
}

/* =======================================================================
   SLIDER INDICATORS
========================================================================== */
.slider-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding-bottom: 1rem;
}

.slider-indicators span {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.slider-indicators .active {
    background: #fff;
    transform: scale(1.3);
    box-shadow: 0 0 10px #fff;
}

/* =======================================================================
   RESPONSIVE BREAKPOINTS
========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .modal-box {
        width: 100%;
        height: auto;
        padding: 10px 0;
    }

    .showmodalmain {
        flex-direction: column;
        padding: 20px;
    }

 .leftsidecontent {
        align-items: center;
        text-align: center;
        padding-right: 0;
        display: none;
    }

    .leftsidecontentheading {
        font-size: 40px;
    }

    .leftsidecontentdes {
        font-size: 18px;
    }

    .rightsidemodalvalues {
        padding: 20px;
    }
}

/* Large Mobile */
@media (max-width: 768px) {
    .modal-box {
        width: 95%;
        height: auto;
    }

    .leftsidecontentheading {
        font-size: 32px;
    }

    .leftsidecontentdes {
        font-size: 17px;
    }

    .modalcardslidemain {
        max-width: 100%;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .showmodalmain {
        gap: 10px;
    }
    .modal-box {
        position: fixed;
        top: 55% !important;
        transform: translate(-50%, -50%) !important;
        height: 100vh !important; /* full height */
        width: 100% !important;
        border-radius: 1rem !important; /* avoid clipped corners */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .leftsidecontentheading {
        font-size: 26px;
    }

    .leftsidecontentdes {
        font-size: 16px;
    }

    .carddesign {
        padding: 16px;
    }

    .carddesignprofile img {
        width: 45px;
        height: 45px;
    }
}

/* =======================================================================
   RIGHT SIDE – FORM VALUES
========================================================================== */
.rightsidemodalvalues {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffffff10;
    backdrop-filter: blur(60px);
    border-radius: 22px;
    padding: 25px;
    width: 100%;
    height: 100%;
}

/* =======================================================================
   RIGHT SIDE – Heading & Description
========================================================================== */

.HeadingDes {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.formheadingmodal {
    font-size: 43px;
    font-weight: 600;
    color: #fff;
    font-family: var(--font-heading);
}

.formdesmodal {
    font-size: 24px;
    color: #f0f0f0;
    font-family: var(--font-body);
    font-weight: 400;
}

.modal-form-wrapper {
    width: 100%;
}

/* Form Container */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.modal-row {
    display: flex;
    gap: 20px;
}

/* Outlined Input */
.modal-input,
.modal-textarea {
    width: 100%;
    padding: 18px 14px 10px;
    border: 1.8px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: transparent;
    color: white;
    font-size: 16px;
    outline: none;
    transition: border 0.25s ease;
}

/* Focus Border */
.modal-input:focus,
.modal-textarea:focus {
    border-color: #4da3ff;
}
/* GROUP WRAPPER */
.modal-group {
    position: relative;
    width: 100%;
}

/* OUTLINE CUT EFFECT */
.modal-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px; /* start from label padding */
    height: 10px; /* cut height */
    width: 0; /* hidden by default */
    background: red; /* modal background */
    z-index: 2;
    transition: width 0.25s ease;
}

/* On focus OR when input has text */
.modal-input:focus ~ .modal-label,
.modal-input:not(:placeholder-shown) ~ .modal-label {
    background: linear-gradient(90deg, #232428 0%, #303030 100%);
    padding: 0px 4px;
}

/* Expand CUT on focus */
.modal-input:focus ~ .modal-label,
.modal-input:not(:placeholder-shown) ~ .modal-label {
    top: -6px;
    left: 12px;
    font-size: 12px;
    color: #4da3ff;
}

.modal-input:focus ~ .modal-label ~ .cut,
.modal-input:not(:placeholder-shown) ~ .modal-label ~ .cut {
    width: 60px; /* match label width */
}

/* OUTLINE INPUT */
.modal-input {
    width: 100%;
    padding: 18px 14px 10px;
    border: 1.8px solid white;
    border-radius: 10px;
    background: transparent;
    color: white;
    font-size: 16px;
    outline: none;
    transition: border 0.25s ease;
}

.modal-input:focus {
    border-color: #4da3ff;
}

/* FLOATING LABEL */
.modal-label {
    position: absolute;
    top: 14px;
    left: 14px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    pointer-events: none;
    transition: 0.25s ease;
    z-index: 3;
}

/* THE CUT LAYER */
.cut {
    position: absolute;
    top: 0;
    left: 12px;
    height: 10px;
    width: 0;
    background: linear-gradient(90deg, #232428 0%, #303030 100%);
    z-index: 1;
    transition: width 0.25s ease;
}

.modal-form-red {
    color: red;
}

/* Remove placeholder text for detection */
.modal-input::placeholder,
.modal-textarea::placeholder {
    color: transparent;
}

/* Textarea */
.modal-textarea {
    height: 120px;
    resize: none;
}

/* Phone Flag */
.modal-flag-group {
    position: relative;
}

.modal-flag {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}
/* -------------------------------------------------------
   MODAL FORM – RESPONSIVE + FLOATING LABEL + CUT EFFECT
------------------------------------------------------- */

.HeadingDes {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.formheadingmodal {
    font-size: 43px;
    font-weight: 600;
    color: #fff;
    font-family: var(--font-heading);
}

.formdesmodal {
    font-size: 24px;
    color: #f0f0f0;
    font-family: var(--font-body);
    font-weight: 400;
}

/* WRAPPER */
.modal-form-wrapper {
    width: 100%;
}

/* FORM CONTAINER */
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.modal-row {
    display: flex;
    gap: 20px;
}

/* GROUP WRAPPER */
.modal-group {
    position: relative;
    width: 100%;
}

/* ------------------------------
   OUTLINE INPUT + LABEL + CUT
------------------------------ */

.modal-input,
.modal-textarea {
    width: 100%;
    padding: 18px 14px 10px;
    border: 1.8px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    background: transparent;
    color: white;
    font-size: 16px;
    outline: none;
    transition: border 0.25s ease;
}

/* ON FOCUS */
.modal-input:focus,
.modal-textarea:focus {
    border-color: #4da3ff;
}

/* FLOAT LABEL */
.modal-label {
    position: absolute;
    top: 14px;
    left: 14px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    pointer-events: none;
    transition: 0.25s ease;
    z-index: 3;
}

/* CUT EFFECT */
.cut {
    position: absolute;
    top: 0;
    left: 10px;
    height: 10px;
    width: 0;
    background: #232428;
    z-index: 1;
    transition: width 0.25s ease;
}

/* LABEL FLOAT + CUT EXPAND */
.modal-input:focus ~ .modal-label,
.modal-input:not(:placeholder-shown) ~ .modal-label {
    top: -6px;
    left: 12px;
    font-size: 12px;
    background: linear-gradient(90deg, #232428 0%, #303030 100%);
    padding: 0px 4px;
    color: #4da3ff;
}

.modal-input:focus ~ .cut,
.modal-input:not(:placeholder-shown) ~ .cut {
    width: 55px; /* adjust based on label text */
}

/* TEXTAREA */
.modal-textarea {
    height: 120px;
    resize: none;
}

.modal-input::placeholder,
.modal-textarea::placeholder {
    color: transparent;
}

/* PHONE FLAG */
.modal-flag-group {
    position: relative;
}

.modal-flag {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

.modal-input-flag {
    padding-left: 44px;
}

.modal-form-red {
    color: red;
}

/* ------------------------------
        SUBMIT BUTTON
------------------------------ */

.modal-btn-wrapper {
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.modal-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    border: none;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition:
        background 0.3s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.modal-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 161, 197, 0.35);
}

.modal-btn-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 1.2);
}
.modal-btn:hover .modal-btn-icon img {
    transform: rotate(38deg);
}

/* -------------------------------------------------------
            RESPONSIVENESS FOR ALL SCREENS
------------------------------------------------------- */

/* TABLET (max-width: 1024px) */
@media (max-width: 1024px) {
    .formheadingmodal {
        font-size: 36px;
    }
    .formdesmodal {
        font-size: 20px;
    }
    .modal-btn-wrapper {
        width: 70%;
    }
}

/* MOBILE LARGE (max-width: 768px) */
@media (max-width: 768px) {
    .modal-row {
        flex-direction: column;
    }
    .formheadingmodal {
        font-size: 32px;
    }
    .formdesmodal {
        font-size: 18px;
    }
    .modal-btn-wrapper {
        width: 80%;
    }
}

/* MOBILE SMALL (max-width: 480px) */
@media (max-width: 480px) {
    .formheadingmodal {
        font-size: 28px;
    }
    .formdesmodal {
        font-size: 16px;
    }

    .modal-input,
    .modal-textarea {
        font-size: 14px;
        padding: 16px 12px 8px;
    }

    .modal-btn {
        margin-bottom: 3rem !important;
    }
    .modal-label {
        font-size: 14px;
    }

    .modal-btn-wrapper {
        width: 100%;
    }
}

/* EXTRA SMALL (max-width: 360px) */
@media (max-width: 360px) {
    .formheadingmodal {
        font-size: 24px;
    }
    .modal-row {
        gap: 12px;
    }
    .modal-btn {
        font-size: 15px;
        padding: 13px;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== WEB PORTFOLIO ====================================================================== */
/* ============================================================================================================================================================ */

/* MAIN WRAPPER */
.webportfolioMain {
    width: 100%;
    padding: 80px 0 0 0;
    box-sizing: border-box;
    background-image: url("./images/WebPortfolio.webp");
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}




/*  for mobile  screnn  */



/* ========================================================= */
/* BASE STYLE (Hidden on Large Screens by Default)           */
/* ========================================================= */
.webportfolio-mobile {
    width: 84%;
    min-height: 650px;
    display: none; /* HIDE on large screens */
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 20px;
    padding: 60px 0 60px 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-left: auto;
}


/* ========================================================= */
/* SHOW ONLY ON TABLET + MOBILE (<=1024px)                   */
/* ========================================================= */
@media (max-width: 1024px) {
    .webportfolio-mobile {
        display: flex; /* SHOW */
    }
}


/* -------------------------------------------------------- */
/* -------- EXTRA LARGE SCREENS (>=1600px) ---------------- */
/* (HIDDEN because display:none applied above)              */
/* -------------------------------------------------------- */
@media (min-width: 1600px) {
    .webportfolio-mobile {
        width: 84%;
    }
}

/* -------------------------------------------------------- */
/* -------- LARGE DESKTOPS (1280px - 1599px) -------------- */
/* (HIDDEN because display:none applied above)              */
/* -------------------------------------------------------- */
@media (min-width: 1280px) and (max-width: 1599px) {
    .webportfolio-mobile {
        width: 96%;
    }
}

/* -------------------------------------------------------- */
/* -------- LAPTOP (1025px - 1279px) ---------------------- */
/* (HIDDEN because larger than 1024px)                      */
/* -------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1279px) {
    .webportfolio-mobile {
        width: 90%;
    }
}

/* -------------------------------------------------------- */
/* -------- TABLET (769px - 1024px) ----------------------- */
/* (VISIBLE)                                                */
/* -------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .webportfolio-mobile {
        width: 100%;
    }
}

/* -------------------------------------------------------- */
/* -------- MOBILE (481px - 768px) ------------------------ */
/* (VISIBLE)                                                */
/* -------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
    .webportfolio-mobile {
        width: 95%;
    }
}

/* -------------------------------------------------------- */
/* -------- SMALL MOBILE (<=480px) ------------------------ */
/* (VISIBLE)                                                */
/* -------------------------------------------------------- */
@media (max-width: 480px) {
    .webportfolio-mobile {
        width: 100%;
    }
}
/* -------------------------------------------------------- */
/* -------------------- BACKGROUND SECTION ----------------- */
/* -------------------------------------------------------- */

.webportfolio {
    width: 84%;
    min-height: 650px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 20px;
    padding: 60px 0 60px 10px; /* top right bottom left */
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-left: auto;
}

/* -------------------------------------------------------- */
/* ----------------- VISIBILITY CONTROL -------------------- */
/* -------- SHOW ONLY ON LARGE SCREENS (>=1024px) ---------- */
/* -------------------------------------------------------- */

/* Hide on mobile + tablet (0px – 1023px) */
@media (max-width: 1023px) {
    .webportfolio {
        display: none !important;
    }
}

/* Show on laptop + desktop (>=1024px) */
@media (min-width: 1024px) {
    .webportfolio {
        display: flex !important;
    }
}

/* -------------------------------------------------------- */
/* -------- EXTRA LARGE SCREENS (>=1600px) ---------------- */
/* -------------------------------------------------------- */

@media (min-width: 1600px) {
    .webportfolio {
        width: 84%;
    }
}

/* -------------------------------------------------------- */
/* -------- LARGE DESKTOPS (1280px - 1599px) -------------- */
/* -------------------------------------------------------- */

@media (min-width: 1280px) and (max-width: 1599px) {
    .webportfolio {
        width: 96%;
    }
}

/* -------------------------------------------------------- */
/* -------- LAPTOP / MEDIUM SCREENS (1024px - 1279px) ----- */
/* -------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {
    .webportfolio {
        width: 90%;
    }
}

/* -------------------------------------------------------- */
/* -------- TABLET (769px - 1023px) ----------------------- */
/* -------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1023px) {
    .webportfolio {
        width: 90%;
    }
}

/* -------------------------------------------------------- */
/* -------- MOBILE (481px - 768px) ------------------------ */
/* -------------------------------------------------------- */

@media (min-width: 481px) and (max-width: 768px) {
    .webportfolio {
        width: 95%;
    }
}

/* -------------------------------------------------------- */
/* -------- SMALL MOBILE (<=480px) ------------------------ */
/* -------------------------------------------------------- */

@media (max-width: 480px) {
    .webportfolio {
        width: 100%;
    }
}


/* LEFT CONTENT */
.left-content {
    width: 50%;
    min-width: 280px;
    text-align: left;
}

.heading {
    font-size: 40px;
    font-weight: 700;
    margin: 0;
}

.sub-heading {
    font-size: 40px;
    background: linear-gradient(90deg, #086ada, #00a1c5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.description {
    margin-top: 15px;
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    max-width: 90%;
}

/* BUTTON */
.connect-btn {
    margin-top: 25px;
    background: #2563eb;
    padding: 12px 28px;
    border-radius: 50px;
    color: #fff;
    font-size: 18px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.connect-btn:hover {
    background: #1e40af;
}

/* FEATURE BOX WRAPPER (GRANDPARENT) */
.feature-box-wrapper {
    margin-top: 2rem;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    position: relative;
    border-radius: 1rem;
    padding: 2px;
    background: transparent;
}







.feature-box-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 2px;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* INNER FEATURE BOX */
.feature-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.05); /* subtle inner bg */
}

.feature-box-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 154, 199, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-box-circle img {
    width: 46%;
    height: 46%;
    object-fit: contain;
}

.feature-box-content {
    display: flex;
    flex-direction: column;
}




/* RIGHT IMAGE */
.right-image {
    width: 50%;
    min-height: 580px;
    background-image: url("./images/nlyticalhomebg.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 30px;
    min-width: 280px;
    margin-top: 3rem;
}

/* MEDIA QUERIES */

/* Medium screens (tablets) */
@media (max-width: 1024px) {
    .webportfolio {
        padding: 40px 20px;
    }
    .left-content {
        width: 55%;
    }
    .right-image {
        width: 45%;
        min-height: 300px;
    }
    .feature-box-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

/* Small screens (mobile) */
@media (max-width: 768px) {
    .webportfolio {
        width: 100%;
        padding: 30px 15px;
        border-radius: 0;
        background-position: center center;
    }
    .left-content,
    .right-image {
        width: 97%;
    }
    .right-image {
        min-height: 300px;
        margin-top: 20px;
    }
    .heading {
        font-size: 32px;
    }
    .sub-heading {
        font-size: 32px;
    }
    .description {
        font-size: 16px;
        max-width: 100%;
    }
    .connect-btn {
        font-size: 16px;
        padding: 10px 20px;
    }
    .feature-box-wrapper {
        grid-template-columns: 1fr;
        gap: 15px;
        width: 97% !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .heading {
        font-size: 28px;
    }
    .sub-heading {
        font-size: 28px;
    }
    .description {
        font-size: 14px;
    }
    .connect-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
}





.hideonmobilescrenn{
    display: none;
    
}

@media (max-width: 768px) {
    .hideonmobilescrenn{
        display: block;
        
    }
}






/* ============================================================================================================================================================ */
/* ======================================================================== WEB PORTFOLIO NLYTICAL STORE BG IMAGE  ====================================================================== */
/* ============================================================================================================================================================ */

.webnlyticalstroe {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.nlyticalwebstoreheadingsub {
    color: #0146ae !important;
}
.storebgimage {
    background-image: url("./images/nlyticalstorebg.webp");
    background-size: contain; /* fill container, avoid extra space */
    background-position: center;
    background-repeat: no-repeat;
    width: 90%; /* default width for normal screens */
    height: 500px; /* default height for normal screens */
    margin: 0 auto; /* center horizontally */
    border-radius: 15px; /* optional rounding */
    transition: all 0.3s ease;
}

/* Extra large screens (e.g., > 1200px) */
@media (min-width: 1200px) {
    .storebgimage {
        width: 67%;
        height: 500px; /* fixed height for large screens */
    }
}

/* Tablet screens */
@media (max-width: 1024px) {
    .storebgimage {
        width: 90%;
        height: 450px;
    }
}

/* Small screens (mobile) */
@media (max-width: 768px) {
    .storebgimage {
        width: 90%;
        height: auto; /* height adjusts automatically to image ratio */
        aspect-ratio: 16/9; /* maintain proper ratio */
        border-radius: 0; /* optional: remove rounding on mobile */
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== WEB PORTFOLIO  CARD  multiple cards ====================================================================== */
/* ============================================================================================================================================================ */

.webmultiplecarddesing {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 3rem;
}

/* Main cards container */
.web-cards-section {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 30px;
    padding: 20px 0;

    /* Default: mobile 1 card per row */
    grid-template-columns: 1fr;
}

/* Individual card */
.web-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-left: 5px solid #0146ae;
    border-radius: 12px;
    background: linear-gradient(
        84.51deg,
        rgba(255, 255, 255, 0.1) 0.96%,
        rgba(1, 70, 174, 0.1) 52.27%,
        rgba(255, 255, 255, 0.1) 97.99%
    );
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Hover effect */
.web-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Card heading */
.web-card-heading {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: #023be2;
}

/* Card description */
.web-card-description {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: #555555;
    line-height: 1.5;
}

/* Large screens: 3 cards per row */
@media (min-width: 1200px) {
    .web-cards-section {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small laptops: 3 cards per row */
@media (min-width: 992px) and (max-width: 1199px) {
    .web-cards-section {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablets: 2 cards per row */
@media (min-width: 768px) and (max-width: 991px) {
    .web-cards-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 card per row */
@media (max-width: 767px) {
    .web-cards-section {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================================================================================================ */
/* ======================================================================== WEB PORTFOLIO  webwhynlytical ====================================================================== */
/* ============================================================================================================================================================ */

.webwhynlytical {
    width: 100%;
    background: #023be20a;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   padding: 4rem 0 0 0;

}




.nlyticalbgimageadmin {
    background-image: url("./images/nlyticalwebdetail.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 68%; /* Default for ≥1600px */
    height: 70vh; /* responsive height */
    margin: 0 auto;
    border-radius: 15px;
    transition: all 0.3s ease;
}

/* 1280px – 1599px */
@media (max-width: 1599px) {
    .nlyticalbgimageadmin {
        width: 60%;
        height: 55vh;
    }
}

/* 1024px – 1279px */
@media (max-width: 1279px) {
    .nlyticalbgimageadmin {
        width: 70%;
        height: 50vh;
    }
}

/* 769px – 1023px */
@media (max-width: 1023px) {
    .nlyticalbgimageadmin {
        width: 85%;
        height: 45vh;
    }
}

/* 481px – 768px */
@media (max-width: 768px) {
    .nlyticalbgimageadmin {
        width: 95%;
        height: 35vh;
        background-position: center;
        background-size: contain;
    }
}

/* ≤ 480px */
@media (max-width: 480px) {
    .nlyticalbgimageadmin {
        width: 100%;
        height: 24vh;
        border-radius: 10px;
    }
}






/* =========================================================
   DEFAULT STYLE (Base desktop before breakpoints)
========================================================= */
.nlyticalbgimageadminimage {
    background-image: url("./images/nlytialadminbg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 90%;
    height: 45vh;
    min-height: 280px;
    margin: 0 auto;
    border-radius: 15px;
    transition: all 0.3s ease;
}


/* =========================================================
   EXTRA LARGE SCREENS (1600px+)
========================================================= */
@media (min-width: 1600px) {
    .nlyticalbgimageadminimage {
        width: 80%;
        height: 70vh;
        min-height: 520px;
    }
}


/* =========================================================
   LARGE DESKTOPS (1280px - 1599px)
========================================================= */
@media (min-width: 1280px) and (max-width: 1599px) {
    .nlyticalbgimageadminimage {
        width: 89%;
        height: 78vh;
        min-height: 480px;
    }
}


/* =========================================================
   LAPTOP / MEDIUM SCREENS (1024px - 1279px)
========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
    .nlyticalbgimageadminimage {
        width: 75%;
        height: 55vh;
        min-height: 430px;
    }
}


/* =========================================================
   TABLET (769px - 1023px)
========================================================= */
@media (min-width: 769px) and (max-width: 1023px) {
    .nlyticalbgimageadminimage {
        width: 90%;
        height: 40vh;
        min-height: 350px;
    }
}


/* =========================================================
   MOBILE (481px - 768px)
========================================================= */
@media (min-width: 481px) and (max-width: 768px) {
    .nlyticalbgimageadminimage {
        width: 100%;
        height: 32vh;
        min-height: 270px;
        border-radius: 12px;
    }
}


/* =========================================================
   SMALL MOBILE (<=480px)
========================================================= */
@media (max-width: 480px) {
    .nlyticalbgimageadminimage {
        width: 100%;
        height: 28vh;
        min-height: 230px;
        border-radius: 10px;
    }
}




/* ============================================================================================================================================================ */
/* ======================================================================== WEB PORTFOLIO  TECH STACK ====================================================================== */
/* ============================================================================================================================================================ */



/* =========================================================
   DEFAULT (Base Desktop)
========================================================= */
.webtechstack {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 3rem;
}





.webtechstackmain {
    width: 67%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    font-family: var(--font-heading);
    transition: all .3s ease;
}


/* =========================================================
   EXTRA LARGE SCREENS (1600px+)
========================================================= */
@media (min-width: 1600px) {
    .webtechstackmain {
        width: 67%;
        gap: 2.5rem;
    }
}


/* =========================================================
   LARGE DESKTOPS (1280px - 1599px)
========================================================= */
@media (min-width: 1280px) and (max-width: 1599px) {
    .webtechstackmain {
        width: 90%;
        gap: 2.3rem;
    }
}


/* =========================================================
   LAPTOP / MEDIUM SCREENS (1024px - 1279px)
========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
    .webtechstackmain {
        width: 90%;
        gap: 2rem;
    }
}


/* =========================================================
   TABLET (769px - 1023px)
========================================================= */
@media (min-width: 769px) and (max-width: 1023px) {
    .webtechstackmain {
        width: 90%;
        gap: 1.8rem;
    }
}


/* =========================================================
   MOBILE (481px - 768px)
========================================================= */
@media (min-width: 481px) and (max-width: 768px) {
    .webtechstackmain {
        width: 90%;
        padding: 0 14px;
        gap: 1.5rem;
    }
}


/* =========================================================
   SMALL MOBILE (<=480px)
========================================================= */
@media (max-width: 480px) {
    .webtechstackmain {
        width: 100%;
        padding: 0 16px;
        gap: 1.2rem;
    }
}



/* Buttons container */
.webtechstackbtn {
    width: 100%;
    display: flex;
    border-radius: 1rem;
    overflow: hidden;
    background: #023be20a;
    border: none;
}

/* Default button */
.switchbtn {
    flex: 1;
    padding: 16px 0;
    font-weight: 600;
    font-size: 20px;
    border: none;
    cursor: pointer;
    background: #023be20a;
    color: #000;
    transition: all 0.3s ease;
    font-family: var(--font-heading);
}

/* Active button — wider + color change */
.switchbtn.active {
    flex: 0 0 40%; /* Active width 35% */
    background: #023be221;
    color: #000;
    transform: scale(1.03);
}

/* Content sections */
.content-section {
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
/* Visible content */
.content-section.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* ===========================
   Cards Grid Layout
=========================== */
.webtechstackcards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Mobile default */
    gap: 1.5rem;
    align-items: start; /* prevents all cards from matching tallest card */
}

/* Tablet - 2 cards */
@media (min-width: 768px) {
    .webtechstackcards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Laptop & Desktop - 3 cards */
@media (min-width: 1024px) {
    .webtechstackcards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Extra Large Screens */
@media (min-width: 1440px) {
    .webtechstackcards {
        gap: 2rem;
    }
}

/* ===========================
   Card Wrapper
=========================== */
.webtechstackcard,
.webtechstackcardsecondtype,
.webtechstackcardthirdtype {
    border-radius: 1rem;
    padding: 2px;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    height: auto; /* IMPORTANT */
    display: block;
}

/* Background Styles */
.webtechstackcard {
    background: linear-gradient(270.52deg, #0146ae 0.49%, #ffffff 99.66%);
}

.newcardmarginleanercolor{
    background: linear-gradient(89.87deg, #0146AE 1.17%, #FFFFFF 99%) !important;
}
 

.webtechstackcardsecondtype {
    background: linear-gradient(180deg, #0146ae 0%, #ffffff 100%);
}

.newcardmargin {
    background: linear-gradient(358.4deg, #0146ae 1.44%, #ffffff 97.55%) !important;
}

.webtechstackcardthirdtype {
    background: linear-gradient(89.87deg, #0146ae 1.17%, #ffffff 99%);
}

/* ===========================
   Inner Card Content
=========================== */
.webtechstackcardinner,
.webtechstackcardinnersecondtype,
.webtechstackcardinnerthirdtype {
    background: #fff;
    border-radius: calc(1rem - 2px);
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: auto; /* FIX height issue */
    box-sizing: border-box;
}

/* ===========================
   Text & Button Styles
=========================== */
.technamebtn {
    border: none;
    background: #0146ae5e;
    border-radius: 1rem;
    padding: 10px 14px;
    color: #0146ae;
    font-size: 20px;
    font-family: var(--font-heading);
    font-weight: 600;
}

.techdes {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
    font-family: var(--font-body);
    word-break: break-word;
}

/* ===========================
   Hover Effect
=========================== */
.webtechstackcard:hover,
.webtechstackcardsecondtype:hover,
.webtechstackcardthirdtype:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

/* ===========================
   Mobile Typo Adjustments
=========================== */
@media (max-width: 480px) {
    .technamebtn {
        font-size: 16px;
        padding: 8px 12px;
    }
    .techdes {
        font-size: 14px;
    }
}

/*  =========================== newwebtchstackcarddesing =========================== */

/* Main container */
.newwebtchstackcarddesing {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; /* allows elements to wrap automatically */
    display: none;
}

/* Show only when active */
.newwebtchstackcarddesing.active {
    display: flex;
}

/* Card column containers */
.newcardlistingweb,
.newcardlistingwebsecond {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1; /* allows equal width */
    min-width: 280px; /* Prevents cards from shrinking too much */
}

/* Single Card Style (optional) */
.newcard {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.newcard:hover {
    transform: translateY(-5px);
}

/* ------------- RESPONSIVE BREAKPOINTS ------------- */

/* Tablet screens (max 1024px) → 2 columns */
@media (max-width: 1024px) {
    .newwebtchstackcarddesing {
        justify-content: center;
    }

    .newcardlistingweb,
    .newcardlistingwebsecond {
        flex: 1 1 45%; /* two columns */
    }
}

/* Mobile screens (max 768px) → stack all in one column */
@media (max-width: 768px) {
    .newwebtchstackcarddesing {
        flex-direction: column;
        align-items: center;
    }

    .newcardlistingweb,
    .newcardlistingwebsecond {
        width: 100%;
        flex: none;
    }
}

/* Small Mobile (max 480px) → reduce spacing */
@media (max-width: 480px) {
    .newwebtchstackcarddesing {
        gap: 10px;
    }
    .newcardlistingweb,
    .newcardlistingwebsecond {
        gap: 10px;
    }
}

/* Wrapper */
.portfolio-loadmore-btn-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Button Base Styles */
.portfolio-loadmore-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 12px 28px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #086ada 0%, #50b6ff 100%);
    color: white;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.35s ease;
}

/* Hover Effect */
.portfolio-loadmore-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(90deg, #50b6ff 0%, #086ada 100%);
}

/* Rotate on Hover */
.portfolio-loadmore-btn:hover .portfolio-loadmore-icon {
    transform: rotate(45deg);
}






/* ============================================================================================================================================================ */
/* ======================================================================== WEB PORTFOLIO  NLYTICAL KEY FEATURES ====================================================================== */
/* ============================================================================================================================================================ */



/* ===========================
   SECTION WRAPPER
=========================== */
.nlytical-features {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 3rem;
  align-items: center;
}

/* ===========================
   FEATURE CARD
=========================== */
.nlytical-feature-card {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 2rem;
}

/* NORMAL: text 60% | image 40% */
.nlytical-feature-card .nlytical-feature-textbox {
  flex: 60%;
}



.rightcontent{
    width: 60%;
    margin-right: auto;
    padding-right: 4rem;
}

.leftsideinnercontent{
    width: 70%;
    margin-left: auto;
    padding-right: 4rem;
}


/* ===========================
   MOBILE RESPONSIVE FIX
=========================== */
@media (max-width: 768px) {

  .rightcontent,
  .leftsideinnercontent {
    width: 100%;
    margin: 0 auto;
    padding: 0; /* (optional) remove side padding on mobile and keep clean layout */
    text-align: center; /* (optional) better alignment on mobile */
  }
}



.nlytical-feature-card .feature-image-box {
  flex: 40%;
}

/* REVERSE: text 60% (right) | image 40% (left) */
.nlytical-feature-card.reverse {
  flex-direction: row-reverse;
}

/* ===========================
   TEXT AREA
=========================== */
.nlytical-feature-textbox {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

/* Title Row */
.feature-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-title-box img {
  width: 32px;
  height: 32px;
}

/* Title Wrapper */
.feature-title-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
}

/* Remove old underline style   add linear color on tiitle text  */
.feature-title {
  font-weight: 700;
  font-size: 24px;
  color: #000;
  position: relative;
  margin: 0;
  z-index: 1;
  background: linear-gradient(90deg, #086ada 0%, #50b6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-family: var(--font-body);

}



.feature-subtitle{
     font-family: var(--font-body);
     color: #000;
     font-weight: 400;
     font-size: 16px;
     
}


/* Underline */
.portfolio-underline {
  position: absolute;
  bottom: 10px;
  left: -5px;
  width: 118%;
  height: 10px;
  background: #86d8ee;
  border-radius: 14px;
  z-index: -1;
}


.feature-desc {
  font-size: 19px;
  line-height: 1.6;
  color: #515151;
}


@media (max-width: 480px) {
   .feature-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #515151;
}
}


/* ===========================
   IMAGE FULL WIDTH
=========================== */
.feature-image-box {
  display: flex;
  align-items: stretch;
}

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1024px) {
  .nlytical-feature-card {
    padding: 0 1rem;
  }
}

@media (max-width: 768px) {
  .nlytical-feature-card,
  .nlytical-feature-card.reverse {
    flex-direction: column;
    text-align: center;
  }

  .nlytical-feature-card .nlytical-feature-textbox,
  .nlytical-feature-card .feature-image-box {
    flex: unset;
    width: 100%;
  }

  .feature-title-box {
    justify-content: center;
  }

  .feature-image {
    height: auto;
    object-fit: contain;
    border-radius: 12px;
  }
}




/* ============================================================================================================================================================ */
/* ======================================================================== WEB PORTFOLIO   subscribe ====================================================================== */
/* ============================================================================================================================================================ */



.subscriptionweb{
 width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
}




/* Inner container */
.subscriptionwebmain {
    position: relative;
    width: 100%;
    margin: auto;
    min-height: 344px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: #fff;
    overflow: hidden;
    text-align: center;
}

/* Background image */
.subscriptionwebmain::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./images/demo.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2;
    z-index: 1;
}

/* Gradient overlay */
.subscriptionwebmain::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90.38deg, #023be2 2.06%, #00a1c5 99.67%);
    z-index: 0;
}
.subscriptionwebmaincontent{
    width: 67%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 0;
    z-index: 1;
    text-align: left; /* 👈 content starts from left */

}


.subscriptionwebmaincontentleftsidetitle{
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}

.subscriptionwebmaincontentleftsidetitle img{
    width: 28px;
    height: 28px;
}


.subscriptionwebmaincontentleftsidetitlevalues{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 30px !important;
}



.subscriptionwebmaincontentleftsidetitleDes{
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    margin-top:1rem !important;
    text-align: left !important;
}

/* Make both left & right equal responsive width */
.subscriptionwebmaincontentleftside,
.subscriptionwebmaincontentrightside{
    flex: 1;
}



/* RIGHT IMAGE */
.subscriptionwebmaincontentrightside img{
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* RESPONSIVE */
@media (max-width: 1024px){
    .subscriptionwebmaincontent{
        width: 85% !important;
    }
}

@media (max-width: 768px){
    .subscriptionwebmaincontent{
        flex-direction: column;
        text-align: center;
        width: 90% !important;
    }

    .subscriptionwebmaincontentrightside img{
        max-width: 300px;
    }
}

@media (max-width: 480px){
    .subscriptionwebmaincontentleftside h1{
        font-size: 1.6rem;
    }
     .subscriptionwebmaincontent{
        flex-direction: column;
        text-align: center;
        width: 90% !important;
    }

    .subscriptionwebmaincontentrightside img{
        max-width: 358px;
    }
}



/* For screens 1506px and below */
@media (max-width: 1600px) {
    .subscriptionwebmaincontent {
        width: 100% !important;
    }
}








/*  nlytical feature  */

.nlytical-feature-bgimage {
  width: 100%;
  min-height: 350px; /* You can adjust */
  background-image: url("./images/bgimageweb.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Makes image responsive on all screens */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-sizing: border-box;
  flex-direction: column;
}








/* ================================
   BASE CONTAINER
================================ */
.nlyticaltype-container {
    width: 67%; /* Default (≥1600px) */
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    margin-top: 4rem;
    transition: all 0.3s ease;
    margin-bottom: 5rem;
}

/* RESPONSIVE WIDTH SYSTEM */
/* 1280–1599px → 60% */
@media (max-width: 1599px) {
    .nlyticaltype-container { width: 90%; margin-bottom: 5rem; }
}

/* 1024–1279px → 70% */
@media (max-width: 1279px) {
    .nlyticaltype-container { width: 70%; }
}

/* 769–1023px → 85% */
@media (max-width: 1023px) {
    .nlyticaltype-container { width: 85%; }
}

/* 481–768px → 95% */
@media (max-width: 768px) {
    .nlyticaltype-container {
        width: 95%;
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 1rem;
    }
}

/* ≤480px → 100% */
@media (max-width: 480px) {
    .nlyticaltype-container { width: 100%; }
}



/* ================================
   LEFT + RIGHT COLUMN
================================ */
.nlyticaltype-left,
.nlyticaltype-right {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nlyticaltype-left { margin-top: -12rem; }
.nlyticaltype-right { margin-bottom: -12rem; }

/* MOBILE ADJUSTMENT */
@media (max-width: 768px) {
    .nlyticaltype-left,
    .nlyticaltype-right {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0;
    }
}



/* ================================
   CENTER IMAGE
================================ */
.nlyticaltype-center {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tablet */
@media (min-width: 640px) {
  .nlyticaltype-center {
    width: 80%;
  }
}

/* Laptop + Large screen (width becomes 40%) */
@media (min-width: 1024px) {
  .nlyticaltype-center {
    width: 40%;
  }
}



.nlyticaltype-image {
    width: 100%;
    height: 50vh;
    object-fit: contain;
}

@media (max-width: 480px) {
    .nlyticaltype-image { width: 100%; height: auto; }
}



/* ================================
   CARD STYLING
================================ */
.nlyticaltype-card {
    background-color: rgba(2, 59, 226, 0.04);
    backdrop-filter: blur(5px);
    padding: 1.5rem 0 1.5rem 1.5rem;
    height: auto;
    width: 100%;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nlyticaltype-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

/* CARD SIZING RESPONSIVE */
@media (max-width: 768px) {
    .nlyticaltype-card { width: 45%; }
}

@media (max-width: 480px) {
    .nlyticaltype-card { width: 100%; }
}



/* ================================
   CARD HEADER
================================ */
.contentnlyticalcard {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* TITLE + NUMBER AREA */
.card-text {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.card-number {
    font-weight: 700;
    font-size: 3rem;
    background: linear-gradient(181.39deg, rgba(2, 59, 226, 0.37) 23.73%, rgba(0, 161, 197, 0.01) 75.3%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #023BE25E;
}

.card-title {
    font-weight: 600;
    font-size: 1.2rem;
    background: linear-gradient(90.38deg, #023BE2 2.06%, #00A1C5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-family: var(--font-body);
}


/* SEARCH ICON */
.search-image {
    background: linear-gradient(90.38deg, #023BE2 2.06%, #00A1C5 99.67%);
    padding: 0.6rem 0.8rem;
    border-radius: 0.75rem 0 0 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-image img {
    width: 1.2rem;
    height: 1.2rem;
}

/* DESCRIPTION */
.nlyticalcarddes {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    color: #555;
    margin-top: 1rem;
    line-height: 1.5rem;
    padding-right: 1.5rem;
}



/* ============================================================================================================================================================ */
/* ======================================================================== NLYTICAL SUMMARY BG IMAGE  ====================================================================== */
/* ============================================================================================================================================================ */


.nlyticalsummarybgimage{
    background: #023BE20A;
    backdrop-filter: blur(5px);
    padding: 1.5rem 0 1.5rem 1.5rem; /* top right bottom left */
    height: auto; /* allow description to grow */
    width: 100%;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/*  bg image values */






.summary-wrapper {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem 0;
    overflow: visible;
}

/* CENTER IMAGE */
.center-image img {
    width: 70%;
    display: block;
    margin: auto;
    z-index: 2;
}

/* FLOATING BASE STYLE */
.img-floating {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    object-fit: contain;
    animation: floatY 4s ease-in-out infinite;
}

/* FLOATING ANIMATION */
@keyframes floatY {
    0% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
    100% { transform: translateY(0); }
}

/* ---------- DEFAULT (Desktop 1280px - 1600px) ---------- */

.img-top-left { width: 22vw; top: 5%; left: 4%; animation-duration: 3.5s; }
.img-middle-left { width: 18vw; top: 32%; left: -4%; animation-duration: 5s; }
.img-bottom-left { width: 30vw; bottom: 1%; left: -2%; animation-duration: 4.5s; }
.img-top-right { width: 20vw; top: 5%; right: 1%; animation-duration: 3.8s; }
.img-bottom-right { width: 20vw; bottom: 2%; right: 5%; animation-duration: 4.8s; }

/* -------------------------------------------------------- */
/* -------- EXTRA LARGE SCREENS (1600px+) ------------------ */
/* -------------------------------------------------------- */
@media (min-width:1600px) {
    .center-image img { width: 60%; }

    .img-floating {
        transform: scale(1.1);
    }

    .img-top-left { width: 20vw; left: 6%; }
    .img-middle-left { width: 16vw; left: -4%; top: 25%; }
    .img-bottom-left { width: 40vw; left: -4%; bottom: -2.5%; }

    .img-top-right { width: 18vw; right: 6%; top: 12%; }
    .img-bottom-right { width: 20vw; right: 4%; bottom: -3%; }
}


/* -------------------------------------------------------- */
/* -------- LARGE DESKTOPS (1280px - 1599px) -------------- */
/* -------------------------------------------------------- */
@media (min-width:1280px) and (max-width:1599px) {
    .center-image img { width: 65%; }

    .img-floating { transform: scale(1); }

    .img-middle-left{
        left: 4%;
    }
    .img-bottom-left{
        left: 2%;
    }

    .img-top-right{
        right: 10%;
    }
}


/* -------------------------------------------------------- */
/* -------- LAPTOP / MEDIUM SCREENS (1024px - 1279px) ----- */
/* -------------------------------------------------------- */
@media (max-width:1279px) {
    .center-image img { width: 75%; }

    .img-top-left { width: 24vw; }
    .img-middle-left { width: 20vw; left: -8%; }
    .img.bottom-left { width: 32vw; }

    .img-top-right { width: 22vw; }
    .img-bottom-right { width: 22vw; }
}

/* -------------------------------------------------------- */
/* -------- TABLET (769px - 1023px) ----------------------- */
/* -------------------------------------------------------- */
@media(max-width:1023px){
    .center-image img { width: 85%; }

    .img-floating { width: 28vw; }

    .img-middle-left { left: -12%; }
    .img-bottom-left { left: -6%; }
}

/* -------------------------------------------------------- */
/* -------- MOBILE (481px - 768px) ------------------------ */
/* -------------------------------------------------------- */
@media(max-width:768px){
    .center-image img { width: 95%; }

    .img-floating {
        width: 30vw !important;
        opacity: .95;
    }

    .img-middle-left { top: 45%; }

    .img-top-left{
        top: 20%;
        left: -5%;
    }
}

/* -------------------------------------------------------- */
/* -------- SMALL MOBILE (<=480px) ------------------------ */
/* -------------------------------------------------------- */
@media(max-width:480px) {
    .center-image img { width: 100%; }

    .img-floating {
        width: 40vw !important;
        animation-duration: 6s;
    }

    .img-middle-left { display: none; }
}


























/*  nlyticalgemain */


.nlyticalgemain{

    /* padding: 1.5rem 0 1.5rem 1.5rem;  */
    height: auto; /* allow description to grow */
    width: 100%;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 3rem;
}


.appportfolio-content-web-nlytical-nlytical{
    margin-top: 3rem;
}






.nlyticalgemaincardmain {
    width: 67%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Responsive: single column for mobile */
@media (max-width: 768px) {
    .nlyticalgemaincardmain {
        grid-template-columns: 1fr;
    }
}

.nlyticalgemaincardmaincard {
  background: #023BE20A;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: start;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    backdrop-filter: blur(4.800000190734863px);
    overflow: hidden;
}



.startimagevalues{
    position: absolute;
    right: -2.8rem;
    top: 5%;
}

.startimagevalues img{
    width: 100px;

}



.startimagevaluessecond{
    position: absolute;
    left: -3rem;
    bottom: 4%;
    z-index: 1200;
}

.startimagevaluessecond img{
    width: 100px;

}
 




.nlyticalgemaincardmaincard:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.1);
    /* Semi-transparent gradient for proper backdrop blur */
    background: linear-gradient(
        90.38deg, 
        rgba(2, 59, 226, 0.7) 2.06%, 
        rgba(0, 161, 197, 0.7) 99.67%
    );
    backdrop-filter: blur(8px); /* stronger blur for visible effect */
}

.card-number-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.card-number {
    font-size: 2rem;
    font-weight: 700;
    color: #86b8ff; /* gradient or accent color */
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #023BE2;
}

.card-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    object-fit: cover;
}



.card-description {
    font-size: 1.2rem;
    font-weight: 400;
    color: #555555;
    line-height: 1.6;
    font-family: var(--font-body);
    padding-left: 1rem;
    padding-right: 1rem;
}


/* Change text color on hover */
.nlyticalgemaincardmaincard:hover .card-number,
.nlyticalgemaincardmaincard:hover .card-title,
.nlyticalgemaincardmaincard:hover .card-description {
    color: white !important;
}





/* -------------------------------------------------------- */
/* -------- EXTRA LARGE SCREENS (>=1600px) ---------------- */
/* -------------------------------------------------------- */
@media (min-width: 1600px) {
    .nlyticalgemaincardmain {
        width: 67%;
    }
}

/* -------------------------------------------------------- */
/* -------- LARGE DESKTOPS (1280px - 1599px) -------------- */
/* -------------------------------------------------------- */
@media (min-width: 1280px) and (max-width: 1599px) {
    .nlyticalgemaincardmain {
        width: 80%;
    }
}

/* -------------------------------------------------------- */
/* -------- LAPTOP / MEDIUM SCREENS (1024px - 1279px) ----- */
/* -------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .nlyticalgemaincardmain {
        width: 80%;
    }
}

/* -------------------------------------------------------- */
/* -------- TABLET (769px - 1023px) ----------------------- */
/* -------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1023px) {
    .nlyticalgemaincardmain {
        width: 85%;
    }
}

/* -------------------------------------------------------- */
/* -------- MOBILE (481px - 768px) ------------------------ */
/* -------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
    .nlyticalgemaincardmain {
        width: 95%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* -------------------------------------------------------- */
/* -------- SMALL MOBILE (<=480px) ------------------------ */
/* -------------------------------------------------------- */
@media (max-width: 480px) {
    .nlyticalgemaincardmain {
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}






/*  nlytical  hover card  desing */


.nlyticalhoverimage{
    padding: 2rem;
    background: linear-gradient(90.38deg, #023BE2 2.06%, #00A1C5 99.67%);

}


.colorvalues{
    color: white !important;
} 


.responsiveheadingvalues{
    margin:  0 auto 30px  !important;
}

.descolor{
    color: #FFFFFFA8 !important;
}



/* Default (just in case) */
.new-listingcard {
    width: 67%;
    margin: auto;
}

/* -------------------------------------------------------- */
/* -------- EXTRA LARGE SCREENS (>=1600px) ---------------- */
/* -------------------------------------------------------- */
@media (min-width: 1600px) {
    .new-listingcard {
        width: 67%;
    }
}

/* -------------------------------------------------------- */
/* -------- LARGE DESKTOPS (1280px - 1599px) -------------- */
/* -------------------------------------------------------- */
@media (min-width: 1280px) and (max-width: 1599px) {
    .new-listingcard {
        width: 80%;
    }
}

/* -------------------------------------------------------- */
/* -------- LAPTOP / MEDIUM SCREENS (1024px - 1279px) ----- */
/* -------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .new-listingcard {
        width: 80%;
    }
}

/* -------------------------------------------------------- */
/* -------- TABLET (769px - 1023px) ----------------------- */
/* -------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1023px) {
    .new-listingcard {
        width: 85%;
    }
}

/* -------------------------------------------------------- */
/* -------- MOBILE (481px - 768px) ------------------------ */
/* -------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
    .new-listingcard {
        width: 95%;
    }
}

/* -------------------------------------------------------- */
/* -------- SMALL MOBILE (<=480px) ------------------------ */
/* -------------------------------------------------------- */
@media (max-width: 480px) {
    .new-listingcard {
        width: 100%;
    }
}




/* MAIN CONTAINER */
.new-placebirdcardmain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;     
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

/* CARD */
.new-placebirdcardmaincard {
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(15px);
    height: 450px;
    width: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.4s ease,
        width 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        background 0.4s ease;
}

/* PSEUDO ELEMENT FOR BG IMAGE */
.new-placebirdcardmaincard::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('./images/bgimagesimple.webp'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 1rem;
    z-index: 0; /* Behind card content */
}

/* CONTENT INSIDE CARD */
.new-placebirdcardmaincard > * {
    position: relative;
    z-index: 1; /* Keep content above bg image */
}

/* EXPANSION & BG IMAGE ON HOVER */
.new-placebirdcardmaincard:hover {
    width: 380px;
    transform: translateY(-5px);
    background: white; /* Optional white overlay */
}

.new-placebirdcardmaincard:hover::before {
    opacity: 1; /* Show the background image on hover */
}

/* TEXT CONTENT */
.new-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    transition:
        opacity 0.4s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
    color: white; /* default color */
}

.new-numbercontent {
    font-size: 18rem;
    font-weight: bold;
    background: linear-gradient(181.18deg, #FFFFFF -68.97%, rgba(255, 255, 255, 0) 98.99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: -8rem;
}

.new-contentwhite {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    font-family: var(--font-body);
    color: white;
    padding-top: 3rem;
}

/* IMAGE */
.new-card-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    width: 80%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.5s ease;
    z-index: 1;
}



/* HOVER EFFECTS: hide text, show image */
.new-placebirdcardmaincard:hover .new-card-content {
    opacity: 0;            /* hide content */
    pointer-events: none;  /* prevent interaction */
    transform: scale(0);   /* optional: shrink smoothly */
}

.new-placebirdcardmaincard:hover .new-card-image {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}



/* RESPONSIVE */
@media (max-width: 768px) {
    .new-placebirdcardmaincard {
        width: 100%;
    }

    .new-placebirdcardmaincard:hover {
        width: 100%;
    }

    /* Keep text visible on mobile hover */
    .new-placebirdcardmaincard:hover .new-card-content {
        opacity: 1;
        transform: scale(1);
        position: relative;
        top: 0;
        left: 0;
        align-items: center;
        text-align: center;
        pointer-events: auto;
        color: white; /* text stays white on mobile */
    }

    .new-placebirdcardmaincard:hover .new-contentwhite {
        color: white !important;
    }
}




/* =========================
   HIDE content-web-nlytical BY DEFAULT
========================= */
.content-web-nlytical {
    position: absolute;
    top: 10%;
    left: 30%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    z-index: 2;
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   SHOW ON HOVER
========================= */
.new-placebirdcardmaincard:hover .content-web-nlytical {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1); /* optional scale effect */
}

/* =========================
   NUMBERSHADO COLOR (Gradient + Stroke)
========================= */
.numbershadocolor {
    font-weight: 700;
    font-size: 3rem;
    
    /* Gradient text fill */
    background: linear-gradient(181.39deg, rgba(2, 59, 226, 0.37) 23.73%, rgba(0, 161, 197, 0.01) 75.3%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Red outline / stroke */
    -webkit-text-stroke: 2px rgba(2, 59, 226, 0.37); /* adjust color/opacity as needed */

    display: inline-block;
}

/* =========================
   LINEAR COLOR TEXT (Gradient)
========================= */
.linearcolorvalues {
    font-weight: 600;
    font-size: 1.2rem;

    /* Gradient text color */
    background: linear-gradient(90.38deg, #023BE2 2.06%, #00A1C5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* For Firefox */
    background-clip: text;
    color: transparent;

    font-family: var(--font-body);
}







/* ============================================================================================================================================================ */
/* ======================================================================== NLYTICAL  App Development  ====================================================================== */
/* ============================================================================================================================================================ */


/* ---------------- MAIN CONTAINER ---------------- */
.secondsectioncarddesing {
    width: 70%;
    margin: auto;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: 0.3s ease;
}

/* ---------------- LEFT SIDE IMAGE ---------------- */
.secondsectioncarddesingleft {
    flex: 0 0 25%;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    
}



.secondsectioncarddesingleft img {
    width: 100%;
    height: 560px;
    border-radius: 12px;
}

/* ---------------- RIGHT GRID ---------------- */
.secondsectioncarddesingright {
    flex: 0 0 75%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}


/* -------------------------------------------------------- */
/* -------- RESPONSIVE WIDTH BREAKPOINTS -------------------*/
/* -------------------------------------------------------- */

/* ≥1600px */
@media (min-width: 1600px) {
    .secondsectioncarddesing {
        width: 67%;
    }
}

/* 1280–1599px */
@media (min-width: 1280px) and (max-width: 1599px) {
    .secondsectioncarddesing {
        width: 90%;
    }
}

/* 1024–1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
    .secondsectioncarddesing {
        width: 70%;
          flex-direction: column;
        display: flex;
        justify-content: center;
    align-items: center;
    }
}

/* 769–1023px → Tablet Mode */
@media (min-width: 769px) and (max-width: 1023px) {
    .secondsectioncarddesing {
        width: 85%;
        flex-direction: column;
        gap: 2rem;
          flex-direction: column;
        display: flex;
        justify-content: center;
    align-items: center;
    }

    .secondsectioncarddesingleft,
    .secondsectioncarddesingright {
        width: 100%;
        flex: unset;
    }

    .secondsectioncarddesingleft img {
        height: unset;
    }
}

/* 481–768px → Mobile Large */
@media (min-width: 481px) and (max-width: 768px) {
    .secondsectioncarddesing {
        width: 95%;
        flex-direction: column;
        gap: 2rem;
          flex-direction: column;
        display: flex;
        justify-content: center;
    align-items: center;
    }

    .secondsectioncarddesingright {
        grid-template-columns: 1fr;
    }

    .secondsectioncarddesingleft img {
        height: 350px;
    }
}

/* ≤480px → Mobile Small */
@media (max-width: 480px) {
    .secondsectioncarddesing {
        width: 90%;
        flex-direction: column;
        display: flex;
        justify-content: center;
    align-items: center;
    }

    .secondsectioncarddesingright {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

   
    .secondsectioncarddesingleft img {
    height: 280px;
    width: 100%;
    display: block;
    margin: 0 auto;
    object-fit: cover; /* optional – makes sure image looks good */
}

}




/* ============================================================================================================================================================ */
/* ======================================================================== NLYTICAL  nlyticalchallengesmain  ====================================================================== */
/* ============================================================================================================================================================ */






/* MAIN CONTAINER */
.nlyticalchallengesmain {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transition: 0.3s ease;
}

/* CUSTOM RESPONSIVE WIDTHS */
@media (min-width: 1600px) {
    .nlyticalchallengesmain { width: 67%; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
    .nlyticalchallengesmain { width: 90%; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .nlyticalchallengesmain { width: 90%; }
}
@media (min-width: 769px) and (max-width: 1023px) {
    .nlyticalchallengesmain { width: 95%; }
}
@media (min-width: 481px) and (max-width: 768px) {
    .nlyticalchallengesmain { width: 95%; }
}
@media (max-width: 480px) {
    .nlyticalchallengesmain { width: 95%; }
    @media (max-width: 480px) {
  .nlyticalchallengesmain > div:nth-child(1) {
    order: 2;
  }

  .nlyticalchallengesmain > div:nth-child(2) {
    order: 1;
  }
}

}

/* LEFT SIDE */
.nlyticalchallengesmainleftside {
    width: 100%;
}

/* GRID CONTAINER FOR CARDS */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media screen and (min-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* RIGHT SIDE (BG IMAGE) */
.nlyticalchallengesmainrightside {
    width: 100%;
    min-height: 260px;
    background-image: url('./images/mobilebgimagewithbg.webp');
    background-size: cover;
    background-position: center;
    border-radius: 12px;
}


/* Mobile screens (max-width: 640px) */
@media (max-width: 640px) {
    .nlyticalchallengesmainrightside {
        min-height: 400px !important;
    }
}


/* Desktop split layout */
@media screen and (min-width: 1024px) {
    .nlyticalchallengesmain {
        flex-direction: row;
        align-items: stretch;
    }
    .nlyticalchallengesmainleftside {
        flex: 0 0 70%;
    }
    .nlyticalchallengesmainrightside {
        flex: 0 0 30%;
        margin-top: 0;
    }
}

/* CARD DESIGN */
.nlyticalchallengesmainleftsidecardmain {
    background: rgba(2, 59, 226, 0.04);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* ICON + NUMBER */
.iconwithcontent {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.innercontentnuber {
    font-size: 2rem;
    background: linear-gradient(181.39deg, rgba(2, 59, 226, 0.37) 23.73%, rgba(0, 161, 197, 0.01) 75.3%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(2, 59, 226, 0.35);
    border: none;
}

.circlewithimage {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #DEE5FF;
}

.circlewithimage img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

/* TEXT STYLES */
.nlyticalchallengesmainleftsidecardmainheading {
    font-weight: 600;
    font-size: 1.4rem;
    color: #0146AE;
}

.nlyticalchallengesmainleftsidecardmaindes {
    font-size: 1rem;
    color: #555;
    line-height: 1.5rem;
}

/* RESPONSIVE TYPO SCALE */
@media screen and (min-width: 768px) {
    .innercontentnuber { font-size: 2.2rem; }
    .nlyticalchallengesmainleftsidecardmainheading { font-size: 1.5rem; }
}

@media screen and (min-width: 1024px) {
    .innercontentnuber { font-size: 2.5rem; }
    .nlyticalchallengesmainleftsidecardmainheading { font-size: 1.6rem; }
}





.fade-in {
  opacity: 1;
  animation: fadeAnimation 0.4s ease forwards;
}

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





/* ============================================================================================================================================================ */
/* ======================================================================== NLYTICAL    APP DARK AND LIGHT MODE   ====================================================================== */
/* ============================================================================================================================================================ */


.theme-sectionsubtittle , .theme-sectionsubdescription{
    color: white !important;
}


.blaclcolorheading{
    color: black !important;
}




.theme-section {
  width: 100%;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background 0.1s linear;
  height: 820px;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(to bottom, #0146AE 30%, transparent 30%);
  color: white;
  font-size: 1.5rem;
  user-select: none;
  cursor: ns-resize;
  margin-top: 3rem;
}




.theme-section-maincontent {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
}

.theme-image-wrapper {
  position: relative;
  max-width: 800px;
  width: 100%;
  height: 100%;
}

.light-container,
.dark-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.theme-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  transition: opacity 0.2s ease-in-out;
}

/* Initial opacity */
.light-img { opacity: 1; }
.dark-img { opacity: 1; }






























/* ============================================================================================================================================================ */
/* ======================================================================== NLYTICAL     APP PORTFOLIO  HOVER CARD DESING   ====================================================================== */
/* ============================================================================================================================================================ */



/* Default (just in case) */
.appportfolio-new-listingcard {
    width: 67%;
    margin: auto;
}

/* -------------------------------------------------------- */
/* -------- EXTRA LARGE SCREENS (>=1600px) ---------------- */
/* -------------------------------------------------------- */
@media (min-width: 1600px) {
    .appportfolio-new-listingcard {
        width: 67%;
    }
}

/* -------------------------------------------------------- */
/* -------- LARGE DESKTOPS (1280px - 1599px) -------------- */
/* -------------------------------------------------------- */
@media (min-width: 1280px) and (max-width: 1599px) {
    .appportfolio-new-listingcard {
        width: 80%;
    }
}

/* -------------------------------------------------------- */
/* -------- LAPTOP / MEDIUM SCREENS (1024px - 1279px) ----- */
/* -------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .appportfolio-new-listingcard {
        width: 80%;
    }
}

/* -------------------------------------------------------- */
/* -------- TABLET (769px - 1023px) ----------------------- */
/* -------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1023px) {
    .appportfolio-new-listingcard {
        width: 85%;
    }
}

/* -------------------------------------------------------- */
/* -------- MOBILE (481px - 768px) ------------------------ */
/* -------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
    .appportfolio-new-listingcard {
        width: 95%;
    }
}

/* -------------------------------------------------------- */
/* -------- SMALL MOBILE (<=480px) ------------------------ */
/* -------------------------------------------------------- */
@media (max-width: 480px) {
    .appportfolio-new-listingcard {
        width: 100%;
    }
}


/* MAIN CONTAINER */
.appportfolio-new-placebirdcardmain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;     
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}

/* CARD */
.appportfolio-new-placebirdcardmaincard {
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(15px);
    height: 450px;
    width: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.4s ease,
        width 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        background 0.4s ease;
}

/* PSEUDO ELEMENT FOR BG IMAGE */
.appportfolio-new-placebirdcardmaincard::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('./images/bgimagesimple.webp'); 
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 1rem;
    z-index: 0;
}

/* CONTENT INSIDE CARD */
.appportfolio-new-placebirdcardmaincard > * {
    position: relative;
    z-index: 1;
}

/* EXPANSION & BG IMAGE ON HOVER */
.appportfolio-new-placebirdcardmaincard:hover {
    width: 380px;
    transform: translateY(-5px);
    background: white;
}

.appportfolio-new-placebirdcardmaincard:hover::before {
    opacity: 1;
}

/* TEXT CONTENT */
.appportfolio-new-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    transition:
        opacity 0.4s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
    color: white;
}

.appportfolio-new-numbercontent {
    font-size: 18rem;
    font-weight: bold;
    background: linear-gradient(181.18deg, #FFFFFF -68.97%, rgba(255, 255, 255, 0) 98.99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: -8rem;
}

.appportfolio-new-contentwhite {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    font-family: var(--font-body);
    color: white;
    padding-top: 3rem;
}
.appportfolio-new-card-image {
    position: absolute;
    bottom: 0;              /* start from bottom */
    left: 50%;
       transform: translateX(-50%) scale(0.4); /* only horizontal centering */

    width: auto;            /* keep aspect ratio */
    height: 100%;           /* match parent height */
    object-fit: cover;    /* maintain aspect ratio */
    opacity: 0;
   
    z-index: 1;
}


/* HOVER EFFECTS: hide text, show image */
.appportfolio-new-placebirdcardmaincard:hover .appportfolio-new-card-content {
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
}

.appportfolio-new-placebirdcardmaincard:hover .appportfolio-new-card-image {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    top:80%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .appportfolio-new-placebirdcardmaincard {
        width: 100%;
    }

    .appportfolio-new-placebirdcardmaincard:hover {
        width: 100%;
    }

    .appportfolio-new-placebirdcardmaincard:hover .appportfolio-new-card-content {
        opacity: 1;
        transform: scale(1);
        position: relative;
        top: 0;
        left: 0;
        align-items: center;
        text-align: center;
        pointer-events: auto;
        color: white;
    }

    .appportfolio-new-placebirdcardmaincard:hover .appportfolio-new-contentwhite {
        color: white !important;
    }
}

/* =========================
   HIDE content-web-nlytical BY DEFAULT
========================= */
.appportfolio-content-web-nlytical {
    position: absolute;
    top: 10%;
    left: 30%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    z-index: 2;
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   SHOW ON HOVER
========================= */
.appportfolio-new-placebirdcardmaincard:hover .appportfolio-content-web-nlytical {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* =========================
   NUMBERSHADO COLOR (Gradient + Stroke)
========================= */
.appportfolio-numbershadocolor {
    font-weight: 700;
    font-size: 3rem;
    background: linear-gradient(181.39deg, rgba(2, 59, 226, 0.37) 23.73%, rgba(0, 161, 197, 0.01) 75.3%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px rgba(2, 59, 226, 0.37);
    display: inline-block;
}

/* =========================
   LINEAR COLOR TEXT (Gradient)
========================= */
.appportfolio-linearcolorvalues {
    font-weight: 600;
    font-size: 1.2rem;
    background: linear-gradient(90.38deg, #023BE2 2.06%, #00A1C5 99.67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-family: var(--font-body);
}







/* ============================================================================================================================================================ */
/* ======================================================================== NLYTICAL     APP PORTFOLIO  HOVER CARD DESING  SECOND  ====================================================================== */
/* ============================================================================================================================================================ */



.appmockup-nlyticalgemaincardmain {
    width: 67%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Responsive: single column for mobile */
@media (max-width: 768px) {
    .appmockup-nlyticalgemaincardmain {
        grid-template-columns: 1fr;
    }
}

.appmockup-nlyticalgemaincardmaincard {
    background: #023BE20A;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    backdrop-filter: blur(4.8px);
    overflow: hidden;
}

.appmockup-startimagevalues {
    position: absolute;
    right: -2.8rem;
    top: 5%;
}

.appmockup-startimagevalues img {
    width: 100px;
}

.appmockup-startimagevaluessecond {
    position: absolute;
    left: -3rem;
    bottom: 4%;
    z-index: 1200;
}

.appmockup-startimagevaluessecond img {
    width: 100px;
}

.appmockup-nlyticalgemaincardmaincard:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.1);
    background: linear-gradient(
        90.38deg, 
        rgba(2, 59, 226, 0.7) 2.06%, 
        rgba(0, 161, 197, 0.7) 99.67%
    );
    backdrop-filter: blur(8px);
}

.appmockup-card-number-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.appmockup-card-number {
    font-size: 2rem;
    font-weight: 700;
    color: #86b8ff;
}

.appmockup-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #023BE2;
}

.appmockup-card-image img {
    width: 100%;              /* Image takes full width of container */
    max-width: 500px;         /* Max width limit */
height: 300px; /* or any fixed height */
    border-radius: 0.75rem;   /* Rounded corners */
    margin-bottom: 1.5rem;    
    display: block;           /* Remove inline spacing issues */
    object-fit: contain;      /* Keep entire image visible without cropping */
    object-position: center;  /* Center the image in the container */
}


.appmockup-card-description {
    font-size: 1.2rem;
    font-weight: 400;
    color: #555555;
    line-height: 1.6;
    font-family: var(--font-body);
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Change text color on hover */
.appmockup-nlyticalgemaincardmaincard:hover .appmockup-card-number,
.appmockup-nlyticalgemaincardmaincard:hover .appmockup-card-title,
.appmockup-nlyticalgemaincardmaincard:hover .appmockup-card-description {
    color: white !important;
}

/* Media Queries */
@media (min-width: 1600px) {
    .appmockup-nlyticalgemaincardmain { width: 67%; }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    .appmockup-nlyticalgemaincardmain { width: 80%; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .appmockup-nlyticalgemaincardmain { width: 80%; }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .appmockup-nlyticalgemaincardmain { width: 85%; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .appmockup-nlyticalgemaincardmain {
        width: 95%;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .appmockup-nlyticalgemaincardmain {
        width: 90%;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}















/* ============================================================================================================================================================ */
/* ======================================================================== Partnership page  ====================================================================== */
/* ============================================================================================================================================================ */


/* ==============================
   OUTER SECTION
============================== */
.partnewshipfisrtsection {
    width: 100%;
    padding: 80px 0;
    box-sizing: border-box;
    background-image: url("./images/partnership.webp");
    background-size: cover;         
    background-position: bottom center;    
    background-repeat: no-repeat;   
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 450px;                  
    margin-top: 5rem;
    border-radius: 12px;            
}

/* ==============================
   INNER CONTENT
============================== */
.partnewshipfisrtsectioninnnercontent {
    margin: auto;
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
}

.partnewshipfisrtsectioninnnercontentheading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 90px;
    line-height: 1.1;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-align: center;
}

.partnewshipfisrtsectioninnnercontentheading span {
    background: none !important;
    -webkit-text-fill-color: black !important;
    color: black !important;
}

.partnewshipfisrtsectioninnnercontentheadingsub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 26px;
    color: #555555;
    line-height: 1.7;
    text-align: center;
}





/* ==============================
   RESPONSIVE BREAKPOINTS
============================== */

/* -------------------------------
   SMALL MOBILE (<=480px)
-------------------------------- */
@media (max-width: 480px) {
    .partnewshipfisrtsection {
        height: 360px;
        padding: 29px 15px;
        background-position: center top;
    }
    .partnewshipfisrtsectioninnnercontent {
        width: 97%;
        gap: 11px;
    }
    .partnewshipfisrtsectioninnnercontentheading {
        font-size: 36px;
    }
    .partnewshipfisrtsectioninnnercontentheadingsub {
        font-size: 18px;
    }
   
}

/* -------------------------------
   MOBILE (481px - 768px)
-------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
    .partnewshipfisrtsection {
        height: 350px;
        padding: 50px 20px;
        background-position: center top;
    }
    .partnewshipfisrtsectioninnnercontent {
        width: 85%;
        gap: 25px;
    }
    .partnewshipfisrtsectioninnnercontentheading {
        font-size: 50px;
    }
    .partnewshipfisrtsectioninnnercontentheadingsub {
        font-size: 20px;
    }
   
}

/* -------------------------------
   TABLET (769px - 1023px)
-------------------------------- */
@media (min-width: 769px) and (max-width: 1023px) {
    .partnewshipfisrtsection {
        height: 520px;
        padding: 70px 30px;
        background-position: center;
    }
    .partnewshipfisrtsectioninnnercontent {
        width: 90%;
        gap: 30px;
    }
    .partnewshipfisrtsectioninnnercontentheading {
        font-size: 70px;
    }
    .partnewshipfisrtsectioninnnercontentheadingsub {
        font-size: 24px;
    }
    
}

/* -------------------------------
   LAPTOP / MEDIUM SCREENS (1024px - 1279px)
-------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .partnewshipfisrtsection {
        height: 550px;
        padding: 80px 40px;
        background-position: center center;
    }
    .partnewshipfisrtsectioninnnercontent {
        width: 60%;
        gap: 35px;
    }
    .partnewshipfisrtsectioninnnercontentheading {
        font-size: 80px;
    }
    .partnewshipfisrtsectioninnnercontentheadingsub {
        font-size: 26px;
    }
}

/* -------------------------------
   LARGE DESKTOPS (1280px - 1599px)
-------------------------------- */
@media (min-width: 1280px) and (max-width: 1599px) {
    .partnewshipfisrtsection {
        height: 550px;
    }
    .partnewshipfisrtsectioninnnercontentheading {
        font-size: 85px;
    }
    .partnewshipfisrtsectioninnnercontentheadingsub {
        font-size: 28px;
    }
}

/* -------------------------------
   EXTRA LARGE SCREENS (>=1600px)
-------------------------------- */
@media (min-width: 1600px) {
    .partnewshipfisrtsection {
        height: 600px;
    }
    .partnewshipfisrtsectioninnnercontentheading {
        font-size: 90px;
    }
    .partnewshipfisrtsectioninnnercontentheadingsub {
        font-size: 25px;
    }
}












/* ============================================================================================================================================================ */
/* ======================================================================== Partnership  second page card design page   ====================================================================== */
/* ============================================================================================================================================================ */



.actionoverwordsection{
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}






/* ------------ MAIN WRAPPER ------------ */
.actionoverwordsectioninnenrcontent {
    margin: auto;
    width: 67%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    padding: 40px 0;
}


/* ------------ CENTER CONTENT ------------ */
.actionoverwordsectioninnenrcontentcenter {
    width: 50%;
    background: #eff2ff;
    border-radius: 1rem;
    padding: 35px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.actionoverwordsectioninnenrcontentcenter p {
    font-family: var(--font-body);
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
}



/* ------------ LEFT SIDE COLUMN ------------ */
.actionoverwordsectioninnenrcontentleftside {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ------------ RIGHT COLUMN ------------ */
.actionoverwordsectioninnenrcontentrightside {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-end;
    align-items: flex-end;
}

/* ------------ CARDS ------------ */


/* ========================= BASE CARD STYLE ========================= */
.action-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px;
    border-radius: 1rem;
    background: var(--gradient-blue);
    width: 100%;
    cursor: pointer;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.25s ease;

    /* smooth transform */
    transform: translateZ(0);
    will-change: transform;
}

/* ========================= AUTO ANIMATION ========================= */
@keyframes cardBob {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

/* ========================= DESKTOP ONLY (remove if not needed) ========================= */
@media (min-width: 1024px) {

    .action-card {
        animation-name: cardBob;
        animation-duration: 1.5s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    /* Stagger animation timings for 4 cards */
    .actionoverwordsectioninnenrcontentleftside .action-card:nth-child(1) {
        animation-delay: 0s;
    }
    .actionoverwordsectioninnenrcontentleftside .action-card:nth-child(2) {
        animation-delay: 0.3s;
    }

    .actionoverwordsectioninnenrcontentrightside .action-card:nth-child(1) {
        animation-delay: 0.6s;
    }
    .actionoverwordsectioninnenrcontentrightside .action-card:nth-child(2) {
        animation-delay: 0.9s;
    }
}



.action-card-img img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.action-number {
    font-size: 54px;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-heading);
}

.action-text {
    font-size: 18px;
    font-weight: 500;
    color: #f0f4f9;
}



/* ======================================================
     EXTRA LARGE SCREENS 1600px ↓ 
====================================================== */
@media (max-width: 1600px) {
    .actionoverwordsectioninnenrcontent {
        width: 80%;
    }
}

/* ======================================================
     LAPTOP / LARGE SCREENS 1200px ↓ 
====================================================== */
@media (max-width: 1200px) {
    .actionoverwordsectioninnenrcontent {
        width: 85%;
        gap: 15px;
    }

    .action-number {
        font-size: 48px;
    }

    .action-card-img img {
        width: 50px;
        height: 50px;
    }
}

/* ======================================================
     TABLETS 1024px ↓ (iPad Landscape)
====================================================== */
@media (max-width: 1024px) {
    .actionoverwordsectioninnenrcontent {
      flex-direction: column;
        width: 90%;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .actionoverwordsectioninnenrcontentcenter p {
        font-size: 19px;
    }

    .actionoverwordsectioninnenrcontentleftside , .actionoverwordsectioninnenrcontentrightside{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    /* Slightly reduce widths for balance */
    .actionoverwordsectioninnenrcontentleftside,
    .actionoverwordsectioninnenrcontentrightside {
        width: 100%;
    }

    .actionoverwordsectioninnenrcontentcenter {
        width: 100%;
    }
}

/* ======================================================
     TABLETS 768px ↓ (iPad Portrait)
====================================================== */
@media (max-width: 768px) {
    .actionoverwordsectioninnenrcontent {
        flex-direction: column;
        width: 90%;
        align-items: center;
        text-align: center;
    }

    /* Full width columns */
    .actionoverwordsectioninnenrcontentleftside,
    .actionoverwordsectioninnenrcontentrightside,
    .actionoverwordsectioninnenrcontentcenter {
        width: 100%;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    /* Center cards instead of right side */
    .actionoverwordsectioninnenrcontentrightside {
        align-items: center;
        justify-content: flex-start;
    }

    .action-card {
        justify-content: center;
    }

    .actionoverwordsectioninnenrcontentcenter p {
        font-size: 18px;
    }
}

/* ======================================================
     MOBILE 480px ↓ 
====================================================== */
@media (max-width: 480px) {
    .action-number {
        font-size: 38px;
    }

    .action-card-img img {
        width: 50px;
        height: 50px;
    }

    .action-text {
        font-size: 16px;
    }

    .action-card {
        padding: 12px;
    }

    .actionoverwordsectioninnenrcontentcenter {
        padding: 25px 20px;
    }

    .actionoverwordsectioninnenrcontentcenter p {
        font-size: 17px;
    }
}

/* ======================================================
     EXTRA SMALL / 360px ↓  
====================================================== */
@media (max-width: 360px) {
    .action-number {
        font-size: 32px;
    }

    .action-card-img img {
        width: 45px;
        height: 45px;
    }

    .action-text {
        font-size: 15px;
    }
}





/*    partnership heading  and sub heading  values globayl */



/* MAIN WRAPPER */
.partnership {
    width: 55%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

/* HEADING */
.partnershipheading {
    font-family: var(--font-heading);
    color: #000;
    font-weight: 600;
    font-size: 70px;
    line-height: 1.2;
}

/* SUBHEADING */
.partnershipsubheading {
    font-family: var(--font-body);
    color: #515151;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.6;
}



/* ===========================
   RESPONSIVE
   =========================== */

/* LARGE SCREENS (1200px ↓) */
@media (max-width: 1200px) {
    .partnership { width: 65%; }
    .partnershipheading { font-size: 60px; }
    .partnershipsubheading { font-size: 22px; }
}

/* TABLETS (992px ↓) */
@media (max-width: 992px) {
    .partnership { width: 75%; }
    .partnershipheading { font-size: 50px; }
    .partnershipsubheading { font-size: 20px; }
}

/* SMALL TABLETS (768px ↓) */
@media (max-width: 768px) {
    .partnership { width: 85%; }
    .partnershipheading { font-size: 40px; }
    .partnershipsubheading { font-size: 18px; }
}

/* MOBILE (576px ↓) */
@media (max-width: 576px) {
    .partnership { width: 90%; }
    .partnershipheading { font-size: 32px; }
    .partnershipsubheading { font-size: 16px; }
}

/* SMALL MOBILE (400px ↓) */
@media (max-width: 400px) {
    .partnershipheading { font-size: 28px; }
    .partnershipsubheading { font-size: 15px; }
}







/* ============================================================================================================================================================ */
/* ======================================================================== Partnership   primocys patner  card list values   ====================================================================== */
/* ============================================================================================================================================================ */



/* MAIN WRAPPER */
.primocyspartnernamecardlist {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}



/* =====================================================
   MAIN CARD BG
===================================================== */
.partner-card,
.partner-card-reverse {
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(2, 60, 226, 0) 0%,
        rgba(2, 103, 214, 0.06) 55%,
        rgba(1, 145, 202, 0) 100%
    );
    padding: 20px 0;
}


/* =====================================================
   INNER CARD
===================================================== */
.partner-card-inner {
    width: 67%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 25px;
    border-radius: 14px;
}

@media (max-width: 1600px) {
    .partner-card-inner {
        width: 78%;
    }
}


/* =====================================================
   LEFT SECTION (IMAGE + CONTENT)
===================================================== */
.partner-card__left {
    display: flex;
    align-items: center;
    gap: 25px;
    width: 75%;
}

.partner-card__image-wrapper {
    width: 280px;
    height: 160px;
    overflow: hidden;
    border-radius: 14px;
}

.partner-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.partner-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.partner-card__title-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.partner-card__circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient-blue);
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-card__circle img {
    width: 24px;
}

.partner-card__title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.partner-card__description {
    font-family: var(--font-body);
    font-size: 18px;
    color: #555;
    line-height: 1.4;
    width: 90%;
}


/* =====================================================
   RIGHT SECTION (NUMBER)
===================================================== */
.partner-card__right {
    width: 25%;
    display: flex;
    justify-content: flex-end;
}

.partner-card__count {
    font-family: var(--font-heading);
    font-size: 150px;
    font-weight: 800;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    display: inline-block;
}



/* ===========================================================
   FINAL RESPONSIVE VERSION
   iPad (1024px ↓) behaves EXACTLY like MOBILE
=========================================================== */

/* MOBILE + IPAD SAME LAYOUT (1024px ↓) */

@media (max-width: 1024px) {

    .partner-card-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
        width: 90%;
    }

    /* NUMBER FIRST */
    .partner-card__right {
        order: 1;
        width: 100%;
        justify-content: center;
    }

    .partner-card__count {
        font-size: 90px;
    }

    /* IMAGE SECOND */
    .partner-card__image-wrapper {
        order: 2;
        width: 100%;
        height: 200px;
    }

    /* CONTENT THIRD */
    .partner-card__left {
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .partner-card__content {
        text-align: left;
        align-items: flex-start;
        order: 4;
        width: 95%;
    }

    /* DESCRIPTION MUST BE LAST */
    .partner-card__description {
        order: 99;   /* Always last */
        width: 95%;
        text-align: left;
    }
}



/* ==========================================
   SMALL MOBILE (480px ↓)
========================================== */
@media (max-width: 480px) {

    .partner-card-inner {
        padding: 15px 5px;
    }

    .partner-card__image-wrapper {
        height: 150px;
    }

    .partner-card__title {
        font-size: 20px;
    }

    .partner-card__description {
        font-size: 15px;
    }

    .partner-card__count {
        font-size: 60px;
    }
}





/*   New Card Desing Reverse card  */


/* ===========================
   MAIN CARD WRAPPER
=========================== */
.partner-card-newcard {
    width: 100%;
    padding: 25px;
    border-radius: 16px;
    background: linear-gradient(
        270deg,
        rgba(2, 60, 226, 0) 0%,
        rgba(2, 103, 214, 0.08) 50%,
        rgba(1, 145, 202, 0) 100%
    );
}


/* ===========================
   FLEX LAYOUT (IMAGE — CONTENT — NUMBER)
=========================== */
.partner-card-inner-newcard {
    width: 67%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


.globallinedot{
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ===========================
   RIGHT SIDE NUMBER
=========================== */
.partner-card-number {
    display: flex;
    align-items: center;
}

.partner-card__count-newcard {
    font-family: var(--font-heading);
    font-size: 150px;
    font-weight: 800;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}


/* ===========================
   CONTENT MIDDLE
=========================== */
.partner-card-content-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.partner-card__content_rightside {
    max-width: 620px;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* TITLE ROW */
.partner-card__title-row_rightside {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}


/* ICON CIRCLE */
.partner-card__circle_rightside {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient-blue);
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-card__circle_rightside img {
    width: 24px;
}


/* TITLE */
.partner-card__title_rightside {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.partner-card__description_rightside {
    font-family: var(--font-body);
    font-size: 18px;
    color: #555;
    line-height: 1.5;
}


/* ===========================
   IMAGE LEFT SIDE
=========================== */
.partner-card__image-wrapper_rightside {
    width: 180px;
    height: 160px;
    border-radius: 14px;
    overflow: hidden;
}

.partner-card__image_rightside {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ===========================
   ★ RESPONSIVE DESIGN ★
=========================== */

/* ---------- TABLET (1024px) ---------- */
@media (max-width: 1024px) {
    .partner-card-inner-newcard {
        width: 90% !important;
        gap: 20px;
    }
 
    .partner-card__count-newcard {
        font-size: 110px;
    }

    .partner-card__image-wrapper_rightside {
        width: 150px;
        height: 130px;
    }
}

/* ---------- MOBILE (768px) ---------- */
/* FINAL: NUMBER → IMAGE → CONTENT */
@media (max-width: 768px) {

    .partner-card-inner-newcard {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    /* NUMBER FIRST */
    .partner-card-number {
        order: 1;
        justify-content: center;
        width: 100%;
    }

    .partner-card__count-newcard {
        font-size: 80px;
    }

    /* IMAGE SECOND */
    .partner-card__image-wrapper_rightside {
        order: 2;
        width: 100%;
        height: 180px;
        margin: auto;
    }

    /* CONTENT THIRD */
    .partner-card-content-wrapper {
        order: 3;
        width: 100%;
    }

    .partner-card__content_rightside {
               text-align: left;
        align-items: start;
    }

    .partner-card__title-row_rightside {
        justify-content: center;
    }
}

/* ---------- SMALL MOBILE (480px) ---------- */
@media (max-width: 480px) {
    .partner-card-newcard {
        padding: 18px;
    }

    .partner-card__count-newcard {
        font-size: 65px;
    }

    .partner-card__title_rightside {
        font-size: 20px;
    }

    .partner-card__description_rightside {
        font-size: 15px;
    }
}



@media (max-width: 1600px) {
    .partner-card-inner-newcard {
        width: 78%;
    }
}









/* ==========================
   SLIDER CONTAINER
========================== */
.Benefits-Primocys-slider {
    width: 90%;
    max-width: 1300px;
    margin: 3rem auto;
    padding: 90px 40px 90px 40px; /* top right bottom left */
    background: rgba(2, 59, 226, 0.04);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    backdrop-filter: blur(4.8px);
}

/* ==========================
   SLIDER ARROWS
========================== */
.arrowlefticon,
.arrowrighticon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
}

.arrowlefticon {
    left: -8px;
}

.arrowrighticon {
    right: -15px;

}




/* Tablet */
@media (min-width: 640px) {
    .arrowlefticon {
        left: 10px;
    }
    .arrowrighticon {
        right: 10px;
    }
}

/* Laptop / Medium screens */
@media (min-width: 1024px) {
    .arrowlefticon {
        left: 15px;
    }
    .arrowrighticon {
        right: 15px;
    }
}

/* Large / Desktop */
@media (min-width: 1280px) {
    .arrowlefticon {
        left: 8px;
    }
    .arrowrighticon {
        right: -10px;
    }
}

/* Extra Large screens */
@media (min-width: 1536px) {
    .arrowlefticon {
        left: 5px;
    }
    .arrowrighticon {
        right: -15px;
    }
}

.arrowlefticon img,
.arrowrighticon img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* ==========================
   CARD OUTER GRADIENT BORDER
========================== */
.Benefits-Primocys-slider-card {
    height: 280px;
    width: 100%;
    border-radius: 1rem;
    background: linear-gradient(90deg, #023BE2, #00A1C5);
    padding: 2px; /* small padding for gradient border */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Benefits-Primocys-slider-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}

/* ==========================
   INNER WHITE CARD
========================== */
.Benefits-Primocys-slider-card-inner {
    background: #fff;
    height: 100%;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 50px 20px 20px 20px; /* top padding for circle */
    position: relative;
}

/* ==========================
   CIRCLE IMAGE
========================== */
.Benefitscardcircle {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(90deg, #023be2, #00a1c5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.circle-border {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.circle-border img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* ==========================
   HEADING
========================== */
.heading-image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.consultingheading {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

/* UNDERLINE FOR HEADING */
.heading-underline {
    width: 50%;
    height: 4px;
    background: linear-gradient(90deg, #023BE2, #00A1C5);
    border-radius: 2px;
}

/* ==========================
   DESCRIPTION
========================== */
.consultingdescription {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: #555555;
    margin-top: 15px;
}

/* ==========================
   RESPONSIVE
========================== */
@media screen and (max-width: 1024px) {
    .Benefits-Primocys-slider {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .consultingheading {
        font-size: 22px;
    }

    .Benefits-Primocys-slider-card {
        height: 260px;
    }
}

@media screen and (max-width: 768px) {
    .Benefits-Primocys-slider {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        padding: 50px 20px 50px 20px;
    }

    .Benefits-Primocys-slider-card {
        height: 240px;
    }

    .consultingheading {
        font-size: 20px;
    }

    .heading-underline {
        width: 60%;
    }
}
/* ==========================
   SLIDER TRACK
========================== */
.Benefits-Primocys-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
    will-change: transform;
}

/* Hide scrollbar */
.Benefits-Primocys-slider-track::-webkit-scrollbar {
    display: none;
}
.Benefits-Primocys-slider-track {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* ==========================
   CARD WIDTH RESPONSIVE
========================== */
.Benefits-Primocys-slider-card {
    flex: 0 0 100%; /* default mobile: 1 card */
    max-width: 100%;
}

@media screen and (min-width: 640px) { /* iPad / medium */
    .Benefits-Primocys-slider-card {
        flex: 0 0 50%; /* 2 cards */
        max-width: 50%;
    }
}

@media screen and (min-width: 1024px) { /* Laptop / large */
    .Benefits-Primocys-slider-card {
        flex: 0 0 33.3333%; /* 3 cards */
        max-width: 33.3333%;
    }
}

@media screen and (min-width: 1280px) { /* Extra large */
    .Benefits-Primocys-slider-card {
        flex: 0 0 24.2%; /* 4 cards */
        max-width: 24.2%;
    }
}


.partnershipsbtn{
    margin: 1rem auto 12px !important;
    height: 60px !important;
    padding: 0 2.5rem !important;
}










/*  TechnovationPartnership  last css */

.TechnovationPartnership{
    background: #023BE205;
    padding-top: 50px;
    padding-bottom: 50px;
}




/* ============================
   MAIN WRAPPER
============================ */
.TechnovationPartnershipmain {
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}


/* ============================
   CARD DEFAULT (XL & LG)
============================ */
.TechnovationPartnershipmaincard {
    flex: 1 1 calc(33.33% - 2rem);
    max-width: calc(33.33% - 2rem);
    height: 400px;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 25px;
    background: linear-gradient(-8deg, #f5f7ff 56%, #ffffff 56%);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: all .3s ease;
    cursor: pointer;
}

/* Hover */
.TechnovationPartnershipmaincard:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}


/* ============================
   INNER CONTENT
============================ */
.partner-logo {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-logo img {
    width: 200px;
    height: 80px;
    object-fit: contain;
}

.TechnovationPartnershipmaincardcontent {
    height: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* Heading */
.TechnovationPartnershipmaincardheading {
    font-size: 1.6rem;
    font-weight: 600;
    color: #000;
}

/* Description */
.TechnovationPartnershipmaincarddescription {
    font-size: 1rem;
    color: #515151;
    line-height: 1.6;
}


/* ============================
   DIAGONAL BACKGROUND CARDS
============================ */
.diagonalcardfirst {
    background: linear-gradient(9deg, #f5f7ff 56%, #ffffff 56%);
}

.diagonalcard {
    background: linear-gradient(11deg, #f5f7ff 56%, #ffffff 56%);
}

.diagonal-card {
    background: linear-gradient(170deg, #f5f7ff 45%, #ffffff 45%);
}


/* ============================
   RESPONSIVE BREAKPOINTS
============================ */

/* XXL Screens (≥1600px) - 3 cards centered */
@media (min-width: 1600px) {
    .TechnovationPartnershipmain {
        width: 67%;
    }
}

/* Medium Screens - Tablets (768px–1023px) → 2 Cards */
@media (max-width: 1023px) {
    .TechnovationPartnershipmaincard {
        flex: 1 1 calc(50% - 2rem);
        max-width: calc(50% - 2rem);
        height: 380px;
    }
}

/* Mobile Screens (<768px) → 1 Card */
@media (max-width: 768px) {
    .TechnovationPartnershipmain {
        width: 90%;
    }

    .TechnovationPartnershipmaincard {
        flex: 1 1 100%;
        max-width: 100%;
        height: 300px;
        padding: 25px;
    }

    .partner-logo img {
        width: 150px;
        height: 65px;
    }

    .TechnovationPartnershipmaincardheading {
        font-size: 1.4rem;
    }

    .TechnovationPartnershipmaincarddescription {
        font-size: .95rem;
    }
}

/* Extra Small Mobile (<480px) */
@media (max-width: 480px) {
    .TechnovationPartnershipmaincard {
        padding: 20px;
    }

    .partner-logo img {
        width: 191px;
        height: 55px;
    }

    .TechnovationPartnershipmaincardheading {
        font-size: 1.2rem;
    }
}






/* ============================================================================================================================================================ */
/* ======================================================================== Mobile UI Design  ====================================================================== */
/* ============================================================================================================================================================ */





.Appportfoliomainsection {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem;
  width: 100%;
  background: #ffffff;
  flex-direction: column;
}




/* Main carousel container */
.mobileuicardcarusal {
  margin: auto;
  display: flex;
  align-items: center;
  position: relative;
  padding: 1rem 0;
  width: 67%;
}

/* Arrows */
.carusalarrowleft,
.carusalarrowright {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 45px;
  width: 45px;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 100;
      border: 2px solid #00a1c5;

}

.carusalarrowleft img,
.carusalarrowright img {
  width: 65%;
  height: auto;
}

.carusalarrowleft {
  left: -60px;
}

.carusalarrowright {
  right: -60px;
}

/* Viewport */
.carusalViewport {
  width: 100%;
  overflow: hidden;
}

/* Track */
.carusalTrack {
  display: flex;
  gap: 1.2rem;
  transition: transform 0.4s ease-in-out;
}

/* Images */
.CarusalImage {
  min-width: 300px;
  height: 620px;
  border-radius: 16px;
  overflow: hidden;
}

.CarusalImage img {
  width: 100%;
  height: 100%;
  object-fit:unset;
}

/* ✅ RESPONSIVE FIXES */

/* Tablet */
@media (max-width: 1024px) {
  .mobileuicardcarusal {
    max-width: 90%;
  }

  .carusalarrowleft {
    left: -30px;
  }

  .carusalarrowright {
    right: -30px;
  }

  .CarusalImage {
    min-width: 260px;
    height: 480px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .mobileuicardcarusal {
    width: 95%;
  }

  .carusalarrowleft {
    left: 5px;
  }

  .carusalarrowright {
    right: 5px;
  }

  .CarusalImage {
    min-width: 85%;
    height: 420px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .CarusalImage {
    height: 360px;
  }

  .carusalarrowleft,
  .carusalarrowright {
    width: 35px;
    height: 35px;
  }
}






/*   */


.fadeIn {
  animation: fadeIn 0.4s ease-in-out;
}

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









/* =========================================================================================================================
                                                                                            
                                                     Date 11 December 2025

=============================================================================================================================
*/







    html {
      scroll-behavior: smooth;
    }

 
.container-scroll{
    width: 100%;
}


.arch {
  display: flex;
  justify-content: space-between;
  width: 90%;          /* default for all small/medium/large screens */
  margin: auto;
  position: relative;
  gap: 30px;
}

/* Extra Large Screens (1400px and above) */
@media (min-width: 100px) {
  .arch {
    width: 67%;        /* only extra large screens */
  }
}



    .arch__left {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .arch__info {
      height: 100vh;
       display: flex;
       justify-content: center;
       flex-direction: column;
       align-items: center;
       width: 100%;
    }



    .rightsidescroll{
        width: 100%;
    }





    .header {
      font-family: var(--font-body);
      font-size: 42px;
      font-weight: 600;
      letter-spacing: -0.84px;
      color: #023BE2;
    }


    .desc{
         color: #000000;
         font-family: var(--font-body);
         font-weight: 400;
         font-size: 18px;
    }


    .arch__right {
      flex-shrink: 1;
      height: 100vh;
      width: 100%;
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
    }


    .img-wrapper {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      height: 600px;
      width: 100%;
      border-radius: 16px;
      overflow: hidden;
      transition: clip-path 0.1s linear;
      padding: 2rem;
      background-color: #023BE2;

    }

    .img-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position:unset;
      transition: object-position 0.1s linear;
    }

    @media (max-width: 900px) {
      .arch {
        gap: 30px;
      }
    }

    @media (max-width: 768px) {
      .arch {
        flex-direction: column;
        gap: 20px;
      }

      .arch__left,
      .arch__right {
        display: contents;
      }

      .arch__right {
        height: auto;
        position: static;
      }

      .arch__right .img-wrapper {
        position: static;
        transform: none;
        height: 360px;
        width: 100%;
        margin-bottom: 20px;
      }

      .arch__left .arch__info {
        height: auto;
        padding: 20px 0;
      }
    }

    @media (max-width: 560px) {
      .arch {
        gap: 12px;
        width: 95%;

      }

      .container-scroll {
        padding: 10px;
      }

      .arch__right .img-wrapper {
        border-radius: 10px;
        height: 280px;
      }
    }


    /* Right-side container */
.rightsidebtnscroll {
    background: #FFF !important;
    margin-top: 12rem !important;
    display: flex;
    flex-direction: column !important;
    align-items: flex-end !important;   /* 🔥 Everything inside aligns to the right */
    text-align: right !important;       /* 🔥 Text also aligns to the right */
}



.scrollbtnanimation{
    width: 100%;
 
}

/* Right-side description text */
.MobileUIDesignCardrightsidedescription {
    font-family: var(--font-body);
    color: #000;
    text-align: right !important;
    width: 100%;               /* ensures text-align works fully */
}

/* Image button */
.imagescrollbtn {
    width: 30px !important;
    align-self: flex-end !important;      /* ensures the image specifically stays right */
}

 

/*  ======================================================================

AnimationDragAndDrop


=============================================================================================================================
*/