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

.navbar {

    transition: .4s;

    background: rgba(8, 20, 38, .65);

    backdrop-filter: blur(14px);
}

.navbar {
    border-bottom: 1px solid #2563EB;
}

.navbar-brand img {

    transition: .3s;

}

.nav-link {

    color: #ffffff;

    font-weight: 500;

    position: relative;

    transition: .3s;

}

.nav-link:hover {

    color: #FF6B1A;

}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 2px;

    background: #FF6B1A;

    transition: .3s;

}

.nav-link:hover::after {

    width: 100%;

}

/* ==============================
      Hero Section
=================================*/

.hero-section {

    background: linear-gradient(135deg, #081426 0%, #0E2340 100%);

    color: #fff;

    position: relative;

    overflow: hidden;

    padding-top: 150px;

    padding-bottom: 30px;

    min-height: 80vh;

    display: flex;

    align-items: center;

}

.hero-section .container-xxl {

    position: relative;

    z-index: 2;

}

/* ==========================
   Hero Place holder
========================== */

.hero-placeholder {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 500px;

}

.hero-row {
    min-height: calc(70vh - 120px);
}

/* ==============================
      Hero Content
=================================*/

.hero-badge {

    display: inline-block;

    padding: 10px 18px;

    border-radius: 40px;

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

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

    color: #fff;

    font-size: .9rem;

    margin-bottom: 25px;

}

.hero-title {

    color: #ffffff;

    font-size: 4.3rem;

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 30px;

}

.hero-description {

    color: #D6E0EA;

    font-size: 1.15rem;

    line-height: 1.8;

    max-width: 650px;

    margin-bottom: 35px;

}

.hero-buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

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

.ecosystem-image {

    width: 103%;

    max-width: 720px;

    height: auto;

    display: block;

    margin: auto;

    transition: .4s;

    border-radius: 22px;

    justify-content: center;

}

/*=====================================
Business Challenges
======================================*/

.challenge-card {

    background: #fff;

    border-radius: 16px;

    padding: 35px 28px;

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

    transition: .3s;

    border: 1px solid #efefef;

}

.challenge-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 16px 32px rgba(0, 0, 0, .08);

}

.challenge-icon {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    background: #0d6efd;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    margin-bottom: 25px;

}

.challenge-card h5 {

    font-weight: 700;

    margin-bottom: 15px;

}

.challenge-card p {

    color: #666;

    margin-bottom: 0;

}

/*=========================================
OUR SOLUTIONS
=========================================*/

.section-tag {

    color: #0d6efd;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    font-size: .90rem;

}

.section-title {

    font-weight: 700;

    margin-bottom: 20px;

}

.section-subtitle {

    color: #6c757d;

    font-size: 1.05rem;

    line-height: 1.8;

}



.solution-item {

    display: flex;

    align-items: center;

    gap: 30px;

    background: #fff;

    border: 1px solid #ececec;

    border-radius: 18px;

    padding: 28px 35px;

    margin-bottom: 22px;

    transition: .30s;

}



.solution-item:hover {

    transform: translateY(-4px);

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

}



.solution-icon {

    width: 72px;

    height: 72px;

    background: #0d6efd;

    border-radius: 18px;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    flex-shrink: 0;

}


.solution-content {

    flex: 1;

}


.solution-content h4 {

    font-weight: 700;

    margin-bottom: 12px;

}


.solution-content p {

    color: #666;

    margin-bottom: 0;

    line-height: 1.7;

}


.solution-btn {

    flex-shrink: 0;

}


.solution-btn .btn {

    padding: 10px 24px;

    border-radius: 30px;

}


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

@media(max-width:991px) {

    .solution-item {

        flex-direction: column;

        text-align: center;

    }

    .solution-btn {

        margin-top: 10px;

    }

}

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

.why-list li {
    color: var(--ds-heading);
}

.why-list i {
    color: var(--ds-primary-light);
}

.feature-box {

    background: var(--ds-white);

    border: 1px solid var(--ds-border);

    border-radius: var(--radius-lg);

    padding: var(--space-5);

    height: 100%;

    box-shadow: var(--shadow-sm);

    transition: .3s;

}

.feature-box:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}

.feature-box i {

    color: var(--ds-primary-light);

    font-size: 32px;

    margin-bottom: 20px;

    display: inline-block;

}

.feature-box h5 {

    color: var(--ds-heading);

    font-weight: 700;

}

.feature-box p {

    color: var(--ds-text);

}

/*=========================================================
FEATURED DIGITAL SOLUTIONS
=========================================================*/

.featured-solutions {

    background: var(--ds-primary);

    color: #fff;

}

.featured-solutions .section-title {

    color: #fff;

}

.featured-solutions .section-subtitle {

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

    max-width: 760px;

    margin: auto;

}

.featured-project {

    background: #fff;

    border-radius: var(--radius-xl);

    overflow: hidden;

    box-shadow: var(--shadow-lg);

}

.featured-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.featured-project .col-lg-6:last-child {

    padding: 50px;

}

.project-category {

    display: inline-block;

    color: var(--ds-accent);

    font-size: .90rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 15px;

}

.project-title {

    color: var(--ds-heading);

    margin-bottom: 20px;

}

.project-description {

    color: var(--ds-text);

    margin-bottom: 30px;

}

.project-features p {

    margin-bottom: 15px;

    color: var(--ds-heading);

    font-weight: 500;

}

.project-features i {

    color: var(--ds-success);

    margin-right: 10px;

}

.mini-title {

    color: #fff;

    font-size: 1.8rem;

    margin-top: 25px;

}

/*=================================
      SERVICE CARD
=================================*/


.service-card {

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

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

    border-radius: var(--radius-lg);

    padding: 35px;

    text-align: center;

    transition: .35s;

    height: 100%;

}

.service-card:hover {

    transform: translateY(-8px);

    background: #fff;

}

.service-card i {

    font-size: 42px;

    color: var(--ds-accent);

    margin-bottom: 20px;

    display: block;

}

.service-card h5 {

    color: #fff;

    margin-bottom: 15px;

}

.service-card p {

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

    margin-bottom: 0;

}

.service-card:hover h5 {

    color: var(--ds-heading);

}

.service-card:hover p {

    color: var(--ds-text);

}

@media(max-width:991px) {

    .featured-project .col-lg-6:last-child {

        padding: 35px;

    }

    .featured-image img {

        min-height: 260px;

    }

}



/*=================================
      SERVICE BOX
=================================*/


.service-box {

    background: #fff;

    border-radius: 18px;

    padding: 35px;

    height: 100%;

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

    transition: .35s;

    display: flex;

    flex-direction: column;

}

.service-box:hover {

    transform: translateY(-8px);

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

}

.service-icon {

    width: 70px;

    height: 70px;

    border-radius: 16px;

    background: #FFF3EC;

    color: #FF6B1A;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    margin-bottom: 25px;

}

.service-title {

    font-weight: 700;

    margin-bottom: 18px;

}

.service-desc {

    color: #666;

    line-height: 1.8;

    margin-bottom: 25px;

}

.service-subtitle {

    font-weight: 600;

    margin-bottom: 18px;

    color: #0b2441;

}

.service-features {

    padding-left: 18px;

    margin-bottom: 25px;

}

.service-features li {

    margin-bottom: 10px;

    color: #555;

}

.service-benefit {

    margin-top: auto;

    background: #f8f9fc;

    padding: 18px;

    border-radius: 12px;

    border-left: 4px solid #FF6B1A;

}

.service-benefit p {

    margin: 10px 0 0;

    font-size: .95rem;

    color: #555;

}

.services-section{

    padding-top:30px;

    padding-bottom:30px;

}



/*=========================================================
INDUSTRIES WE SERVE
=========================================================*/

.industries {

    background: var(--ds-white);

}

.industry-card {

    background: var(--ds-white);

    border: 1px solid var(--ds-border);

    border-radius: var(--radius-lg);

    padding: 40px 30px;

    text-align: center;

    height: 100%;

    transition: .35s;

    box-shadow: var(--shadow-sm);

}

.industry-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-md);

}

.industry-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: rgba(47, 128, 237, .10);

    display: flex;

    align-items: center;

    justify-content: center;

}

.industry-icon i {

    font-size: 36px;

    color: var(--ds-primary-light);

}

.industry-card h4 {

    color: var(--ds-heading);

    margin-bottom: 15px;

    font-weight: 700;

}

.industry-card p {

    color: var(--ds-text);

    margin-bottom: 0;

    line-height: 1.8;

}

@media(max-width:991px) {

    .industry-card {

        padding: 30px 25px;

    }

}

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

.process {

    background: var(--ds-bg);

}

.process-card {

    background: #fff;

    border-radius: var(--radius-lg);

    padding: 35px 20px;

    text-align: center;

    height: 100%;

    border: 1px solid var(--ds-border);

    box-shadow: var(--shadow-sm);

    transition: .35s;

    position: relative;

}

.process-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-md);

}

.process-number {

    width: 42px;

    height: 42px;

    margin: auto;

    margin-bottom: 20px;

    border-radius: 50%;

    background: var(--ds-primary-light);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: .85rem;

    font-weight: 700;

}

.process-card i {

    font-size: 34px;

    color: var(--ds-primary-light);

    margin-bottom: 20px;

}

.process-card h5 {

    color: var(--ds-heading);

    margin-bottom: 15px;

}

.process-card p {

    color: var(--ds-text);

    margin-bottom: 0;

    font-size: .95rem;

}

/*=========================================================
DIGISOL AT A GLANCE
=========================================================*/

.digisol-glance {

    background: var(--ds-primary);

}

.glance-item {

    text-align: center;

    padding: 10px 5px;

}

.glance-item i {

    font-size: 30px;

    color: var(--ds-accent);

    margin-bottom: 20px;

    display: block;

}

.glance-item h2 {

    color: #fff;

    font-size: 2.3rem;
    line-height: 1;
    margin-bottom: 8px;

    font-weight: 800;

    margin-bottom: 10px;

}

.glance-item h6 {

    color: rgba(255, 255, 255, .80);

    font-size: 1rem;

    letter-spacing: .5px;

    margin: 0;

}

.section-tag-light {

    color: var(--ds-accent);

    letter-spacing: 2px;

    font-weight: 700;

}


/*=========================================================
BUSINESSES THAT TRUST DIGISOL
=========================================================*/

.trusted-logos {

    padding: 55px 0;

    background: #fff;

    overflow: hidden;

}

.logo-marquee {

    overflow: hidden;

    position: relative;

}

.logo-track {

    display: flex;

    align-items: center;

    gap: 200px;

    width: max-content;

    animation: logoScroll 22s linear infinite;

}

.logo-marquee:hover .logo-track {

    animation-play-state: paused;

}

.logo-track img {

    height: 55px;

    width: auto;

    filter: grayscale(100%);

    opacity: .65;

    transition: .35s;

    user-select: none;

    flex-shrink: 0;

}

.logo-track img:hover {

    filter: none;

    opacity: 1;

    transform: scale(1.05);

}

@keyframes logoScroll {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-50%);

    }

}

@media(max-width:991px) {

    .logo-track {

        gap: 50px;

    }

    .logo-track img {

        height: 42px;

    }

}

@media(max-width:576px) {

    .logo-track img {

        height: 36px;

    }

    .logo-track {

        gap: 35px;

    }

}

/*=========================================================
TESTIMONIALS
=========================================================*/

.testimonials {

    background: #FCFCFD;

    padding: 50px 0;

}

.testimonial-box {

    position: relative;

    max-width: 820px;

    margin: 0 auto;

    background: #fff;

    border: 1px solid var(--ds-border);

    border-radius: 20px;

    padding: 24px 24px;

    box-shadow: var(--shadow-sm);

}

.quote-mark {

    font-size: 50px;

    line-height: 1;

    color: var(--ds-accent);

    opacity: .12;

    margin-bottom: 4px;

}

.testimonial-message {

    font-size: 1.05rem;

    line-height: 1.8;

    color: var(--ds-text);

    margin-bottom: 16px;

    max-width: 700px;

}

.testimonial-rating {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    color: #F4B400;

    font-size: 1.05rem;

    margin-bottom: 25px;

}

.testimonial-rating span {

    color: var(--ds-text);

    font-size: .90rem;

    font-weight: 500;

}

.client-info {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

}

.client-info img {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #fff;

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

}

.client-info h5 {

    margin: 0;

    font-size: 1.05rem;

    color: var(--ds-heading);

}

.client-info p {

    margin: 2px 0;

    color: var(--ds-text);

    font-size: .92rem;

}

.client-info small {

    color: var(--ds-accent);

    font-weight: 600;

    font-size: .88rem;

}

/* Divider */

.testimonial-box::after {

    content: "";

    display: block;

    width: 120px;

    height: 1px;

    background: var(--ds-border);

    margin: 22px auto 0;

}

/*---------------------------------------------------
Carousel
---------------------------------------------------*/

.carousel-fade .carousel-item {

    transition: opacity .8s ease;

}

.custom-indicators {

    position: relative;

    margin-top: 20px;

    margin-bottom: 0;

}

.custom-indicators button {

    width: 36px !important;

    height: 4px !important;

    border-radius: 20px;

    margin: 0 6px !important;

    background: #D5DCE5 !important;

    border: none;

    opacity: 1 !important;

}

.custom-indicators .active {

    width: 48px !important;

    background: var(--ds-accent) !important;

}

/*---------------------------------------------------
Hover
---------------------------------------------------*/

.testimonial-box {

    transition: .35s;

}

.testimonial-box:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}

/*---------------------------------------------------
Tablet
---------------------------------------------------*/

@media(max-width:991px) {

    .testimonials {

        padding: 45px 0;

    }

    .testimonial-box {

        padding: 30px;

    }

    .testimonial-message {

        font-size: 1rem;

    }

}

/*---------------------------------------------------
Mobile
---------------------------------------------------*/

@media(max-width:767px) {

    .testimonials {

        padding: 40px 0;

    }

    .testimonial-box {

        padding: 25px 20px;

    }

    .quote-mark {

        font-size: 48px;

    }

    .testimonial-message {

        font-size: .97rem;

        line-height: 1.7;

    }

    .client-info {

        flex-direction: column;

        gap: 12px;

        text-align: center;

    }

    .client-info img {

        width: 64px;

        height: 64px;

    }

    .testimonial-rating {

        flex-direction: column;

        gap: 2px;

    }

    .custom-indicators {

        margin-top: 15px;

    }

}

/*=========================================================
   TESTIMONIALS END
  =========================================================*/


.faq {

    background: #fff;

    padding: 70px 0;

}

.faq .accordion-item {

    border: 1px solid var(--ds-border);

    border-radius: 14px;

    margin-bottom: 14px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.faq .accordion-button {

    font-weight: 600;

    padding: 20px 24px;

    color: var(--ds-heading);

    background: #fff;

    box-shadow: none;

}

.faq .accordion-button:not(.collapsed) {

    background: #F7F9FC;

    color: var(--ds-accent);

}


.collapsing {
    transition: height .55s ease;
}



.faq .accordion-body {

    padding: 20px 24px;

    color: var(--ds-text);

    line-height: 1.8;

}

.faq .accordion-button:focus {

    box-shadow: none;

}

@media(max-width:768px) {

    .faq {

        padding: 55px 0;

    }

    .faq .accordion-button {

        padding: 16px 18px;

        font-size: .96rem;

    }

    .faq .accordion-body {

        padding: 18px;

    }

}

/*=========================================================
FINAL CTA
=========================================================*/

.final-cta {

    padding: 70px 0;

    background: #ffffff;

}


.cta-box {

    background: linear-gradient(135deg,
            var(--ds-primary),
            var(--ds-primary-light));

    border-radius: 24px;

    padding: 55px;

    color: #fff;

    overflow: hidden;

    position: relative;

}

.c#ta-box::before {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -90px;

    top: -90px;

    border-radius: 50%;

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

}

.cta-title {

    color: #fff;

    margin-bottom: 20px;

}

.cta-text {

    color: rgba(255, 255, 255, .88);

    font-size: 1.05rem;

    line-height: 1.8;

    margin-bottom: 0;

}

.btn-outline-dark-custom {

    border: 2px solid rgba(255, 255, 255, .5);

    color: #fff;

    padding: 15px 32px;

    border-radius: 12px;

    transition: .3s;

}

.btn-outline-dark-custom:hover {

    background: #fff;

    color: var(--ds-primary);

}

@media(max-width:991px) {

    .cta-box {

        padding: 40px 30px;

        text-align: center;

    }

}

@media(max-width:768px) {

    .final-cta {

        padding: 55px 0;

    }

    .cta-box {

        padding: 35px 22px;

    }

    .cta-title {

        font-size: 2rem;

    }

    .btn-lg {

        width: 100%;

        margin-bottom: 12px;

    }

}

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

.footer {

    background: var(--ds-primary);

    color: #fff;

    padding: 70px 0 25px;

}

.footer-logo {

    max-height: 48px;

}

.footer-about {

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

    line-height: 1.8;

}

.footer h5 {

    color: #fff;

    margin-bottom: 22px;

    font-size: 1.1rem;

}

.footer-links,
.footer-contact {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer-links li,
.footer-contact li {

    margin-bottom: 14px;

}

.footer-links a {

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

    text-decoration: none;

    transition: .3s;

}

.footer-links a:hover {

    color: var(--ds-accent);

    padding-left: 6px;

}

.footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

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

}

.footer-contact i {

    color: var(--ds-accent);

}

.footer-social {

    display: flex;

    gap: 14px;

    margin-top: 25px;

}

.footer-social a {

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

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

    color: #fff;

    transition: .3s;

    text-decoration: none;

}

.footer-social a:hover {

    background: var(--ds-accent);

    transform: translateY(-3px);

}

.footer-divider {

    border-color: rgba(255, 255, 255, .15);

    margin: 45px 0 25px;

}

.copyright {

    color: rgba(255, 255, 255, .65);

    margin: 0;

}

.footer .text-md-end a {

    color: rgba(255, 255, 255, .65);

    text-decoration: none;

}

.footer .text-md-end a:hover {

    color: var(--ds-accent);

}

@media(max-width:768px) {

    .footer {

        padding: 55px 0 20px;

    }

    .footer h5 {

        margin-top: 10px;

    }

    .footer-social {

        justify-content: flex-start;

    }

}

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

.page-hero {

    padding: 160px 0 90px;

    background: #0f172a;

    color: #fff;

    text-align: center;

}

.page-hero h1 {

    color: #ffffff;

    font-size: 56px;

    font-weight: 700;

    margin-bottom: 20px;

}

.page-hero p {

    color: rgba(255, 255, 255, .85);

    max-width: 760px;

    margin: 0 auto 30px;

    font-size: 18px;

}


.page-label {

    display: inline-block;

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--bs-warning);

    margin-bottom: 18px;

}

.page-title {

    font-size: clamp(2.2rem, 5vw, 3.8rem);

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 20px;

}

.page-description {

    max-width: 760px;

    margin: 0 auto 30px;

    font-size: 1.1rem;

    line-height: 1.8;

    color: #cbd5e1;

}

.breadcrumb {

    background: none;

    margin: 0;

}

.breadcrumb-item {

    font-size: .95rem;

}

.breadcrumb-item a {

    color: #ffffff;

    text-decoration: none;

}

.breadcrumb-item.active {

    color: #f8b400;

}

.breadcrumb-item+.breadcrumb-item::before {

    color: #94a3b8;

}

/*==========================================
CONTACT SECTION
==========================================*/

.contact-section {

    background: #ffffff;

    padding: 90px 0;

}

.contact-info h2 {

    font-size: 2rem;

    margin-bottom: 20px;

}

.contact-info p {

    color: #6b7280;

    line-height: 1.8;

}

.contact-item {

    display: flex;

    gap: 20px;

    margin-bottom: 30px;

    align-items: flex-start;

}

.contact-item i {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    background: #ff6b00;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    flex-shrink: 0;

}

.contact-item h6 {

    margin-bottom: 6px;

    font-weight: 700;

}

.contact-form-card {

    background: #fff;

    border-radius: 16px;

    padding: 40px;

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

}

.contact-form-card .form-control,
.contact-form-card .form-select {

    min-height: 55px;

    border-radius: 10px;

}

.contact-form-card textarea {

    min-height: 140px;

}

.contact-form-card .btn {

    border-radius: 10px;

    padding: 14px 34px;

}

/*==========================================
WHY CONTACT
==========================================*/

.why-contact {

    background: #f8fafc;

    padding: 90px 0;

}

.why-box {

    background: #fff;

    border-radius: 16px;

    padding: 35px;

    text-align: center;

    height: 100%;

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

    transition: .3s;

}

.why-box:hover {

    transform: translateY(-6px);

}

.why-box i {

    font-size: 42px;

    color: #ff6b00;

    margin-bottom: 20px;

}

.why-box h5 {

    margin-bottom: 15px;

}


/*==========================================
MAP
==========================================*/

.map-section iframe {

    width: 100%;

    height: 420px;

    border: 0;

}


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

.contact-cta {

    padding: 90px 0;

    background: #ffffff;

}

.cta-box {

    background: #0f172a;

    color: #fff;

    border-radius: 20px;

    padding: 60px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

}

.cta-box h2 {
    color: #ffffff;
    margin-bottom: 15px;
}

.cta-box p {
    color: #cbd5e1;
    margin-bottom: 0;
}

@media(max-width:992px) {

    .cta-box {

        flex-direction: column;

        text-align: center;

    }

}

/*==========================================
ABOUT COMPANY
==========================================*/

.about-company {

    padding: 90px 0;

    background: #ffffff;

}

.section-tag {

    display: inline-block;

    color: #ff6b00;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;

}

.about-company h2 {

    margin-bottom: 25px;

}

.about-company p {

    color: #6b7280;

    line-height: 1.9;

}

.mission-section {

    background: #f8fafc;

    padding: 90px 0;

}

.about-card {

    background: #fff;

    padding: 35px;

    border-radius: 16px;

    text-align: center;

    height: 100%;

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

    transition: all .35s ease;

}

.about-card i {

    font-size: 42px;

    color: #ff6b00;

    margin-bottom: 20px;

}

.about-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);

}


.why-digisol {

    padding: 90px 0;

    background: #ffffff;

}

.why-card {

    text-align: center;

    padding: 35px;

    height: 100%;

}

.why-card {

    background: #fff;

    border: 1px solid #eef1f5;

    border-radius: 20px;

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

    transition: .35s;

}

.why-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);

}

.why-card i {

    font-size: 40px;

    color: #ff6b00;

    margin-bottom: 18px;

}

/*==========================================
POLICY PAGES
==========================================*/

.policy-section {

    padding: 90px 0;

    background: #ffffff;

}

.policy-content {

    max-width: 900px;

    margin: auto;

}

.policy-content h2 {

    font-size: 1.45rem;

    margin-top: 45px;

    margin-bottom: 15px;

}

.policy-content p {

    line-height: 1.9;

    color: #6b7280;

}

.policy-updated {

    color: #ff6b00;

    font-weight: 600;

    margin-bottom: 40px;

}

/*==========================================
FLOATING BUTTONS
==========================================*/

.floating-btn {

    position: fixed;

    right: 25px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 24px;

    text-decoration: none;

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

    z-index: 999;

    transition: .3s;

}

.floating-btn:hover {

    transform: translateY(-4px);

}

.whatsapp-btn {

    bottom: 25px;

    background: #25D366;

}

.top-btn {

    bottom: 110px;

    background: #2563EB;

    border: none;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

}

.top-btn.show {

    opacity: 1;

    visibility: visible;

}


.service-box {

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

}

.service-box h4 {

    color: var(--dark-color);
    margin-bottom: 15px;

}

.service-box p {

    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 0;

}

.service-box i {

    color: var(--primary-color);

}

.service-box:hover {

    transform: translateY(-8px);

}

.service-icon {

    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #eef5ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--primary-color);
    margin-bottom: 20px;

}

.service-features {

    margin: 20px 0;
    padding-left: 18px;

}

.service-features li {

    margin-bottom: 10px;

}


/* ==========================================
   SaaS FEATURES STRIP
========================================== */



.saas-features {

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

    gap: 20px;

    margin: 30px 0 35px;

}

.saas-feature {

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 20px;

    background: #ffffff;

    border: 1px solid #e8ecf3;

    border-radius: 50px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, .05);

    transition: .3s;

}

.saas-feature:hover {

    transform: translateY(-3px);

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

}

.saas-feature i {

    font-size: 18px;

    color: var(--primary-color);

}

.saas-feature span {

    font-size: 15px;

    font-weight: 600;

    color: #24324b;

}

/* ==========================================
   FEATURE CARDS
========================================== */



.feature-card {

    background: #ffffff;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;

    border: 1px solid #eef1f5;

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

    transition: all .3s ease;

    height: 100%;

}

.feature-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);

}

.feature-icon {

    width: 70px;
    height: 70px;

    margin: 0 auto 25px;

    border-radius: 50%;

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

    background: #eef5ff;

    color: var(--primary-color);

    font-size: 30px;

}

.feature-card h5 {

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

    color: var(--dark-color);

    margin-bottom: 15px;

}

.feature-card p {

    color: #6b7280;

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 0;

}

/*=================================
        404 PAGE
=================================*/

.error-404{

    min-height:80vh;

    display:flex;

    align-items:center;

}

.error-code{

    font-size:8rem;

    font-weight:800;

    color:#d6dbe1;

}

.error-code span{

    color:#FF6B1A;

}

.error-title{

    font-size:2.5rem;

    font-weight:700;

    color:#0b2441;

    margin-bottom:20px;

}

.error-text{

    font-size:1.1rem;

    color:#666;

    max-width:650px;

    margin:0 auto 35px;

    line-height:1.8;

}

.error-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

@media (max-width:768px){

.error-code{

    font-size:5rem;

}

.error-title{

    font-size:2rem;

}

.error-buttons{

    flex-direction:column;

}

.error-buttons .btn{

    width:100%;

}

}

/* =========================================
   BLOG CARD
========================================= */

.blog-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}


/* Blog Image */

.blog-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

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

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


/* Blog Content */

.blog-content {
    padding: 28px;
}


/* Category */

.blog-category {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* Title */

.blog-content h3 {
    margin-bottom: 14px;
    font-size: 21px;
    line-height: 1.4;
}


/* Description */

.blog-content p {
    margin-bottom: 20px;
    line-height: 1.7;
}


/* Read More */

.blog-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    text-decoration: none;
}

.blog-link i {
    transition: transform 0.3s ease;
}

.blog-link:hover i {
    transform: translateX(4px);
}

 /* =========================================
    BLOG ARTICLE
 ========================================= */

.blog-article {
    background: #fff;
}

.blog-article-image {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.blog-article-image img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-article article {
    font-size: 17px;
    line-height: 1.85;
}

.blog-article article p {
    margin-bottom: 24px;
}

.blog-article article h2 {
    margin-top: 45px;
    margin-bottom: 18px;
    font-size: 28px;
    line-height: 1.35;
}