/* General styles */
:root {
    --Neutral-300: #EFF0F6;
    --Neutral-100: #FFF;
    --Primary: linear-gradient(90deg, #BC05FF 0%, #8A05FF 100%);
    --Primary-static: #8A05FF;
    --Secondary: rgba(19, 18, 66, 0.07);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

body {
    font-size: 16px;
}

header {
    background-color: #000;
    color: #fff;
    height: 100px;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        height: auto;
        padding: 10px 20px;
    }
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 100%;
}

.logo {
    position: relative;
}

.logo-img {
    max-height: 180px;
    position: absolute;
    bottom: -140px;
    left: 0;
    right: 0;
    margin-left: auto;
}

nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
}

nav a {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 100;
    font-size: 20px;
    line-height: 29px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #888;
}

.cta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 0px -20px 30px;
}

.cta-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 29px;
    min-width: 150px;
    background: linear-gradient(90deg, #BC05FF 0%, #8A05FF 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 100px;
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background: linear-gradient(90deg, #9C03E0 0%, #7A03E0 100%);
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: flex-start;
    }

    nav ul {
        flex-direction: column;
        gap: 10px;
        display: none;
    }

    .cta {
        margin-top: 10px;
        position: static;
    }

    .logo-img {
        bottom: auto;
        top: 0;
        transform: none;
    }

    .cta-button {
        left: 90%;
    }

    .cta-button.get-qoute {
        left: 10%;
    }

    .cta-button.cta-table {
        left: 0%;
    }
}

.home-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    height: 45vh;
    position: relative;
}

.home-text {
    flex: 1;
    max-width: 50%;
    z-index: 2;
    margin-right: 20px;
    margin: 25vh 0vh 0vh 10vh;
}

.home-text h1 {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.home-text p {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

.home-svg {
    flex: 1;
    /* Allow SVG to take available space */
    position: relative;
    /* Needed for overlap adjustments */
    max-width: 50%;
    /* Limit SVG size */
    z-index: 1;
    /* Push SVG behind the text */
    overflow: visible;
}

.home-svg img {
    width: 100%;
    height: auto;
    transform: translate(-11%, 30%);
}

.home-text .btn {
    display: inline-block;
    padding: 12px 35px;
    background: linear-gradient(90deg, #BC05FF 0%, #8A05FF 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 550;
    transition: background 0.3s ease;
}

.background-art {
    width: 100%;
    height: auto;
    max-width: 52%;
    z-index: 1;
    margin: 200px 7px -115px 0px;
    resize: both;
    overflow: hidden;
    display: inline-block;
}

.background-art .home-text {
    position: absolute;
}

.svg-art {
    width: 225%;
    height: auto;
    position: relative;
    right: 0;
    opacity: 1;
}

.additional-content {
    max-width: 1440px;
    margin: 0 auto;
    /* Center horizontally */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center vertically */
    text-align: center;
    z-index: 10;
    min-height: 65vh;

}

.additional-content h2 {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 15px;
    z-index: 3;
    position: relative;
    text-align: left;
}

.additional-content p {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    text-align: left;
    z-index: 3;
    position: relative;
}

.features {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 35px 0px 10px 25px;
    text-align: center;
    z-index: 2;
    background: none;
}

.additional-content::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 40%;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1632' height='476' fill='none' viewBox='0 0 1632 476'%3e%3cpath stroke='%23F8F8F8' stroke-miterlimit='10' stroke-width='21.64' d='M11 3c13.85 64.145 34.62 130.584 75.69 166.537 41.07 35.968 106.77 23.809 124.84-38.33 8.67-29.799 2.33-69.475-18.57-83.804-19.54-13.395-44.97.59-56.77 25.828-11.8 25.237-11.89 58.155-5.49 86.841 6.07 27.215 18.96 53.538 38.48 63.045 26.25 12.777 55.3-7.982 82.84-2.198 36.63 7.694 60.75 70.313 44.79 116.255-15.96 45.941-66.59 59.515-93.96 25.223-6.44-8.064-11.72-18.684-12.47-30.609-1.13-18.162 8.76-34.923 20.74-42.768 23.7-15.51 52.46-2.321 73.73 18.85 21.26 21.157 38.23 49.719 59.81 70.272 32.98 31.392 74.04 41.668 113.92 47.699 38.04 5.757 76.34 8.367 114.61 7.804 16.12-.234 34.46-2.514 44.27-20.086 10.44-18.698 6.09-45.598-.45-67.373-5.75-19.151-13.93-38.976-27.88-46.834-13.96-7.859-33.93 4.3-33.49 25.017.43 20.306 17.59 30.623 31.83 36.091 19.03 7.323 38.78 14.687 58.3 10.442 19.52-4.246 38.77-23.548 41.24-50.489 2.86-31.214-16.66-57.509-36.16-74.009-29.84-25.265-71.1-39.581-98.17-8.985-32.52 36.764-18.71 115.471 16.2 147.839 34.91 32.368 80.5 30.788 122.35 24.235 88.42-13.862 176.03-44.994 255.13-101.033 17.21-12.186 34.99-25.897 54.34-25.594 19.36.302 40.09 21.184 38.22 47.658-.96 13.615-7.46 25.224-14.35 35.102-16.75 24.042-43.5 43.482-64.38 26.584-21.44-17.352-19.9-65.739-.7-87.487 19.2-21.747 48.27-19.797 70.43-4.231 22.16 15.566 38.93 42.205 54.87 68.459 15.94 26.254 32.16 53.346 53.76 70.327 29.83 23.451 65.9 24.66 100.27 24.976 77.38.728 156.63-.371 229.23-37.162 72.6-36.792 138.37-116.667 152.89-221.093'/%3e%3c/svg%3e") no-repeat center center;
    z-index: 1;
    opacity: 0.8;
    pointer-events: none;
    resize: both;
    overflow: hidden;
    padding-bottom: 110px;
}

.feature-item {
    position: relative;
    z-index: 2;
    background: none;
    margin-right: 25px;
}

.feature-item h3 {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--Primary-static);
    text-align: left;
}

.feature-item p {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 1.25rem;
    line-height: 1.5;
}

.floating-button {
    position: fixed;
    right: -40px;
    top: 35%;
    transform: translateY(-50%);
    padding: 30px 15px 30px 55px;
    background-color: #000;
    color: #fff;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 18px;
    letter-spacing: 0.12rem;
    text-decoration: none;
    border-radius: 26px;
    z-index: 100;
    transition: background-color 0.3s ease;
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    text-align: center;
}

.floating-button:hover {
    background-color: #333;
}

@media (max-height: 1000px) {
    .additional-content {
        margin: 130px auto;
    }

}

@media (max-width: 1439px) {
    .additional-content {
        max-width: 85%;
        margin-top: 10%;
    }
}

@media (max-width: 768px) {
    .home-section {
        flex-direction: column;
        padding: 20px;
        height: 50vh;
    }

    .home-text {
        max-width: 100%;
        margin: 150px 15px;
    }

    .home-svg img {
        width: 145%;
    }

    .logo-img {
        width: 120px;
        height: 120px;
    }

    .background-art {
        max-width: 100%;
        margin: -100px;
        overflow: hidden;
    }

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

    .feature-item {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .additional-content {
        max-width: 82%;
        margin-bottom: 20px;
        margin-top: 5%;

    }

    .additional-content p {
        font-size: 16px;
    }

    .additional-content h2 {
        font-size: 25px;
    }

    .svg-art {
        width: 100%;
        margin-top: 20px;
    }

    .home-svg {
        position: absolute;
        top: -32px;
        left: 45%;
        transform: translateX(-50%);
        z-index: -1;
        width: 120%;
        height: auto;
    }

    .home-text {
        z-index: 1;
        /* Keep the text above the SVG */
        position: relative;
        /* Ensure stacking order is maintained */
    }

    .floating-button {
        padding: 18px 9px 18px 72px;
        transform: rotate(-180deg);
        right: -15%;
        font-size: 11px;
        border-radius: 12px;
        top: 22%;
    }
    .home-text h1{
        font-size: 2rem;
        margin-top: 25%;
    }

    .additional-content::before {
        display: none;
    }

    .step-icon {
        width: 100px;
        height: 100px;
    }
}

@media (max-height: 768px) {
    .home-section,
    .features {
        padding: 40px 0px 0px 0px;
    }
}

.services-section {
    padding: 20px 0;
    text-align: center;
}

.services-section h2 {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
    /* Center the text horizontally */
}

.services-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    column-gap: 55px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-box {
    padding: 40px 35px 35px 40px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.service-box-div {
    width: 40%;
}

.service-box .content {
    flex-grow: 1;
}

.light-box {
    border-radius: 0px 0px 20px 20px;
    background-color: #F8F8F8;
}

.dark-box {
    border-radius: 20px 20px 0px 0px;
    background-color: #1A203B;
    color: #FFFFFF;
}

.service-box h3 {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-box p {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 20px;
}

.cta-button {
    display: block;
    background-color: var(--Primary-static);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    margin-bottom: 20px;
    cursor: pointer;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    text-transform: capitalize;
    text-align: center;
}

.get-qoute {
    background: var(--Primary-static);
    width: 10vh;
}

.service-list {
    list-style-type: none;
    padding: 0;
}

.service-list li {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 14px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.service-list li span {
    font-size: 18px;
    margin-right: 10px;
    color: green;
}

.service-list li span b {
    font-weight: bold;
}

@media (max-width: 768px) {
    .services-container {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
        /* Adjust the value as needed */
    }

    .service-box {
        width: 100%;
        max-width: 368px;
    }

    .service-box-div {
        width: 80%;
    }
}

/* General Section Styling - section 3 */
/* Parent Container */
.how-it-works {
    padding: 60px 20px;
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centers horizontally */
    justify-content: center;
    /* Centers vertically if needed */
}

.how-it-works h2 {
    font-size: 36px;
    margin-bottom: 35px;
}

/* Steps Container */
.steps {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    /* Ensures full width */
    max-width: 700px;
    /* Reduce the maximum width */
    margin: 0 auto;
    /* Center on the page */
}

/* Icon + Text Alignment for Step */
.step {
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: left;
    column-gap: 100px;
}

/* Icon Styling */
.step-icon {
    width: 200px;
    /* Double the size */
    height: 200px;
    flex-shrink: 0;
}

/* Step Content */
.step-content {
    flex: 0 0 60%;
    /* Restricts the text width */
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}


/* Step Header: Number + Title */
.step-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Step Number */
.step-number {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 50px;
    font-weight: 700;
    color: var(--Primary-static);
    flex-shrink: 0;
}

.step-content h3 {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 23px;
    font-weight: 700;
    margin: 0;
    color: var(--Primary-static);
    /* Matches the number color */
}

.step-content p {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .steps {
        flex-direction: column;
        margin-left: 16px;
    }

    .step {
        flex-direction: column;
        align-items: center;
        column-gap: 30px;
    }
    .step-content{
        margin-right: 20px;
    }

    .step-content p {
        font-size: 16px;
    }

    .step-content h2 {
        font-size: 22px;
    }
    .footer-cta {
        left: -4%;
    }
    #home {
        height: 666px;

    }
}



.comparison-table {
    font-family: 'Roboto Flex', sans-serif;
    text-align: center;
    margin: 50px auto;
    padding: 20px;
    max-width: 1400px;
}

.comparison-header {
    margin-bottom: 40px;
}

.comparison-header h2 {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 2rem;
    color: #000;
    margin-bottom: 10px;
}

.comparison-header p {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 20px;
}

.table-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 25px;
    align-items: start;
}

/* Labels Column */
.comparison-labels {
    background: #fff;
    padding: 15px;
    text-align: left;
}

.comparison-labels p {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    margin: 20px 0;
}

/* Common Box Styles */
.comparison-item {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 10px 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.comparison-item h3 {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 15px;
    text-align: center;
}

/* Line Item Styles */
.line-item {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 1rem;
    color: #333;
    margin: 20px 0;
    border-bottom: 1px solid #ddd;
    width: 80%;
    text-align: center;
    padding-bottom: 10px;
}

/* Highlighted Column */
.comparison-item.highlight {
    position: relative;
    /* Ensure proper layering */
    background: #fff;
    /* White background inside */
    border-radius: 10px;
    /* Rounded corners */
    padding: 15px;
    /* Adjust padding */
    box-shadow: 0 8px 12px rgba(108, 99, 255, 0.3);
    /* Optional shadow */
    font-weight: bold;
}

.comparison-item.highlight::before {
    content: "";
    /* Pseudo-element for gradient border */
    position: absolute;
    top: -2px;
    /* Adjust for border thickness */
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    /* Send behind the main content */
    background: linear-gradient(90deg, #9C03E0 0%, #7A03E0 100%);
    border-radius: 12px;
    /* Slightly larger for smooth effect */
}


.comparison-item.highlight h3 {
    color: var(--Primary-static);
}

/* CTA Button */
.cta-wrapper {
    margin-top: 20px;
}

.highlight-wrapper .cta-button {
    margin-top: 20px;
    align-self: flex-end;
    /* Push the button to align with the right edge of the column */
    margin-right: 10px;
    /* Adjust spacing from the column if needed */
}


/* Responsive Design */
@media (max-width: 768px) {
    .table-wrapper {
        display: block;
        grid-template-columns: 1fr;
    }

    .comparison-labels,
    .comparison-item,
    .highlight-wrapper {
        margin-bottom: 20px;
    }

    .highlight-wrapper .cta-button {
        align-self: center;
        /* Center the button in mobile view */
    }

    .comparison-table {
        display: flex;
        flex-direction: column;
        /* Stack items vertically */
        gap: 20px;
        /* Space between items */
        padding: 20px;
        /* Add spacing around the table */
    }

    .comparison-labels,
    .comparison-item {
        flex: 1 1 100%;
        /* Full width for each box */
        margin: 0 auto;
        /* Center the items */
        max-width: 90%;
        /* Avoid edge-clinging */
        margin-bottom: 25px;
    }

    .comparison-header {
        margin: 0px;
    }

    .comparison-labels {
        background: #fff;
        /* White background for readability */
        border: none;
        /* No borders */
        text-align: center;
        font-weight: bold;
    }

    .comparison-item {
        padding: 15px;
        /* Reduce padding for smaller screens */
        border: 1px solid #ddd;
        /* Border for separation */
        box-shadow: none;
        /* Simplified style */
        text-align: center;
        /* Center align content */
    }

    .comparison-item.highlight {
        background: #fff;
        /* White background to stand out */
        border: 2px solid #BC05FF;
        /* Keep border color consistent */
        box-shadow: 0 4px 8px rgba(108, 99, 255, 0.2);
        /* Subtle shadow */
    }

    .line-item {
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
        /* Divide rows */
        width: 100%;
    }

    .line-item:last-child {
        border-bottom: none;
        /* Remove the last line's border */
    }

    /* CTA Button */
    .comparison-item.highlight+.cta-button {
        display: block;
        /* Ensure it’s standalone */
        margin: 20px auto;
        /* Center the button below */
        max-width: 90%;
        /* Prevent stretching */
    }

    .cta-button {
        padding: 10px 25px;
        margin-right: -55px;
        /* Adjust padding for smaller screens */
        font-size: 16px;
        /* Keep text size readable */
        text-align: center;
    }
    .cta-button.cta-header {
        left: 60%;
    }
    .services-section h2 {
        font-size: 25px;
        margin: 0px 21px 30px auto;
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .comparison-table {
        padding: 10px;
        /* Further reduce padding */
    }

    .comparison-item {
        font-size: 14px;
        /* Slightly smaller text */
    }

    .line-item {
        font-size: 12px;
        /* Smaller row text */
    }

    .cta-button {
        font-size: 14px;
        /* Adjust button text size */
        padding: 8px 20px;
        /* Adjust padding for smaller buttons */
    }
}


/* Footer */

/* Footer Styling */
.footer {
    background-color: #0d0e28;
    /* Deep navy background */
    color: #fff;
    font-family: 'Roboto Flex', sans-serif;
    padding: 40px 20px;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-logo {
    max-width: 150px;
    margin: 5px 0px 0px 250px;
}

.footer-logo img {
    margin: -50px 100px 0px 0px;
    max-width: 150px;
    height: auto;
}

.footer-main {
    max-width: 600px;
}

.footer-heading {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.footer-description {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 20px;
}

.footer-cta {
    display: inline-block;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 500;
    background: linear-gradient(90deg, #BC05FF 0%, #8A05FF 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 100px;
    transition: background 0.3s ease;
}

.footer-cta:hover {
    background: linear-gradient(90deg, #9C03E0 0%, #7A03E0 100%);
}

.footer-social {
    margin-top: 20px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    float: right;
    margin-right: 250px;
}

.social-icons li {
    display: inline-block;
}

.social-icons a {
    display: inline-block;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #151633;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.social-icons a:hover {
    background: linear-gradient(90deg, #BC05FF 0%, #8A05FF 100%);
}

.social-icons svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.copymark {
    font-weight: 100;
    color: #858383;
}

/* Footer Bottom */
.footer-bottom {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
    border-top: 1px solid #2e2f45;
    padding-top: 10px;
}

@media (max-width: 768px) {
    .footer-content {
        gap: 30px;
    }

    .footer-logo img {
        max-width: 80px;
    }

    .footer-heading {
        font-size: 20px;
    }

    .footer-description {
        font-size: 14px;
    }

    .footer-cta {
        font-size: 16px;
        padding: 12px 30px;
    }

    .social-icons {
        gap: 15px;
        margin-right: 10px;
    }
    .footer-logo{
        
        margin: 0% 53% 0% auto;
    
    }

    .social-icons a {
        width: 35px;
        height: 35px;
    }

    .footer-bottom {
        font-size: 12px;
    }
}