-e
/* ==== src/app/components/about/about.component.css ==== */

/* ==========================================
   ABOUT SECTION
========================================== */

.about-section {

    padding: 70px 0;

    margin: 0;

    background: #f8fafc;

}

/* ==========================================
   TAG
========================================== */

.about-tag {

    display: inline-block;

    padding: 8px 20px;

    background: #e8f1ff;

    color: #2563eb;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 18px;

}

/* ==========================================
   HEADING
========================================== */

.about-section h2 {

    font-size: 44px;

    font-weight: 800;

    color: #1f2937;

    line-height: 1.3;

    margin-bottom: 20px;

}

.about-section p {

    font-size: 17px;

    color: #6b7280;

    line-height: 30px;

    margin-bottom: 25px;

}

/* ==========================================
   IMAGE
========================================== */

.about-img {

    width: 100%;

    max-width: 520px;

    display: block;

    margin: auto;

    animation: floatImage 5s ease-in-out infinite;

    transition: .35s;

}

.about-img:hover {

    transform: scale(1.03);

}


.cont-down {
    transition: background-color 0.3s ease;
}

.cont-down i {
    display: inline-block;
    transition: transform 0.3s ease;
}

.cont-down:hover {
    background-color: rgb(251, 253, 117);
}

.cont-down:hover i {
    transform: translateY(8px);
}

.cont-down i {
    display: inline-block;
}

.cont-down:hover i {
    animation: bounceDown 0.6s infinite;
}

@keyframes bounceDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ==========================================
   FEATURES
========================================== */

.about-feature {

    display: flex;

    align-items: center;

    gap: 15px;

    background: #fff;

    border-radius: 16px;

    padding: 18px 20px;

    margin-bottom: 18px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .06);

    transition: .35s;

}

.about-feature:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 40px rgba(37, 99, 235, .15);

}

.about-feature i {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: #e8f1ff;

    color: #2563eb;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    flex-shrink: 0;

}

.about-feature span {

    font-size: 16px;

    font-weight: 600;

    color: #1f2937;

}

/* ==========================================
   BUTTON
========================================== */

.about-section .btn {

    padding: 14px 34px;

    border-radius: 10px;

    font-weight: 600;

    transition: .3s;

}

.about-section .btn:hover {

    transform: translateY(-3px);

}

/* ==========================================
   FLOAT ANIMATION
========================================== */

@keyframes floatImage {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ==========================================
   DARK MODE
========================================== */

html[data-theme="dark"] .about-section {

    background: #0f172a;

}

html[data-theme="dark"] .about-section h2 {

    color: #ffffff;

}

html[data-theme="dark"] .about-section p {

    color: #cbd5e1;

}

html[data-theme="dark"] .about-tag {

    background: #1e3a8a;

    color: #ffffff;

}

html[data-theme="dark"] .about-feature {

    background: #1f2937;

    box-shadow: none;

}

html[data-theme="dark"] .about-feature span {

    color: #ffffff;

}

html[data-theme="dark"] .about-feature i {

    background: #2563eb;

    color: #ffffff;

}

/* ==========================================
   LAPTOP
========================================== */

@media(max-width:1200px) {

    .about-section {

        padding: 60px 0;

    }

    .about-section h2 {

        font-size: 38px;

    }

}

/* ==========================================
   TABLET
========================================== */

@media(max-width:992px) {

    .about-section {

        padding: 55px 0;

        text-align: center;

    }

    .about-img {

        margin-top: 40px;

        max-width: 430px;

    }

    .about-feature {

        justify-content: flex-start;

    }

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px) {

    .about-section {

        padding: 50px 0;

    }

    .about-section h2 {

        font-size: 30px;

    }

    .about-section p {

        font-size: 15px;

        line-height: 26px;

    }

    .about-feature {

        padding: 15px;

    }

    .about-img {

        max-width: 320px;

    }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media(max-width:576px) {

    .about-section {

        padding: 40px 0;

    }

    .about-section h2 {

        font-size: 26px;

    }

    .about-tag {

        font-size: 12px;

        padding: 6px 16px;

    }

    .about-feature {

        gap: 12px;

    }

    .about-feature span {

        font-size: 15px;

    }

    .about-img {

        max-width: 280px;

    }

}

.about-title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.3;
}

.about-desc {
    color: #6b7280;
    font-size: 17px;
    line-height: 30px;
}

html[data-theme="dark"] .about-desc {
    color: #d1d5db;
}

.brochure-btn {
    min-width: 220px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
}

.brochure-btn i {
    font-size: 20px;
}

-e
/* ==== src/app/components/contact/contact.component.css ==== */

/* ---------- Page ---------- */

.contact-section {
    min-height: 100vh;
    background: var(--bg);
    padding: 80px 0;
}

/* ---------- Card ---------- */

.card {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .08);
}

.contact-card {
    border-radius: 24px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, .08);
    overflow: hidden;
}

/* ---------- Left Panel ---------- */

.contact-info {
    background: linear-gradient(135deg, var(--red), #d81d1d);
    padding: 60px 45px;
    height: 100%;
}

.contact-info h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
}

.contact-info p {
    font-size: 15px;
    line-height: 1.8;
}

.contact-item {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.contact-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.contact-item h6 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-item i {
    font-size: 18px;
}

/* ---------- Right Panel ---------- */

.bg-white {
    padding: 50px !important;
    background: var(--card) !important;
    color: var(--text-1) !important;
}

.bg-white h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-1);
}

.bg-white p {
    color: var(--text-2);
}

/* ---------- Form ---------- */

.form-label {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-1);
}

.form-control:focus,
.form-select:focus {

    height: 54px;

    border-radius: 12px;

    border: 1px solid #dbe2ea;

    font-size: 16px;

    color: #374151;

    font-weight: 500;

    transition: .3s;

    box-shadow: none;

    border-color: #2563eb;

    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);

}

textarea.form-control {

    height: 130px;

    resize: none;

    padding-top: 14px;

}

.form-control:focus,

.form-select:focus {

    border-color: #2563eb;

    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);

}

/* ---------- Checkbox ---------- */

.form-check-input {

    width: 18px;

    height: 18px;

    cursor: pointer;

}

.form-check-label {

    padding-left: 8px;

    color: #4b5563;

}

/* ---------- Button ---------- */

.btn-primary {

    background: #2563eb;

    border: none;

    height: 56px;

    border-radius: 12px;

    font-size: 16px;

    font-weight: 600;

    transition: .3s;

}

.btn-primary:hover {

    background: #1d4ed8;

    transform: translateY(-2px);

}

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

@media(max-width:991px) {

    .contact-info {

        border-radius: 24px 24px 0 0;

        padding: 45px 35px;

    }

    .bg-white {

        padding: 35px !important;

    }

}

@media(max-width:768px) {

    .contact-section {

        padding: 40px 0;

    }

    .contact-info h2 {

        font-size: 1.7rem;

    }

    .bg-white h2 {

        font-size: 1.6rem;

    }

    .form-control,

    .form-select {

        height: 50px;

    }

    textarea.form-control {

        height: 110px;

    }

}

.submit-btn {

    width: 100%;
    height: 58px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(90deg, #2563eb, #3b82f6);

    color: #fff;

    font-size: 18px;
    font-weight: 600;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    transition: .35s ease;

    box-shadow:
        0 10px 25px rgba(37, 99, 235, .28),
        0 0 20px rgba(59, 130, 246, .18);

}

.submit-btn:hover {

    transform: translateY(-2px);

    background: linear-gradient(90deg, #1d4ed8, #2563eb);

    box-shadow:
        0 18px 40px rgba(37, 99, 235, .40),
        0 0 35px rgba(59, 130, 246, .35);

}

.submit-btn:active {

    transform: scale(.98);

}

.arrow-icon {

    font-size: 20px;

    margin-left: 8px;

}

/* Animation */

.animate {

    animation: arrowMove .7s ease;

}

@keyframes arrowMove {

    0% {

        transform: translateX(0);

    }

    50% {

        transform: translateX(120px);

    }

    100% {

        transform: translateX(0);

    }

}

.form-control::placeholder,
.form-select {
    color: #9ca3af !important;
    opacity: 1;
    font-weight: 400;
}

textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

-e
/* ==== src/app/components/customers/customers.component.css ==== */

/*==================================================
CUSTOMERS SECTION
==================================================*/

.customers-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff, #f8fafc, #ffffff);
}

/*==============================
Background Animation
==============================*/

.bg-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .45;
    animation: floatBlob 12s infinite alternate;
    z-index: 0;
}

.bg-circle-1 {
    width: 380px;
    height: 380px;
    background: #ff4d6d40;
    top: -120px;
    left: -120px;
}

.bg-circle-2 {
    width: 320px;
    height: 320px;
    background: #2563eb33;
    right: -120px;
    bottom: -100px;
    animation-delay: 2s;
}

@keyframes floatBlob {

    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(70px, 60px);
    }

}

/*==============================
Heading
==============================*/

.section-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 24px;

    border-radius: 40px;

    background: #ffe5e7;

    color: #e31e24;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    animation: badgeFloat 2s infinite ease-in-out;

}

@keyframes badgeFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}

.section-title {

    font-size: clamp(2.4rem, 5vw, 4.6rem);

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 20px;

    line-height: 1.15;

}

.section-subtitle {

    font-size: 18px;

    line-height: 1.8;

    color: #64748b;

    max-width: 760px;

    margin: auto;

}

/*==============================
Swiper
==============================*/

.customerSwiper {

    padding: 30px 10px 80px;

    position: relative;

    z-index: 2;

}

/*==================================================
REVIEW CARD
==================================================*/

.review-card {

    background: rgba(255, 255, 255, .78);

    backdrop-filter: blur(16px);

    border: 1px solid rgba(255, 255, 255, .45);

    border-radius: 24px;

    padding: 30px;

    height: 100%;

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;

    transition: all .45s ease;

    box-shadow: 0 15px 40px rgba(15, 23, 42, .08);

}

/* Shine Animation */

.review-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -130%;

    width: 50%;

    height: 100%;

    background: linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .75),

            transparent);

    transition: 1s;

}

.review-card:hover::before {

    left: 150%;

}

/* Hover */

.review-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 25px 55px rgba(227, 30, 36, .15);

    border-color: #ffd4d7;

}


/*==================================================
HEADER
==================================================*/

.review-header {

    display: flex;

    align-items: center;

    margin-bottom: 20px;

}

.review-header h5 {

    margin: 0;

    font-size: 20px;

    font-weight: 700;

    color: #0f172a;

}

.review-header small {

    color: #64748b;

    font-size: 14px;

}


/*==================================================
AVATAR
==================================================*/

.avatar {

    width: 72px;
    height: 72px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid white;

    box-shadow: 0 10px 20px rgba(0, 0, 0, .12);

}


.review-card:hover .avatar {

    transform: scale(1.12) rotate(5deg);

    border-color: #e31e24;

    box-shadow:
        0 0 0 8px rgba(227, 30, 36, .12),
        0 18px 35px rgba(227, 30, 36, .25);

}

/*==================================================
GOOGLE LOGO
==================================================*/

.google-logo {

    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;


}

.review-card:hover .google-logo {

    transform: scale(1.15);

}


/*==================================================
STARS
==================================================*/

.stars {

    margin: 18px 0;

    font-size: 22px;

    letter-spacing: 3px;

    color: #f59e0b;

    animation: starGlow 2s infinite alternate;

}

@keyframes starGlow {

    0% {

        text-shadow: 0 0 0 rgba(245, 158, 11, .2);

    }

    100% {

        text-shadow: 0 0 18px rgba(245, 158, 11, .55);

    }

}


/*==================================================
TEXT
==================================================*/

.review-text {

    font-size: 16px;

    line-height: 1.8;

    color: #475569;

    margin-bottom: 25px;

    font-style: italic;

    min-height: 120px;

}


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

.review-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: auto;

    padding-top: 20px;

    border-top: 1px solid #edf2f7;

}

.review-footer span {

    font-size: 14px;

    font-weight: 600;

    color: #16a34a;

}

.review-footer a {

    text-decoration: none;

    font-weight: 600;

    color: #e31e24;

    transition: .35s;

}

.review-footer a:hover {

    letter-spacing: 1px;

}

/*==================================================
SWIPER NAVIGATION
==================================================*/

.customerSwiper {

    overflow: hidden;

}

.customerSwiper::part(button-prev),
.customerSwiper::part(button-next) {

    width: 52px;

    height: 52px;

    background: #ffffff;

    border-radius: 50%;

    border: 1px solid #e5e7eb;

    color: #0f172a;

    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);

    transition: all .35s ease;

}

.customerSwiper::part(button-prev):hover,
.customerSwiper::part(button-next):hover {

    background: #e31e24;

    color: #ffffff;

    transform: scale(1.08);

    box-shadow: 0 15px 30px rgba(227, 30, 36, .30);

}

.customerSwiper::part(button-prev) {

    left: -10px;

}

.customerSwiper::part(button-next) {

    right: -10px;

}

/*==================================================
PAGINATION
==================================================*/

.customerSwiper::part(pagination) {

    bottom: 5px;

}

.customerSwiper::part(bullet) {

    width: 12px;

    height: 12px;

    background: #cbd5e1;

    opacity: 1;

    margin: 0 6px;

    transition: .35s;

    border-radius: 20px;

}

.customerSwiper::part(bullet-active) {

    width: 34px;

    background: #e31e24;

}

/*==================================================
CARD ANIMATION
==================================================*/

.swiper-slide {

    height: auto;

    transition: .4s ease;

}

.swiper-slide:hover {

    transform: translateY(-6px);

}

/*==================================================
GRAB CURSOR
==================================================*/

.customerSwiper {

    cursor: grab;

}

.customerSwiper:active {

    cursor: grabbing;

}

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

@media(max-width:1200px) {

    .review-card {

        padding: 26px;

    }

    .section-title {

        font-size: 58px;

    }

}

@media(max-width:992px) {

    .customers-section {

        padding: 80px 0;

    }

    .section-title {

        font-size: 48px;

    }

    .review-text {

        min-height: auto;

    }

}

@media(max-width:768px) {

    .customerSwiper {

        padding-bottom: 70px;

    }

    .section-title {

        font-size: 38px;

    }

    .section-subtitle {

        font-size: 16px;

    }

    .review-card {

        padding: 22px;

        border-radius: 20px;

    }

    .avatar {

        width: 60px;

        height: 60px;

    }

    .review-header h5 {

        font-size: 18px;

    }

    .review-text {

        font-size: 15px;

    }

    .customerSwiper::part(button-prev),

    .customerSwiper::part(button-next) {

        display: none;

    }

}

@media(max-width:576px) {

    .customers-section {

        padding: 60px 0;

    }

    .section-title {

        font-size: 30px;

    }

    .review-card {

        padding: 20px;

    }

    .review-footer {

        flex-direction: column;

        gap: 10px;

        align-items: flex-start;

    }

    .review-text {

        font-size: 14px;

        line-height: 1.7;

    }

    .stars {

        font-size: 18px;

    }

}

.customerSwiper {

    width: 100%;
    overflow: hidden;
    padding: 20px 5px 70px;

}

.swiper-slide {

    height: auto;
    display: flex;

}

.review-card {

    width: 100%;
    height: 100%;

}

-e
/* ==== src/app/components/hero-slider/hero-slider.component.css ==== */

/* =====================================
   HERO WRAPPER
===================================== */

.hero-wrapper {
    width: 100%;
    margin-top: 70px;
    overflow: hidden;
    background: #fff;
}

/* =====================================
   SLIDER
===================================== */

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 1672 / 941;
}

/* =====================================
   IMAGE
===================================== */

.banner {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* =====================================
   NAVIGATION
===================================== */

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    z-index: 100;
}

.nav-btn:hover {
    background: #2563eb;
}

.nav-btn i {
    font-size: 28px;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

/* =====================================
   LARGE MONITOR
===================================== */

@media (min-width:1600px) {

    .hero-wrapper {
        margin-top: 72px;
    }

    .slider {
        aspect-ratio: 1672 / 941;
    }

}

/* =====================================
   LAPTOP
===================================== */

@media (max-width:1200px) {

    .hero-wrapper {
        margin-top: 70px;
    }

    .slider {
        aspect-ratio: 1672 / 941;
    }

}

/* =====================================
   TABLET
===================================== */

@media (max-width:992px) {

    .hero-wrapper {
        margin-top: 68px;
    }

    .slider {
        aspect-ratio: 16/10;
    }

    .nav-btn {
        width: 46px;
        height: 46px;
    }

    .nav-btn i {
        font-size: 24px;
    }

}

/* =====================================
   MOBILE
===================================== */

@media (max-width:768px) {

    .hero-wrapper {
        margin-top: 64px;
    }

    .slider {
        aspect-ratio: 9/16;
    }

    .banner {
        object-fit: cover;
        object-position: center top;
    }

    .nav-btn {
        display: none;
    }

}

/* =====================================
   SMALL MOBILE
===================================== */

@media (max-width:480px) {

    .hero-wrapper {
        margin-top: 62px;
    }

    .slider {
        aspect-ratio: 9/16;
    }

    .banner {
        object-fit: cover;
        object-position: center top;
    }

}

-e
/* ==== src/app/components/home/home.component.css ==== */
/* 
@media (min-width: 1100px){
  .footer-row-wide{
    width: 1350px;
    margin-left: auto;
    margin-right: auto;
  }
} */

footer .container {
    max-width: 1350px !important;
}

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

-e
/* ==== src/app/components/industries/industries.component.css ==== */

/* Section Container */
.industries-section {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    padding: 100px 0;
    z-index: 1;
}

/* Gradient Blobs in the Background */
.bg-glow-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    z-index: -1;
    pointer-events: none;
}

.blob-1 {
    width: 450px;
    height: 450px;
    background: var(--blue);
    top: -10%;
    left: -5%;
    animation: floatBlob 12s infinite alternate;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: var(--red);
    bottom: -5%;
    right: -5%;
    animation: floatBlob 12s infinite alternate-reverse;
}

.blob-3 {
    width: 350px;
    height: 350px;
    background: #a855f7;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: floatBlob 12s infinite alternate;
}

@keyframes floatBlob {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(60px, 40px) scale(1.1);
    }

    100% {
        transform: translate(-40px, -60px) scale(0.9);
    }
}

/* Floating Shapes in the Background */
.bg-shape {
    position: absolute;
    opacity: 0.02;
    z-index: -1;
    pointer-events: none;
    border: 2px solid var(--text-1);
}

.shape-1 {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    top: 15%;
    right: 12%;
    animation: rotateShape 12s infinite linear;
}

.shape-2 {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    bottom: 20%;
    left: 8%;
    animation: floatShape 8s infinite ease-in-out;
}

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

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

@keyframes floatShape {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }
}

/* Swiper Navigation Wrapper */
.swiper-nav-wrapper {
    padding: 10px 50px 30px;
}

/* Custom Navigation Buttons */
.swiper-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow-md);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.swiper-nav-btn:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

/* Swiper Element */
.industries-swiper {
    width: 100%;
    padding: 10px 0;
}

.swiper-slide-custom {
    height: auto;
    display: flex;
}

/* Premium Industry Cards */
.industry-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 24px;
    height: 100%;
    width: 100%;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--card-theme-color) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.industry-card:hover::before {
    opacity: 0.02;
}

.industry-card:hover {
    transform: translateY(-8px);
    border-color: var(--card-theme-color);
    box-shadow: 0 20px 40px var(--card-theme-glow);
}

/* Card Icon Box */
.card-icon-wrap {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;

    margin-bottom: 24px;

    background: var(--card-theme-color);
}

.card-icon-wrap i {
    font-family: "remixicon" !important;
    font-size: 30px;
    color: white;
    line-height: 1;
}

.card-icon-wrap {
    transition: transform 0.2s ease;
}

.industry-card:hover .card-icon-wrap {
    transform: scale(1.3) rotate(360deg);
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 12px;
}

.card-description {
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* Card Link */
.card-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--card-theme-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: auto;
}

.card-link i {
    transition: transform 0.2s ease;
}

.industry-card:hover .card-link {
    color: var(--card-theme-light);
}

.industry-card:hover .card-link i {
    transform: translateX(6px);
}

/* Responsive adjustments */
@media(max-width: 991px) {
    .industries-section {
        padding: 70px 0;
    }

    .swiper-nav-wrapper {
        padding: 10px 20px 20px;
    }

    .swiper-nav-btn {
        display: none;
        /* Swipe works, buttons hide on mobile for cleaner look */
    }
}

-e
/* ==== src/app/components/industries/websites/mobile-store/mobile-store.component.css ==== */

.mobile-hero {
    padding: 100px 0;
    background: #f8fafc;
}

.mobile-hero img {
    max-width: 100%;
    border-radius: 20px;
}

.feature-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transition: .3s;
}

.feature-card:hover {
    transform: translateY(-6px);
}

.feature-card i {
    color: #0d6efd;
    font-size: 30px;
}

@media(max-width:768px) {

    .mobile-hero {

        padding: 70px 0;

        text-align: center;

    }

}

-e
/* ==== src/app/components/navbar/navbar.component.css ==== */

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

.navbar-custom {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 72px;

    z-index: 9999;

    display: flex;

    align-items: center;

    background: rgba(255, 255, 255, .92);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(0, 0, 0, .08);

    transition: .35s ease;

}

.navbar-custom.scrolled {

    background: #ffffff;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

}

/* ==========================================================
   CONTAINER
========================================================== */

.navbar-custom .container {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

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


}

/* ==========================================================
   BRAND
========================================================== */


/* ==========================================================
   LOGO
========================================================== */

.logo-img {

    width: 44px;

    height: 44px;

    object-fit: contain;

    display: block;

    margin: 0;

    padding: 0;

    transition: .3s;
    margin: 0 !important;
    padding: 0 !important;

}

/* ==========================================================
   BRAND TEXT
========================================================== */

.brand-text {

    display: flex;

    align-items: center;

    gap: 4px;

    margin: 0;

    padding: 0;

    font-size: 28px;

    font-weight: 800;

    color: #111827;

    line-height: 1;

    white-space: nowrap;

}

.brand-text .dot {

    color: #e30613;

}

/* ==========================================================
   NAV LINKS
========================================================== */

.nav-links {

    display: flex;

    align-items: center;

    gap: 32px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.nav-links li {

    margin: 0;

    padding: 0;

}

.nav-links a {

    color: #111827;

    font-size: 17px;

    font-weight: 600;

    text-decoration: none;

    transition: .3s;

}

.nav-links a:hover {

    color: #2563eb;

}

.active-link {

    color: #2563eb !important;

}

/* ==========================================================
   MENU BUTTON
========================================================== */

.menu-btn {

    display: none;

    width: 42px;

    height: 42px;

    border: none;

    background: none;

    font-size: 28px;

    color: #111827;

}

/* ==========================================================
   LARGE MONITOR
========================================================== */

@media(min-width:1600px) {

    .brand-text {

        font-size: 32px;

    }

    .logo-img {

        width: 48px;

        height: 48px;

        margin: 0 !important;
        padding: 0 !important;

    }

    .nav-links {

        gap: 40px;

    }

}

/* ==========================================================
   LAPTOP
========================================================== */

@media(max-width:1200px) {

    .brand-text {

        font-size: 24px;

    }

    .logo-img {

        width: 42px;

        height: 42px;

        margin: 0 !important;
        padding: 0 !important;

    }

    .nav-links {

        gap: 20px;

    }

}

/* ==========================================================
   FORCE HAMBURGER BEFORE OVERFLOW (fixes cut-off Download button
   on tablets / small laptops)

   Bootstrap's d-none/d-lg-flex utilities switch at their own `lg`
   breakpoint (992px) using !important, which was fighting the
   media queries below and made the full desktop nav (About,
   Products, Services, Industries, Customers, Tech, Contact,
   Download) stay visible all the way up to 1200px — too many items
   for that width, so Download got pushed off-screen on tablets
   (e.g. 1024px). This block forces the switch to the hamburger
   menu earlier, overriding Bootstrap's utility classes.
========================================================== */

@media(max-width:1200px) {

    .navbar-custom .nav-links {

        display: none !important;

    }

    .navbar-custom .menu-btn {

        display: flex !important;

        align-items: center;

        justify-content: center;

    }

}

/* ==========================================================
   SAFEGUARD: keep the mobile drawer fully out of the way on
   wide desktop.

   `d-lg-none` was removed from the `.mobile-nav` element in the
   HTML (it was fighting with our `.show` class — Bootstrap's
   `display:none !important` from `d-lg-none` was winning over the
   `.show` transform on tablet/small-laptop widths, 992px-1200px,
   which is why the hamburger appeared but the panel never opened).

   Since `.mobile-nav` no longer has that Bootstrap class, this
   rule makes sure it's fully hidden (not just transformed
   off-screen) above 1200px, matching the width where the desktop
   nav-links / hamburger switch happens above.
========================================================== */

@media(min-width:1201px) {

    .mobile-nav {

        display: none !important;

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:992px) {

    .navbar-custom {

        height: 68px;

    }

    .logo-img {

        width: 40px;

        height: 40px;

        margin: 0 !important;
        padding: 0 !important;

    }

    .brand-text {

        font-size: 26px;

    }

    .nav-links {

        display: none;

    }

    .menu-btn {

        display: flex;

        align-items: center;

        justify-content: center;

    }

}

.mobile-accordion-header {
    color: #fff;
}

.mobile-accordion-header span {
    color: #fff;
    font-weight: 600;
}

.mobile-accordion-header i {
    color: #fff;
}

.mobile-accordion-header.active-link {
    background: rgba(255, 255, 255, .18);
    border-radius: 12px;
}

.mobile-accordion-header.active-link span,
.mobile-accordion-header.active-link i {
    color: #fff !important;
}


.dropdown-services-container .mega-menu {
    min-width: 850px;
}

.dropdown-services-container .product-dropdown-card {
    min-height: 95px;
}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px) {

    .navbar-custom {

        height: 64px;

    }

    .logo-img {

        width: 36px;

        height: 36px;
        margin: 0 !important;
        padding: 0 !important;

    }

    .brand-text {

        font-size: 26px;

    }

    .navbar-brand-custom {

        gap: 4px;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:480px) {

    .logo-img {

        width: 34px;

        height: 34px;
        margin: 0 !important;
        padding: 0 !important;

    }

    .brand-text {

        font-size: 26px;

    }

    .navbar-brand-custom {

        gap: 4px;

    }

}

/* ==========================================================
   PRODUCT DROPDOWN
========================================================== */

.dropdown {
    position: relative;
}

.nav-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 720px;
    padding: 24px;
    border: none;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transition: .35s;
    z-index: 9999;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 10px);
}

.product-dropdown-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    padding: 16px;
    border-radius: 14px;
    transition: .3s;
    border: 1px solid transparent;
}

.product-dropdown-card:hover {
    background: #f8fbff;
    border-color: #dbeafe;
    transform: translateY(-3px);
}

.product-dropdown-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.product-card-title {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
}

.product-card-desc {
    margin-top: 4px;
    margin-bottom: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================
   MOBILE MENU

   `.mobile-nav` stays permanently in the DOM (see html — no more
   *ngIf) and is purely driven by the `.show` class. Default state
   is translated off-screen; `.show` slides it in. This is what
   actually needs to toggle for the hamburger to work.

   NOTE: `d-lg-none` is no longer on this element in the HTML (see
   the "SAFEGUARD" rule above for why) — visibility above 1200px is
   now handled purely by CSS here instead of Bootstrap utilities.
========================================================== */

.mobile-nav {
    position: fixed;
    top: 64px;
    right: 0;
    width: 75%;
    height: calc(100vh - 64px);
    color: white;
    background: linear-gradient(160deg,
            #2563eb 0%,
            #4f46e5 45%,
            #7c3aed 100%);

    display: flex;
    flex-direction: column;
    padding: 18px;

    transform: translateY(-120%);
    transition: .35s ease;

    z-index: 9998;
    border-radius: 0 0 0 20px;
    box-shadow: -15px 0 40px rgba(79, 70, 229, .35);
}

.mobile-nav.show {
    transform: translateY(0);
}

.mobile-nav a {

    padding: 14px 16px;

    color: #fefeff;

    text-decoration: none;

    border-radius: 10px;

    font-weight: 600;

    transition: .3s;

}

.mobile-nav a:hover {

    background: #eff6ff;

    color: #2563eb;

}

/* ==========================================================
   DARK MODE
========================================================== */

html[data-theme="dark"] .navbar-custom {

    background: #111827;

    border-bottom: 1px solid #374151;

}

html[data-theme="dark"] .brand-text {

    color: #ffffff;

}

html[data-theme="dark"] .nav-links a {

    color: #ffffff;

}

html[data-theme="dark"] .nav-links a:hover {

    color: #ffffff;

}

html[data-theme="dark"] .dropdown-menu {

    background: #1f2937;

}

html[data-theme="dark"] .product-dropdown-card:hover {

    background: #374151;

}

html[data-theme="dark"] .product-card-title {

    color: #ffffff;

}

html[data-theme="dark"] .product-card-desc {

    color: #d1d5db;

}

html[data-theme="dark"] .mobile-nav {

    background: #111827;

}

html[data-theme="dark"] .mobile-nav a {

    color: #ffffff;

}

html[data-theme="dark"] .mobile-nav a:hover {

    background: #374151;

}

/* ==========================================================
   RESPONSIVE DROPDOWN
========================================================== */

@media(max-width:1200px) {

    .dropdown-menu {

        width: 650px;

    }

}

@media(max-width:992px) {

    .dropdown-menu {

        display: none;

    }

    .mobile-nav {

        top: 68px;

    }

}

@media(max-width:768px) {

    .mobile-nav {

        top: 64px;

        padding: 14px;

    }

    .mobile-nav a {

        font-size: 15px;

    }

}

.right-side {

    display: flex;

    align-items: center;

    gap: 0;

}

/* ==========================================================
   MOBILE ACCORDION (Products)
========================================================== */

.mobile-accordion-header {
    cursor: pointer;
}

.mobile-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.mobile-accordion-body.expanded {
    max-height: 600px;
    /* products list full ah kaanumaLavu ku periya value */
}

.accordion-arrow {
    transition: transform .3s ease;
}

.accordion-arrow.rotated {
    transform: rotate(180deg);
}

@media (max-width:992px) {

    .mobile-nav .active-link {
        color: #fff !important;
        background: rgba(255, 255, 255, .18);
        border-radius: 10px;
    }

}

.download-dropdown {

    position: absolute;

    top: 110%;

    right: 0;

    width: 260px;

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    z-index: 999;

    border: 1px solid rgba(0, 0, 0, .08);

    animation: dropdown .25s ease;
}

.download-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px 18px;

    text-decoration: none;

    color: #222;

    transition: .3s;
}

.download-item:hover {

    background: #f7f7f7;

    transform: translateX(5px);
}

.download-item i {

    font-size: 24px;
}

@keyframes dropdown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

-e
/* ==== src/app/components/product/product.component.css ==== */

.section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 60%, #eef5ff 100%);
    overflow: hidden;
}

.feature-wrapper {
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
}

.sidebar-panel {
    background: #fbfcfe;
    border-right: 1px solid #edf2f7;
}

.list-group-item {
    border: none;
    padding: 18px 22px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    transition: .35s ease;
    border-left: 4px solid transparent;
    color: #374151;
}

.list-group-item:hover {
    background: #eef5ff;
    color: #2563eb;
    border-left-color: #2563eb;
    padding-left: 28px;
}

.list-group-item.active {
    background: #2563eb;
    color: #fff;
    border-left-color: #0d6efd;
}

.list-group-item.active i {
    transform: translateX(4px);
}

.list-group-item i {
    width: 18px;
    height: 18px;
    transition: .3s;
}

.module-card {
    position: relative;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 22px;
    overflow: hidden;
    transition: all .35s ease;
    height: 100%;
    cursor: pointer;
}

.module-card:hover {
    transform: translateY(-8px);
    border-color: #2563eb;
    box-shadow: 0 20px 45px rgba(37, 99, 235, .15);
}

.card-body {
    padding: 28px;
    display: flex;
    align-items: flex-start;
}

.module-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
    flex-shrink: 0;
    transition: .35s;
}

.module-icon svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    transition: .35s;
}

.module-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111827;
    transition: .3s;
}

.module-desc {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
    color: #6b7280;
}

.module-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    color: #2563eb;
    opacity: 0;
    transform: translateX(-10px);
    transition: .35s;
}

.module-arrow svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.module-card:hover .module-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ================================
   PREMIUM MODULE CARD ANIMATIONS
==================================*/

.module-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Shine Sweep */

.module-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);
    transform: skewX(-25deg);
    transition: .9s ease;
    pointer-events: none;
    z-index: 2;
}

.module-card:hover::before {
    left: 160%;
}

/* Blue Glow */

.module-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    box-shadow: 0 0 0 rgba(37, 99, 235, 0);
    transition: .35s;
    pointer-events: none;
}

.module-card:hover::after {
    box-shadow:
        0 15px 45px rgba(37, 99, 235, .15),
        0 0 0 1px rgba(37, 99, 235, .08);
}

/* Left Border Animation */

.module-card .card-body {
    position: relative;
}

.module-card .card-body::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 0;
    width: 4px;
    height: 0%;
    background: #2563eb;
    border-radius: 10px;
    transition: .35s;
}

.module-card:hover .card-body::before {
    height: 100%;
}

/* Icon Scale */

.module-card:hover .module-icon {
    transform: scale(1.12);
    background: #0d6efd;
}

/* Icon Rotate */

.module-card:hover .module-icon svg {
    transform: rotate(8deg) scale(1.08);
}

/* Title */

.module-card:hover .module-title {
    color: #2563eb;
}

/* Description */

.module-card:hover .module-desc {
    color: #374151;
}

/* Arrow */

.module-arrow {
    transition: .35s;
}

.module-card:hover .module-arrow {
    transform: translateX(8px);
}

/* Smooth */

.module-card,
.module-icon,
.module-title,
.module-desc,
.module-arrow,
.module-icon svg {
    transition: all .35s ease;
}

/* Cursor */

.module-card {
    cursor: pointer;
}

/* GPU */

.module-card {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

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

/* Large Desktop */

@media(min-width:1600px) {

    .section-title {
        font-size: 56px;
    }

    .section-desc {
        font-size: 19px;
    }

    .module-card {
        min-height: 185px;
    }

}

/* Laptop */

@media(max-width:1200px) {

    .section {
        padding: 80px 0;
    }

    .section-title {
        font-size: 40px;
    }

    .section-desc {
        font-size: 16px;
    }

    .card-body {
        padding: 22px;
    }

    .module-icon {
        width: 60px;
        height: 60px;
    }

    .module-title {
        font-size: 1.15rem;
    }

}

/* Tablet */

@media(max-width:991px) {

    .section {
        padding: 70px 0;
    }

    .feature-wrapper {
        border-radius: 22px;
    }

    .sidebar-panel {
        border-right: none;
        border-bottom: 1px solid #edf2f7;
    }

    .list-group {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .list-group::-webkit-scrollbar {
        display: none;
    }

    .list-group-item {
        min-width: 220px;
        border-left: none;
        border-bottom: 3px solid transparent;
        justify-content: center;
        padding: 18px;
    }

    .list-group-item.active {
        border-bottom-color: #fff;
    }

    .list-group-item:hover {
        padding-left: 18px;
    }

    .card-body {
        padding: 20px;
    }

    .module-icon {
        width: 58px;
        height: 58px;
    }

    .module-title {
        font-size: 1.05rem;
    }

    .module-desc {
        font-size: .9rem;
    }

}

/* Mobile */

@media(max-width:576px) {

    .section {
        padding: 50px 0;
    }

    .section-tag {
        font-size: 11px;
        padding: 7px 16px;
    }

    .section-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .section-desc {
        font-size: .92rem;
        line-height: 1.6;
        padding: 0 10px;
    }

    .feature-wrapper {
        border-radius: 18px;
    }

    .p-4,
    .p-lg-5 {
        padding: 1rem !important;
    }

    .list-group-item {
        min-width: 180px;
        font-size: 14px;
        padding: 14px;
    }

    .module-card {
        border-radius: 18px;
    }

    .card-body {
        padding: 18px;
    }

    .module-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .module-icon svg {
        width: 24px;
        height: 24px;
    }

    .module-title {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .module-desc {
        font-size: .84rem;
        line-height: 1.55;
    }

    .module-arrow {
        display: none;
    }

}

/* Small Mobile */

@media(max-width:400px) {

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

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

    .module-title {
        font-size: .95rem;
    }

    .module-desc {
        font-size: .8rem;
    }

}

/* Images */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Overflow */

html,
body {
    overflow-x: hidden;
}

/* Smooth */

* {
    -webkit-tap-highlight-color: transparent;
}

button,
.module-card,
.list-group-item {
    touch-action: manipulation;
}

-e
/* ==== src/app/components/services/services.component.css ==== */

/* ============================================================
   BROS IT SOLUTIONS — SERVICES PAGE (full mockup match)
   ============================================================ */

:host {
    --ink: #0F172A;
    --ink-muted: #64748B;
    --bg-page: #FFFFFF;
    --bg-alt: #F4F6FA;
    --line: #E7EBF1;

    --blue: #2563EB;
    --blue-dark: #1D4ED8;
    --cyan: #38BDF8;
    --navy: #0A1130;
    --navy-2: #0F1B3D;

    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    display: block;
    background: var(--bg-page);
    color: var(--ink);
    font-family: var(--font-body);
}

:host ::ng-deep h1,
:host ::ng-deep h2,
:host ::ng-deep h3,
:host ::ng-deep h4,
:host ::ng-deep h5,
:host ::ng-deep h6 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.text-blue {
    color: var(--blue);
}

.text-cyan {
    color: var(--cyan);
}

.section-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--blue);
    text-transform: uppercase;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
}

.section-sub {
    color: var(--ink-muted);
}

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

.hero-dark {
    background: linear-gradient(135deg, var(--navy) 0%, #0B1740 60%, #0F1B3D 100%);
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.hero-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(147, 197, 253, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147, 197, 253, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at right, black 40%, transparent 75%);
    pointer-events: none;
}

.hero-dot {
    position: absolute;
    border-radius: 50%;
    background: var(--cyan);
    opacity: 0.6;
}

.hero-dot-1 {
    width: 6px;
    height: 6px;
    top: 20%;
    right: 15%;
    box-shadow: 0 0 12px var(--cyan);
}

.hero-dot-2 {
    width: 4px;
    height: 4px;
    top: 55%;
    right: 8%;
    box-shadow: 0 0 10px var(--cyan);
}

.hero-dot-3 {
    width: 5px;
    height: 5px;
    top: 75%;
    right: 30%;
    box-shadow: 0 0 10px var(--cyan);
}

.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cyan);
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
}

.hero-heading {
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
}

.hero-para {
    color: #AEB9D4;
    font-size: 1rem;
    max-width: 480px;
}

.hero-illustration {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

:host ::ng-deep .btn-primary-solid {
    background: var(--blue);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

:host ::ng-deep .btn-primary-solid:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

:host ::ng-deep .btn-outline-dark-hero {
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    font-weight: 600;
}

:host ::ng-deep .btn-outline-dark-hero:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   SERVICES GRID
   ============================================================ */

.services-section {
    background: var(--bg-page);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem;
}

@media (min-width: 576px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .service-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.service-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.75rem 1.4rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.10);
    border-color: #D6DCE6;
}

.service-card-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffffff;
}

.service-card-title {
    font-size: 1rem;
    color: var(--ink);
}

.service-card-desc {
    font-size: 0.84rem;
    color: var(--ink-muted);
    line-height: 1.5;
}

:host ::ng-deep .btn-link-arrow {
    background: none;
    border: none;
    color: var(--blue);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    transition: gap 0.15s ease;
}

:host ::ng-deep .btn-link-arrow:hover {
    gap: 0.4rem;
    color: var(--blue-dark);
}

/* ============================================================
   WHY CHOOSE
   ============================================================ */

.why-section {
    background: var(--bg-alt);
}

.why-title {
    font-size: 1.9rem;
    line-height: 1.25;
}

.why-sub {
    color: var(--ink-muted);
}

.why-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    height: 100%;
}

.why-card-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.why-card-desc {
    font-size: 0.82rem;
    color: var(--ink-muted);
}

/* ============================================================
   PROCESS
   ============================================================ */

.process-section {
    background: var(--bg-page);
}

.process-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
    position: relative;
}

@media (min-width: 992px) {
    .process-track {
        grid-template-columns: repeat(6, 1fr);
    }

    .process-track::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 8%;
        right: 8%;
        height: 1px;
        background-image: linear-gradient(to right, var(--line) 50%, transparent 50%);
        background-size: 10px 1px;
        z-index: 0;
    }
}

.process-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.process-circle {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ffffff;
    box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.35);
}

.process-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.process-desc {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

/* ============================================================
   STATS BAR
   ============================================================ */

.stats-bar {
    background: var(--navy);
    border-radius: 16px;
    margin: 0 auto 0;
}

.stat-icon {
    font-size: 1.8rem;
}

.stat-value {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
}

.stat-label {
    color: #9AA6C3;
    font-size: 0.82rem;
}

/* ============================================================
   TECHNOLOGIES
   ============================================================ */

.tech-strip {
    background: var(--bg-page);
}

.tech-pill-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.45rem 1rem 0.45rem 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    background: #ffffff;
}

.tech-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.35rem;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
}

/* ============================================================
   CTA BANNER
   ============================================================ */

.cta-banner {
    background: linear-gradient(120deg, var(--blue) 0%, var(--blue-dark) 100%);
    border-radius: 16px;
    padding: 2.5rem 2.2rem;
}

.cta-banner-sub {
    color: rgba(255, 255, 255, 0.85);
}

:host ::ng-deep .btn-cta-white {
    background: #ffffff;
    color: var(--blue-dark);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

:host ::ng-deep .btn-cta-white:hover {
    color: var(--blue-dark);
    transform: translateY(-2px);
}

:host ::ng-deep .btn-cta-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

:host ::ng-deep .btn-cta-outline:hover {
    color: #ffffff;
    border-color: #ffffff;
}

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

@media (max-width: 767px) {
    .hero-heading {
        font-size: 1.8rem;
    }

    .cta-banner {
        padding: 2rem 1.4rem;
        text-align: center;
        justify-content: center !important;
    }

    .process-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- accessibility ---------- */

:host ::ng-deep a:focus-visible,
:host ::ng-deep button:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .service-card,
    :host ::ng-deep .btn-primary-solid {
        transition: none;
    }
}

-e
/* ==== src/app/components/sidebar/sidebar.component.css ==== */

.menu-btn {

    position: fixed;

    top: 90px;

    left: 15px;

    z-index: 2000;

    background: #090909;

    color: rgb(248, 243, 243);

    border: none;

    padding: 10px 15px;

    font-size: 22px;

    border-radius: 8px;

    cursor: pointer;

}

.sidebar {

    position: fixed;

    top: 0;

    left: -260px;

    width: 250px;

    height: 100%;

    background: #000000;

    color: rgb(244, 238, 238);

    padding-top: 70px;

    transition: .3s;

    z-index: 1500;

}

/* 
.sidebar.open{

left:0;

} */
.sidebar {
    right: -300px;
}

.sidebar {
    right: -280px;
    transition: .3s;
}

body.sidebar-open .sidebar {
    right: 0;
}

.sidebar.open {
    right: 0;
}

.sidebar ul {

    list-style: none;

    padding: 20px;

}

.sidebar li {

    padding: 15px;

    cursor: pointer;

    font-size: 18px;

}

.sidebar li:hover {

    background: #4a4444;

}

.overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    z-index: 1200;

}

@media(max-width:768px) {

    .sidebar {

        width: 220px;

    }

}

.sidebar a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 15px;
}

/* .sidebar a:hover{
    background:#334155;
    border-radius:8px;
} */
-e
/* ==== src/app/components/tech/tech.component.css ==== */

.tech-section {

    background: #f8fbff;

    position: relative;

    overflow: hidden;

}

.tech-card {

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(18px);

    border-radius: 22px;

    padding: 35px 25px;

    text-align: center;

    transition: .4s;

    border: 1px solid rgba(255, 255, 255, .4);

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

}

.tech-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(0, 0, 0, .15);

}

.tech-icon {

    width: 75px;

    height: 75px;

    border-radius: 20px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 34px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, .18);

}

.progress {

    height: 8px;

    border-radius: 20px;

    background: #ececec;

    overflow: hidden;

}

.progress-bar {

    border-radius: 20px;

    transition: 1.2s;

}

.tech-card h5 {

    font-size: 20px;

}

.tech-section::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    background: #0d6efd22;

    border-radius: 50%;

    top: -150px;

    left: -120px;

    filter: blur(60px);

}

.tech-section::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    background: #ff980022;

    border-radius: 50%;

    right: -120px;

    bottom: -120px;

    filter: blur(70px);

}

@media(max-width:768px) {

    .tech-card {

        padding: 25px;

    }

    .tech-icon {

        width: 60px;

        height: 60px;

        font-size: 28px;

    }

}

/*=============================
      TECHNOLOGY INFO
==============================*/

.tech-info-box {

    background: #fff;

    border-radius: 25px;

    padding: 50px;

    margin-top: 20px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    position: relative;

    overflow: hidden;

}

.tech-info-box::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: #0d6efd10;

    top: -90px;

    right: -90px;

}

.small-title {

    display: inline-block;

    background: #e8f1ff;

    color: #0d6efd;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;

}

.feature-line {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 0;

    font-weight: 500;

}

.feature-line i {

    font-size: 20px;

}

.tech-highlight {

    background: linear-gradient(135deg, #0d6efd, #4f46e5);

    border-radius: 20px;

    padding: 35px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #fff;

}

.tech-highlight:hover {
    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(0, 0, 0, .55);

}

.highlight-item {

    text-align: center;

    padding: 18px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .2);

}

.highlight-item:last-child {

    border-bottom: none;

}

.highlight-item h2 {

    font-size: 42px;

    font-weight: 700;

    margin-bottom: 5px;

}

.highlight-item span {

    font-size: 15px;

    opacity: .9;

}

@media(max-width:992px) {

    .tech-info-box {

        padding: 30px;

    }

    .tech-highlight {

        margin-top: 30px;

    }

}

-e
/* ==== src/app/components/top-header/top-header.component.css ==== */

/* .top-header {
    width: 100%;
    height: 45px;
    background: linear-gradient(90deg,#0f172a,#1e293b);
    color: white;

    display: flex;
    align-items: center;
    transition: transform .35s ease;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
}


.top-header.hide{
    transform: translateY(-100%);
    opacity: 0;
}

.container {
    width: 95%;
    margin: 0 auto;

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

.left-links,
.right-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-header a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.top-header a:hover {
    color: #ff3b3b;
} */

/* ================= WhatsApp Floating Button ================= */

.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 90px;

    width: 56px;
    height: 56px;

    background: #25D366;
    border-radius: 50px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 13px;

    overflow: hidden;
    text-decoration: none;

    box-shadow: 0 10px 25px rgba(37, 211, 102, .35);
    transition: width .35s ease, border-radius .35s ease, box-shadow .35s ease;

    z-index: 9999;

    opacity: 1;
    visibility: visible;
}

.whatsapp-float img {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;

    opacity: 1 !important;
    visibility: visible !important;
}

.whatsapp-float span {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 12px;

    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .3s ease, opacity .25s ease, margin-left .25s ease;
}

.whatsapp-float:hover {
    width: 180px;
    border-radius: 40px;
}

.whatsapp-float:hover span {
    max-width: 140px;
    opacity: 1;
}

/* Tablet */
@media (max-width: 820px) {
    .whatsapp-float {
        right: 20px;
        bottom: 90px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .whatsapp-float {
        right: 16px;
        bottom: 85px;
    }
}

/* ================= WhatsApp Floating Button (FORCE FIX) ================= */

html,
body {
    overflow-x: hidden;
}

.whatsapp-float {
    position: fixed !important;
    right: 24px !important;
    bottom: 90px !important;
    left: auto !important;
    top: auto !important;

    width: 56px;
    height: 56px;

    background: #25D366;
    border-radius: 50px;

    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding-left: 13px;

    overflow: hidden;
    text-decoration: none;

    box-shadow: 0 10px 25px rgba(37, 211, 102, .35);
    transition: width .35s ease, border-radius .35s ease;

    z-index: 2147483647 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.whatsapp-float img {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: block !important;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
}

.whatsapp-float span {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 12px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .3s ease, opacity .25s ease;
}

.whatsapp-float:hover {
    width: 180px;
    border-radius: 40px;
}

.whatsapp-float:hover span {
    max-width: 140px;
    opacity: 1;
}

/* Mobile */
@media (max-width:480px) {


    .whatsapp-float {
        right: 16px !important;
        bottom: 80px !important;

        width: 50px;
        height: 50px;
    }

    .whatsapp-float img {
        width: 26px;
        height: 26px;
        min-width: 26px;
    }


    #scrollTopBtn {
        right: 16px !important;
        bottom: 20px !important;

        left: auto !important;
        position: fixed !important;

        width: 44px;
        height: 44px;

        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 2147483647 !important;
    }

}

@media (min-width:481px) and (max-width:820px) {


    .whatsapp-float {
        right: 20px !important;
        bottom: 95px !important;
    }

    #scrollTopBtn {
        right: 20px !important;
        bottom: 25px !important;
        position: fixed !important;
    }

}

/* ==========================================
   Hero Buttons
========================================== */

.hero-btn-group {
    margin-top: 30px;
}

.hero-btn {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 15px 34px;
    border-radius: 14px;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;

    text-decoration: none;
    border: none;

    transition: all .4s ease;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

/* Shine Effect */

.hero-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);
    transition: .7s;
}

.hero-btn:hover::before {
    left: 140%;
}

/* Primary Button */

.hero-btn-primary {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
}

.hero-btn-primary:hover {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .35);
}

/* Secondary Button */

.hero-btn-secondary {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
}

.hero-btn-secondary:hover {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(249, 115, 22, .35);
}

/* Icon Animation */

.hero-btn i {
    transition: transform .35s ease;
}

.hero-btn:hover i {
    transform: translateX(5px);
}

/* Mobile */

@media(max-width:576px) {

    .hero-btn-group {
        width: 100%;
        flex-direction: column;
    }

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

/* ==========================================
   Premium CTA Banner
========================================== */

.cta-banner {
    position: relative;
    overflow: hidden;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;

    padding: 45px 50px;

    border-radius: 24px;

    background: linear-gradient(135deg, #06b6d4, #2563eb);

    box-shadow:
        0 20px 45px rgba(37, 99, 235, .25);

    transition: .4s ease;
}

/* Glow */

.cta-banner::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -30%;

    width: 320px;
    height: 320px;

    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    filter: blur(60px);
}

.cta-banner::after {
    content: "";
    position: absolute;
    bottom: -80%;
    right: -10%;

    width: 280px;
    height: 280px;

    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    filter: blur(70px);
}

.cta-banner:hover {
    transform: translateY(-6px);
    box-shadow:
        0 30px 60px rgba(37, 99, 235, .35);
}

/* Content */

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-content h3 {
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 12px;
}

.cta-content p {
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
    margin: 0;
}

/* Buttons */

.cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.cta-btn {

    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 28px;

    border-radius: 14px;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition: .35s ease;

}

/* Shine */

.cta-btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .5),
            transparent);

    transition: .7s;

}

.cta-btn:hover::before {

    left: 140%;

}

/* Contact */

.cta-btn-warning {

    background: #fff;

    color: #2563eb;

    box-shadow: 0 12px 30px rgba(255, 255, 255, .25);

}

.cta-btn-warning:hover {

    color: #2563eb;

    transform: translateY(-4px);

}

/* Call */

.cta-btn-primary {

    background: rgba(255, 255, 255, .15);

    color: #fff;

    border: 1px solid rgba(255, 255, 255, .35);

    backdrop-filter: blur(10px);

}

.cta-btn-primary:hover {

    background: #fff;

    color: #2563eb;

    transform: translateY(-4px);

}

/* Icons */

.cta-btn i {

    transition: .35s;

}

.cta-btn:hover i {

    transform: translateX(5px);

}

/* Responsive */

@media(max-width:991px) {

    .cta-banner {

        text-align: center;

        justify-content: center;

        padding: 40px 25px;

    }

    .cta-content h3 {

        font-size: 28px;

    }

    .cta-buttons {

        justify-content: center;

        width: 100%;

    }

}

@media(max-width:576px) {

    .cta-btn {

        width: 100%;

    }

    .cta-content h3 {

        font-size: 24px;

    }

}


/* ==========================================
   Technologies Section
========================================== */

.tech-strip {
    position: relative;
    padding: 90px 0;
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    overflow: hidden;
}

/* Background Glow */

.tech-strip::before {
    content: "";
    position: absolute;
    top: -150px;
    left: -100px;

    width: 320px;
    height: 320px;

    border-radius: 50%;
    background: rgba(37, 99, 235, .08);

    filter: blur(90px);
}

.tech-strip::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -150px;

    width: 300px;
    height: 300px;

    border-radius: 50%;
    background: rgba(6, 182, 212, .08);

    filter: blur(90px);
}

/* Heading */

.section-eyebrow {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    background: rgba(37, 99, 235, .08);

    color: #2563eb;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}

/* Tech Row */

.tech-pill-row {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 18px;

    margin-top: 40px;

    position: relative;

    z-index: 2;
}

/* Tech Card */

.tech-pill {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 22px;

    background: #fff;

    border: 1px solid #e8eef7;

    border-radius: 60px;

    font-weight: 600;

    color: #374151;

    box-shadow: 0 10px 25px rgba(15, 23, 42, .06);

    transition: all .35s ease;

    cursor: pointer;

    position: relative;

    overflow: hidden;
}

/* Shine */

.tech-pill::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .8),
            transparent);

    transition: .7s;
}

.tech-pill:hover::before {

    left: 140%;
}

/* Hover */

.tech-pill:hover {

    transform: translateY(-8px) scale(1.05);

    border-color: #2563eb;

    box-shadow: 0 20px 40px rgba(37, 99, 235, .20);

}

/* Badge */

.tech-pill-badge {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    flex-shrink: 0;

    transition: transform .4s ease;
}

.tech-pill:hover .tech-pill-badge {

    transform: rotate(360deg) scale(1.15);

}

/* Responsive */

@media(max-width:768px) {

    .tech-strip {

        padding: 70px 0;

    }

    .tech-pill {

        width: calc(50% - 12px);

        justify-content: flex-start;

    }

}

@media(max-width:480px) {

    .tech-pill {

        width: 100%;

    }

    .section-eyebrow {

        font-size: 12px;

        letter-spacing: 1px;

    }

}

/*==================================================
   SERVICES SECTION
==================================================*/

.services-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    overflow: hidden;
}

/* Background Glow */

.services-section::before {
    content: "";
    position: absolute;
    top: -120px;
    left: -120px;

    width: 320px;
    height: 320px;

    background: rgba(37, 99, 235, .08);
    border-radius: 50%;
    filter: blur(90px);
}

.services-section::after {
    content: "";
    position: absolute;
    bottom: -140px;
    right: -120px;

    width: 300px;
    height: 300px;

    background: rgba(6, 182, 212, .08);
    border-radius: 50%;
    filter: blur(90px);
}

/*==================================
Service Grid
==================================*/

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    position: relative;
    z-index: 2;
}

/*==================================
Service Card
==================================*/

.service-card {

    position: relative;
    overflow: hidden;

    background: #fff;

    border: 1px solid #edf2f7;

    border-radius: 22px;

    padding: 32px 28px;

    transition: all .4s ease;

    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);

}

/* Gradient Overlay */

.service-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg,
            rgba(37, 99, 235, .04),
            transparent);

    opacity: 0;

    transition: .4s;

}

/* Shine Effect */

.service-card::after {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .7),
            transparent);

    transition: .8s;

}

.service-card:hover::after {

    left: 140%;

}

.service-card:hover {

    transform: translateY(-10px);

    border-color: #2563eb;

    box-shadow: 0 22px 50px rgba(37, 99, 235, .18);

}

.service-card:hover::before {

    opacity: 1;

}

/*==================================
Icon
==================================*/

.service-card-icon {

    width: 72px;

    height: 72px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 32px;

    box-shadow: 0 12px 25px rgba(0, 0, 0, .12);

    transition: all .6s ease;

}

.service-card:hover .service-card-icon {

    transform: rotate(360deg) scale(1.1);

}

/*==================================
Title
==================================*/

.service-card-title {

    font-size: 22px;

    color: #111827;

    transition: .3s;

}

.service-card:hover .service-card-title {

    color: #2563eb;

}

/*==================================
Description
==================================*/

.service-card-desc {

    font-size: 15px;

    line-height: 1.8;

    color: #6b7280;

}

/*==================================
Button
==================================*/

.btn-link-arrow {

    border: none;

    background: none;

    color: #2563eb;

    font-weight: 700;

    padding: 0;

    display: inline-flex;

    align-items: center;

    transition: .3s;

}

.btn-link-arrow i {

    transition: .35s;

}

.btn-link-arrow:hover {

    color: #1d4ed8;

}

.btn-link-arrow:hover i {

    transform: translateX(8px);

}

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

@media(max-width:991px) {

    .services-section {

        padding: 80px 0;

    }

}

@media(max-width:768px) {

    .service-grid {

        grid-template-columns: 1fr;

    }

    .service-card {

        padding: 26px;

    }

    .service-card-title {

        font-size: 20px;

    }

}

.why-card {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: flex-start;
    gap: 22px;

    padding: 30px;

    height: 100%;

    background: rgba(255, 255, 255, .78);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .4);

    border-radius: 24px;

    transition: .45s cubic-bezier(.23, 1, .32, 1);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, .08);

    isolation: isolate;
}

.why-card::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 1.5px;

    border-radius: 24px;

    background: linear-gradient(135deg,
            #2563eb,
            #06b6d4,
            #8b5cf6,
            #2563eb);

    background-size: 300% 300%;

    animation: borderMove 6s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    z-index: -1;

}

.why-card::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .15);

    top: -80px;
    right: -80px;

    filter: blur(60px);

    opacity: 0;

    transition: .5s;

}

.why-card:hover::after {

    opacity: 1;

}

.why-card:hover {

    transform:
        translateY(-14px) rotateX(3deg) rotateY(-3deg);

    box-shadow:

        0 25px 60px rgba(37, 99, 235, .18),

        0 12px 25px rgba(0, 0, 0, .08);

}

.why-card-icon {

    width: 72px;
    height: 72px;

    min-width: 72px;

    border-radius: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 34px;

    transition: .6s;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .5),
        0 10px 25px rgba(0, 0, 0, .08);

}

.why-card:hover .why-card-icon {

    transform:
        rotate(360deg) scale(1.15);

    box-shadow:
        0 18px 35px rgba(37, 99, 235, .28);

}

.why-card h6 {

    font-size: 20px;

    font-weight: 800;

    color: #111827;

    transition: .35s;

}

.why-card:hover h6 {

    color: #2563eb;

}

.why-card-desc {

    color: #6b7280;

    font-size: 15px;

    line-height: 1.8;

}

@keyframes borderMove {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

.why-section {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(circle at top left, #dbeafe 0%, transparent 35%),

        radial-gradient(circle at bottom right, #cffafe 0%, transparent 35%),

        linear-gradient(#ffffff, #f8fbff);

}

/*====================================
PROCESS SECTION
====================================*/

.process-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background: linear-gradient(180deg, #ffffff, #f8fbff, #ffffff);
}

.process-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: #3b82f61c;
    border-radius: 50%;
    filter: blur(120px);
    top: -120px;
    left: -120px;
}

.process-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: #14b8a61c;
    border-radius: 50%;
    filter: blur(120px);
    right: -120px;
    bottom: -120px;
}

/*==========================
Timeline
==========================*/

.process-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.process-track::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 48px;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #06b6d4, #14b8a6);
    z-index: 0;
    opacity: .15;
}

/*==========================
Card
==========================*/

.process-step {
    position: relative;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 24px;
    padding: 40px 28px;
    text-align: center;
    overflow: hidden;
    transition: .45s;
    z-index: 2;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
}

.process-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--step-color, #2563eb), transparent);
    opacity: 0;
    transition: .45s;
    z-index: -1;
}

.process-step:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(37, 99, 235, .15);
    border-color: rgba(37, 99, 235, .15);
}

.process-step:hover::before {
    opacity: .05;
}

/*==========================
Circle
==========================*/

.process-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    color: #fff;
    position: relative;
    transition: .8s;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
}

.process-circle::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed rgba(37, 99, 235, .25);
    transition: .8s;
}

.process-step:hover .process-circle {
    transform: rotate(360deg) scale(1.08);
}

.process-step:hover .process-circle::after {
    transform: rotate(-360deg);
}

/*==========================
Step Badge
==========================*/

.process-label {
    display: inline-block;
    margin: 22px 0 15px;
    padding: 8px 18px;
    border-radius: 50px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/*==========================
Title
==========================*/

.process-step h6 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
}

/*==========================
Description
==========================*/

.process-desc {
    color: #64748b;
    line-height: 1.7;
    font-size: 15px;
}

/*==========================
Hover Text
==========================*/

.process-step:hover h6 {
    color: #2563eb;
}

.process-step:hover .process-desc {
    color: #475569;
}

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

@media(max-width:991px) {

    .process-track {

        grid-template-columns: repeat(2, 1fr);

    }

    .process-track::before {

        display: none;

    }

}

@media(max-width:767px) {

    .process-section {

        padding: 80px 0;

    }

    .process-track {

        grid-template-columns: 1fr;

        gap: 22px;

    }

    .process-step {

        padding: 35px 24px;

    }

    .process-circle {

        width: 76px;
        height: 76px;
        font-size: 32px;

    }

}



/*=========================================
PREMIUM STATS SECTION
=========================================*/

.stats-bar {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background:
        radial-gradient(circle at top left, #dbeafe 0%, transparent 35%),
        radial-gradient(circle at bottom right, #ccfbf1 0%, transparent 35%),
        #f8fafc;
}

.stats-bar::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: #3b82f61c;
    border-radius: 50%;
    filter: blur(120px);
    top: -120px;
    left: -120px;
}

.stats-bar::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: #14b8a61a;
    border-radius: 50%;
    filter: blur(120px);
    bottom: -100px;
    right: -100px;
}

/*=========================================
STAT CARD
=========================================*/



.stats-bar .col-md-3 {

    transition: .45s ease;

}

.stats-bar .col-md-3>div {

    position: relative;

    background: rgba(255, 255, 255, .92);

    backdrop-filter: blur(15px);

    border: 1px solid rgba(0, 0, 0, .06);

    border-radius: 22px;

    padding: 28px;

    display: flex;

    align-items: center;

    gap: 20px;

    overflow: hidden;

    transition: .45s;

    box-shadow: 0 15px 40px rgba(15, 23, 42, .06);

}

.stats-bar .col-md-3>div::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, #2563eb, transparent);

    opacity: 0;

    transition: .45s;

}

.stats-bar .col-md-3>div:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(37, 99, 235, .15);

}

.stats-bar .col-md-3>div:hover::before {

    opacity: .05;

}

/*=========================================
ICON
=========================================*/

.stat-icon {

    width: 72px;

    height: 72px;

    min-width: 72px;

    border-radius: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    background: #fff;

    box-shadow: 0 12px 25px rgba(0, 0, 0, .08);

    transition: .7s;

}

.stats-bar .col-md-3:hover .stat-icon {

    transform: rotate(360deg) scale(1.08);

}

/*=========================================
NUMBER
=========================================*/

.stat-value {

    font-size: 36px;

    font-weight: 800;

    line-height: 1;

    color: #0f172a;

    margin-bottom: 8px !important;

}

/*=========================================
LABEL
=========================================*/

.stat-label {

    font-size: 15px;

    color: #64748b;

    font-weight: 500;

}

/*=========================================
HOVER TEXT
=========================================*/

.stats-bar .col-md-3:hover .stat-value {

    color: #2563eb;

}

.stats-bar .col-md-3:hover .stat-label {

    color: #334155;

}

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

@media(max-width:991px) {

    .stats-bar {

        padding: 70px 0;

    }

    .stats-bar .col-md-3>div {

        padding: 24px;

    }

    .stat-icon {

        width: 64px;

        height: 64px;

        font-size: 30px;

    }

    .stat-value {

        font-size: 30px;

    }

}

@media(max-width:767px) {

    .stats-bar .col-md-3 {

        margin-bottom: 18px;

    }

    .stats-bar .col-md-3>div {

        justify-content: flex-start;

    }

}

/*==================================================
TECH SECTION
==================================================*/

.tech-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background: linear-gradient(180deg, #f8fbff, #ffffff, #f5f9ff);
}

.tech-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: #2563eb18;
    border-radius: 50%;
    filter: blur(120px);
    top: -120px;
    left: -120px;
}

.tech-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: #14b8a618;
    border-radius: 50%;
    filter: blur(120px);
    bottom: -120px;
    right: -120px;
}

/*==================================
TECH CARD
==================================*/

.tech-card {

    position: relative;

    background: rgba(255, 255, 255, .95);

    backdrop-filter: blur(15px);

    border: 1px solid rgba(0, 0, 0, .06);

    border-radius: 24px;

    padding: 35px 28px;

    text-align: center;

    overflow: hidden;

    transition: .45s;

    box-shadow: 0 12px 35px rgba(15, 23, 42, .06);

}

.tech-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, #2563eb, transparent);

    opacity: 0;

    transition: .45s;

}

.tech-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 30px 60px rgba(37, 99, 235, .15);

}

.tech-card:hover::before {

    opacity: .05;

}

/*==================================
ICON
==================================*/

.tech-icon {

    width: 85px;

    height: 85px;

    border-radius: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto;

    color: #fff;

    font-size: 40px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .18);

    transition: all .8s ease;

}

.tech-card:hover .tech-icon {

    transform: rotate(360deg) scale(1.08);

}

/*==================================
TITLE
==================================*/

.tech-card h5 {

    font-size: 22px;

    color: #0f172a;

    transition: .3s;

}

.tech-card:hover h5 {

    color: #2563eb;

}

/*==================================
PROGRESS
==================================*/

.progress {

    height: 10px;

    border-radius: 30px;

    background: #e2e8f0;

    overflow: hidden;

}

.progress-bar {

    border-radius: 30px;

    animation: progressLoad 2s ease;

}

@keyframes progressLoad {

    from {

        width: 0;

    }

}

/*==================================
PERCENTAGE
==================================*/

.tech-card small {

    display: block;

    margin-top: 12px;

    font-size: 15px;

    font-weight: 700 !important;

    color: #64748b !important;

}

/*==================================
BADGE
==================================*/

.tech-section .badge {

    font-size: 14px;

    letter-spacing: 1px;

    padding: 12px 24px !important;

    border-radius: 50px;

    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;

    box-shadow: 0 10px 25px rgba(37, 99, 235, .25);

}

/*==================================
HEADING
==================================*/

.tech-section h2 {

    font-size: 42px;

    font-weight: 800;

    color: #0f172a;

}

.tech-section p {

    color: #64748b;

    font-size: 17px;

}

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

@media(max-width:991px) {

    .tech-section {

        padding: 80px 0;

    }

    .tech-card {

        padding: 30px 20px;

    }

}

@media(max-width:767px) {

    .tech-section h2 {

        font-size: 32px;

    }

    .tech-icon {

        width: 72px;

        height: 72px;

        font-size: 34px;

    }

}

.tech-card:hover small {
    color: #2563eb !important;
}


.tech-card {

    animation: floatCard 5s ease-in-out infinite;

}

.tech-card:hover .tech-icon {
    box-shadow: 0 20px 45px rgba(37, 99, 235, .35);
}

@keyframes floatCard {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-6px);

    }

}

.tech-card:hover {

    animation: none;

    transform: translateY(-12px);

}

/*==================================================
TECH INFO BOX
==================================================*/

.tech-info-box {
    position: relative;
    overflow: hidden;
    padding: 60px;
    border-radius: 30px;

    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .35);

    box-shadow:
        0 25px 60px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255, 255, 255, .5);

    transition: .45s ease;
}

.tech-info-box:hover {

    transform: translateY(-8px);

    box-shadow:
        0 35px 70px rgba(37, 99, 235, .12),
        inset 0 1px 0 rgba(255, 255, 255, .6);

}

/* Background Glow */

.tech-info-box::before {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    background: #2563eb20;

    border-radius: 50%;

    filter: blur(110px);

    top: -140px;

    left: -120px;

}

.tech-info-box::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    background: #14b8a620;

    border-radius: 50%;

    filter: blur(100px);

    bottom: -120px;

    right: -100px;

}

/*==================================================
LEFT CONTENT
==================================================*/

.small-title {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.tech-info-box h3 {

    font-size: 38px;

    font-weight: 800;

    color: #0f172a;

    line-height: 1.3;

}

.tech-info-box p {

    font-size: 16px;

    color: #64748b !important;

    line-height: 1.9;

}

/*==================================================
FEATURE LIST
==================================================*/

.feature-line {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 18px;

    background: rgba(255, 255, 255, .75);

    border: 1px solid rgba(0, 0, 0, .05);

    border-radius: 14px;

    font-weight: 600;

    color: #334155;

    transition: .35s;

}

.feature-line i {

    font-size: 22px;

    color: #22c55e !important;

}

.feature-line:hover {

    transform: translateX(8px);

    border-color: #2563eb30;

    box-shadow: 0 10px 25px rgba(37, 99, 235, .08);

}

/*==================================================
RIGHT HIGHLIGHT
==================================================*/

.tech-highlight {

    background: linear-gradient(135deg, #2563eb, #06b6d4);

    border-radius: 24px;

    padding: 35px 25px;

    color: #fff;

    text-align: center;

    box-shadow: 0 25px 50px rgba(37, 99, 235, .25);

    position: relative;

    overflow: hidden;

}

.tech-highlight::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    background: rgba(255, 255, 255, .12);

    border-radius: 50%;

    top: -120px;

    right: -80px;

}

.highlight-item {

    padding: 22px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .18);

}

.highlight-item:last-child {

    border-bottom: none;

}

.highlight-item h2 {

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 6px;

    color: #fff;

}

.highlight-item span {

    font-size: 15px;

    opacity: .9;

}

/* Hover Animation */

.tech-highlight:hover {

    transform: scale(1.03);

    transition: .4s;

}

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

@media(max-width:991px) {

    .tech-info-box {

        padding: 40px 30px;

    }

    .tech-highlight {

        margin-top: 35px;

    }

    .tech-info-box h3 {

        font-size: 30px;

    }

}

@media(max-width:576px) {

    .tech-info-box {

        padding: 30px 22px;

        border-radius: 22px;

    }

    .tech-info-box h3 {

        font-size: 26px;

    }

    .feature-line {

        font-size: 14px;

        padding: 12px 15px;

    }

    .highlight-item h2 {

        font-size: 34px;

    }

}

.tech-info-box h3 span {
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-line:hover i {
    transform: scale(1.2) rotate(15deg);
    transition: .3s;
}

.tech-info-box:hover {
    border-color: rgba(37, 99, 235, .25);
}



.glass-contact {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(circle at 0% 0%, rgba(136, 214, 255, .95) 0%, transparent 38%),
        radial-gradient(circle at 100% 0%, rgba(209, 168, 255, .90) 0%, transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(116, 255, 212, .85) 0%, transparent 38%),
        linear-gradient(135deg, #eef5ff 0%, #f6f9ff 45%, #ffffff 100%);
}

.glass-contact::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -180px;
    top: 120px;
    border-radius: 50%;
    background: #7dd9ff;
    filter: blur(130px);
    opacity: .45;
    animation: blob1 8s ease-in-out infinite;
    z-index: 0;
}

.glass-contact::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -180px;
    top: 40px;
    border-radius: 50%;
    background: #c8a2ff;
    filter: blur(130px);
    opacity: .45;
    animation: blob2 8s ease-in-out infinite;
    z-index: 0;
}

.glass-contact .bottom-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    left: 18%;
    bottom: -240px;
    border-radius: 50%;
    background: #7affda;
    filter: blur(150px);
    opacity: .40;
    animation: blob3 9s ease-in-out infinite;
    z-index: 0;
}

@keyframes blob1 {

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

    50% {
        transform: translateY(-35px);
    }
}

@keyframes blob2 {

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

    50% {
        transform: translateY(35px);
    }
}

@keyframes blob3 {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(40px);
    }
}

/* ============ GLASS CARD ============ */

.glass-contact-card {
    position: relative;
    z-index: 1;
}

.contact-card {
    background: rgba(255, 255, 255, .35);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, .10),
        inset 0 1px rgba(255, 255, 255, .85),
        inset 0 -1px rgba(255, 255, 255, .12);
    border-radius: 35px;
    overflow: hidden;
}

/* ============ LEFT SIDE (info panel) ============ */

.glass-left .contact-item h6 {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 12px;

}

/* Premium Icon */

.glass-left .contact-item h6 i {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 18px;

    color: #ffffff;

    background: rgba(255, 255, 255, .18);

    border: 1px solid rgba(255, 255, 255, .35);

    backdrop-filter: blur(10px);

    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, .45),
        0 8px 18px rgba(0, 0, 0, .18);

    transition: all .35s ease;

}


/* Hover */

.contact-item:hover h6 i {

    background: #ffffff;

    color: #ff0000;

    transform: translateY(-4px) rotate(8deg) scale(1.08);

    box-shadow:
        0 12px 28px rgba(79, 70, 229, .35),
        0 0 18px rgba(255, 255, 255, .55);

}

/* ============ RIGHT SIDE (form) ============ */

.glass-right {
    background: rgba(255, 255, 255, .55);
    position: relative;
}

.glass-right h2 {
    color: #1a1a2e;
    font-weight: 700;
}

.glass-right p.text-muted {
    color: #4a4a5a !important;
}

.glass-right .form-label {
    color: #1a1a2e;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 6px;
}

/* ============ FORM FIELDS - readable text ============ */

.form-control,
.form-select {
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .8);
    backdrop-filter: blur(18px);
    box-shadow:
        inset 0 2px rgba(255, 255, 255, .9),
        0 6px 15px rgba(0, 0, 0, .05);
    color: #1a1a2e !important;
    font-weight: 500;
    border-radius: 12px;
    padding: 10px 14px;
}

.form-control::placeholder {
    color: #7a7a8a;
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background: rgba(255, 255, 255, .95);
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, .15);
    color: #1a1a2e;
}

.form-select {
    color: #1a1a2e !important;
}

.form-select:hover {
    transform: translateY(-3px);

    box-shadow:

        0 15px 30px rgba(0, 0, 0, .32),

        inset 0 2px rgba(255, 255, 255, .90);
}

textarea.form-control {
    resize: vertical;
}

textarea:hover {
    transform: translateY(-3px);

    box-shadow:

        0 15px 30px rgba(0, 0, 0, .32),

        inset 0 2px rgba(255, 255, 255, .90);
}

/* Checkbox label */
.form-check-label {
    color: #2a3a2e;
    font-size: 0.9rem;
}

.form-check-input:checked {
    background-color: #5ce77f;
    border-color: #5ce75c;
}

.form-control:hover {
    transform: translateY(-3px);

    box-shadow:

        0 15px 30px rgba(0, 0, 0, .32),

        inset 0 2px rgba(255, 255, 255, .90);
}


/* ============ SUBMIT BUTTON ============ */

.submit-btn {

    margin-left: 130px;

    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, #ff4343, #ffc73a);

    border: none;

    color: #fff;

    padding: 14px 34px;

    border-radius: 16px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    transition: all .4s ease;

    box-shadow:
        0 10px 25px rgba(255, 115, 0, .35),
        inset 0 2px 2px rgba(255, 255, 255, .35);

}

/* White Shine */

.submit-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -130%;

    width: 45%;

    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .85),
            transparent);

    transform: skewX(-25deg);

}

/* Hover */

.submit-btn:hover {

    background: linear-gradient(135deg, #5b6dff, #2ea8ff);

    transform: translateY(-3px);

    box-shadow:
        0 16px 35px rgba(69, 120, 255, .45),
        inset 0 2px 2px rgba(255, 255, 255, .4);

}

/* Shine Animation */

.submit-btn:hover::before {

    left: 160%;

    transition: .9s ease;

}

/* Arrow */

.submit-btn .arrow-icon {

    transition: .3s;

}

.submit-btn:hover .arrow-icon {

    transform: translateX(6px);

}

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

@media (max-width: 991px) {
    .glass-left {
        border-radius: 35px 35px 0 0;
    }

    .glass-right {
        border-radius: 0 0 35px 35px;
    }
}

@media (max-width: 480px) {

    .glass-left,
    .glass-right {
        padding: 2rem 1.5rem;
    }
}

.contact-title {

    display: inline-flex;

    align-items: center;

    padding: 14px 26px;

    border-radius: 18px;

    color: #ffffff;

    font-size: 2rem;

    font-weight: 700;

    letter-spacing: .3px;

    background: rgba(255, 255, 255, .12);

    border: 1px solid rgba(255, 255, 255, .28);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .45),
        0 10px 30px rgba(0, 0, 0, .15);

    position: relative;

    overflow: hidden;
}

/* Glass Shine */

.contact-title::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 45%;

    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .8),
            transparent);

    transform: skewX(-25deg);

    transition: .8s ease;

}

/* Hover Shine */

.contact-title:hover::before {

    left: 160%;

}

/* Hover */

.contact-title:hover {

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .5),
        0 16px 35px rgba(0, 0, 0, .2);

    transition: .35s;
}

.contact-heading {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 10px 18px;

    border-radius: 16px;

    background: rgba(255, 255, 255, .12);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .25);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .35),
        0 8px 20px rgba(0, 0, 0, .15);

    color: #fff;

    font-size: 16px;

    font-weight: 700;

    position: relative;

    overflow: hidden;

    transition: .35s ease;

}

/* Glass Shine */

.contact-heading::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 45%;

    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .75),
            transparent);

    transform: skewX(-25deg);

    transition: .8s ease;

}

/* Hover */

.contact-heading:hover {

    transform: translateY(-3px);

    background: rgba(255, 255, 255, .18);

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .45),
        0 12px 28px rgba(0, 0, 0, .22);

}

.contact-heading:hover::before {

    left: 160%;

}

/* Icon */

.contact-heading i {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

    color: #ffd54a;

    font-size: 18px;

    box-shadow:
        inset 0 2px rgba(255, 255, 255, .35);

}

/*==============================
Demo Header Glass
==============================*/

.demo-header {

    display: inline-block;

    padding: 18px 24px;

    border-radius: 22px;

    background: rgba(255, 255, 255, .22);

    backdrop-filter: blur(22px);

    -webkit-backdrop-filter: blur(22px);

    border: 1px solid rgba(255, 255, 255, .45);

    box-shadow:
        inset 0 2px rgba(255, 255, 255, .8),
        0 12px 28px rgba(0, 0, 0, .08);

    position: relative;

    overflow: hidden;

    margin-bottom: 25px;

}

/* Glass Shine */

.demo-header::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 45%;

    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .85),
            transparent);

    transform: skewX(-25deg);

    transition: .8s;

}

.demo-header:hover::before {

    left: 160%;

}

/* Title */

.demo-title {

    margin: 0;

    color: #1e293b;

    font-size: 32px;

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 10px;

}

/* Icon */

.demo-title i {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg, #ff9f43, #ff6b35);

    color: #fff;

    font-size: 20px;

    box-shadow: 0 10px 25px rgba(255, 120, 0, .35);

}

/* Subtitle */

.demo-subtitle {

    margin-top: 10px;

    color: #64748b;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.7;

}

/* Hover */

.demo-header:hover {

    transform: translateY(-3px);

    transition: .35s;

    box-shadow:
        inset 0 2px rgba(255, 255, 255, .9),
        0 18px 35px rgba(0, 0, 0, .12);

}

/* ---------------------------------------------- */


.about-section {

    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(circle at top left, #8fd7ff 0%, transparent 30%),
        radial-gradient(circle at top right, #d6b5ff 0%, transparent 35%),
        radial-gradient(circle at bottom left, #87ffd8 0%, transparent 30%),
        linear-gradient(135deg, #edf5ff, #f7fbff, #ffffff);

}

.about-section::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .35);

    filter: blur(90px);

    top: -180px;
    right: -120px;

}

.about-section::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: #74c8ff;

    opacity: .18;

    filter: blur(100px);

    bottom: -120px;
    left: -120px;

}

.about-section .col-lg-6:first-child {

    position: relative;

    z-index: 2;

    padding: 55px;

    border-radius: 35px;

    background: rgba(255, 255, 255, .18);

    backdrop-filter: blur(30px);

    -webkit-backdrop-filter: blur(30px);

    border: 1px solid rgba(255, 255, 255, .45);

    box-shadow:

        0 20px 45px rgba(0, 0, 0, .08),

        inset 0 2px rgba(255, 255, 255, .85);

}



.about-tag {

    display: inline-flex;

    align-items: center;

    padding: 10px 22px;

    border-radius: 40px;

    background: rgba(255, 255, 255, .30);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .55);

    color: #2563eb;

    font-weight: 700;

    letter-spacing: 2px;

    box-shadow:

        inset 0 2px rgba(255, 255, 255, .9),

        0 10px 25px rgba(0, 0, 0, .06);

}

.about-title {

    display: inline-block;

    padding: 14px 22px;

    border-radius: 22px;

    background: rgba(255, 255, 255, .18);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .40);

    box-shadow:

        inset 0 2px rgba(255, 255, 255, .8),

        0 8px 20px rgba(0, 0, 0, .05);

    color: #1f2937;

}

.about-desc {

    padding: 18px 22px;

    border-radius: 20px;

    background: rgba(255, 255, 255, .16);

    backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, .35);

    color: #4b5563;

    line-height: 1.8;

    margin-bottom: 18px;

}


.about-feature {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 18px;

    border-radius: 18px;

    background: rgba(255, 255, 255, .22);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .45);

    transition: .35s;

    box-shadow:

        inset 0 2px rgba(255, 255, 255, .8),

        0 8px 20px rgba(0, 0, 0, .05);

}

.about-feature:hover {

    transform: translateY(-6px);

    background: rgba(255, 255, 255, .35);

}

.about-feature i {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 22px;

    color: #fff;

    background: linear-gradient(135deg, #4f46e5, #06b6d4);

    box-shadow: 0 8px 18px rgba(79, 70, 229, .35);

}

.about-section .btn-primary {

    border: none;

    border-radius: 40px;

    padding: 14px 35px;

    background: linear-gradient(135deg, #ff8a00, #ff512f);

    box-shadow:

        0 15px 30px rgba(255, 120, 0, .35),

        inset 0 2px rgba(255, 255, 255, .7);

    transition: .35s;

}

.about-section .btn-primary:hover {

    background: linear-gradient(135deg, #4f46e5, #2196f3);

    transform: translateY(-4px);

}


.brochure-btn{

    border: none;
    border-radius: 50px;
    padding: 25px 35px;

    background: linear-gradient(
        135deg,
        #7c5cff,
        #4f8cff
    );

    color: #fff;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,.35);

    box-shadow:
        inset 0 2px rgba(255,255,255,.45),
        0 15px 35px rgba(108,92,231,.35);

    font-weight: 600;
    transition: all .35s ease;

    position: relative;
    overflow: hidden;
}

/* White Shine Effect */

.brochure-btn::before{

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 55%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.85),
        transparent
    );

    transform: skewX(-25deg);

    transition: .8s;
}

.brochure-btn:hover::before{

    left: 170%;

}

/* Hover */

.brochure-btn:hover{

    background: linear-gradient(
        135deg,
        #ffb300,
        #ff7a18
    );

    color: #fff;

    border: 1px solid rgba(255,215,0,.65);

    transform: translateY(-5px);

    box-shadow:
        inset 0 2px rgba(255,255,255,.45),
        0 15px 35px rgba(255,140,0,.45),
        0 0 18px rgba(255,170,0,.55),
        0 0 40px rgba(255,195,0,.35);

}

/* Icon */

.brochure-btn i{

    transition: .35s;

}

.brochure-btn:hover i{

    transform: translateY(2px);

}
.about-img {

    width: 90%;

    border-radius: 35px;

    padding: 18px;

    background: rgba(255, 255, 255, .22);

    backdrop-filter: blur(25px);

    border: 1px solid rgba(255, 255, 255, .45);

    box-shadow:

        0 25px 55px rgba(0, 0, 0, .12),

        inset 0 2px rgba(255, 255, 255, .9);

    transition: .4s;

}

.about-img:hover {

    transform: scale(1.03) rotate(-2deg);

}


.about-img {

    animation: floatImage 5s ease-in-out infinite;

}

@keyframes floatImage {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-15px);

    }

}

/* ----------------------------------------------------------------- */


.trusted-strip{

    position: relative;
    overflow: hidden;
    padding: 100px 0;

    background:
        radial-gradient(circle at top left,#8fd7ff 0%,transparent 28%),
        radial-gradient(circle at top right,#d6b4ff 0%,transparent 30%),
        radial-gradient(circle at bottom left,#8fffd8 0%,transparent 28%),
        linear-gradient(135deg,#eef5ff,#f8fbff,#ffffff);

}

.trusted-strip::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-180px;
    right:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    filter:blur(80px);

}

.trusted-strip::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    bottom:-120px;
    left:-100px;

    border-radius:50%;

    background:#79d8ff;

    opacity:.18;

    filter:blur(100px);

}

.eyebrow{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.35);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.55);

    color:#5b5bff;

    font-weight:700;

    letter-spacing:1px;

    box-shadow:
        inset 0 2px rgba(255,255,255,.9),
        0 10px 20px rgba(0,0,0,.08);

}

.section-title{

    font-size:42px;

    font-weight:700;

    color:#222;

}

.section-sub{

    max-width:650px;

    color:#666;

    font-size:17px;

}


.industry-chip{

    position:relative;

    height:170px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:16px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.45),
            rgba(255,255,255,.18)
        );

    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.60);

    box-shadow:
        inset 0 2px rgba(255,255,255,.95),
        inset 0 -2px rgba(255,255,255,.10),
        0 18px 40px rgba(0,0,0,.08);

    transition:.4s;

    overflow:hidden;

}



.industry-chip::before{

    content:"";

    position:absolute;

    top:8px;
    left:10px;
    right:10px;

    height:45%;

    border-radius:22px;

    background:linear-gradient(
        rgba(255,255,255,.75),
        transparent
    );

}



.industry-chip:hover{

    transform:
        translateY(-10px)
        scale(1.04);

    border-color:#6aa8ff;

    box-shadow:
        0 25px 45px rgba(83,130,255,.25),
        0 0 35px rgba(96,165,250,.20);

}





.industry-icon{

    width:32px;
    height:32px;

    stroke-width:2.3;

}


.ic{

    width:74px;
    height:74px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(240,245,255,.88)
        );

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.95);

    position:relative;
    overflow:hidden;

    transition:.45s ease;
}

/* Glass Shine */
.ic::before{

    content:"";

    position:absolute;

    top:0;
    left:-130%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );

    transform:skewX(-25deg);

    transition:.8s;
}

/* Icon */
.ic i{

    font-size:32px;

    background:linear-gradient(
        135deg,
        #5b4dff,
        #3b82f6
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    transition:.4s ease;

}

/* Hover */
.industry-chip:hover .ic{

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6,
        #60a5fa
    );

    border-color:rgba(96,165,250,.55);

    transform:
        translateY(-8px)
        rotate(8deg)
        scale(1.08);

    box-shadow:
        0 15px 35px rgba(37,99,235,.35),
        0 0 20px rgba(59,130,246,.25);

}

.industry-chip:hover .ic::before{

    left:170%;

}

.industry-chip:hover .ic i{

    color:#fff;
    -webkit-text-fill-color:#fff;
    background:none;

    transform:scale(1.15);

}

/* ------------------------------------------------------------------------------------ */

.feature-card{

    position:relative;

    overflow:hidden;

    height:100%;

    padding:35px 28px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(225,235,255,.9);

    transition:.45s ease;

    box-shadow:
        0 10px 30px rgba(30,41,59,.06),
        0 1px 3px rgba(30,41,59,.08);

}

.feature-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #4f46e5,
        #3b82f6,
        #38bdf8
    );

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#60a5fa;

    box-shadow:
        0 25px 60px rgba(37,99,235,.18);

}

.fc-icon{

    width:74px;
    height:74px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #6366f1,
        #2563eb
    );

    color:#fff;

    transition:.4s;

}

.fc-icon svg,
.fc-icon i{

    width:32px !important;
    height:32px !important;

    stroke-width:2.5;

}

.feature-card:hover .fc-icon{

    background:linear-gradient(
        135deg,
        #2563eb,
        #0ea5e9
    );

    transform:rotate(8deg) scale(1.12);

}


.check{

    position:absolute;

    top:18px;
    right:18px;

    width:34px !important;
    height:34px !important;

    padding:7px;

    border-radius:50%;

    background:#ecfdf5;

    color:#22c55e;

    border:1px solid #bbf7d0;

}




.feature-card h4{

    margin-top:24px;

    font-size:21px;

    font-weight:700;

    color:#111827;

}

.feature-card p{

    margin-top:12px;

    color:#6b7280;

    line-height:1.7;

    font-size:15px;

}


#why{

    background:
        radial-gradient(circle at top left,#dbeafe 0%,transparent 30%),
        radial-gradient(circle at bottom right,#ede9fe 0%,transparent 35%),
        #f8fbff;

}


/* -------------------------------------------------------------------------------- */


/*=========================================
MODULE SECTION
=========================================*/

#features{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top left,#dbeafe 0%,transparent 35%),
        radial-gradient(circle at bottom right,#ede9fe 0%,transparent 35%),
        linear-gradient(180deg,#f8fbff,#eef5ff,#ffffff);
}

/* Floating Blur Background */

#features::before,
#features::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    filter:blur(100px);
    opacity:.45;
    z-index:0;
}

#features::before{
    top:-140px;
    left:-120px;
    background:#6d5dfc;
}

#features::after{
    bottom:-140px;
    right:-120px;
    background:#3b82f6;
}

#features .container{
    position:relative;
    z-index:2;
}

/*=========================================
MODULE TAG
=========================================*/

.module-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:linear-gradient(135deg,#6d5dfc,#3b82f6);

    color:#fff;

    font-weight:700;

    letter-spacing:.6px;

    margin-bottom:28px;

    box-shadow:
    0 10px 25px rgba(59,130,246,.25);

}

/*=========================================
MODULE CARD
=========================================*/

.module-block{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    height:100%;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(245,249,255,.88)
        );

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.75);

    transition:.4s;

    position:relative;

    overflow:hidden;

}

/* Top Shine */

.module-block::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:45%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );

    transform:skewX(-25deg);

    transition:.8s;

}

.module-block:hover::before{

    left:170%;

}

/* Hover */

.module-block:hover{

    transform:translateY(-10px);

    border-color:rgba(59,130,246,.35);

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #f3f8ff
    );

    box-shadow:
    0 18px 45px rgba(59,130,246,.18),
    0 6px 20px rgba(0,0,0,.08);

}

/*=========================================
ICON
=========================================*/

.module-icon{

    width:72px;
    height:72px;

    min-width:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #3b82f6
        );

    color:#fff;

    box-shadow:
    inset 0 2px rgba(255,255,255,.45),
    0 15px 28px rgba(59,130,246,.30);

    transition:.4s;

}

.module-icon svg{

    width:30px !important;
    height:30px !important;

    stroke-width:2.3;

}

/* Icon Hover */

.module-block:hover .module-icon{

    transform:
    rotate(-8deg)
    scale(1.12);

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #60a5fa
    );

    box-shadow:
    0 0 20px rgba(37,99,235,.45),
    0 12px 28px rgba(59,130,246,.40);

}

/*=========================================
TEXT
=========================================*/

.module-block h4{

    color:#0f172a;

    font-size:1.08rem !important;

    font-weight:700;

    margin-bottom:6px;

}

.module-block p{

    color:#64748b !important;

    font-size:.93rem !important;

    line-height:1.7;

    margin:0;

}

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

@media(max-width:768px){

.module-block{

padding:18px;

}

.module-icon{

width:60px;
height:60px;
min-width:60px;

}

.module-icon svg{

width:24px !important;
height:24px !important;

}

}


/* ------------------------------------------------------------------------------ */


/*====================================
INDUSTRY CARD
====================================*/

.industry-card{

    position:relative;

    height:100%;

    padding:32px 28px;

    border-radius:26px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(245,249,255,.88)
        );

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.8);

    transition:.4s ease;

}

.industry-card::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.12;

    background:var(--card-theme-color);

}

.industry-card:hover{

    transform:translateY(-10px);

    border-color:var(--card-theme-color);

    box-shadow:
        0 20px 40px color-mix(in srgb, var(--card-theme-color) 28%, transparent);

}

/*====================================
ICON
====================================*/

.card-icon-wrap{

    width:78px;
    height:78px;

    border-radius:22px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:34px;

    color:#fff;

    margin-bottom:22px;

    background:linear-gradient(
        135deg,
        var(--card-theme-color),
        color-mix(in srgb,var(--card-theme-color) 70%, white)
    );

    box-shadow:
        0 12px 28px color-mix(in srgb,var(--card-theme-color) 35%, transparent);

    transition:.4s;

}

.industry-card:hover .card-icon-wrap{

    transform:rotate(-8deg) scale(1.08);

    box-shadow:
        0 18px 35px color-mix(in srgb,var(--card-theme-color) 45%, transparent);

}

/*====================================
TITLE
====================================*/

.card-title{

    color:#0f172a;

    font-size:1.25rem;

    font-weight:700;

}

/*====================================
DESCRIPTION
====================================*/

.card-description{

    color:#64748b;

    line-height:1.8;

}

/*====================================
LINK
====================================*/

.card-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--card-theme-color);

    font-weight:700;

    text-decoration:none;

}

.card-link:hover{

    color:#2563eb;

}

.card-link i{

    transition:.3s;

}

.card-link:hover i{

    transform:translateX(6px);

}

/* --------------------------------------------------------------------------------- */

/*=========================================
CUSTOMERS SECTION
=========================================*/

.customers-section{

    position:relative;

    overflow:hidden;

    padding:100px 0;

    background:
        linear-gradient(
            180deg,
            #f8fbff,
            #eef5ff,
            #ffffff
        );

}


/*=========================================
Glass Review Card
=========================================*/

.review-card{

    position:relative;

    height:100%;

    padding:35px;

    border-radius:28px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(255,255,255,.55)
        );

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.75);

    transition:.45s ease;

}

/* Shine */

.review-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-140%;

    width:45%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.9),
        transparent
    );

    transform:skewX(-25deg);

    transition:.9s;

}

.review-card:hover::before{

    left:180%;

}

.review-card:hover{

    transform:
        translateY(-10px);

    border-color:#6d8cff;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(244,248,255,.82)
        );

}


/*=========================================
Quote Icon
=========================================*/

.quote-icon{

    position:absolute;

    right:22px;

    top:18px;

    width:55px;

    height:55px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#fff;

    background:linear-gradient(
        135deg,
        #7c5cff,
        #4f8cff
    );

}


/*=========================================
Avatar
=========================================*/

.avatar{

    width:75px;

    height:75px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.9);

    transition:.4s;

}

.review-card:hover .avatar{

    transform:scale(1.08);

    border-color:#7c5cff;

}


/*=========================================
Google Logo
=========================================*/

.google-logo{

    width:42px;

    height:42px;

    padding:7px;

    border-radius:14px;

    background:rgba(255,255,255,.7);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.7);

}


/*=========================================
Stars
=========================================*/

.stars{

    margin:18px 0;

    font-size:22px;

    letter-spacing:4px;

    background:linear-gradient(
        90deg,
        #FFD700,
        #FFA500
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/*=========================================
Review Text
=========================================*/

.review-text{

    color:#556278;

    line-height:1.8;

    font-size:.96rem;

}


/*=========================================
Verified Badge
=========================================*/

.verified{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(79,140,255,.12);

    color:#2563eb;

    font-weight:600;

    border:1px solid rgba(79,140,255,.18);

}


/*=========================================
Reviewer Name
=========================================*/

.review-header h5{

    font-weight:700;

    color:#1e293b;

}

.review-header small{

    color:#64748b;

}


/*=========================================
Swiper Buttons
=========================================*/

.swiper-button-next,
.swiper-button-prev{

    width:55px;

    height:55px;

    border-radius:50%;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.8);

    color:#4f8cff;

    transition:.35s;

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:linear-gradient(
        135deg,
        #7c5cff,
        #4f8cff
    );

    color:#fff;

}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:20px;

    font-weight:bold;

}


/*=========================================
Pagination
=========================================*/

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#bfd6ff;

    opacity:1;

}

.swiper-pagination-bullet-active{

    width:32px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #7c5cff,
        #4f8cff
    );

}


/*=========================================
Background Blur
=========================================*/

.bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.45;

}

.bg-circle-1{

    width:280px;

    height:280px;

    background:#7c5cff;

    top:-80px;

    left:-80px;

}

.bg-circle-2{

    width:240px;

    height:240px;

    background:#4f8cff;

    right:-70px;

    bottom:-80px;

}

/* ----------------------------------------------------------------------------- */


/*==================================================
PREMIUM CTA SECTION
==================================================*/

.cta-wrapper{

    position:relative;

    overflow:hidden;

    padding:70px;

    border-radius:35px;

    background:linear-gradient(
        135deg,
        #7c5cff 0%,
        #4f8cff 55%,
        #67d8ff 100%
    );

    box-shadow:
        0 30px 70px rgba(79,140,255,.18);

}

/* Floating Glow */

.cta-wrapper::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    top:-120px;
    left:-100px;

    filter:blur(50px);

}

.cta-wrapper::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    bottom:-90px;
    right:-70px;

    filter:blur(50px);

}


/*==============================
Badge
==============================*/

.cta-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.4);

    color:#fff;

    font-weight:600;

}


/*==============================
Heading
==============================*/

.cta-title{

    font-size:3rem;

    font-weight:800;

    color:#fff;

}

.cta-title span{

    color:#ffd54f;

}

.cta-subtitle{

    color:rgba(255,255,255,.88);

    font-size:1.05rem;

    line-height:1.8;

}


/*==============================
Buttons
==============================*/

.cta-btn{

    border:none;

    border-radius:50px;

    padding:15px 35px;

    font-weight:700;

    transition:.35s;

}

.cta-btn:hover{

    transform:translateY(-5px);

}

.btn-light.cta-btn{

    background:rgba(255,255,255,.92);

    color:#4f46e5;

    box-shadow:
        0 18px 35px rgba(255,255,255,.25);

}

.btn-light.cta-btn:hover{

    background:#fff;

}

.btn-success.cta-btn{

    background:linear-gradient(
        135deg,
        #25D366,
        #16a34a
    );

    color:#fff;

    box-shadow:
        0 18px 35px rgba(34,197,94,.35);

}


/*==============================
Feature Cards
==============================*/

.feature-box{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:14px 18px;

    margin-bottom:18px;

    border-radius:18px;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.35);

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-6px);

    background:rgba(255,255,255,.26);

    border-color:#fff;

}


/*==============================
Dashboard Image
==============================*/

.dashboard-img{

    width:100%;

    border-radius:30px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.35);

    padding:15px;

    transition:.45s;

}

.dashboard-img:hover{

    transform:
        perspective(1200px)
        rotateY(-6deg)
        scale(1.03);

}


/*==============================
Glass Shine
==============================*/

.dashboard-img::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:40%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.9),
        transparent
    );

}


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

@media(max-width:991px){

.cta-wrapper{

padding:40px 25px;

}

.cta-title{

font-size:2.2rem;

}

}

/* ------------------------------------------------------------------------ */


.glass-dropdown{

    min-width:760px;
    padding:30px;

    border-radius:28px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.8);

    box-shadow:
        0 25px 60px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.9);

    overflow:hidden;
}



.glass-card{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    border:1px solid rgba(226,232,240,.8);

    border-radius:18px;

    transition:.35s;

    text-decoration:none;

    box-shadow:0 8px 20px rgba(15,23,42,.05);

}

.glass-card:hover{

    transform:translateY(-8px);

    background:#ffffff;

    box-shadow:
        0 18px 40px rgba(37,99,235,.18);

    border-color:#2563eb22;
}

.product-info-text h6{

    color:#111827;

    font-size:18px;

    font-weight:700;

    margin-bottom:6px;

}

.product-info-text p{

    color:#6b7280;

    font-size:14px;

    line-height:1.6;

}

.product-dropdown-icon-wrap{

    width:60px;

    height:60px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    background:linear-gradient(135deg,#4f46e5,#2563eb);

    color:#fff;

    box-shadow:
        0 10px 25px rgba(79,70,229,.35);

}

.glass-card:hover .product-dropdown-icon-wrap{

    transform:scale(1.08) rotate(-8deg);

    transition:.35s;

}

.glass-card{

    position:relative;

    overflow:hidden;

}

.glass-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transition:.8s;

}

.glass-card:hover::before{

    left:130%;

}

/* --------------------------------------------------------- */


.product-card-title{

    color:#111827 !important;

    font-size:17px;

    font-weight:700;

}


.product-card-desc{

    color:#6b7280 !important;

    font-size:14px;

    line-height:1.6;

}

.dropdown-services-container .glass-dropdown{

    width:900px;

    max-width:95vw;

    padding:30px;

}

.dropdown-services-container .glass-card{

    height:100%;

    min-height:110px;

    display:flex;

    align-items:center;

}

.dropdown-services-container .glass-card:hover{

    transform:translateY(-8px);

    background:#fff;

    border-color:#2563eb22;

    box-shadow:
        0 18px 40px rgba(37,99,235,.15);

}
.dropdown-services-container .product-dropdown-icon-wrap{

    width:58px;

    height:58px;

    border-radius:16px;

    background:linear-gradient(135deg,#4f46e5,#2563eb);

    color:#fff !important;

    box-shadow:0 10px 25px rgba(79,70,229,.35);

}



/* ---------------------------------------------------------------------- */




/* ===========================================
DOWNLOAD GLASS DROPDOWN
=========================================== */

.glass-download-dropdown{

    position:absolute;

    top:115%;

    right:0;

    width:300px;

    padding:15px;

    border-radius:22px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
        0 25px 55px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.9);

    animation:glassFade .35s ease;

    z-index:9999;

}

.download-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 18px;

    margin-bottom:10px;

    border-radius:16px;

    text-decoration:none;

    background:rgba(255,255,255,.65);

    border:1px solid rgba(226,232,240,.8);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.download-item:last-child{

    margin-bottom:0;

}

.download-item:hover{

    background:#fff;

    transform:translateY(-4px);

    border-color:#2563eb33;

    box-shadow:
        0 12px 28px rgba(37,99,235,.15);

}

.download-item::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );

    transition:.8s;

}

.download-item:hover::before{

    left:130%;

}


.download-item i{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    background:linear-gradient(135deg,#4f46e5,#2563eb);

    color:#fff !important;

    box-shadow:0 8px 20px rgba(79,70,229,.35);

    transition:.35s;

}



.pdf-icon{

    background:linear-gradient(135deg,#ef4444,#dc2626)!important;

}

.ultra-icon{

    background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;

}

.anydesk-icon{

    background:linear-gradient(135deg,#f97316,#ef4444)!important;

}



.download-item span{

    font-size:15px;

    font-weight:600;

    color:#111827;

}
.download-item:hover i{

    transform:rotate(-8deg) scale(1.08);

}

@keyframes glassFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}