.Readmore-btn {
    position: absolute;
      top: 61%;
    left: 15%;
    z-index: 10;
}

/* Custom CSS for fine-tuning */
.mitra-section {
    /* Full viewport height */
    display: flex;
    align-items: center;
    padding: 50px 0;
    background-color: #f8f9fa;
    /* Light background similar to design */
    overflow: hidden;
    /* To handle illustrations potentially going out of bounds */
}

.mitra-container {

    border-radius: 50%;
    box-shadow: #f8f9fa;

}

.app-buttons img {
    height: 50px;
    /* Adjust as needed */
    margin-right: 15px;
}

.payment-card {
    /* background-color: #e6ffe6; */
    /* Light green for success */
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.payment-card img {
    max-width: 400px;
    height: 400px;
}

.illustration {
    position: absolute;
    width: 100px;
    /* Adjust size as needed */
    height: auto;
    border-radius: 50%;
    /* If they are circular, like in the image */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for illustrations */
}

/* Positioning for individual illustrations - this will require fine-tuning */
.illustration.top-left {
    top: 10%;
    left: 10%;
}

.illustration.top-right {
    top: 5%;
    right: 5%;
}

.illustration.mid-left {
    top: 40%;
    left: 0%;
}

.illustration.mid-right {
    top: 30%;
    right: 0%;
}

.illustration.bottom-left {
    bottom: 10%;
    left: 15%;
}

.illustration.bottom-right {
    bottom: 5%;
    right: 10%;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .hero-section {
        padding: 30px 0;
    }

    .prime-mitra-role-section .prime-mitra-role-title {
        font-size: 2.8rem;
    }

    .prime-mitra-role-section .role-diagram-container {
        height: 400px;
        max-width: 600px;
    }

    .prime-mitra-role-section .center-icon {
        width: 80px;
        height: 80px;
        font-size: 3rem;
    }

    .prime-mitra-role-section .role-hexagon {
        width: 200px;
        height: 120px;
        font-size: 0.85rem;
    }

    .prime-mitra-role-section .top-position {
        transform: translate(-50%, -30%);
    }

    .prime-mitra-role-section .bottom-position {
        transform: translate(-50%, 30%);
    }

    .prime-mitra-role-section .left-position {
        transform: translate(-30%, -50%);
    }

    .prime-mitra-role-section .right-position {
        transform: translate(30%, -50%);
    }

    .prime-mitra-role-section .role-hexagon.top-position .line,
    .prime-mitra-role-section .role-hexagon.bottom-position .line {
        height: 70px;
    }

    .prime-mitra-role-section .role-hexagon.left-position .line,
    .prime-mitra-role-section .role-hexagon.right-position .line {
        width: 90px;
    }

    .illustration {
        display: none;
        /* Hide illustrations on smaller screens for simplicity */
    }

    .payment-card-wrapper {
        margin-top: 40px;
        /* Add some space between sections on smaller screens */
    }

    .services-sell-title {
        font-size: 2.8rem;
    }

    .services-sell-subtitle {
        font-size: 1rem;
    }

    .icon-circle {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .service-item {
        width: 140px;
        margin: 10px;
    }

    .top-row .service-item .vertical-line,
    .bottom-row .service-item .vertical-line {
        height: 60px;
        top: -55px;
    }

    .bottom-row {
        transform: translateY(40px);
    }

    .services-diagram {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}





.payment-card {
    /* background-color: #e6ffe6;x */
    border-radius: 15px;
    padding: 20px;
    /* Adjusted padding */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 5;
    max-width: 200px;
    /* Adjusted max width for smaller space */
    margin: 0 auto;
}

.payment-card h3 {
    font-size: 1.5rem;
    /* Adjusted size */
}

.payment-card .fa-check-circle {
    font-size: 1.2rem;
    /* Adjusted size */
}

.payment-card small {
    font-size: 0.8rem;
}

.payment-card hr {
    margin: 10px 0;
}

.payment-card button {
    font-size: 0.8rem;
    padding: 6px 12px;
}

/* Illustrations (UPI design) - Will likely need extensive re-positioning */
/* For 6-column layout, these illustrations might be less effective or need to be smaller */
.illustration {
    display: none;
    /* Hide for now, or re-position carefully */
}

/* If you want to keep them, you'll need to define new relative positions: */
/* .upi-section .illus-1 { top: 2%; left: 0%; } */
/* ...and so on */


/* Credit Card / Insurance Section Styles */
.card-section .icon-header {
    max-width: 200px;
    width: 100%;
    height: 66px;
    margin-bottom: 65px;
}

.common-column-mitra {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    padding: 20px;
    border-radius: 22px;
    margin: 17px 17px;
}

.card-section {
    height: 410px;
    /* border-radius: 15%;
                       box-shadow: 0 0 5px 5px #80620045; */

}


.card-section h2 {
    font-size: 2.0rem;
    /* Adjusted for 6-col */
}

.card-section p.text-muted {
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.card-section .apply-btn {
    font-size: 0.95rem;
    margin-bottom: 25px;
}

.bank-logos img {
    height: 30px;
    /* Slightly smaller logos */
    margin-right: 10px;
}

/* Credit Card Images Positioning */
.credit-cards-img {
    height: 300px;
    /* Adjusted height */
}

.credit-cards-img img {
    max-width: 70%;
    /* Allow cards to be larger within the space */
}

/* Keep transformations as they are for relative positioning */


/* Insurance Section Specific Styles */
.insurance-right .phone-mockup {
    width: 180px;
    /* Adjusted size */
}

.insurance-right .mini-illus {
    width: 80px;
    /* Adjusted size */
    height: 80px;
    border-radius: 10px;
    /* Adjusted radius */
}

/* Fine-tune these positions based on your phone mockup and desired layout */
/* These absolute positions will need to be re-evaluated for the new column width */
.insurance-right .illus-top-left {
    top: -10%;
    left: -10%;
    background-image: url('https://via.placeholder.com/100/e0f7fa/000000?text=Life');
}

/* Added placeholder background-image */
.insurance-right .illus-mid-left {
    top: 40%;
    left: -10%;
    background-image: url('https://via.placeholder.com/100/d8f7e0/000000?text=Bike');
}

/* Added placeholder background-image */
.insurance-right .illus-bottom-left {
    bottom: -10%;
    left: -10%;
    background-image: url('https://via.placeholder.com/100/f7e0d8/000000?text=Health');
}

/* Added placeholder background-image */
.insurance-right .illus-car {
    top: 10%;
    right: -10%;
    background-image: url('https://via.placeholder.com/100/e0e0f7/000000?text=Car');
}

/* Added placeholder background-image */
.insurance-right .illus-bike {
    bottom: 10%;
    right: -10%;
    background-image: url('https://via.placeholder.com/100/f7d8e0/000000?text=Travel');
}

/* Added placeholder background-image */


/* General positioning adjustments for right sections */
.right-content-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 250px;
    /* Adjusted min height */
    padding-top: 20px;
    /* Add some top padding if content above pushes it too high */
    padding-bottom: 20px;
}


/* Responsive adjustments */
@media (max-width: 991.98px) {
    .prime-mitra {
        /* Changed from .paytm-section */
        flex-direction: column;
        padding: 30px 15px;
        /* Adjust padding for smaller screens */
        min-height: auto;
    }

    .prime-mitra .left-content,
    /* Changed from .paytm-section */
    .prime-mitra .right-content-wrapper {
        /* Changed from .paytm-section */
        text-align: center;
        width: 100%;
    }

    .prime-mitra .right-content-wrapper {
        /* Changed from .paytm-section */
        margin-top: 30px;
    }

    .illustration,
    .mini-illus {
        display: none;
        /* Hide complex absolute illustrations on small screens */
    }

    .credit-cards-img {
        height: 200px;
        /* Smaller height on mobile */
    }

    .credit-cards-img img {
        max-width: 90%;
    }

    .insurance-right .phone-mockup {
        width: 150px;
    }

    .prime-mitra .left-content h1,
    /* Changed from .paytm-section */
    .prime-mitra .left-content h2 {
        /* Changed from .paytm-section */
        font-size: 1.8rem;
        /* Further adjustment for small screens */
    }

    .prime-mitra .left-content p.lead,
    /* Changed from .paytm-section */
    .prime-mitra .left-content p.text-muted {
        /* Changed from .paytm-section */
        font-size: 0.85rem;
    }
}

@media (max-width: 767.98px) {

    /* For md breakpoint and below, stack columns */
    .prime-mitra {
        /* Changed from .paytm-section */
        margin-bottom: 20px;
        /* Add margin between stacked sections */
    }

    .prime-mitra-role-section .prime-mitra-role-title {
        font-size: 2.2rem;
    }

    .prime-mitra-role-section .role-diagram-container {
        height: auto;
        max-width: 300px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 20px;
    }

    .prime-mitra-role-section .center-icon {
        position: static;
        transform: none;
        margin-bottom: 20px;
    }

    .prime-mitra-role-section .role-hexagon {
        position: static;
        transform: none !important;
        width: 90%;
        height: auto;
        margin-bottom: 20px;
        padding: 15px;
        font-size: 0.9rem;
    }

    .prime-mitra-role-section .line {
        display: none;
    }

    .prime-mitra-role-section .prime-mitra-role-section-bg-top-left,
    .prime-mitra-role-section .prime-mitra-role-section-bg-top-right,
    .prime-mitra-role-section .prime-mitra-role-section-bg-bottom-left,
    .prime-mitra-role-section .prime-mitra-role-section-bg-bottom-right {
        width: 200px;
        height: 200px;
        opacity: 0.7;
    }
}

@media (max-width: 575.98px) {
    .prime-mitra {
        /* Changed from .paytm-section */
        margin: 15px 0;
        /* Adjust margin for very small screens */
        padding: 20px 10px;
    }

    .money_transactions_card {
        height: unset !important;
    }

    .money_transactions_card .image_block {
        top: 18% !important;
    }

    .app-buttons .btn {
        min-width: unset;
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }

    .payment-card {
        max-width: 422px;
        padding: 15px;
    }

    .payment-card h3 {
        font-size: 1.2rem;
    }
}

.left-content h2 {

    color: #ff6b4a;

}

.owl-theme .owl-dots {
    text-align: center;
    margin-top: 30px;
    /* Space above dots */
}

.owl-theme .owl-dots .owl-dot {
    outline: none;
    /* Remove default focus outline for accessibility */
}

.owl-theme .owl-dots .owl-dot span {
    width: 12px;
    /* Diameter of the dot */
    height: 12px;
    /* Diameter of the dot */
    margin: 5px 7px;
    /* Space between dots */
    background: transparent;
    /* Make background transparent (empty) */
    border: 2px solid #ccc;
    /* Light grey border for inactive dot */
    display: block;
    -webkit-backface-visibility: visible;
    /* Optimize for smooth animation */
    transition: all .2s ease;
    /* Smooth transition for hover/active states */
    border-radius: 50%;
    /* Make them perfectly round */
    box-sizing: border-box;
    /* Include padding/border in the element's total size */
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #007bff;
    /* Fill with primary color on active/hover */
    border-color: #007bff;
    /* Change border color to match fill */
}

.single-services {
    background-color: #ffffff;
    -webkit-box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
    box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
    margin-bottom: 40px;
    text-align: center;
    padding: 35px 30px 75px 30px;
    border-radius: 5px;
    position: relative;
    max-height: 400px;
    z-index: 1;
    overflow: hidden;
    -webkit-transition: 0.5s;
    transition: 0.5s;

}

.single-services .image {
    margin-bottom: 25px;
    width: 100%;
    margin: auto;
    margin-bottom: 10px;
}

.single-services h3 {
    font-size: 25px;
    margin-bottom: 16px;
    color: var(--bs-orange);
}

.single-services h3 a {
    color: var(--bs-orange);
}


.single-services .services-btn {
    color: var(--bs-orange);
    font-weight: 500;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.single-services:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.banner-prime-mitra {
    max-height: 100px;
    background-color: var(--bs-orange);
}

.banner-prime-mitra {
    min-height: 307px;
    align-items: center;
    background-color: #ff6b4a;
}

.cta-area .get-start-box {
    background-image: -webkit-gradient(linear, left top, right top, from(#ff416c), to(#ff4b2b));
    background-image: linear-gradient(to right, #ff914d, #ff4b2b);
    border-radius: 8px;
    -webkit-box-shadow: 0px 17px 43px 1px rgba(221, 26, 68, 0.356);
    box-shadow: 0px 17px 43px 1px rgba(221, 26, 68, 0.356);
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 40px 30px;
    color: #ffffff;
}


.badge .text-uppercase {
    color: var(--bs-orange);


}

.heading_text {
    color: #ec5643;
}

.money_transactions_card {
    /* background-color: #ec5643; */
}

@media (max-width: 768px) {
    .responsive-img {
        /* Example: reduce size or add padding/margin */
        width: 100%;
    }

    .gradient-button {
        padding: 10px 18px;
      
        font-size: 14px;
        /* Even smaller font size */
        bottom: 10px;
        /* Even closer to bottom */
        right: 10px;
        /* Even closer to right */
        border-radius: 20px;
        /* Even smaller pill */
        position: relative;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        /* Lighter shadow */
    }




    .right-content-wrapper {
        display: none;
    }

    .integrated_section {
        display: none;
    }
}

.single-services a img {
    max-width: 220px;
}

.funfact_block.style_2 {
    background-size: cover;
    background-repeat: no-repeat;
    padding: 52px 60px 52px 50px;
    background-position: center center;
    border-radius: 20px;
    box-shadow: 19px 122px 35px 0 rgba(0, 0, 0, 0), 12px 78px 32px 0 rgba(0, 0, 0, 0.01), 7px 44px 27px 0 rgba(0, 0, 0, 0.05), 3px 19px 20px 0 rgba(0, 0, 0, 0.09), 1px 5px 11px 0 rgba(0, 0, 0, 0.1);
}

.funfact_block.style_2:not(:last-child) {
    margin-bottom: 30px;
}

.funfact_block.style_2 {
    background-size: cover;
    background-repeat: no-repeat;
    padding: 52px 60px 52px 50px;
    background-position: center center;
    border-radius: 20px;
    box-shadow: 19px 122px 35px 0 rgba(0, 0, 0, 0), 12px 78px 32px 0 rgba(0, 0, 0, 0.01), 7px 44px 27px 0 rgba(0, 0, 0, 0.05), 3px 19px 20px 0 rgba(0, 0, 0, 0.09), 1px 5px 11px 0 rgba(0, 0, 0, 0.1);
}

.section_decoration {
    z-index: 1;
    position: relative;
}

.funfact_block .funfact_value {
    line-height: 1;
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 6px;
    align-items: center;
    display: inline-flex;
    color: var(--bs-heading-color);
    font-family: var(--bs-heading-font-family);
}

.funfact_block.style_2 .funfact_title {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: var(--bs-heading-color);
}

.money_transactions_card {
    display: flex;
    height: 532px;
    background-size: auto;
    flex-direction: column;
    padding: 25px 25px 70px;
    background-repeat: no-repeat;
    justify-content: space-between;
    background-position: center bottom;
    border-radius: 20px;
}

.money_transactions_card .image_block {
    overflow: hidden;
    position: relative;
    top: 34%;
}

.money_transactions_card .image_block img {
    max-width: 100%;
    border-radius: 15px;
}

.section_decoration .decoration_item {
    z-index: -1;
    position: absolute;
}

@media screen and (max-width: 1024px) {
    .funfact_block.style_2 {
        padding: 30px;
    }
}

.integrated_wrapper {
    display: flex;
    padding: 24px 0;
    flex-direction: column;
}

.integrated_wrapper>ul {
    gap: 22px;
}

[class*="unordered_list"] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.integrated_wrapper img {
    max-width: 68px;
}

.integrated_wrapper .site_logo {
    margin: 22px 0;
}

.integrated_wrapper .site_logo .site_link {
    padding: 16px 42px;
    border-radius: 10px;
    background-color: var(--bs-orange);
    border: 1px solid #ffffff;
}

.integrated_wrapper .main-list li {
    gap: 22px;
    align-items: center;
    display: inline-flex;
}



@media screen and (max-width: 1366px) {
    .integrated_wrapper>ul li {
        gap: 10px;
    }
}


@media screen and (max-width: 991px) {
    .integrated_wrapper img {
        margin: auto;
        max-width: 60px;
    }
}


.what-we-do-content {
    margin-right: 30px;
}

.what-we-do-content .section-title {
    margin-bottom: 40px;
}

.what-we-do-content .section-title h2 {
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    cursor: none;
}

.what-we-do-content .section-title p {
    margin-top: 20px;
    margin-bottom: 0;
}

.what-we-do-list {
    margin-bottom: 40px;
}

.btn-default {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1em;
    text-transform: capitalize;
    background: var(--bs-orange);
    color: var(--bs-white);
    border-radius: 100px;
    padding: 18px 70px 18px 30px;
    border: none;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.btn-default:hover {
    background-color: transparent;
}

.experience-counter-box {
    position: absolute;
    bottom: 45px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 275px;
    background-color: var(--white-color);
    border-left: 2px solid var(--accent-color);
    border-radius: 5px;
    padding: 15px;
    overflow: hidden;
    animation: yearbox 3s infinite linear alternate;
}

.experience-counter-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--accent-color);
    z-index: 0;
    transition: all 0.4s ease-in-out;
}

@keyframes yearbox {


    50% {
        left: 30px;
    }
}

.what-do-we-img-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 280px;
}

.what-do-we-img-2 figure {
    display: block;
    border-radius: 20px;
}

.reveal {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.image-anime:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}



/* about prime mitra */

/* Overall Section Background */
.prime-pay-section {
    background: linear-gradient(-45deg, #e0f8f8, #f0f0ff, #f8e0f8, #f0f0ff, #e0f8f8);
    position: relative;
    overflow: hidden;
    /* Hide overflowing angled shapes */
}

/* Decorative background elements (similar to the image) */
.prime-pay-section::before,
.prime-pay-section::after {
    content: '';
    position: absolute;
    z-index: 0;
    transform: rotate(45deg);
    opacity: 0.1;
    /* Adjust opacity as needed */
}

.prime-pay-section::before {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, var(--bs-primary), #9400D3);
    /* Purple tones */
    top: -100px;
    right: -100px;
}

.prime-pay-section::after {
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #ec5643, #FFA07A);
    /* Orange/Red tones */
    bottom: -80px;
    left: -80px;
}


/* ABOUT PRIME PAY Banner */
.prime-pay-title {

    font-size: 3.5rem;
    /* Adjust as needed */
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    text-align: center;
}

.prime-pay-subtitle {
    font-size: 1.1rem;
    color: #444444;
    line-height: 1.6;
    text-align: center;
}

/* Vision and Mission Boxes */
.prime-box {
    background-color: var(--bs-mitra);
    color: #FFFFFF;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.box-title {

    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
    /* Ensure title is above pseudo-element */
}

.box-text {
    color: #222;
    font-size: 0.95rem;
    line-height: 1.6;
    position: relative;
    z-index: 2;
    /* Ensure text is above pseudo-element */

}


/* Angled shape for Vision/Mission boxes (using pseudo-elements and clip-path) */
/* .prime-box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 35%; 
    height: 100%;

    background: linear-gradient(135deg, var(--bs-primary) 0%, #ec5643 100%);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 1;
} */

/* CEO Quote and Image Section */
.ceo-section {
    background-color: #FFFFFF;
    /* White background for this specific section */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    /* For the angled background */
}

.ceo-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, rgba(106, 90, 205, 0.1) 0%, rgba(255, 69, 0, 0.05) 100%);
    /* Subtle gradient background */
    z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    /* Angled bottom-left */
}

.ceo-quote {
    font-size: 1.25rem;
    font-style: italic;
    color: #333333;
    line-height: 1.7;
    position: relative;
    z-index: 1;
    text-align: center;
}

.ceo-name {
    font-size: 1rem;
    font-weight: 700;
    color: #222;
}

.ceo-image-container {
    width: 434px;
    height: 440px;
    overflow: hidden;
    /* background-color: var( --bs-mitra);  */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    /* Ensure it's above the subtle background */
    /* Hexagonal shape using clip-path */
    /* clip-path: polygon(50% 0%, 90% 25%, 90% 75%, 50% 100%, 10% 75%, 10% 25%); */
    transform: rotate(0deg);
    /* Counter-rotate if the container itself is rotated */
}

.ceo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the container */
    /* Optionally, slightly shrink the image to show a border effect if desired */
    transform: scale(0.95);
    /* Makes the image slightly smaller than the container to show background */
    /* If the image itself needs to be perfectly hexagonal inside, apply the same clip-path or use a div with background-image */
    clip-path: polygon(50% 0%, 90% 25%, 90% 75%, 50% 100%, 10% 75%, 10% 25%);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .prime-pay-title {
        font-size: 2.5rem;
    }

    .services-sell-title {
        font-size: 2.2rem;
    }

    .services-sell-subtitle {
        font-size: 0.9rem;
    }

    .services-row {
        justify-content: center;
        /* Center items when they wrap */
    }

    .icon-circle {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .service-item {
        width: 120px;
        margin: 29px !important;
    }

    .top-row .service-item .vertical-line,
    .bottom-row .service-item .vertical-line {
        height: 50px;
        top: -45px;
    }

    .bottom-row {
        transform: translateY(30px);
    }

    .horizontal-bar {
        width: 90%;
    }

    .services-sell-section-bg-top-left,
    .services-sell-section-bg-top-right,
    .services-sell-section-bg-bottom-left,
    .services-sell-section-bg-bottom-right {
        width: 250px;
        height: 250px;
        opacity: 0.7;
    }

    .box-title {
        font-size: 1.5rem;
    }

    .ceo-quote {
        font-size: 1rem;
    }

    .ceo-image-container {
        /* width: 150px;
        height: 150px; */
    }
}

/* If you want the hexagonal shape to be a background, and the image to be circular/square within it: */
/*
.ceo-image-container {
    width: 200px;
    height: 200px;
    background-color: var( --bs-mitra);
    clip-path: polygon(50% 0%, 90% 25%, 90% 75%, 50% 100%, 10% 75%, 10% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ceo-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bs-primary);
}


/* General Body and Fonts */


/* Utilities */
.z-index-1 {
    z-index: 1;
}

/* Section Background with Angled Shapes */
.why-prime-pay-section {
    position: relative;
    overflow: hidden;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: linear-gradient(-45deg, #e0f8f8, #f0f0ff, #f8e0f8, #f0f0ff, #e0f8f8);
    background-size: 400% 400%;
    animation: backgroundShift 15s ease infinite;
}



/* Section Header Styling */
.why-prime-pay-title {

    font-size: 3.5rem;
    /* Adjust as needed */
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    /* To make arrows relative to the text */
    padding: 0 10px;
    /* Space between text and arrows */
}

.header-arrows {
    font-size: 0.6em;
    /* Smaller than main text */
    vertical-align: middle;
    color: #444444;
    /* Dark grey color */
    display: inline-block;
    letter-spacing: -0.1em;
    /* To make them closer */
    margin: 0 5px;
    /* Adjust spacing around arrows */
}


/* Feature Cards */
.feature-card {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2.5rem;
    min-height: 268px;
    transition: transform 0.3s ease-in-out;
}

.feature-card:hover {
    /* transform: translateY(-5px);  */
    transform: translateY(-5px) scale(1.05);

}

/* Light Purple Cards (Market Opportunity, Proven Business Model) */
.feature-card.light-purple-card {
    background-color: #EDE7F6;
    color: #303030;

}

/* Dark Purple Card (Pan India Services) */
.feature-card.dark-purple-card {
    background-color: var(--bs-mitra-orange);
    color: #FFFFFF;
    /* min-height: 260px; */
    padding-bottom: 1.5rem;
}

.feature-card .dark-purple-card .card-title {
    color: #ffffff
}


.icon-wrapper {
    font-size: 3.5rem;
    /* Icon size */
    margin-bottom: 1rem;
    line-height: 1;
    /* Adjust line-height to prevent extra space */
}

/* Icon color for light cards */
.light-purple-card .icon-wrapper i {
    color: #303030;
    /* Dark icon */
}

/* Icon color for dark card */
.dark-purple-card .icon-wrapper i {
    color: #FFFFFF;
    /* White icon */
}

.card-title {

    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.card-text {
    font-size: 0.9rem;
    /* Slightly smaller text */
    line-height: 1.5;
    flex-grow: 1;
    /* Allow text to take available space */
    display: flex;
    margin-top: 30px;
    justify-content: center;
}


/* Responsive adjustments */
@media (max-width: 991.98px) {

    /* Medium devices */
    .why-prime-pay-title {
        font-size: 2.8rem;
    }

    .feature-card {
        /* min-height: 260px; */
    }

    .dark-purple-card {
        min-height: 240px;
        /* Adjust for responsiveness */
    }
}

@media (max-width: 767.98px) {

    /* Small devices */
    .why-prime-pay-title {
        font-size: 2.2rem;
        padding: 0 5px;
    }

    .header-arrows {
        font-size: 0.5em;
        margin: 0 2px;
    }

    .feature-card {
        /* min-height: 250px; */
        padding-bottom: 2rem;
    }

    .dark-purple-card {
        /* min-height: 230px; */
        padding-bottom: 1rem;
    }

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

    .card-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 575.98px) {

    /* Extra small devices */
    .why-prime-pay-title {
        font-size: 1.8rem;
        word-break: break-word;
        /* Allow title to break if too long */
    }

    .services-sell-title {
        font-size: 1.8rem;
    }

    .services-sell-subtitle {
        font-size: 0.8rem;
    }

    .icon-circle {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .service-item {
        width: 100px;
        margin: 5px;
    }

    .top-row .service-item .vertical-line,
    .bottom-row .service-item .vertical-line {
        height: 40px;
        top: -35px;
    }

    .bottom-row {
        transform: translateY(20px);
    }

    .services-sell-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .services-sell-section-bg-top-left,
    .services-sell-section-bg-top-right,
    .services-sell-section-bg-bottom-left,
    .services-sell-section-bg-bottom-right {
        width: 200px;
        height: 200px;
    }

    .header-arrows {
        display: none;
        /* Hide arrows on very small screens if space is an issue */
    }

    .feature-card {
        /* min-height: 400px; */
        padding-bottom: 1.5rem;
    }

    .dark-purple-card {
        /* min-height: auto; */
        padding-bottom: 0.5rem;
    }
}



/* Main Section Styling */
.prime-mitra-section {
    background: linear-gradient(to top right, rgba(106, 90, 205, 0.1) 0%, rgba(255, 69, 0, 0.05) 100%);
    z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
    position: relative;
    overflow: hidden;
    /* Crucial for clip-path background shapes */
    min-height: 700px;
    /* Adjust as needed for content height */
    padding-bottom: 0 !important;
    /* Remove Bootstrap default padding to control bottom strip */
}

/* Top Corner Background Shapes */
.top-corner-bg {
    position: absolute;
    width: 250px;
    /* Adjust size */
    height: 250px;
    /* Adjust size */
    z-index: 0;
    opacity: 0.8;
    /* Match image opacity */
    top: 0;
}

.top-left-purple {
    left: 0;
    background-color: var(--bs-primary);
    /* Purple */
    /* Clip-path for top-left triangle */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: translate(-30%, -30%);
    /* Adjust to reveal only corner */
    transform-origin: top left;
}

.top-right-red {
    right: 0;
    background-color: #ec5643;
    /* Red */
    /* Clip-path for top-right triangle */
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    transform: translate(30%, -30%);
    /* Adjust to reveal only corner */
    transform-origin: top right;
}





/* Header Section (WHAT IS PRIME MITRA?) */
.prime-mitra-header {
    background-color: #ec5643;
    /* Orange-red background */
    border-radius: 10px;
    /* Slight rounded corners */
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* Clip-path for the beveled sides, adjust points as needed */
    clip-path: polygon(2% 0, 98% 0, 100% 50%, 98% 100%, 2% 100%, 0% 50%);
}

.prime-mitra-title {

    font-size: 2.8rem;
    /* Adjust as needed */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
}

.prime-mitra-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
}


/* Central Illustration and Icons */
.prime-mitra-circle-container {
    height: 500px;
    /* Define a height for the circle container */
    position: relative;
    /* This makes sure the container is square for circular positioning */
    width: 100%;
    max-width: 500px;
    /* Limit width */
    margin: auto;
    /* Center it */
}

.prime-mitra-man {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Center the image precisely */
    max-width: 100%;
    height: auto;
    display: block;
    padding: 30px;
}

.dashed-circle-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    /* Adjust size of the circle */
    height: 400px;
    /* Must be equal to width */
    border: 2px dashed rgba(255, 255, 255, 0.6);
    /* White dashed line */
    border-radius: 50%;
    /* Makes it a circle */
    z-index: 0;
    /* Behind the man and icons */
}

/* .prime-mitra-icon {
    position: absolute;
    width: 80px; 
    height: 80px; 
    background-color: #ec5643; 
    border: 2px solid #FFFFFF; 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1; 
        animation: float-zoom 3s ease-in-out infinite;
    --radius: 200px;
    top: calc(40% + var(--radius) * sin(var(--angle)));
    left: calc(40% + var(--radius) * cos(var(--angle)));
    transform: translate(-50%, -50%);
} */

.circle-container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    animation: rotate 30s linear infinite;
}

.prime-mitra-icon {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: #ec5643;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    top: 50%;
    left: 50%;
    transform:
        translate(-50%, -50%) rotate(var(--angle)) translate(200px) rotate(calc(-1 * var(--angle)));
}

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

    to {
        transform: rotate(360deg);
    }
}



/* Responsive Adjustments */
@media (max-width: 767.98px) {

    /* Small devices */
    .prime-mitra-title {
        font-size: 2rem;
    }

    .popup-direction {
        flex-direction: column;
    }

    .popup-content h2 {
        font-size: 2.2rem;
    }

    .prime-mitra-subtitle {
        font-size: 0.9rem;
    }

    .prime-mitra-circle-container {
        height: 400px;
        max-width: 400px;
    }

    .dashed-circle-line {
        width: 300px;
        height: 300px;
    }

    .prime-mitra-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
        --radius: 150px;
        /* Smaller radius for icons */
    }

    .prime-mitra-man {
        max-width: 200px;
    }

    .top-corner-bg {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 575.98px) {

    /* Extra small devices */
    .prime-mitra-title {
        font-size: 1.6rem;
    }

    .popup-content h2 {
        font-size: 2.1rem;
    }

    .gradient-button {
        padding: 10px 18px;
        /* Even less padding */
        font-size: 14px;
        /* Even smaller font size */
        bottom: 10px;
        /* Even closer to bottom */
        right: 10px;
        /* Even closer to right */
        border-radius: 20px;
        /* Even smaller pill */
        position: fixed;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        /* Lighter shadow */
    }

    .prime-mitra-subtitle {
        font-size: 0.8rem;
    }

    .prime-mitra-circle-container {
        height: 473px;
        max-width: 350px;
    }

    .dashed-circle-line {
        width: 250px;
        height: 250px;
    }

    .prime-mitra-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        --radius: 125px;
    }

    .prime-mitra-man {
        max-width: 250px;
    }

    .top-corner-bg {
        width: 150px;
        height: 150px;
        opacity: 0.6;
    }

}

@keyframes float-zoom {
    0% {
        transform: translateY(0px) scale(1);
        /* Start at normal size */
    }

    25% {
        transform: translateY(-10px) scale(1.05);
        /* Move up and slightly zoom in */
    }

    50% {
        transform: translateY(0px) scale(1);
        /* Back to normal size */
    }

    75% {
        transform: translateY(10px) scale(0.95);
        /* Move down and slightly zoom out */
    }

    100% {
        transform: translateY(0px) scale(1);
        /* Back to normal size */
    }
}

.services-sell-section .icon-circle {
    opacity: 0;
    transform: translateY(20px) scale(1);
    /* Ensure initial scale is 1 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Add transform to transition */
}

/* Class added by JavaScript to trigger the animation */
.services-sell-section .icon-circle.animate-in {
    opacity: 1;
    animation: float-zoom 3s ease-in-out infinite;
    /* Use the new keyframe name */
}







/* Top Strips (Blue and Red) - consistent with previous request */
.top-blue-strip,
.top-red-strip {
    position: absolute;
    top: 0;
    height: 20px;
    /* Adjust height of strips */
    z-index: 2;
}

.top-blue-strip {
    left: 0;
    width: 50%;
    background-color: var(--bs-primary);
    /* Blue/Purple */
}

.top-red-strip {
    left: 50%;
    width: 50%;
    background-color: #E24E42;
    /* Red/Orange */
}

/* Bottom Strips (Blue and Red) - consistent with previous request */
.bottom-blue-strip,
.bottom-red-strip {
    position: absolute;
    bottom: 0;
    height: 20px;
    /* Adjust height of strips */
    z-index: 2;
}

.bottom-blue-strip {
    left: 0;
    width: 50%;
    background-color: var(--bs-primary);
    /* Blue/Purple */
}

.bottom-red-strip {
    left: 50%;
    width: 50%;
    background-color: #E24E42;
    /* Red/Orange */
}


/* Staggered effect for hexagons on medium and larger screens */
@media (min-width: 768px) {
    .hexagon.mt-md-5 {
        margin-top: 2.5rem !important;
        /* Bootstrap's mt-5 = 3rem. Adjusted for visual. */
    }
}


/* Bottom "No Technical Experience Needed!" text */
.no-experience-text {
    font-size: 1.5rem;
    color: #333333;
    /* Dark grey */
    font-weight: 500;
    margin-top: 3rem;
    /* Space from hexagons */
}


/* Responsive Adjustments */
@media (max-width: 991.98px) {

    /* Medium devices */
    .who-can-join-title {
        font-size: 2.8rem;
    }

    .hexagon {
        width: 160px;
        height: 160px;
        font-size: 1rem;
    }

    .who-can-join-section::before,
    .who-can-join-section::after,
    .who-can-join-section .container::before,
    .who-can-join-section .container::after {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 767.98px) {

    /* Small devices */
    .who-can-join-title {
        font-size: 2.2rem;
    }

    .hexagon {
        width: 140px;
        height: 140px;
        font-size: 0.9rem;
    }

    .hexagon.mt-md-5 {
        margin-top: 0 !important;
        /* Remove stagger on small screens for better layout */
    }

    .who-can-join-section::before,
    .who-can-join-section::after,
    .who-can-join-section .container::before,
    .who-can-join-section .container::after {
        width: 200px;
        height: 200px;
        opacity: 0.7;
    }

    .top-blue-strip,
    .top-red-strip,
    .bottom-blue-strip,
    .bottom-red-strip {
        height: 15px;
    }
}

@media (max-width: 575.98px) {

    /* Extra small devices */
    .who-can-join-title {
        font-size: 1.8rem;
    }

    .hexagon {
        width: 120px;
        height: 120px;
        font-size: 0.8rem;
    }

    .who-can-join-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .who-can-join-section::before,
    .who-can-join-section::after,
    .who-can-join-section .container::before,
    .who-can-join-section .container::after {
        width: 150px;
        height: 150px;
    }

    .no-experience-text {
        font-size: 0.9rem;
    }
}


.services-sell-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(-45deg, #e0f8f8, #f0f0ff, #f8e0f8, #f0f0ff, #e0f8f8);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite alternate;
    padding-top: 6rem;
    padding-bottom: 6rem;
  
}

/* Top Corner Background Shapes */
.services-sell-section-bg-top-left,
.services-sell-section-bg-top-right,
.services-sell-section-bg-bottom-left,
.services-sell-section-bg-bottom-right {
    content: '';
    position: absolute;
    width: 350px;
    /* Size of the large corner shapes */
    height: 350px;
    /* Size of the large corner shapes */
    z-index: 0;
    /* Ensure they are in the background */
    opacity: 0.9;
}

.services-sell-section-bg-top-left {
    /* Top-left Blue/Purple */
    top: 0;
    left: 0;
    background-color: var(--bs-primary);
    /* Deep Indigo / Blue-Purple */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: translate(-30%, -30%);
    transform-origin: top left;
}

.services-sell-section-bg-top-right {
    /* Top-right Red/Orange */
    top: 0;
    right: 0;
    background-color: #E24E42;
    /* Reddish Orange */
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    transform: translate(30%, -30%);
    transform-origin: top right;
}

.services-sell-section-bg-bottom-left {
    /* Bottom-left Red/Orange */
    bottom: 0;
    left: 0;
    background-color: #E24E42;
    /* Reddish Orange */
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transform: translate(-30%, 30%);
    transform-origin: bottom left;
}

.services-sell-section-bg-bottom-right {
    /* Bottom-right Blue/Purple */
    bottom: 0;
    right: 0;
    background-color: var(--bs-primary);
    /* Deep Indigo / Blue-Purple */
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transform: translate(30%, 30%);
    transform-origin: bottom right;
}


/* Top Strips (Blue and Red) */
.services-sell-section .top-blue-strip,
.top-red-strip {
    position: absolute;
    top: 0;
    height: 20px;
    /* Adjust height of strips */
    z-index: 2;
}

.services-sell-section .top-blue-strip {
    left: 0;
    width: 50%;
    background-color: var(--bs-primary);
    /* Blue/Purple */
}

.services-sell-section.top-red-strip {
    left: 50%;
    width: 50%;
    background-color: #E24E42;
    /* Red/Orange */
}

/* Bottom Strips (Blue and Red) */
.bottom-blue-strip,
.bottom-red-strip {
    position: absolute;
    bottom: 0;
    height: 20px;
    /* Adjust height of strips */
    z-index: 2;
}

.bottom-blue-strip {
    left: 0;
    width: 50%;
    background-color: var(--bs-primary);
    /* Blue/Purple */
}

.bottom-red-strip {
    left: 50%;
    width: 50%;
    background-color: #E24E42;
    /* Red/Orange */
}


/* Section Header Styling */
.services-sell-title {

    font-size: 3.5rem;
    /* Adjust as needed */
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
}

.services-sell-subtitle {
    font-size: 1.1rem;
    color: #666666;
    /* Dark gray */
    line-height: 1.6;
    margin-bottom: 3rem;
    /* Space below subtitle */
}


/* Services Diagram */
.services-diagram {
    position: relative;
    padding-top: 5px;
    /* Space for the horizontal bar */
    padding-bottom: 50px;
    /* Space for the bottom row */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center the whole diagram */
}

.horizontal-bar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    /* Width of the horizontal bar */
    max-width: 900px;
    /* Max width to control its length */
    height: 10px;
    /* Thickness of the bar */
    background-color: #E24E42;
    /* Red/Orange color */
    border-radius: 5px;
    /* Slightly rounded ends */
    z-index: 1;
}

.services-row {
    display: flex;
    justify-content: space-around;
    /* Distribute items evenly */
    align-items: flex-start;
    /* Align items to the top for consistency */
    width: 100%;
    margin-top: 50px;
    /* Space between rows and from horizontal bar */
    flex-wrap: wrap;
    /* Allow items to wrap on smaller screens */
}

.top-row {
    margin-top: 0;
    /* No top margin for the first row as it connects to the bar */
    transform: translateY(0);
    /* For alignment with bar */
}

.bottom-row {
    transform: translateY(50px);
    /* Adjust vertical position for staggering effect */
    margin-top: 0;
    /* Remove default margin-top from flex */
    /* Add padding to the row to create horizontal spacing on smaller screens */
    padding: 0 10%;
    /* Adjust as needed to pull items in */
}

.service-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 150px;
    /* Fixed width for each item (icon + text) */
    margin: 15px;
    /* Spacing between items */
}

.icon-circle {
    width: 90px;
    /* Size of the icon circle */
    height: 90px;
    /* Size of the icon circle */
    background-color: #ec5643;
    /* Orange background */
    border: 3px solid #FFA07A;
    /* Lighter orange border */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    /* Icon size */
    color: #FFFFFF;
    /* Icon color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
    /* Space between icon and text */
    z-index: 2;
    /* Ensure icon is above line */
}

.vertical-line {
    position: absolute;
    background-color: #E24E42;
    /* Red/Orange line color */
    width: 3px;
    /* Thickness of the line */
    z-index: 0;
    /* Behind the icon and text */
}

.top-row .service-item .vertical-line {
    height: 70px;
    /* Length of the line for top row */
    top: -65px;
    /* Position relative to icon circle, connects to horizontal bar */
    left: 50%;
    transform: translateX(-50%);
}

.bottom-row .service-item .vertical-line {
    height: 70px;
    /* Length of the line for bottom row */
    top: -65px;
    /* Position relative to icon circle */
    left: 50%;
    transform: translateX(-50%);
}

.service-text {
    font-size: 0.9rem;
    color: #333333;
    /* Dark gray text */
    line-height: 1.4;
    font-weight: 500;
    margin-top: 0;
    /* Remove default margin */
}



.prime-mitra-role-section {
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.prime-mitra-role-section .prime-mitra-role-section-bg-top-left,
.prime-mitra-role-section .prime-mitra-role-section-bg-top-right,
.prime-mitra-role-section .prime-mitra-role-section-bg-bottom-left,
.prime-mitra-role-section .prime-mitra-role-section-bg-bottom-right {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    z-index: 0;
    opacity: 0.9;
}

.prime-mitra-role-section .prime-mitra-role-section-bg-top-left {
    top: 0;
    left: 0;
    background-color: var(--bs-primary);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: translate(-30%, -30%);
    transform-origin: top left;
}

.prime-mitra-role-section .prime-mitra-role-section-bg-top-right {
    top: 0;
    right: 0;
    background-color: #E24E42;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    transform: translate(30%, -30%);
    transform-origin: top right;
}

.prime-mitra-role-section .prime-mitra-role-section-bg-bottom-left {
    bottom: 0;
    left: 0;
    background-color: #E24E42;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transform: translate(-30%, 30%);
    transform-origin: bottom left;
}

.prime-mitra-role-section .prime-mitra-role-section-bg-bottom-right {
    bottom: 0;
    right: 0;
    background-color: var(--bs-primary);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transform: translate(30%, 30%);
    transform-origin: bottom right;
}

.prime-mitra-role-section .top-blue-strip,
.prime-mitra-role-section .top-red-strip {
    position: absolute;
    top: 0;
    height: 20px;
    z-index: 2;
}

.prime-mitra-role-section .top-blue-strip {
    left: 0;
    width: 50%;
    background-color: var(--bs-primary);
}

.prime-mitra-role-section .top-red-strip {
    left: 50%;
    width: 50%;
    background-color: #E24E42;
}

.prime-mitra-role-section .bottom-blue-strip,
.prime-mitra-role-section .bottom-red-strip {
    position: absolute;
    bottom: 0;
    height: 20px;
    z-index: 2;
}

.prime-mitra-role-section .bottom-blue-strip {
    left: 0;
    width: 50%;
    background-color: var(--bs-primary);
}

.prime-mitra-role-section .bottom-red-strip {
    left: 50%;
    width: 50%;
    background-color: #E24E42;
}

.prime-mitra-role-section .prime-mitra-role-title {

    font-size: 3.5rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
}

.prime-mitra-role-section .role-diagram-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 500px;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.prime-mitra-role-section .center-icon {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ec5643;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5rem;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.prime-mitra-role-section .role-hexagon {
    position: absolute;
    width: 219px;
    height: 213px;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
}

.prime-mitra-role-section .orange-hexagon {
    background-color: #E24E42;
    color: #FFFFFF;
}

.prime-mitra-role-section .light-purple-hexagon {
    background-color: #EDE7F6;
    color: #333333;
}

.prime-mitra-role-section .top-position {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.prime-mitra-role-section .left-position {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}

.prime-mitra-role-section .right-position {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
}

.prime-mitra-role-section .bottom-position {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.prime-mitra-role-section .line {
    position: absolute;
    background-color: #666666;
    height: 2px;
    z-index: 1;
    transform-origin: center center;
}

.prime-mitra-role-section .role-hexagon.top-position .line {
    height: 100px;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
}

.prime-mitra-role-section .role-hexagon.left-position .line {
    height: 2px;
    width: 120px;
    top: 50%;
    left: 100%;
    transform: translate(0, -50%) rotate(45deg);
    transform-origin: 0% 50%;
}

.prime-mitra-role-section .role-hexagon.right-position .line {
    height: 2px;
    width: 120px;
    top: 50%;
    right: 100%;
    transform: translate(0, -50%) rotate(-45deg);
    transform-origin: 100% 50%;
}

.prime-mitra-role-section .role-hexagon.bottom-position .line {
    height: 100px;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
}

.prime-mitra-role-section .role-bottom-text {
    font-size: 1.1rem;
    color: #333333;
    font-weight: 500;
    margin-top: 3rem;
}



/* --- TRAINING & SUPPORT Section --- */
.training-support-section {
    position: relative;
    overflow: hidden;
    background-color: #e8e6e6;
    /* White background for the section */
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Background shapes for training-support-section */
.training-support-section-bg-top-left,
.training-support-section-bg-top-right,
.training-support-section-bg-bottom-left,
.training-support-section-bg-bottom-right {
    content: '';
    position: absolute;
    width: 350px;
    /* Adjust size as needed */
    height: 350px;
    /* Adjust size as needed */
    z-index: 0;
    opacity: 0.9;
}

.training-support-section-bg-top-left {
    top: 0;
    left: 0;
    background-color: var(--bs-primary);
    /* Dark Blue */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: translate(-30%, -30%);
    /* Move partly off-screen */
    transform-origin: top left;
}

.training-support-section-bg-top-right {
    top: 0;
    right: 0;
    background-color: #E24E42;
    /* Red/Orange */
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    transform: translate(30%, -30%);
    /* Move partly off-screen */
    transform-origin: top right;
}

.training-support-section-bg-bottom-left {
    bottom: 0;
    left: 0;
    background-color: #E24E42;
    /* Red/Orange */
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transform: translate(-30%, 30%);
    /* Move partly off-screen */
    transform-origin: bottom left;
}

.training-support-section-bg-bottom-right {
    bottom: 0;
    right: 0;
    background-color: #e46464;
    /* Dark Blue */
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transform: translate(30%, 30%);
    /* Move partly off-screen */
    transform-origin: bottom right;
}

/* Common top/bottom strips (reused from general utilities, ensuring correct position) */
.training-support-section .top-blue-strip {
    top: 0;
    left: 0;
    width: 50%;
}

.training-support-section .top-red-strip {
    top: 0;
    left: 50%;
    width: 50%;
}

.training-support-section .bottom-blue-strip {
    bottom: 0;
    left: 0;
    width: 50%;
}

.training-support-section .bottom-red-strip {
    bottom: 0;
    left: 50%;
    width: 50%;
}


.training-support-section .training-support-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
}

.training-support-section .training-support-card {
    background-color: var(--bs-primary);
    /* Dark Blue background for the card */
    border-radius: 10px;
    padding: 1.5rem 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 220px;
    /* Fixed height for consistent layout */
    position: relative;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transitions for hover */

    /* Custom clip-path for the hexagonal shape of the card */
    /* clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%); */
}

.training-support-section .training-support-card:hover {
    background-color: #E24E42;
    /* Change card background to red/orange on hover */
    transform: translateY(-8px);
    /* Lift card slightly */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
    /* Stronger shadow on hover */
}

.training-support-section .icon-circle-small {
    width: 80px;
    height: 80px;
    background-color: #E24E42;
    /* Red/Orange background for icon circle */
    border: 3px solid #FFFFFF;
    /* White border */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
    position: relative;
    z-index: 3;
    /* Ensure icon is above card and other elements */
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    /* Smooth transitions for hover */
}

.training-support-section .training-support-card:hover .icon-circle-small {
    background-color: #FFFFFF;
    /* Icon background changes to white on card hover */
    color: #E24E42;
    /* Icon color changes to red/orange on card hover */
    transform: translateY(-5px) scale(1.1);
    /* Icon lifts a bit more and slightly grows */
    border-color: var(--bs-primary);
    /* Border color changes on hover */
}


.training-support-section .card-title-small {
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 0.5rem;
    flex-grow: 1;
    /* Allow title to take available space */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    /* Add some padding for text */
}

/* Responsive adjustments for TRAINING & SUPPORT */
@media (max-width: 991.98px) {
    .training-support-section .training-support-title {
        font-size: 2.8rem;
    }

    .training-support-section .training-support-card {
        height: 200px;
        padding: 1.2rem 0.8rem;
    }

    .training-support-section .icon-circle-small {
        width: 70px;
        height: 70px;
        font-size: 2.2rem;
        margin-top: -40px;
    }

    .training-support-section .card-title-small {
        font-size: 1rem;
    }

    .training-support-section-bg-top-left,
    .training-support-section-bg-top-right,
    .training-support-section-bg-bottom-left,
    .training-support-section-bg-bottom-right {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 767.98px) {
    .training-support-section .training-support-title {
        font-size: 2.2rem;
    }

    .training-support-section .training-support-card {
        height: 180px;
        padding: 1rem 0.6rem;
    }

    .training-support-section .icon-circle-small {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
        margin-top: -30px;
    }

    .training-support-section .card-title-small {
        font-size: 0.9rem;
    }

    .training-support-section-bg-top-left,
    .training-support-section-bg-top-right,
    .training-support-section-bg-bottom-left,
    .training-support-section-bg-bottom-right {
        width: 200px;
        height: 200px;
        opacity: 0.7;
    }

    .training-support-section .top-blue-strip,
    .training-support-section .top-red-strip,
    .training-support-section .bottom-blue-strip,
    .training-support-section .bottom-red-strip {
        height: 15px;
    }
}

@media (max-width: 575.98px) {
    .training-support-section .training-support-title {
        font-size: 1.8rem;
    }

    .training-support-section .training-support-card {
        height: auto;
        /* Allow height to adjust */
        min-height: 150px;
        padding: 1rem 1rem 0.8rem;
        /* Adjust padding */
    }

    .training-support-section .icon-circle-small {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        margin-top: -25px;
        margin-bottom: 0.8rem;
    }

    .training-support-section .card-title-small {
        font-size: 0.8rem;
        padding: 0 5px;
    }

    .training-support-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .training-support-section-bg-top-left,
    .training-support-section-bg-top-right,
    .training-support-section-bg-bottom-left,
    .training-support-section-bg-bottom-right {
        width: 150px;
        height: 150px;
    }
}



/* --- JOINING PROCESS Section --- */
.joining-process-section {
    position: relative;
    overflow: hidden;
    /* Light background */
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: linear-gradient(
        -45deg,
        #e0f8f8,
        #f0f0ff,
        #f8e0f8,
        #f0f0ff,
        #e0f8f8
    );
    animation: gradientShift 15s ease infinite alternate;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Background shapes for joining-process-section */
.joining-process-section-bg-top-left,
.joining-process-section-bg-top-right,
.joining-process-section-bg-bottom-left,
.joining-process-section-bg-bottom-right {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    z-index: 0;
    opacity: 0.9;
}

.joining-process-section-bg-top-left {
    top: 0;
    left: 0;
    background-color: #E24E42;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: translate(-30%, -30%);
    transform-origin: top left;
}

.joining-process-section-bg-top-right {
    top: 0;
    right: 0;
    background-color: var(--bs-primary);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    transform: translate(30%, -30%);
    transform-origin: top right;
}

.joining-process-section-bg-bottom-left {
    bottom: 0;
    left: 0;
    background-color: var(--bs-primary);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transform: translate(-30%, 30%);
    transform-origin: bottom left;
}

.joining-process-section-bg-bottom-right {
    bottom: 0;
    right: 0;
    background-color: #E24E42;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transform: translate(30%, 30%);
    transform-origin: bottom right;
}

/* Top/Bottom common strips (reused from above) */
.joining-process-section .top-blue-strip {
    top: 0;
    left: 0;
    width: 50%;
}

.joining-process-section .top-red-strip {
    top: 0;
    left: 50%;
    width: 50%;
}

.joining-process-section .bottom-blue-strip {
    bottom: 0;
    left: 0;
    width: 50%;
}

.joining-process-section .bottom-red-strip {
    bottom: 0;
    left: 50%;
    width: 50%;
}


.joining-process-section .joining-process-title {

    font-size: 3.5rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
}

.joining-process-section .joining-process-subtitle {

    font-size: 1.5rem;
    font-weight: 700;
    color: #E24E42;
    /* Red/Orange color */
    margin-top: 1rem;
}

.joining-process-section .joining-process-intro {
    font-size: 1.1rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.joining-process-section .process-card {
    background-color: #EDE7F6;
    /* Light Purple background */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease
}

.joining-process-section .process-card:hover {
    transform: translateY(-8px);
    /* Lift card slightly */
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    /* Stronger shadow on hover */
    background-color: var(--bs-mitra-orange);
}


.joining-process-section .process-card:hover h3,
.joining-process-section .process-card:hover p {
    color: #fff;
}

/* .ladder-content img{
    height: 401px;
} */
.joining-process-section .process-step-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bs-primary);
    /* Dark Blue color */
    margin-bottom: 1.5rem;
    line-height: 1.3;
    text-align: center;
}

.joining-process-section .process-list {
    list-style: none;
    /* Remove default bullet points */
    padding-left: 0;
    margin-bottom: 1rem;
}

.joining-process-section .process-list li {
    position: relative;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: #333333;
    line-height: 1.4;
}

.joining-process-section .process-list .fa-li {
    color: #E24E42;
    /* Red/Orange checkmark */
    font-size: 1.1em;
    margin-right: 0.5rem;
}

.joining-process-section .learn-how-title {
    font-weight: 700;
    color: var(--bs-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.joining-process-section .process-bottom-note {
    font-size: 1rem;
    font-weight: 700;
    color: #222;
    margin-top: auto;
    /* Push to bottom */
    padding-top: 1rem;
    /* Space from list */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Responsive adjustments for JOINING PROCESS */
@media (max-width: 991.98px) {
    .joining-process-section .joining-process-title {
        font-size: 2.8rem;
    }

    .joining-process-section .joining-process-subtitle {
        font-size: 1.3rem;
    }

    .joining-process-section .process-card {
       
        padding: 1.8rem;
    }

    .joining-process-section .process-step-title {
        font-size: 1.3rem;
    }

    .joining-process-section .process-list li {
        font-size: 0.9rem;
    }

    .joining-process-section-bg-top-left,
    .joining-process-section-bg-top-right,
    .joining-process-section-bg-bottom-left,
    .joining-process-section-bg-bottom-right {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 767.98px) {
    .joining-process-section .joining-process-title {
        font-size: 2.2rem;
    }
    .partnerships-span{
        font-size: 4rem !important;
    }

    .joining-process-section .joining-process-subtitle {
        font-size: 1.1rem;
    }

    .joining-process-section .process-card {
        min-height: auto;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .joining-process-section .process-step-title {
        font-size: 1.1rem;
    }

    .joining-process-section .process-list li {
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
    }

    .joining-process-section-bg-top-left,
    .joining-process-section-bg-top-right,
    .joining-process-section-bg-bottom-left,
    .joining-process-section-bg-bottom-right {
        width: 200px;
        height: 200px;
        opacity: 0.7;
    }

    .joining-process-section .top-blue-strip,
    .joining-process-section .top-red-strip,
    .joining-process-section .bottom-blue-strip,
    .joining-process-section .bottom-red-strip {
        height: 15px;
    }
}

@media (max-width: 575.98px) {
    .joining-process-section .joining-process-title {
        font-size: 1.8rem;
    }

    .joining-process-section .joining-process-subtitle {
        font-size: 0.9rem;
    }

    .joining-process-section .process-card {
        padding: 1rem;
    }

    .joining-process-section .process-step-title {
        font-size: 1rem;
    }

    .joining-process-section .process-list li {
        font-size: 0.8rem;
    }

    .joining-process-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .joining-process-section-bg-top-left,
    .joining-process-section-bg-top-right,
    .joining-process-section-bg-bottom-left,
    .joining-process-section-bg-bottom-right {
        width: 150px;
        height: 150px;
    }
}


/* --- ROADMAP Section --- */
.roadmap-section {
    position: relative;
    overflow: hidden;
    background-color: #f8f9fa;
    /* Light background */
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Background shapes for roadmap-section */
.roadmap-section-bg-top-left,
.roadmap-section-bg-top-right,
.roadmap-section-bg-bottom-left,
.roadmap-section-bg-bottom-right {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    z-index: 0;
    opacity: 0.9;
}

.roadmap-section-bg-top-left {
    top: 0;
    left: 0;
    background-color: #E24E42;
    /* Red-orange */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: translate(-30%, -30%);
    transform-origin: top left;
}

.roadmap-section-bg-top-right {
    top: 0;
    right: 0;
    background-color: var(--bs-primary);
    /* Dark blue-purple */
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    transform: translate(30%, -30%);
    transform-origin: top right;
}

.roadmap-section-bg-bottom-left {
    bottom: 0;
    left: 0;
    background-color: var(--bs-primary);
    /* Dark blue-purple */
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transform: translate(-30%, 30%);
    transform-origin: bottom left;
}

.roadmap-section-bg-bottom-right {
    bottom: 0;
    right: 0;
    background-color: #E24E42;
    /* Red-orange */
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    transform: translate(30%, 30%);
    transform-origin: bottom right;
}

/* Top/Bottom common strips */
.roadmap-section .top-blue-strip {
    top: 0;
    left: 0;
    width: 50%;
    background-color: var(--bs-primary);
    height: 20px;
    position: absolute;
    z-index: 1;
}

.roadmap-section .top-red-strip {
    top: 0;
    left: 50%;
    width: 50%;
    background-color: #E24E42;
    height: 20px;
    position: absolute;
    z-index: 1;
}

.roadmap-section .bottom-blue-strip {
    bottom: 0;
    left: 0;
    width: 50%;
    background-color: var(--bs-primary);
    height: 20px;
    position: absolute;
    z-index: 1;
}

.roadmap-section .bottom-red-strip {
    bottom: 0;
    left: 50%;
    width: 50%;
    background-color: #E24E42;
    height: 20px;
    position: absolute;
    z-index: 1;
}


.roadmap-section .roadmap-title {

    font-size: 3.5rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 4rem;
}

.roadmap-item {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Align pillars to the bottom */
}

.roadmap-pillar {
    background-color: #ffffff;
    /* Default background */
    border-radius: 15px;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Content aligns to bottom for scaling */
    height: 350px;
    /* Base height for pillars */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border-bottom: 10px solid transparent;
    /* Placeholder for colored border */
}

.roadmap-pillar:hover {
    transform: translateY(-15px);
    /* Lifts up more */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    /* Stronger shadow */
    background-color: #f8f9fa;
    /* Slightly lighter background */
    border-bottom: 10px solid #28a745;/
}

.roadmap-pillar.orange {
    height: 250px;
    /* Shorter for 2025 */
    background: linear-gradient(to top, #FF7F50, #FFDAB9);
    /* Orange gradient */
    border-bottom-color: #FF7F50;
}

.roadmap-pillar.pink {
    height: 300px;
    /* Medium for 2026 */
    background: linear-gradient(to top, #EE82EE, #FFB6C1);
    /* Pink gradient */
    border-bottom-color: #EE82EE;
}

.roadmap-pillar.purple {
    height: 350px;
    /* Tallest for 2027 */
    background: linear-gradient(to top, #8A2BE2, #C3B1E1);
    /* Purple gradient */
    border-bottom-color: #8A2BE2;
}

.roadmap-pillar p {
    color: #ffffff;
    /* White text on pillars */

    margin-bottom: 0.5rem;
    text-align: center;
    z-index: 2;
    /* Above background elements */
}

.roadmap-pillar .roadmap-year {
    font-size: 1.8rem;
    font-weight: 700;
}

.roadmap-pillar .roadmap-milestone {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.roadmap-pillar .roadmap-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.3);
    /* Semi-transparent white */
    border-radius: 50%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    width: 80px;
    /* Size of the circle */
    height: 80px;
    z-index: 2;
}

.roadmap-icon-wrapper i {
    font-size: 40px;
    color: #fff9f9;
}

.roadmap-pillar .roadmap-icon {
    width: 45px;
    height: 45px;
    filter: brightness(0) invert(1);
    /* Makes icon white */
}

.roadmap-pillar .roadmap-number {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%, 50%);
    background-color: #fff;
    color: #000;
    /* Adjust color based on design */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 3;
    /* Above everything */
}

/* slider */
.slider-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    height: 380px;
    padding: 30px 0;
    position: relative;
    display: flex;
    align-items: center;
}

.slider-track {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
}

.slide {
    flex-shrink: 0;
    background: #444;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    opacity: 0.7;
    /* transition: 0.6s all; */
    transition: transform 0.3s ease;
}

.slide img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    display: block;
}

.slide.active {
    box-shadow: 0 0 20px rgb(236 86 67);
    transform: scale(1.1);
    z-index: 2;
    opacity: 1;
}

.slide::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    font-size: 18px;
    padding: 10px;
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bs-mitra-orange);
    border: none;
    padding: 12px 18px;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    color: #ffffff;
    font-weight: bold;
    border-radius: 8px;
}

.prev-button {
    left: 10px;
}

.next-button {
    right: 10px;
}

/* Mobile Vertical Mode */
@media screen and (max-width: 768px) {
    .slider-wrapper {
        flex-direction: column;
        height: 100vh;
        padding: 0 50px;
    }

    .slider-track {
        flex-direction: column;
        width: 100%;
    }

    .nav-button {
        position: absolute;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        margin: 10px auto;
    }

    .prev-button {
        order: -1;
    }

    .next-button {
        bottom: 0;
    }

    .slide {
        width: 100% !important;
    }

    .slide img {
        width: 100%;
        height: 100%;
    }
}


/* 
.growth-ladder-section {
    padding: 60px 0;
    position: relative;
}

.growth-ladder-title {
    font-size: 3.5rem; 
    font-weight: 800;
    color: #333;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 70px !important; 
}


.growth-ladder-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    padding: 0 20px;
    flex-wrap: wrap;
}


.ladder-step {
    width: 200px;
    height: 120px; 
    color: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-align: center;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    margin: 0 5px; 
    transition: all 2.0s ease-out; 
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}

.step-1 { background-image: linear-gradient(to right, #408ec6, #7a7cdc); } 
.step-2 { background-image: linear-gradient(to right, #ffa500, #ff7f50); } 
.step-3 { background-image: linear-gradient(to right, #8a2be2, #ba55d3); } 
.step-4 { background-image: linear-gradient(to right, #ff69b4, #ff1493); } 



.ladder-step::before,
.ladder-step::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    background: inherit; 
}


.ladder-step::before {
    left: -20px;
    width: 40px; 
    transform: skewX(-20deg); 
    transform-origin: top left;
    z-index: -1; 
}


.ladder-step::after {
    right: -20px; 
    width: 40px; 
    transform: skewX(-20deg);
    transform-origin: top right;
    z-index: -1; 
}


.step-1 {
    transform: translateY(50px) scale(0.8); 
}

.step-2 {
    margin-left: 13px;
    margin-bottom: 50px;
    z-index: 2;
    transform: translateY(50px) scale(0.9);
}

.step-3 {
    margin-left: 21px;
    margin-bottom: 115px;
    z-index: 3;
    transform: translateY(50px) scale(1);
}
.step-4 {
    margin-left: 20px;
    margin-bottom: 180px;
    z-index: 4;
    transform: translateY(50px) scale(1.2);
}


.ladder-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    z-index: 1; 
}

.ladder-icon {
    font-size: 2.5rem;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.9);
}

.ladder-title {
    font-size: 1.1rem; 
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.ladder-level {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 3px;
}


.ladder-step.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-section {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.reveal-section.is-visible {
    opacity: 1;
}



@media (max-width: 992px) {
    .growth-ladder-title {
        font-size: 2.8rem;
    }
    .ladder-step {
        width: 180px;
        height: 110px;
        margin: 0 3px;
    }
    .ladder-icon {
        font-size: 2rem;
    }
    .ladder-title {
        font-size: 1rem;
    }
    .ladder-step::before,
    .ladder-step::after {
        width: 30px;
        left: -15px;
        right: -15px;
        transform: skewX(-15deg);
    }
    .step-2, .step-3, .step-4 {
        margin-left: auto; 
        margin-bottom: auto; 
        margin-top: 20px; 
    }
    .growth-ladder-container {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .growth-ladder-title {
        font-size: 2.2rem;
        margin-bottom: 40px !important;
    }
    .ladder-step {
        width: 160px;
        height: 100px;
        margin: 10px 0; 
    }
    .ladder-icon {
        font-size: 1.8rem;
    }
    .ladder-title {
        font-size: 0.9rem;
    }
    .ladder-step::before,
    .ladder-step::after {
        width: 25px;
        left: -12.5px;
        right: -12.5px;
        transform: skewX(-10deg);
    }
}

@media (max-width: 576px) {
    .growth-ladder-title {
        font-size: 1.8rem;
    }
    .ladder-step {
        width: 140px;
        height: 90px;
    }
} */


/* .roadmap-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
} */

/* REMOVED: Background elements */
/* .roadmap-section-bg-top-left,
.roadmap-section-bg-top-right,
.roadmap-section-bg-bottom-left,
.roadmap-section-bg-bottom-right {
    position: absolute;
    width: 250px;
    height: 200px;
    background-color: rgba(100, 100, 255, 0.08);
    z-index: 0;
    opacity: 0.7;
}

.roadmap-section-bg-top-left { top: 0; left: 0; transform: skewY(-10deg) translateX(-50px); transform-origin: top left; }
.roadmap-section-bg-top-right { top: 0; right: 0; transform: skewY(10deg) translateX(50px); transform-origin: top right; }
.roadmap-section-bg-bottom-left { bottom: 0; left: 0; transform: skewY(10deg) translateX(-50px); transform-origin: bottom left; }
.roadmap-section-bg-bottom-right { bottom: 0; right: 0; transform: skewY(-10deg) translateX(50px); transform-origin: bottom right; } */


/* Growth Ladder Section styling (Adjusted padding, removed shadow for less boxy look) */
.growth-ladder-section {
    background-color: transparent;
    /* Changed to transparent, assuming your images are on a white/light background */
    padding: 30px 0;
    position: relative;
    z-index: 1;
    box-shadow: none;
    /* Removed shadow from the main section */
    border-radius: 0;
    /* Removed border-radius */
    overflow: hidden;
}

.growth-ladder-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #333;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 70px !important;
}

/* Growth Ladder Container - positioning for the steps (No change) */
.growth-ladder-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    padding: 0 20px;
    flex-wrap: wrap;
}

/* Individual Ladder Step Styling */
.ladder-step {
    width: 200px;
    /* Adjust this to match the intrinsic width of your image files */
    height: 170px;
    /* Adjust this to match the intrinsic height of your image files */
    color: white;
    /* Retain in case you add text overlays later */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-align: center;
    box-shadow: none;
    /* Removed shadow from individual steps, as image has its own visual depth */
    margin: 0 5px;
    /* Small gap between steps */
    transition: all 1.0s ease-out;
    /* Slower animation duration */
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    overflow: hidden;
    /* Still useful to ensure image stays within boundaries */

    /* REMOVED: Background gradients, as images provide the background */
    background-image: none !important;
    /* Important to override any default or inherited backgrounds */
}

/* REMOVED: Colors for each step, as images handle this */
/* .step-1 { background-image: linear-gradient(to right, #408ec6, #7a7cdc); }
.step-2 { background-image: linear-gradient(to right, #ffa500, #ff7f50); }
.step-3 { background-image: linear-gradient(to right, #8a2be2, #ba55d3); }
.step-4 { background-image: linear-gradient(to right, #ff69b4, #ff1493); } */


/* REMOVED: Angled Edges using pseudo-elements */
/* .ladder-step::before,
.ladder-step::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    background: inherit;
}

.ladder-step::before {
    left: -20px; width: 40px; transform: skewX(-20deg); transform-origin: top left; z-index: -1;
}

.ladder-step::after {
    right: -20px; width: 40px; transform: skewX(-20deg); transform-origin: top right; z-index: -1;
} */


/* Adjustments for the specific step stacking (No change) */
/* These properties are key to making the images overlap like a ladder */
.step-1 {
    margin-left: -50px;
    margin-bottom: 50px;
    z-index: 2;
}

.step-2 {
    margin-left: -45px;
    margin-bottom: 134px;
    z-index: 2;
}

.step-3 {
    margin-left: -47px;
    margin-bottom: 218px;
    z-index: 3;
}

.step-4 {
    margin-left: -48px;
    margin-bottom: 307px;
    z-index: 4;
}


/* Content inside each step - Optimized for IMAGES */
.ladder-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    /* Remove padding here to let image fill */
    z-index: 1;
    width: 100%;
    /* Image will fill the entire container */
    height: 100%;
    /* Image will fill the entire container */
}

/* Styling for the images within the ladder steps - make them fill the step area */


/* Animation Classes (No change) */
.ladder-step.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-section {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.reveal-section.is-visible {
    opacity: 1;
}



/* Responsive Adjustments */
@media (max-width: 992px) {
    .growth-ladder-title {
        font-size: 2.8rem;
    }

    .ladder-step {
        width: 180px;
        /* Adjust based on your image sizes for responsiveness */
        height: 110px;
        margin: 0 3px;
    }

    /* REMOVED: .ladder-step::before, ::after as they are not used */
    .step-2,
    .step-3,
    .step-4 {
        margin-left: auto;
        margin-bottom: auto;
        margin-top: 20px;
    }

    .growth-ladder-container {
        flex-direction: column;
        align-items: center;
    }

    .ladder-content img {
        width: 100%;
        /* Keep filling */
        height: 100%;
    }
}

@media (max-width: 768px) {
    .growth-ladder-title {
        font-size: 2.2rem;
        margin-bottom: 40px !important;
    }

    .ladder-step {
        width: 160px;
        /* Adjust based on your image sizes for responsiveness */
        height: 100px;
        margin: 10px 0;
    }

    /* REMOVED: .ladder-step::before, ::after as they are not used */
    .ladder-content img {
        width: 100%;
        /* Keep filling */
        height: 100%;
    }
}

@media (max-width: 576px) {
    .growth-ladder-title {
        font-size: 1.8rem;
    }

    .ladder-step {
        width: 140px;
        /* Adjust based on your image sizes for responsiveness */
        height: 90px;
    }
}

/* Responsive adjustments for ROADMAP */
@media (max-width: 991.98px) {
    .roadmap-section .roadmap-title {
        font-size: 2.8rem;
    }

    .roadmap-pillar {
        height: 280px;
        /* Adjust heights for smaller screens */
        padding: 2rem 1rem;
    }

    .roadmap-pillar.orange {
        height: 200px;
    }

    .roadmap-pillar.pink {
        height: 240px;
    }

    .roadmap-pillar.purple {
        height: 280px;
    }

    .roadmap-pillar .roadmap-year {
        font-size: 1.5rem;
    }

    .roadmap-pillar .roadmap-milestone {
        font-size: 1.1rem;
    }

    .roadmap-pillar .roadmap-icon-wrapper {
        width: 70px;
        height: 70px;
    }

    .roadmap-pillar .roadmap-icon {
        width: 40px;
        height: 40px;
    }

    .roadmap-pillar .roadmap-number {
        width: 45px;
        height: 45px;
        font-size: 1.6rem;
    }

    .roadmap-section-bg-top-left,
    .roadmap-section-bg-top-right,
    .roadmap-section-bg-bottom-left,
    .roadmap-section-bg-bottom-right {
        width: 280px;
        height: 280px;
    }
}

@media (max-width: 767.98px) {
    .roadmap-section .roadmap-title {
        font-size: 2.2rem;
        margin-bottom: 2.5rem;
    }

    .roadmap-pillar {
        height: 250px;
        /* Further adjustment for tablets */
        margin-bottom: 2rem;
        /* Space between stacked items */
    }

    .roadmap-pillar.orange {
        height: 180px;
    }

    .roadmap-pillar.pink {
        height: 210px;
    }

    .roadmap-pillar.purple {
        height: 250px;
    }

    .roadmap-pillar .roadmap-year {
        font-size: 1.3rem;
    }

    .roadmap-pillar .roadmap-milestone {
        font-size: 1rem;
    }

    .roadmap-pillar .roadmap-icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .roadmap-pillar .roadmap-icon {
        width: 35px;
        height: 35px;
    }

    .roadmap-pillar .roadmap-number {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }

    .roadmap-section-bg-top-left,
    .roadmap-section-bg-top-right,
    .roadmap-section-bg-bottom-left,
    .roadmap-section-bg-bottom-right {
        width: 200px;
        height: 200px;
        opacity: 0.7;
    }

    .roadmap-section .top-blue-strip,
    .roadmap-section .top-red-strip,
    .roadmap-section .bottom-blue-strip,
    .roadmap-section .bottom-red-strip {
        height: 15px;
    }
}

@media (max-width: 575.98px) {
    .roadmap-section .roadmap-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .roadmap-pillar {
        height: 220px;
        /* Smallest height for mobile */
        padding: 1.5rem 0.8rem;
        margin-bottom: 1.5rem;
    }

    .roadmap-pillar.orange {
        height: 160px;
    }

    .roadmap-pillar.pink {
        height: 190px;
    }

    .roadmap-pillar.purple {
        height: 220px;
    }

    .roadmap-pillar .roadmap-year {
        font-size: 1.1rem;
    }

    .roadmap-pillar .roadmap-milestone {
        font-size: 0.9rem;
    }

    .roadmap-pillar .roadmap-icon-wrapper {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }

    .roadmap-pillar .roadmap-icon {
        width: 30px;
        height: 30px;
    }

    .roadmap-pillar .roadmap-number {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }

    .roadmap-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .roadmap-section-bg-top-left,
    .roadmap-section-bg-top-right,
    .roadmap-section-bg-bottom-left,
    .roadmap-section-bg-bottom-right {
        width: 150px;
        height: 150px;
    }
}



/* Main Footer Styles */
.main-footer {
    background-color: #f0f2f5;
    /* Light grey background */
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    /* To contain absolute strips and shapes */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Vertically align items in the middle */
    position: relative;
    /* For z-index to work against absolute elements */
    z-index: 1;
    /* Ensure content is above background shapes */
}

.footer-left {
    flex: 1;
    max-width: 55%;
    /* Adjust as needed for spacing */
    padding-right: 20px;
    /* Space between left content and right image */
}

.footer-logos {
    display: flex;
    align-items: center;
}

.prime-logo {
    max-width: 150px;
    margin-right: 20px;
}

.prime-mitra-logo {
    max-width: 157px;
}

.join-text {
    font-family: 'Montserrat', sans-serif;
    /* Assuming Montserrat is used */
    font-size: 2.8rem;
    font-weight: 800;
    color: #000;
    margin-bottom: 25px;
}

.contact-info p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.5;
}


.contact-info a {
    color: var(--bs-primary);
    /* Dark blue for links */
    text-decoration: none;
    font-weight: 600;
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-info {
    display: flex;
    justify-content: space-evenly;
    padding-right: 51px;
}

.social-links {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
    /* Space between social links */
}

.social-link :hover {
    color: #fff;
}

.social-link {
    display: flex;
    align-items: center;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
}

.social-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.company-details p {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 3px;
    font-weight: bold;
}

.footer-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hexagon-container {
    width: 350px;
    /* Adjust size of the hexagon container */
    height: 350px;
    background-color: #6A5ACD;
    /* A shade of purple for the hexagon background */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    /* Ensure image stays within hexagon */
    border: 8px solid var(--bs-primary);
    /* Darker purple border */
}

.hexagon-image {
    width: calc(100% - 16px);
    /* Image fills hexagon minus border */
    height: calc(100% - 16px);
    object-fit: cover;
    /* Cover the hexagon area */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    filter: grayscale(0%);
    /* Ensure image is colored */
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-left {
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
    }

    .footer-logos {
        justify-content: center;
    }

    .join-text {
        font-size: 2.2rem;
    }

    .social-links {
        justify-content: center;
    }

    .hexagon-container {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .main-footer {
        padding: 40px 0;
    }

    .join-text {
        font-size: 1.8rem;
    }

    .contact-info p,
    .social-link,
    .company-details p {
        font-size: 0.9rem;
    }

    .hexagon-container {
        width: 250px;
        height: 250px;
    }

    .prime-logo,
    .prime-mitra-logo {}

    .social-icon {
        width: 20px;
        height: 20px;
    }

    .top-blue-strip,
    .top-red-strip,
    .bottom-blue-strip,
    .bottom-red-strip {
        height: 15px;
    }
}

@media (max-width: 576px) {
    .main-footer {
        padding: 30px 0;
    }

    .join-text {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .contact-info p,
    .social-link,
    .company-details p {
        font-size: 0.8rem;
    }

    .hexagon-container {
        width: 200px;
        height: 200px;
        border: 5px solid var(--bs-primary);
    }

    .prime-logo,
    .prime-mitra-logo {}

    .social-icon {
        width: 18px;
        height: 18px;
    }

    .footer-left {
        margin-bottom: 30px;
    }
}



.be-your-own-boss-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to top right, rgba(106, 90, 205, 0.1) 0%, rgba(255, 69, 0, 0.05) 100%);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 500px;
}

.be-your-own-boss-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Allows content to wrap on smaller screens */
    position: relative;
    z-index: 1;
    /* Ensure content is above background elements if any */
    gap: 40px;
    /* Space between left and right columns */
}

.left-content {
    flex: 1;
    min-width: 300px;
    /* Minimum width before wrapping */
    text-align: left;
    padding-right: 20px;
    /* Space from the image */
}

.prime-mitra-logo-large {
    width: 250px;
    /* Adjust size as seen in the image */
    height: auto;
    margin-bottom: 20px;
}

.main-heading {
    font-family: 'poppins', 'sans-serif';
    font-size: 3.8rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 10px;
    line-height: 1.1;
    text-transform: uppercase;
}

.sub-heading {
    font-family: 'poppins', 'sans-serif';
    font-size: 1.6rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 0;
    line-height: 1.3;
}

.right-content {
    flex: 1;
    min-width: 300px;
    /* Minimum width before wrapping */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.image-with-icons {
    position: relative;
    width: 100%;
    max-width: 500px;
    /* Max width for the image and icon container */
    height: 100%;
    min-height: 400px;
    /* Ensure sufficient height for image and icons */
    display: flex;
    justify-content: center;
    align-items: center;
}

.person-image {
    /* width: 100%;  */
    width: 38em;
    height: auto;
    display: block;
    object-fit: contain;
    /* Ensure image fits without cropping */
}

.service-icon-list {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    /* Circle diameter relative to parent */
    height: 100%;
    /* Circle diameter relative to parent */
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Add a dotted border if desired, similar to other sections: */
    /* border: 2px dashed rgba(255, 255, 255, 0.6); */
}

.icon-item {
    position: absolute;
    width: 70px;
    /* Size of the icon circles */
    height: 70px;
    background-color: #E24E42;
    /* Red-Orange color as in image */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Add a subtle border or glow if needed */
    /* border: 2px solid rgba(255, 255, 255, 0.5); */
}

.icon-item img {
    width: 40px;
    /* Size of the actual icon graphic */
    height: 40px;
    filter: brightness(0) invert(1);
    /* Makes icon white */
}

/* Positioning for each icon (adjust these values carefully to match your image) */
/* The top/left percentages are relative to the .service-icon-list parent */
.icon-item.icon-1 {
    top: 8%;
    left: 70%;
    transform: translate(-50%, -50%);
}

.icon-item.icon-2 {
    top: 28%;
    left: 90%;
    transform: translate(-50%, -50%);
}

.icon-item.icon-3 {
    top: 50%;
    left: 95%;
    transform: translate(-50%, -50%);
}

.icon-item.icon-4 {
    top: 72%;
    left: 90%;
    transform: translate(-50%, -50%);
}

.icon-item.icon-5 {
    top: 92%;
    left: 70%;
    transform: translate(-50%, -50%);
}


/* Background triangular/angled shapes for this section */
/* These will be absolute within .be-your-own-boss-section */
.be-your-own-boss-section::before,
.be-your-own-boss-section::after {
    content: '';
    position: absolute;
    z-index: 0;
    opacity: 0.9;
}

.be-your-own-boss-section::before {
    /* Top-left blue triangle */
    top: 0;
    left: 0;
    width: 300px;
    /* Adjust size */
    height: 300px;
    /* Adjust size */
    background-color: var(--bs-primary);
    /* Dark Blue-Purple */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: translate(-50%, -50%);
    /* Adjust to move origin to center of shape */
    transform-origin: top left;
}

.be-your-own-boss-section::after {
    /* Top-right red triangle */
    top: 0;
    right: 0;
    width: 300px;
    /* Adjust size */
    height: 300px;
    /* Adjust size */
    background-color: #E24E42;
    /* Red-Orange */
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    transform: translate(50%, -50%);
    transform-origin: top right;
}

/* Section-specific top and bottom strips */
/* These colors match the top/bottom page strips, implying a design consistency */
.be-your-own-boss-section .top-blue-strip {
    height: 20px;
    background-color: var(--bs-primary);
    /* Dark Blue-Purple */
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    z-index: 2;
}

.be-your-own-boss-section .top-red-strip {
    height: 20px;
    background-color: #E24E42;
    /* Red-Orange */
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    z-index: 2;
}

.be-your-own-boss-section .bottom-blue-strip {
    height: 20px;
    background-color: var(--bs-primary);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    z-index: 2;
}

.be-your-own-boss-section .bottom-red-strip {
    height: 20px;
    background-color: #E24E42;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 50%;
    z-index: 2;
}



.revenue-streams-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 80px 0;
    background: linear-gradient(135deg, #FF6F61, #FFDDCC, #A2D2FF, #8E44AD);
    background-size: 400% 400%;
    animation: backgroundGradient 20s ease infinite;
    backdrop-filter: blur(5px);
}

@keyframes backgroundGradient {
    0% {
        background-position: 0% 50%;
    }

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

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

.revenue-streams-section .decorative-shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
    animation: float 10s ease-in-out infinite alternate;
}

.revenue-streams-section .shape-1 {
    top: 10%;
    left: 5%;
    width: 200px;
    height: 200px;
    animation-delay: 0s;
}

.revenue-streams-section .shape-2 {
    bottom: 15%;
    right: 10%;
    width: 250px;
    height: 250px;
    animation-delay: 3s;
}

.revenue-streams-section .shape-3 {
    top: 50%;
    left: 40%;
    width: 150px;
    height: 150px;
    animation-delay: 6s;
}

@keyframes float {
    0% {
        transform: translate(0, 0);
    }

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

.revenue-streams-section .container-fluid {
    padding: 0 30px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.revenue-streams-section .section-header {
    text-align: center;
    margin-bottom: 70px;
}

.revenue-streams-section .section-header h1 {
    font-size: 4.5rem;
    font-weight: 700;
    color: #2c3e50;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    background: linear-gradient(45deg, #222, #222);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.revenue-streams-section .section-header p {
    font-size: 1.3rem;
    color: #667788;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

.revenue-streams-section .revenue-card {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 35px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.revenue-streams-section .revenue-card::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--bs-mitra-orange), var(--bs-mitra-orange), #9D4EDD);
    border-radius: 22px;
    z-index: 0;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.revenue-streams-section .revenue-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bs-mitra-orange), #9D4EDD);
    border-radius: 20px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

.revenue-streams-section .revenue-card-content {
    position: relative;
    z-index: 2;
    transition: color 0.4s ease-out, transform 0.4s ease-out;
    transform: translateY(0);
        display: flex
;
    align-items: center;
    flex-direction: column;
}

.revenue-streams-section .revenue-card .icon {
    font-size: 4rem;
    color: var(--bs-mitra-orange);
    margin-bottom: 25px;
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.revenue-streams-section .revenue-card h3 {

    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    transition: color 0.4s ease-out;
}

.revenue-streams-section .revenue-card p {
    font-size: 1.1rem;
    color: #667788;
    line-height: 1.7;
    transition: color 0.4s ease-out;
}

.revenue-streams-section .revenue-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.8);
}

.revenue-streams-section .revenue-card:hover::after {
    opacity: 1;
    animation: rotateBorder 3s linear infinite;
}

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

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

.revenue-streams-section .revenue-card:hover::before {
    transform: translateY(0);
}

.revenue-streams-section .revenue-card:hover .revenue-card-content {
    transform: translateY(-5px);
}

.revenue-streams-section .revenue-card:hover .revenue-card-content .icon {
    color: #ecf0f1;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transform: scale(1.15) translateY(-5px);
}

.revenue-streams-section .revenue-card:hover .revenue-card-content h3,
.revenue-streams-section .revenue-card:hover .revenue-card-content p {
    color: #ecf0f1;
}

.revenue-streams-section .more-text {
    text-align: center;
    margin-top: 80px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #6A0DAD;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
}

.floating-elements-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #0052cc, #d9d3fa, #ec5643);
    background-size: 400% 400%;
    animation: backgroundShift 15s ease infinite;
    overflow: hidden;
    color: #333;
    position: relative;
}

@keyframes backgroundShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.floating-elements-section .decorative-blob {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
    animation: floatAndPulse 15s ease-in-out infinite alternate;
}

.floating-elements-section .blob-1 {
    top: 10%;
    left: 5%;
    width: 250px;
    height: 250px;
    animation-delay: 0s;
}

.floating-elements-section .blob-2 {
    bottom: 15%;
    right: 8%;
    width: 300px;
    height: 300px;
    animation-delay: 4s;
}

.floating-elements-section .blob-3 {
    top: 40%;
    right: 20%;
    width: 180px;
    height: 180px;
    animation-delay: 8s;
}

.floating-elements-section .blob-4 {
    bottom: 5%;
    left: 25%;
    width: 220px;
    height: 220px;
    animation-delay: 12s;
}

@keyframes floatAndPulse {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.08;
    }

    50% {
        transform: translate(30px, 30px) scale(1.05);
        opacity: 0.12;
    }

    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.08;
    }
}

.floating-elements-section .container-fluid {
    max-width: 1400px;
    position: relative;
    z-index: 10;
}
.section-main-heading-deposit{
     color: #121010;
      font-size: 7.5rem;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.lead-section-description{
    color: var(--bs-mitra-orange); 
       color: #121010;
}




.floating-elements-section .mobile-mockup:hover {
    transform: rotate(-3deg) scale(1.03);
}

.floating-elements-section .mobile-screen {
    width: 280px;
    height: 560px;
    background-color: #fff;
    border-radius: 38px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-elements-section .mobile-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.floating-elements-section .info-element-col {
    position: relative;
    min-height: 600px;
    /* Keep height to maintain layout on desktop */
    display: flex;
    /* Adjust to better arrange elements without the main one */
    flex-wrap: wrap;
    /* Allow elements to wrap */
    justify-content: center;
    /* Center elements in the column */
    align-items: center;
    /* Vertically align */
    align-content: center;
    /* Distribute rows/columns evenly */
}

.floating-elements-section .info-element {
    position: absolute;
    /* Keep absolute for desktop positioning */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 20px 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: center;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* --- FADE UP EFFECT CSS (Initial Hidden State) --- */
    opacity: 0;
    transform: translateY(20px);
    animation-fill-mode: forwards;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
}

.floating-elements-section .info-element:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
    background: rgb(187, 148, 91); 
    border-color: #0052cc; 
}
/* .element-number {
    position: absolute;
    top: 10px; 
    left: 15px; 
    font-size: 3rem;
    font-weight: bold;
    color: #ced4da; 
    opacity: 0.5; 
    line-height: 1; 
    z-index: 1; 
} */
.element-number {
     position: absolute;
    top: 16px;
    left: 2px;
    font-size: 20px;
    font-weight: bold;
    background-color: var(--bs-primary);
    border-radius: 50%;
    color: #dbdbcf;
    width: 34px;
    height: 31px;
    display: flex
;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.info-element {
    padding-left: 60px;
}


/* Define the fade-up animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Class to trigger the animation */
.floating-elements-section .info-element.is-visible {
    animation-name: fadeUp;
}

.floating-elements-section .info-element h4 {

    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bs-mitra-orange);
    margin-bottom: 5px;
}

.floating-elements-section .info-element p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 0;
}

.floating-elements-section .info-element:hover {
    transform: translateY(-8px) scale(1.03);
        box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
    background-color: #edf5ff;
}

.italic-zero {
    font-style: italic; /* Ensures the '0' is italic */
    /* You can add more styles here if needed, e.g.,
    color: #ff6f61;
    font-size: 1.1em;
    */
}

/* Make sure your .zero-heading styles are also correct */
.zero-heading {
    display: block;
    font-size: 8.5rem; /* Adjust as needed */
    font-weight: bold;
 letter-spacing: 12px;
    /* If you added typing effect, ensure those styles are here too */
}

/* Other existing styles for deposit-subheading and partnership-subheading */
.deposit-subheading {
    display: block;
    font-size: 6rem;
    font-weight: bold;
    line-height: 1;
     letter-spacing: 4px;
}

.partnership-subheading {
    display: block;
    font-size: 5rem;
    font-weight: normal;
    letter-spacing: 0px;
    line-height: 1;
}
/* Re-positioning of individual info elements now that the main one is gone */
/* These values will need fine-tuning to achieve the desired floating spread */
/* .floating-elements-section .element-1 {
    top: 15%;
    left: 5%;
}


.floating-elements-section .element-2 {
    top: 10%;
    right: 5%;
}


.floating-elements-section .element-3 {
    bottom: 15%;
    left: 10%;
}


.floating-elements-section .element-4 {
    bottom: 10%;
    right: 10%;
}


.floating-elements-section .element-5 {
    top: 40%;
    left: 25%;
}


.floating-elements-section .element-6 {
    top: 45%;
    right: -12%;
} */

.floating-elements-section .element-1 {
    top: 15%;
    left: 5%;
}

/* Top-left */
.floating-elements-section .element-2 {
    top: 10%;
    right: 5%;
}

/* Top-right */
.floating-elements-section .element-3 {
    bottom: 15%;
    left: 10%;
}

/* Bottom-left */
.floating-elements-section .element-4 {
    bottom: 10%;
    right: 10%;
}

/* Bottom-right */
.floating-elements-section .element-5 {
    top: 40%;
    left: 25%;
}

/* Mid-left-center */
.floating-elements-section .element-6 {
    top: 45%;
    right: -12%;
}




@media (min-width: 992px) {
    .floating-elements-section .mobile-mockup-col {
        order: 1;
        justify-content: flex-end;
        padding-right: 50px;
        margin-bottom: 0;
    }

    .floating-elements-section .info-element-col {
        order: 2;
        justify-content: center;
        /* Center content now that main element is gone */
        align-items: center;
        /* Center content now that main element is gone */
        min-height: 600px;
    }
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .floating-elements-section {
        padding: 40px 15px;
    }

    .floating-elements-section .mobile-mockup {
        width: 250px;
        height: 500px;
        border-radius: 35px;
        transform: rotate(0deg);
        margin-bottom: 40px;
    }

    .floating-elements-section .mobile-screen {
        width: 230px;
        height: 460px;
        border-radius: 28px;
    }

    .floating-elements-section .info-element-col {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 20px;
    }

    .floating-elements-section .info-element {
        position: relative;
        top: auto;
        left: auto;
        transform: none !important;
        margin-bottom: 25px;
        width: 90%;
        max-width: 400px;
        animation: none;
        backdrop-filter: none;
        border: none;
        background: rgba(255, 255, 255, 1);
        opacity: 1;
        /* Ensure visible on mobile after stacking */
    }

    .floating-elements-section .info-element:hover {
        transform: none;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 1);
    }

    .revenue-streams-section .section-header h1 {
        font-size: 3rem;
        margin-bottom: 15px;
    }

    .revenue-streams-section .section-header p {
        font-size: 1rem;
    }

    .revenue-streams-section .revenue-card {
        padding: 30px;
    }

    .revenue-streams-section .revenue-card .icon {
        font-size: 3rem;
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }

    .revenue-streams-section .revenue-card h3 {
        font-size: 1.6rem;
    }

    .revenue-streams-section .decorative-shape {
        filter: blur(30px);
    }

    .main-heading {
        font-size: 3rem;
    }

    .sub-heading {
        font-size: 1.4rem;
    }

    .be-your-own-boss-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .left-content {
        padding-right: 0;
        text-align: center;
    }

    .prime-mitra-logo-large {
        margin: 0 auto 20px auto;
        /* Center logo when stacked */
    }

    .person-image {
        max-width: 400px;
        /* Limit image size on smaller screens */
    }

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

    .icon-item img {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 767px) {

    .floating-elements-section .element-1,
.floating-elements-section .element-2,
.floating-elements-section .element-3,
.floating-elements-section .element-4,
.floating-elements-section .element-5,
.floating-elements-section .element-6 {
    top: unset;
    left: unset;
    right: unset;
}

    .floating-elements-section .mobile-mockup {
        width: 220px;
        height: 440px;
        border-radius: 30px;
    }

    .floating-elements-section .mobile-screen {
        width: 205px;
        height: 410px;
        border-radius: 25px;
    }

    .floating-elements-section .info-element h4 {
        font-size: 1.2rem;
    }

    .floating-elements-section .info-element p {
        font-size: 0.9rem;
    }

    .revenue-streams-section .section-header {
        margin-bottom: 50px;
    }

    .revenue-streams-section .section-header h1 {
        font-size: 2.5rem;
    }

    .revenue-streams-section .revenue-card {
        margin-bottom: 30px;
        padding: 25px;
    }

    .revenue-streams-section .more-text {
        margin-top: 50px;
        font-size: 1.2rem;
    }

    .revenue-streams-section .decorative-shape {
        display: none;
    }

    .be-your-own-boss-section {
        padding: 60px 0;
    }

    .main-heading {
        font-size: 2.5rem !important;
    }

    .sub-heading {
        font-size: 1.2rem;
    }

    .prime-mitra-logo-large {
        width: 200px;
    }

    .icon-item {
        width: 50px;
        height: 50px;
    }

    .icon-item img {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 575px) {

    .floating-elements-section .mobile-mockup {
        width: 180px;
        height: 360px;
        border-radius: 25px;
    }

    .floating-elements-section .mobile-screen {
        width: 168px;
        height: 336px;
        border-radius: 20px;
    }

    .floating-elements-section .info-element {
        padding: 15px 20px;
        margin-bottom: 20px;
    }

    .floating-elements-section .info-element h4 {
        font-size: 1.1rem;
    }

    .floating-elements-section .info-element p {
        font-size: 0.85rem;
    }

    .revenue-streams-section .section-header h1 {
        font-size: 2rem;
    }

    .revenue-streams-section .revenue-card {
        padding: 20px;
    }

    .revenue-streams-section .revenue-card .icon {
        font-size: 2.5rem;
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }

    .revenue-streams-section .revenue-card h3 {
        font-size: 1.4rem;
    }

    .revenue-streams-section .revenue-card p {
        font-size: 0.9rem;
    }

    .be-your-own-boss-section {
        padding: 40px 0;
    }

    .main-heading {
        /* font-size: 1rem !important; */
        font-size: 36px !important;
        padding-right: 24px;
    }

    .sub-heading {
        font-size: 1rem;
    }

    .prime-mitra-logo-large {
        width: 180px;
    }

    .icon-item {
        width: 45px;
        height: 45px;
    }

    .icon-item img {
        width: 25px;
        height: 25px;
    }
}


.gradient-button {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    padding: 9px 21px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Soft shadow */
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    /* Prevent text from wrapping */

    /* --- Floating Button Properties --- */
    position: fixed;
    /* Make it fixed relative to the viewport */
    bottom: 20px;
    /* Distance from bottom */
    right: 20px;
    /* Distance from right */
    z-index: 999;
    /* Ensure it's above other content */


}


.gradient-button:hover {
    background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
    /* Reverse gradient or new colors on hover */
    transform: translateY(-5px);
    /* Slightly more pronounced lift effect for FAB */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    /* Enhanced shadow on hover */
}



.mitra-submit-btn {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mitra-submit-btn:hover {
    background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* POPUP */
/* Pop-up Overlay Styles */
.popup-overlay {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stays on top */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Dark semi-transparent background */
    display: flex;
    /* Using flex for centering */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Ensure it's on top of everything */

    /* Animation properties for initial state (hidden) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Pop-up Content Box Styles */
.popup-content {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 700px;
    position: relative;
    transform: scale(0.7);
    /* Initial smaller size for animation */
    transition: transform 0.3s ease;
    /* Animation for the content */
}

/* Animation for when the pop-up shows */
.popup-overlay.show .popup-content {
    transform: scale(1);
    /* Scale to original size */
}

/* Close button for the pop-up */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-btn:hover {
    color: #333;
}

/* Form specific styles */
.popup-content h2 {
    margin-top: 0;
    color: #333;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 18px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: calc(100% - 20px);
    /* Adjust for padding */
    padding: 22px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
    /* Include padding in width */
}

.form-group textarea {
    resize: vertical;
    /* Allow vertical resizing */
}

.submit-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1.1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    margin-top: 15px;
}

.submit-btn:hover {
    background-color: #218838;
}


.foleting-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 50px;
    right: 40px;
    width: 50px;
    height: 40px;
    margin: 0px;
    transition: 0.5s;
    z-index: 999;
    ;
}


.ReadMore-btn {
    background-color: var(--bs-mitra-orange);
    color: white;
    border: none;
    padding: 10px 48px;
    font-size: 23px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ReadMore-btn:hover {
    /* background-color: #0056b3; */
}

.download_floating_btn{
     position: fixed;
  bottom: 60px;
right: 20px;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  z-index: 1000;
}
.download_contact_icon{
      background-color: #e91e63;
  color: #fff;
  width: 60px;
  height: 60px;
  font-size:30px;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translatey(0px);
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 0 0 #e91e63;
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  font-weight: normal;
  font-family: sans-serif;
  text-decoration: none !important;
  transition: all 300ms ease-in-out;
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}


@media (max-width: 767px) {
    .bg-breadcrumb {
        min-height: 179px !important;
    }

    .prime-mitra-section {
        display: none;
    }

    .ReadMore-btn {
        padding: 6px 15px;
        font-size: 12px;
    }

    .breadcrumb-heading{
            font-size: 47px !important;
    }
    .breadcrumb-content {
        padding-top: 19px !important;
        left: 5% !important;
}
.section-main-heading-deposit{
    font-size: 5.4rem;
}
}