/* --- HERO: ASYMMETRICAL DESIGN --- */
.munan-capital {
    background: linear-gradient(306deg, #d9e9ff, #fdffe7);
    padding: 100px 0;
    height: 700px;
    clip-path: polygon(100% 0, 100% 93%, 80% 94%, 55% 98%, 33% 93%, 14% 100%, 0 93%, 0 0);
    .wavy

{
    clip-path: shape(from 0 0,vline to calc(100% - 25px),curve to 4.17% calc(100% - 15.5px) with 2.78% calc(100% - 15px),curve to 6.94% calc(100% - 9px) with 5.56% calc(100% - 16px),curve to 9.72% calc(100% - 20px) with 8.33% calc(100% - 2px),curve to 12.5% calc(100% - 44px) with 11.11% calc(100% - 38px),curve to 15.28% calc(100% - 27.5px) with 13.89% calc(100% - 50px),curve to 18.06% calc(100% - 20.5px) with 16.67% calc(100% - 5px),curve to 20.83% calc(100% - 23.5px) with 19.44% calc(100% - 36px),curve to 23.61% calc(100% - 10.5px) with 22.22% calc(100% - 11px),curve to 26.39% calc(100% - 5.5px) with 25% calc(100% - 10px),curve to 29.17% calc(100% - 9.5px) with 27.78% calc(100% - 1px),curve to 31.94% calc(100% - 11.5px) with 30.56% calc(100% - 18px),curve to 34.72% calc(100% - 20px) with 33.33% calc(100% - 5px),curve to 37.5% calc(100% - 23px) with 36.11% calc(100% - 35px),curve to 40.28% calc(100% - 28px) with 38.89% calc(100% - 11px),curve to 43.06% calc(100% - 24.5px) with 41.67% calc(100% - 45px),curve to 45.83% calc(100% - 25.5px) with 44.44% calc(100% - 4px),curve to 48.61% calc(100% - 44.5px) with 47.22% calc(100% - 47px),curve to 51.39% calc(100% - 31px) with 50% calc(100% - 42px),curve to 54.17% calc(100% - 26.5px) with 52.78% calc(100% - 20px),curve to 56.94% calc(100% - 23.5px) with 55.56% calc(100% - 33px),curve to 59.72% calc(100% - 13.5px) with 58.33% calc(100% - 14px),curve to 62.5% calc(100% - 26.5px) with 61.11% calc(100% - 13px),curve to 65.28% calc(100% - 41px) with 63.89% calc(100% - 40px),curve to 68.06% calc(100% - 28.5px) with 66.67% calc(100% - 42px),curve to 70.83% calc(100% - 7.5px) with 69.44% calc(100% - 15px),curve to 73.61% calc(100% - 12.5px) with 72.22% calc(100% - 0px),curve to 76.39% calc(100% - 27.5px) with 75% calc(100% - 25px),curve to 79.17% calc(100% - 28px) with 77.78% calc(100% - 30px),curve to 81.94% calc(100% - 27px) with 80.56% calc(100% - 26px),curve to 84.72% calc(100% - 34px) with 83.33% calc(100% - 28px),curve to 87.5% calc(100% - 28px) with 86.11% calc(100% - 40px),curve to 90.28% calc(100% - 31px) with 88.89% calc(100% - 16px),curve to 93.06% calc(100% - 37px) with 91.67% calc(100% - 46px),curve to 95.83% calc(100% - 23.5px) with 94.44% calc(100% - 28px),curve to 100% calc(100% - 25px) with 97.22% calc(100% - 19px),vline to 0, hline to 0);
}

;
.wavy {
    clip-path: shape(from 0 0,vline to calc(100% - 25px),curve to 4.17% calc(100% - 15.5px) with 2.78% calc(100% - 15px),curve to 6.94% calc(100% - 9px) with 5.56% calc(100% - 16px),curve to 9.72% calc(100% - 20px) with 8.33% calc(100% - 2px),curve to 12.5% calc(100% - 44px) with 11.11% calc(100% - 38px),curve to 15.28% calc(100% - 27.5px) with 13.89% calc(100% - 50px),curve to 18.06% calc(100% - 20.5px) with 16.67% calc(100% - 5px),curve to 20.83% calc(100% - 23.5px) with 19.44% calc(100% - 36px),curve to 23.61% calc(100% - 10.5px) with 22.22% calc(100% - 11px),curve to 26.39% calc(100% - 5.5px) with 25% calc(100% - 10px),curve to 29.17% calc(100% - 9.5px) with 27.78% calc(100% - 1px),curve to 31.94% calc(100% - 11.5px) with 30.56% calc(100% - 18px),curve to 34.72% calc(100% - 20px) with 33.33% calc(100% - 5px),curve to 37.5% calc(100% - 23px) with 36.11% calc(100% - 35px),curve to 40.28% calc(100% - 28px) with 38.89% calc(100% - 11px),curve to 43.06% calc(100% - 24.5px) with 41.67% calc(100% - 45px),curve to 45.83% calc(100% - 25.5px) with 44.44% calc(100% - 4px),curve to 48.61% calc(100% - 44.5px) with 47.22% calc(100% - 47px),curve to 51.39% calc(100% - 31px) with 50% calc(100% - 42px),curve to 54.17% calc(100% - 26.5px) with 52.78% calc(100% - 20px),curve to 56.94% calc(100% - 23.5px) with 55.56% calc(100% - 33px),curve to 59.72% calc(100% - 13.5px) with 58.33% calc(100% - 14px),curve to 62.5% calc(100% - 26.5px) with 61.11% calc(100% - 13px),curve to 65.28% calc(100% - 41px) with 63.89% calc(100% - 40px),curve to 68.06% calc(100% - 28.5px) with 66.67% calc(100% - 42px),curve to 70.83% calc(100% - 7.5px) with 69.44% calc(100% - 15px),curve to 73.61% calc(100% - 12.5px) with 72.22% calc(100% - 0px),curve to 76.39% calc(100% - 27.5px) with 75% calc(100% - 25px),curve to 79.17% calc(100% - 28px) with 77.78% calc(100% - 30px),curve to 81.94% calc(100% - 27px) with 80.56% calc(100% - 26px),curve to 84.72% calc(100% - 34px) with 83.33% calc(100% - 28px),curve to 87.5% calc(100% - 28px) with 86.11% calc(100% - 40px),curve to 90.28% calc(100% - 31px) with 88.89% calc(100% - 16px),curve to 93.06% calc(100% - 37px) with 91.67% calc(100% - 46px),curve to 95.83% calc(100% - 23.5px) with 94.44% calc(100% - 28px),curve to 100% calc(100% - 25px) with 97.22% calc(100% - 19px),vline to 0, hline to 0);
}

;

.wavy {
    clip-path: shape(from 0 0,vline to calc(100% - 25px),curve to 4.17% calc(100% - 15.5px) with 2.78% calc(100% - 15px),curve to 6.94% calc(100% - 9px) with 5.56% calc(100% - 16px),curve to 9.72% calc(100% - 20px) with 8.33% calc(100% - 2px),curve to 12.5% calc(100% - 44px) with 11.11% calc(100% - 38px),curve to 15.28% calc(100% - 27.5px) with 13.89% calc(100% - 50px),curve to 18.06% calc(100% - 20.5px) with 16.67% calc(100% - 5px),curve to 20.83% calc(100% - 23.5px) with 19.44% calc(100% - 36px),curve to 23.61% calc(100% - 10.5px) with 22.22% calc(100% - 11px),curve to 26.39% calc(100% - 5.5px) with 25% calc(100% - 10px),curve to 29.17% calc(100% - 9.5px) with 27.78% calc(100% - 1px),curve to 31.94% calc(100% - 11.5px) with 30.56% calc(100% - 18px),curve to 34.72% calc(100% - 20px) with 33.33% calc(100% - 5px),curve to 37.5% calc(100% - 23px) with 36.11% calc(100% - 35px),curve to 40.28% calc(100% - 28px) with 38.89% calc(100% - 11px),curve to 43.06% calc(100% - 24.5px) with 41.67% calc(100% - 45px),curve to 45.83% calc(100% - 25.5px) with 44.44% calc(100% - 4px),curve to 48.61% calc(100% - 44.5px) with 47.22% calc(100% - 47px),curve to 51.39% calc(100% - 31px) with 50% calc(100% - 42px),curve to 54.17% calc(100% - 26.5px) with 52.78% calc(100% - 20px),curve to 56.94% calc(100% - 23.5px) with 55.56% calc(100% - 33px),curve to 59.72% calc(100% - 13.5px) with 58.33% calc(100% - 14px),curve to 62.5% calc(100% - 26.5px) with 61.11% calc(100% - 13px),curve to 65.28% calc(100% - 41px) with 63.89% calc(100% - 40px),curve to 68.06% calc(100% - 28.5px) with 66.67% calc(100% - 42px),curve to 70.83% calc(100% - 7.5px) with 69.44% calc(100% - 15px),curve to 73.61% calc(100% - 12.5px) with 72.22% calc(100% - 0px),curve to 76.39% calc(100% - 27.5px) with 75% calc(100% - 25px),curve to 79.17% calc(100% - 28px) with 77.78% calc(100% - 30px),curve to 81.94% calc(100% - 27px) with 80.56% calc(100% - 26px),curve to 84.72% calc(100% - 34px) with 83.33% calc(100% - 28px),curve to 87.5% calc(100% - 28px) with 86.11% calc(100% - 40px),curve to 90.28% calc(100% - 31px) with 88.89% calc(100% - 16px),curve to 93.06% calc(100% - 37px) with 91.67% calc(100% - 46px),curve to 95.83% calc(100% - 23.5px) with 94.44% calc(100% - 28px),curve to 100% calc(100% - 25px) with 97.22% calc(100% - 19px),vline to 0, hline to 0);
}

;
}

.hero-img-portal {
    text-align: center;
    position: relative;
}

    .hero-img-portal img {
        max-width: 600px;
    }

/* --- Common Challenges Without Digital Systems --- */
.challenge-strip .col {
    flex: 1;
    /* Makes all pillars equal width */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    /* Prevents flex items from overflowing */
}

/* THE GLASS PILLAR */
.challenge-item-new {
    width: 100%;
    /* min-height: 235px; */
    border-radius: 30px 30px 0 0;
    padding: 30px 15px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(6px);
    z-index: 1;
    /* Overlap with 3D base */
    transition: transform 0.3s ease;
    margin-bottom: 30px;
    padding-bottom: 0;
    background: linear-gradient(to bottom, #ecf9ff, rgb(76 162 255 / 0%)) !important;
}

/* Color Gradients per Pillar */
.col:nth-child(1) .challenge-item-new {
    background: linear-gradient(to bottom, #4ca2ff26, rgb(76 162 255 / 0%));
}

.col:nth-child(2) .challenge-item-new {
    background: linear-gradient(to bottom, #6274ff26, rgb(98 116 255 / 0%));
}

.col:nth-child(3) .challenge-item-new {
    background: linear-gradient(to bottom, #8a68ff26, rgb(138 104 255 / 0%));
}

.col:nth-child(4) .challenge-item-new {
    background: linear-gradient(to bottom, #b35dfc26, rgb(179 93 252 / 0%));
}

.col:nth-child(5) .challenge-item-new {
    background: linear-gradient(to bottom, #e05dfc26, rgb(224 93 252 / 0%));
}

/* THE 3D CYLINDER BASE */
/* CONTENT INSIDE PILLAR */
.challenge-icon-box {
    font-size: 30px;
    margin-bottom: 20px;
    color: #f26622;
}

.challenge-item-new h3 {
    font-size: 20px;
}

.challenge-item-new p {
    margin-bottom: 0;
}

/* --- Common Challenges Without Digital Systems --- */
/* --- How Taksh IT Solutions Supports Supply Chain & Warehousing --- */
.tile-row {
    margin-top: 70px;
}

.section-3 {
    background: linear-gradient( 31deg, #d9e9ff, #fdffe7);
    clip-path: polygon(99% 5%, 99% 98%, 3% 96%, 0 0);
}
/* The Card Design */
.tile {
    background: #fff;
    border-radius: 15px;
    padding: 60px 20px 30px 20px;
    /* Top padding extra for icon */
    text-align: center;
    position: relative;
    box-shadow: 0 0 15px rgb(0 0 0 / 6%);
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Important for icon overlap */
    transition: transform 0.3s ease;
    cursor: pointer;
}

    .tile:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 15px #f2662259;
    }

/* The Overlapping Circle Icon */
.tile-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -35px;
    /* Halfway out of the card */
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    border: 4px solid #fff;
    /* The white ring in your image */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 10;
    color: #fff;
}

/* Bottom Colored Bar */
.bottom-bar {
    height: 9px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 0 15px 15px;
    background: linear-gradient(to right, #4ca2ff26, rgb(76 162 255 / 0%) 70%) !important;
}

/* Content Styling */
.tile h3 {
    font-size: 20px;
}

.tile p {
    margin: 0;
}

/* Individual Colors based on your image */
.col:nth-child(1) .bottom-bar {
    background-color: #d1e7fe;
}

.col .tile-icon {
    background: #f26622;
}

.col:nth-child(2) .bottom-bar {
    background-color: #d2d7fe;
}

.col:nth-child(3) .bottom-bar {
    background-color: #e1d8fe;
}

.col:nth-child(4) .bottom-bar {
    background-color: #ecd6ff;
}

.col:nth-child(5) .bottom-bar {
    background-color: #f6cfff;
}

/* The Bottom Message Box */
.light-box {
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    background: linear-gradient(to right, #f1fbff, rgb(76 162 255 / 0%));
    gap: 15px;
    border: 1px solid #0000000f;
}

    .light-box i {
        color: #28a745;
        font-size: 24px;
        margin-right: 15px;
    }

    .light-box p {
        color: #333;
        font-size: 15px;
    }

/* Layout Grid */
.tile-row .col {
    flex: 1;
}

@media (max-width: 768px) {
    .tile-row .col {
        min-width: 100%;
        margin-bottom: 50px;
    }
}

/* --- Key Advantages / Features --- */
/* --- MAIN CARD --- */
.card-real {
    background: white;
    position: relative;
    border-radius: 10px;
    /* Thin bottom and left border only */
    border: 1px solid #f1f1f1;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transform: skewX(-5deg);
    width: 100%;
}

    .card-real:hover, .card-real:hover .thick-accent, .card-real:hover .thin-accent {
        border-color: #f26622;
    }


/* --- THE SLANTED TOP/RIGHT BORDER (Thick Line) --- */
.thick-accent {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 85%;
    height: 80%;
    border-top: 5px solid rgb(209 231 254);
    border-right: 5px solid rgb(209 231 254);
    border-top-right-radius: 18px;
    /* Slant the right side */
    transform: skewX(0deg);
    pointer-events: none;
    z-index: 5;
    border-color: #eaf3f9;
}

/* --- THE THIN LINE BELOW ACCENT --- */
.thin-accent {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 75%;
    height: 65%;
    border-top: 1.5px solid rgb(209 231 254);
    border-right: 1.5px solid rgb(209 231 254);
    border-top-right-radius: 12px;
    transform: skewX(0deg);
    pointer-events: none;
    z-index: 4;
    opacity: 0.8;
}

/* --- CONTENT --- */
.content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 10;
}

.text-area {
    flex: 1;
    padding-right: 10px;
    transform: skewX(5deg);
}

    .text-area h3 {
        font-size: 20px;
    }

    .text-area p {
        margin-bottom: 0;
    }

.icon-area {
    color: #f26622;
    font-size: 30px;
}

/* --- BOTTOM DOTS --- */
/* Responsive */
@media (max-width: 900px) {
    .card {
        width: 100%;
        max-width: 400px;
    }
}

/* --- Key Advantages / Features --- */
/* --- Why Taksh IT Solutions Stands Out --- */
.section-5 {
    background: linear-gradient( 156deg, #d9e9ff, #fdffe7);
    clip-path: polygon(98% 5%, 100% 95%, 2% 99%, -5% 0);
}


.adv-pill {
    display: flex;
    gap: 20px;
    background: linear-gradient(to right, #ffffff, rgb(255 255 255 / 48%));
    padding: 20px;
    border-radius: 10px;
    min-height: 148px;
    border: 1px solid #e3e3e3;
}

    .adv-pill:hover {
        border-color: #f26622;
    }

.adv-div h3 {
    font-size: 20px;
}

.adv-div {
    text-align: left;
}

    .adv-div p {
        margin-bottom: 0;
    }

/* --- Why Taksh IT Solutions Stands Out --- */




/* --- Expected Outcomes--- */


.supply-chain-expected-outcome img {
    max-width: 600px;
}

.supply-chain-expected-outcome {
    text-align: center;
}

.outcome-flex-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
    width: 90%;
    position: relative;
}

    /* The Vertical Connecting Line - Solid Light Blue */
    .outcome-flex-grid::before {
        content: "";
        /* Consistent Light Blue */
    }

.outcome-circle-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 15px;
    border-radius: 20px;
    /* Blue tinted shadow */
    position: relative;
    z-index: 2;
    cursor: pointer;
    border: 1px solid rgba(0, 168, 255, 0.1);
    transition: 0.3s;
}

    /* Card Hover Effect */
    .outcome-circle-card:hover {
        transform: translateX(15px);
        /* Very light blue background on hover */
        border-color: #f26622;
    }

/* Icon Container - Light Blue Theme */
.c-icon {
    min-width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #f1f7ff, #fefff1); /* Lightest blue */
    color: #182d41; /* Main Light Blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 20px;
    transition: 0.3s;
    border: 1px solid #d1e8ff;
}

.outcome-circle-card:hover .c-icon {
    background: #f26622;
    color: #ffffff;
    transform: scale(1.1);
}

/* Text Styling */
.outcome-circle-card p {
    margin: 0;
    font-size: 15px;
    color: #333;
    font-weight: 500;
    line-height: 1.5;
}

/* Small Circle/Dot on the Line - Consistent Blue */
.outcome-circle-card::before {
    content: "";
    position: absolute;
    left: -33px;
    width: 12px;
    height: 12px;
    background: #e6f2ff;
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 5;
    transition: 0.3s;
}

.outcome-circle-card:hover::before {
    transform: scale(1.5);
    background: #182d41; /* Darker blue focus */
}



.call-to-action {
    background: linear-gradient(31deg, #d9e9ff, #fdffe7);
    clip-path: polygon(99% 4%, 95% 98%, 3% 98%, 0% 9%);
    padding: 100px;
}
/* Responsive Mobile Layout */
@media (max-width: 600px) {
    .outcome-flex-grid::before {
        left: 20px;
    }

    .outcome-circle-card::before {
        left: -28px;
    }

    .c-icon {
        min-width: 50px;
        height: 50px;
        font-size: 20px;
        margin-right: 15px;
    }

    .outcome-circle-card p {
        font-size: 13px;
    }
}

/* --- Expected Outcomes--- */



/* --- FAQ: ACCORDION-LESS MINIMALISM --- */

.faq-wrapper {
    max-width: 800px;
    width: 100%;
}

.faq-minimal {
    border: 1px solid #f0f0f0; /* Soft solid border instead of shadow */
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: #fff;
}

    /* Hover Effect: Border color change instead of shadow */
    .faq-minimal:hover {
        border-color: #f26622;
    }

.q-text {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    background-color: #f8faff;
    font-weight: 700;
    font-size: 16px;
    color: #1a1a1a;
    border-bottom: 1px solid #f0f0f0;
    transition: color 0.3s ease;
    background: linear-gradient(31deg, #d9e9ff80, #fdffe714);
}

    /* Number/Icon indicator */
    .q-text::before {
        content: "\f059"; /* Question circle icon */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-right: 15px;
        color: #f26622;
        font-size: 20px;
    }

.faq-minimal:hover .q-text {
    color: #f26622;
    border-bottom-color: #f26622;
}

.a-text {
    padding: 20px 25px 20px 60px; /* Aligned text after the icon */
    margin: 0;
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    background-color: #ffffff;
    position: relative;
}

    /* Decorative side line inside the answer */
    .a-text::before {
        content: "";
        position: absolute;
        left: 25px;
        top: 20px;
        bottom: 20px;
        width: 3px;
        background-color: #007bff;
        border-radius: 10px;
        opacity: 0.3;
    }
    .lightbulb-box i {
    color: #f26622;
}
/* Responsive */
@media (max-width: 600px) {
    .q-text {
        font-size: 14px;
        padding: 15px;
    }

    .a-text {
        padding: 15px 15px 15px 45px;
        font-size: 14px;
    }

        .a-text::before {
            left: 15px;
        }
}

.lightbulb-box {
    padding: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    background: linear-gradient(to right, #f1fbff, rgb(76 162 255 / 0%));
    gap: 15px;
    border: 1px solid #0000000f;
}

/* --- FAQ: ACCORDION-LESS MINIMALISM --- */

.main-heading * {
    font-size: inherit;
}



/* --- MOBILE --- */
@media (max-width: 991px) {
    .interface-grid {
        grid-template-columns: 1fr;
    }

    .hero-img-portal {
        height: 300px;
        margin-top: 30px;
    }

    .outcome-visual {
        padding: 40px 20px;
    }

    .munan-capital, .section-2, .section-3, .section-4, .section-5, .section-6, .section-7, .section-8 {
        clip-path: unset !important; 
    }
    .hero-img-portal img {
        max-width: 350px;
    }
}



@media (max-width: 767px) {

    .common-inner-header .row {
        flex-flow: column-reverse;
    }

    .hero-img-portal img {
        max-width: 300px;
    }

    .munan-capital {
        height: auto;
        clip-path: unset;
        padding: 50px 0;
    }

    .common-inner-header h3 .text-orange, .common-inner-header h3 {
        font-size: 18px !important;
    }

    .section-2 {
        padding: 30px 0 !important;
    }

    .challenge-strip {
        flex-flow: column;
    }

 

    .py-100 {
        padding: 50px 0;
    }

    .tile {
        height: auto;
        padding: 15px;
        padding-top: 50px;
        margin-top: 30px;
    }



    .tile-row {
        margin-top: 0;
    }

    .section-5 {
        clip-path: unset !important;
    }

    .supply-chain-expected-outcome img {
        max-width: 300px;
    }


    .light-box.mt-5 {
        margin-top: 18px !important;
    }

    .call-to-action {
        clip-path: unset;
        padding: 50px 0;
    }
}