:root {
     --primary         : #4361ee;
     --secondary       : #3f37c9;
     --accent          : #f17729;
     --success         : #4cc9a7;
     --light           : #f8f9fa;
     --dark            : #212529;
     --gradient        : linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
     --gradient-success: linear-gradient(135deg, #4cc9a7 0%, #3a9e82 100%);
     --gradient-accent : linear-gradient(135deg, #f17729 0%, #e05a00 100%);
 }

 .digital-card-hero {
     padding   : 100px 0;
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     position  : relative;
     overflow  : hidden;
 }

 .hero-head-icon {
     height: 35px;
 }

 .digital-card-hero::before {
     content      : '';
     position     : absolute;
     top          : -100px;
     right        : -100px;
     width        : 400px;
     height       : 400px;
     background   : var(--gradient);
     border-radius: 50%;
     opacity      : 0.1;
     z-index      : 1;
 }

 .digital-card-hero::after {
     content      : '';
     position     : absolute;
     bottom       : -150px;
     left         : -150px;
     width        : 500px;
     height       : 500px;
     background   : var(--gradient-success);
     border-radius: 50%;
     opacity      : 0.08;
     z-index      : 1;
 }

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

 .main-hero-title {
     font-weight            : 800;
     font-size              : 3.5rem;
     background             : var(--gradient-success);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom          : 1.5rem;
     line-height            : 1.2;
 }

 .hero-tagline {
     font-size    : 1.4rem;
     color        : var(--dark);
     margin-bottom: 1.5rem;
     font-weight  : 500;
     line-height  : 1.4;
 }

 .hero-description-text {
     font-size    : 1.1rem;
     color        : #6c757d;
     margin-bottom: 2.5rem;
     line-height  : 1.6;
     max-width    : 90%;
 }

 .cta-primary-button {
     background     : var(--gradient);
     border         : none;
     border-radius  : 50px;
     padding        : 15px 35px;
     font-weight    : 600;
     font-size      : 1.1rem;
     color          : white;
     box-shadow     : 0 10px 20px rgba(67, 97, 238, 0.3);
     transition     : all 0.3s ease;
     position       : relative;
     overflow       : hidden;
     z-index        : 1;
     display        : inline-flex;
     align-items    : center;
     gap            : 10px;
     text-decoration: none;
 }

 .cta-primary-button::before {
     content   : '';
     position  : absolute;
     top       : 0;
     left      : 0;
     width     : 0%;
     height    : 100%;
     background: var(--gradient-success);
     transition: all 0.3s ease;
     z-index   : -1;
 }

 .cta-primary-button:hover::before {
     width: 100%;
 }

 .cta-primary-button:hover {
     transform : translateY(-5px);
     box-shadow: 0 15px 25px rgba(67, 97, 238, 0.4);
     color     : white;
 }

 .hero-image-container {
     position: relative;
     z-index : 2;
 }

 .hero-main-image {
     border-radius: 20px;
     box-shadow   : 0 25px 50px rgba(0, 0, 0, 0.15);
     transition   : transform 0.5s ease;
     transform    : perspective(1000px) rotateY(-5deg) rotateX(5deg);
 }

 .hero-image-container:hover .hero-main-image {
     transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
 }

 .floating-features {
     position: absolute;
     width   : 100%;
     height  : 100%;
     top     : 0;
     left    : 0;
     z-index : 1;
 }

 .floating-feature-item {
     position     : absolute;
     background   : white;
     border-radius: 10px;
     padding      : 15px;
     box-shadow   : 0 10px 30px rgba(0, 0, 0, 0.1);
     display      : flex;
     align-items  : center;
     gap          : 10px;
     animation    : floatAnimation 6s ease-in-out infinite;
     font-weight  : 500;
 }

 .floating-feature-item i {
     font-size              : 1.5rem;
     background             : var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .floating-feature-item:nth-child(1) {
     top            : 12%;
     left           : 12%;
     animation-delay: 0s;
 }

 .floating-feature-item:nth-child(2) {
     bottom         : 15%;
     right          : 3%;
     animation-delay: 2s;
 }

 .floating-feature-item:nth-child(3) {
     bottom         : 33%;
     left           : 28%;
     animation-delay: 4s;
 }

 @keyframes floatAnimation {
     0% {
         transform: translateY(0px);
     }

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

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

 .stats-section {
     margin-top: 80px;
     position  : relative;
     z-index   : 2;
 }

 .stat-card {
     text-align   : center;
     padding      : 20px;
     background   : white;
     border-radius: 15px;
     box-shadow   : 0 10px 20px rgba(0, 0, 0, 0.05);
     transition   : transform 0.3s ease;
 }

 .stat-card:hover {
     transform: translateY(-10px);
 }

 .stat-number {
     font-size              : 2.5rem;
     font-weight            : 700;
     background             : var(--gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom          : 5px;
 }

 .stat-label {
     color      : #6c757d;
     font-weight: 500;
 }

 .feature-highlights {
     margin-top: 50px;
     position  : relative;
     z-index   : 2;
 }

 .feature-icon {
     width          : 70px;
     height         : 70px;
     border-radius  : 50%;
     background     : var(--gradient);
     display        : flex;
     align-items    : center;
     justify-content: center;
     margin         : 0 auto 20px;
 }

 .feature-icon i {
     font-size: 1.8rem;
     color    : white;
 }

 .feature-title {
     font-weight  : 600;
     margin-bottom: 10px;
     color        : var(--dark);
 }

 .feature-description {
     color    : #6c757d;
     font-size: 0.95rem;
 }

 /* -------Features Section css--------- */

 .features-showcase-section {
     padding   : 100px 0;
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     position  : relative;
     overflow  : hidden;
 }

 .features-showcase-section::before {
     content      : '';
     position     : absolute;
     top          : -50px;
     right        : -50px;
     width        : 200px;
     height       : 200px;
     background   : linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
     border-radius: 50%;
     opacity      : 0.05;
 }

 .features-showcase-section::after {
     content      : '';
     position     : absolute;
     bottom       : -80px;
     left         : -80px;
     width        : 300px;
     height       : 300px;
     background   : linear-gradient(135deg, #4cc9a7 0%, #3a9e82 100%);
     border-radius: 50%;
     opacity      : 0.05;
 }

 .section-main-heading {
     font-weight            : 700;
     font-size              : 3rem;
     background             : linear-gradient(135deg, #4cc9a7 0%, #3a9e82 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom          : 3rem;
     position               : relative;
     display                : inline-block;
 }

 .section-main-heading::after {
     content      : '';
     position     : absolute;
     bottom       : -15px;
     left         : 50%;
     transform    : translateX(-50%);
     width        : 80px;
     height       : 4px;
     background   : linear-gradient(135deg, #4cc9a7 0%, #3a9e82 100%);
     border-radius: 2px;
 }

 .feature-item-card {
     background   : white;
     border-radius: 20px;
     padding      : 2.5rem;
     height       : 100%;
     transition   : all 0.4s ease;
     border       : none;
     position     : relative;
     overflow     : hidden;
     box-shadow   : 0 10px 30px rgba(0, 0, 0, 0.08);
 }

 .feature-item-card::before {
     content   : '';
     position  : absolute;
     top       : 0;
     left      : 0;
     width     : 100%;
     height    : 5px;
     background: linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
     transform : scaleX(0);
     transition: transform 0.4s ease;
 }

 .feature-item-card:hover {
     transform : translateY(-15px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .feature-item-card:hover::before {
     transform: scaleX(1);
 }

 .feature-media-container {
     margin-bottom: 2rem;
     position     : relative;
 }

 .feature-image-wrapper {
     width          : 200px;
     height         : 200px;
     border-radius  : 50%;
     background     : linear-gradient(135deg, #4cc9a7 0%, #3a9e82 100%);
     display        : flex;
     align-items    : center;
     justify-content: center;
     margin         : 0 auto;
     position       : relative;
     overflow       : hidden;
     box-shadow     : 0 15px 30px rgba(76, 201, 167, 0.3);
     transition     : all 0.4s ease;
 }

 .feature-item-card:hover .feature-image-wrapper {
     transform : scale(1.05);
     box-shadow: 0 20px 40px rgba(76, 201, 167, 0.4);
 }

 .feature-image-wrapper::before {
     content   : '';
     position  : absolute;
     top       : -50%;
     left      : -50%;
     width     : 200%;
     height    : 200%;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
     transform : rotate(45deg);
     transition: all 0.6s ease;
 }

 .feature-item-card:hover .feature-image-wrapper::before {
     transform: rotate(45deg) translate(50%, 50%);
 }

 .feature-visual {
     width        : 100%;
     height       : 100%;
     object-fit   : cover;
     border-radius: 50%;
     transition   : transform 0.4s ease;
 }

 .feature-icon {
     font-size : 4rem;
     color     : white;
     transition: all 0.4s ease;
 }

 .feature-item-card:hover .feature-icon {
     transform: scale(1.1);
 }

 .feature-title {
     font-weight  : 700;
     font-size    : 22px;
     color        : #212529;
     margin-bottom: 1rem;
     transition   : color 0.3s ease;
 }

 .feature-item-card:hover .feature-title {
     background             : linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .feature-description {
     color        : #6c757d;
     font-size    : 1rem;
     line-height  : 1.6;
     margin-bottom: 0;
 }

 .feature-badge {
     position     : absolute;
     top          : 20px;
     right        : 20px;
     background   : linear-gradient(135deg, #f17729 0%, #e05a00 100%);
     color        : white;
     padding      : 8px 15px;
     border-radius: 50px;
     font-size    : 0.8rem;
     font-weight  : 600;
     box-shadow   : 0 5px 15px rgba(241, 119, 41, 0.3);
     opacity      : 0;
     transform    : translateY(-10px);
     transition   : all 0.4s ease;
 }

 .feature-item-card:hover .feature-badge {
     opacity  : 1;
     transform: translateY(0);
 }

 /* ------company story section csss--------------- */

 .company-story-section {
     padding   : 100px 0;
     background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%);
     position  : relative;
     overflow  : hidden;
 }

 .company-story-section::before {
     content      : '';
     position     : absolute;
     top          : -100px;
     right        : -100px;
     width        : 300px;
     height       : 300px;
     background   : linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
     border-radius: 50%;
     opacity      : 0.03;
 }

 .company-story-section::after {
     content      : '';
     position     : absolute;
     bottom       : -150px;
     left         : -150px;
     width        : 400px;
     height       : 400px;
     background   : linear-gradient(135deg, #4cc9a7 0%, #3a9e82 100%);
     border-radius: 50%;
     opacity      : 0.03;
 }

 .section-main-title {
     font-weight  : 800;
     font-size    : 3.5rem;
     color        : #212529;
     margin-bottom: 4rem;
     position     : relative;
     display      : inline-block;
 }

 .section-main-title::after {
     content      : '';
     position     : absolute;
     bottom       : -15px;
     left         : 50%;
     transform    : translateX(-50%);
     width        : 100px;
     height       : 5px;
     background   : linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
     border-radius: 3px;
 }

 .content-block-wrapper {
     margin-bottom: 6rem;
     position     : relative;
 }

 .content-block-wrapper:last-child {
     margin-bottom: 0;
 }

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

 .story-visual-wrapper {
     border-radius: 20px;
     overflow     : hidden;
     box-shadow   : 0 25px 50px rgba(0, 0, 0, 0.15);
     position     : relative;
     transition   : all 0.4s ease;
     background   : white;
     padding      : 20px;
 }

 .story-visual-wrapper::before {
     content   : '';
     position  : absolute;
     top       : 0;
     left      : 0;
     right     : 0;
     bottom    : 0;
     background: linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
     opacity   : 0;
     transition: opacity 0.4s ease;
     z-index   : 1;
 }

 .story-visual-wrapper:hover::before {
     opacity: 0.1;
 }

 .story-visual-wrapper:hover {
     transform : translateY(-10px);
     box-shadow: 0 35px 60px rgba(0, 0, 0, 0.2);
 }

 .story-image {
     width        : 100%;
     height       : 400px;
     object-fit   : cover;
     border-radius: 15px;
     transition   : transform 0.4s ease;
     position     : relative;
     z-index      : 2;
 }

 .story-visual-wrapper:hover .story-image {
     transform: scale(1.03);
 }

 .text-content-block {
     padding : 2rem;
     position: relative;
     z-index : 2;
 }

 .content-title {
     font-weight  : 700;
     font-size    : 2.2rem;
     color        : #212529;
     margin-bottom: 1.5rem;
     line-height  : 1.3;
     position     : relative;
     display      : inline-block;
 }

 .content-title::before {
     content      : '';
     position     : absolute;
     bottom       : -8px;
     left         : 0;
     width        : 50px;
     height       : 4px;
     background   : linear-gradient(135deg, #4cc9a7 0%, #3a9e82 100%);
     border-radius: 2px;
 }

 .alternate-layout .content-title::before {
     left : auto;
     right: 0;
 }

 .content-description {
     color        : #6c757d;
     font-size    : 1.1rem;
     line-height  : 1.8;
     margin-bottom: 0;
 }

 .feature-badge {
     position     : absolute;
     top          : 30px;
     left         : 30px;
     background   : linear-gradient(135deg, #f17729 0%, #e05a00 100%);
     color        : white;
     padding      : 10px 20px;
     border-radius: 50px;
     font-weight  : 600;
     font-size    : 0.9rem;
     box-shadow   : 0 10px 20px rgba(241, 119, 41, 0.3);
     z-index      : 3;
 }

 .alternate-layout .feature-badge {
     left : auto;
     right: 30px;
 }

 .step-indicator {
     position       : absolute;
     top            : -20px;
     left           : -20px;
     width          : 60px;
     height         : 60px;
     background     : linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
     color          : white;
     border-radius  : 50%;
     display        : flex;
     align-items    : center;
     justify-content: center;
     font-weight    : 700;
     font-size      : 1.5rem;
     box-shadow     : 0 15px 30px rgba(67, 97, 238, 0.3);
     z-index        : 3;
 }

 .alternate-layout .step-indicator {
     left : auto;
     right: -20px;
 }

 .floating-element {
     position       : absolute;
     width          : 80px;
     height         : 80px;
     border-radius  : 20px;
     background     : white;
     display        : flex;
     align-items    : center;
     justify-content: center;
     box-shadow     : 0 15px 30px rgba(0, 0, 0, 0.1);
     z-index        : 1;
     animation      : floatAnimation 6s ease-in-out infinite;
 }

 .floating-element i {
     font-size              : 2rem;
     background             : linear-gradient(135deg, #4361ee 0%, #3f37c9 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .floating-element:nth-child(1) {
     top            : 10%;
     right          : 5%;
     animation-delay: 0s;
 }

 .floating-element:nth-child(2) {
     bottom         : 33%;
     left           : 3%;
     animation-delay: 2s;
 }

 .floating-element:nth-child(3) {
     top            : 35%;
     right          : 38%;
     animation-delay: 4s;
 }


 @keyframes floatAnimation {
     0% {
         transform: translateY(0px) rotate(0deg);
     }

     50% {
         transform: translateY(-20px) rotate(5deg);
     }

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

 /* ------------ faqs css--------------- */

.text-primary {
     color: #f17729 !important;
 }
 .accordion-button:not(.collapsed){
    background-color: #3757a3 !important;
 }

 .faq-section {
     background: #f8f9fa;
 }

 .divider {
     width        : 80px;
     height       : 4px;
     background   : linear-gradient(90deg, #007bff, #f17729);
     border-radius: 2px;
     margin-top   : 15px;
 }

 .faq-box {
     border    : 1px solid #eaeaea;
     transition: all 0.3s ease;
 }

 .faq-box:hover {
     transform : translateY(-5px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }

 .accordion-button {
     background-color: #fff;
     color           : #333;
     transition      : all 0.3s ease;
 }

 .accordion-button:not(.collapsed) {
     background-color: #007bff;
     color           : #fff;
     box-shadow      : none;
 }

 .accordion-body {
     border-top: 1px solid #eee;
 }

 .faq-box h4 i {
     color: #f17729;
 }

 /* ----------------- NFC card Section Css------------------------ */

 .pkg-section{
    padding: 35px 35px 70px;
 }
.pkg-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.pkg-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid #eee;
 
}

.pkg-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.pkg-card-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}
.pkg-gif-section {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pkg-gif {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pkg-card:hover .pkg-gif {
    transform: scale(1.05);
}

.pkg-card-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
}

.pkg-price-box {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-top: 15px;
}

.pkg-old-price {
    font-size: 1.2rem;
    color: #999;
    text-decoration: line-through;
    margin-right: 10px;
    font-weight: 500;
}

.pkg-new-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: #3a86ff;
}

.pkg-features {
    list-style-type: none;
    margin-bottom: 30px;
}

.pkg-feature {
    padding: 12px 0;
    border-bottom: 1px dashed #f0f0f0;
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #555;
}
.pkg-feature svg{
    margin-right: 12px;
}


.pkg-feature:last-child {
    border-bottom: none;
}

.pkg-feature i {
    color: #3a86ff;
    margin-right: 12px;
    font-size: 1.1rem;
}

.pkg-highlight-badge {
    position: absolute;
    top: 20px;
    right: -35px;
    background-color: #ff006e;
    color: white;
    padding: 8px 40px;
    font-size: 0.9rem;
    font-weight: 600;
    transform: rotate(45deg);
    letter-spacing: 1px;
}

.pkg-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background-color: #3a86ff;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
}

.pkg-btn:hover {
    background-color: #2667cc;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(58, 134, 255, 0.3);
}

.pkg-material-tag {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 15px;
    background-color: #f0f7ff;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3a86ff;
}

.pkg-description {
    font-size: 0.95rem;
    color: #777;
    text-align: center;
    margin-top: 15px;
    line-height: 1.5;
}

/* ---------------modal-------------- */
/* Modal Background */
.pkg-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

/* Modal Box */
.pkg-modal-content {
    background: #fff;
    width: 90%;
    max-width: 500px;
    padding: 20px;
    border-radius: 12px;
    position: relative;
    height: 100%;
}

/* CLOSE button */
.pkg-modal-close {
    position: absolute;
    right: 8px;
    top: -8px;
    font-size: 28px;
    cursor: pointer;
}

/* Button */
.pkg-btn {
    padding: 14px;
    display: inline-block;
    background: #3a86ff;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

@media (max-width: 768px) {
    .pkg-cards-wrapper {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}


 /* ------------- Subscription Priceing section css--------------- */

 @media(max-width:1024px){
    .floating-feature-item:nth-child(1){
        top: 5%;
    }
    .floating-feature-item:nth-child(2){
        bottom: 5%;
    }
    .floating-element:nth-child(2){
        left: 1%;
    }
    .floating-element:nth-child(3){
        display: none;
    }
 }

 @media (max-width: 991px) {
     .digital-card-hero {
         padding: 80px 0;
     }

     .main-hero-title {
         font-size: 2.8rem;
     }

     .hero-tagline {
         font-size: 1.2rem;
     }

     .floating-features {
         display: none;
     }

     .hero-main-image {
         transform : none;
         margin-top: 40px;
     }

     /* ------company story section csss--------------- */

     .company-story-section {
         padding: 80px 0;
     }

     .section-main-title {
         font-size: 2.8rem;
     }

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

     .step-indicator {
         width    : 50px;
         height   : 50px;
         font-size: 1.2rem;
         top      : -15px;
         left     : -15px;
     }

     .alternate-layout .step-indicator {
         right: -15px;
     }

     .story-image {
         height: 300px;
     }
 }

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

     .hero-tagline {
         font-size: 1.1rem;
     }

     .hero-description-text {
         max-width: 100%;
     }

     /* ----------features section media css------------ */

     .section-main-heading {
         font-size: 2.2rem;
     }

     .feature-image-wrapper {
         width : 150px;
         height: 150px;
     }

     .feature-icon {
         font-size: 3rem;
     }

     .feature-item-card {
         padding: 2rem;
     }

     /* ------company story section csss--------------- */

     .section-main-title {
         font-size: 2.2rem;
     }

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

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

     .floating-element {
         display: none;
     }
 }

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

     .section-main-heading {
         font-size: 1.8rem;
     }

     /* ------company story section csss--------------- */
     .company-story-section {
         padding: 60px 0;
     }

     .section-main-title {
         font-size: 1.8rem;
     }

     .text-content-block {
         padding: 1rem 0;
     }


 }