/*================================================
 DHANI FINANCE ABOUT PAGE PREMIUM UI
================================================*/


* {
    box-sizing: border-box;
}


body {
    font-family: 'Inter', Arial, sans-serif;
}



/*==============================
 COMMON CONTAINER
==============================*/


.about-container {

    width: 90%;
    max-width: 1200px;
    margin: auto;

}



/*==============================
 HERO SECTION
==============================*/


.about-hero {

    padding: 100px 20px;

    background:
        linear-gradient(135deg, #f4fff8, #ffffff);

    overflow: hidden;

}



.about-hero .about-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

}



.about-content {

    flex: 1;

}



.about-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: #e7fff0;

    color: #00843d;

    padding: 10px 22px;

    border-radius: 50px;

    font-weight: 700;

    font-size: 15px;

}



.about-content h1 {

    font-size: 52px;

    line-height: 1.2;

    margin: 25px 0;

    color: #102030;

    font-weight: 900;

}



.about-content h1 span {

    display: block;

    color: #00843d;

}



.about-content p {

    font-size: 18px;

    line-height: 1.8;

    color: #555;

    max-width: 650px;

}





.about-buttons {

    display: flex;

    gap: 20px;

    margin-top: 35px;

}



.about-buttons a {


    text-decoration: none;

    padding: 16px 35px;

    border-radius: 50px;

    font-weight: 800;

    transition: .3s;

}



.about-buttons a:first-child {

    background: #00843d;

    color: white;

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

}



.about-buttons a:last-child {

    border: 2px solid #00843d;

    color: #00843d;

}





.about-buttons a:hover {

    transform: translateY(-5px);

}







/*==============================
 HERO CARD
==============================*/


.about-card {


    width: 400px;

    background: white;

    padding: 45px 35px;

    border-radius: 35px;

    box-shadow:

        0 20px 60px rgba(0, 0, 0, .12);

    position: relative;

}



.about-card:before {


    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    background: #e7fff0;

    border-radius: 50%;

    top: -40px;

    right: -40px;

    z-index: 0;

}




.card-icon {

    width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #00843d;

    color: white;

    font-size: 32px;

    position: relative;

    z-index: 1;

}



.about-card h2 {

    font-size: 28px;

    margin: 25px 0 10px;

    color: #102030;

}



.about-card p {

    color: #666;

    line-height: 1.7;

}




/*==============================
 STATS
==============================*/


.about-stats {


    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-top: 35px;

}



.about-stats div {


    background: #f6fff9;

    padding: 20px 10px;

    border-radius: 18px;

    text-align: center;

}



.about-stats strong {


    display: block;

    font-size: 22px;

    color: #00843d;

}



.about-stats span {

    font-size: 13px;

    color: #555;

}






/*==============================
 DESCRIPTION SECTION
==============================*/


.about-description {


    padding: 100px 20px;

    background: white;

}




.section-title {

    text-align: center;

    margin-bottom: 50px;

}



.section-title span {


    background: #e7fff0;

    color: #00843d;

    padding: 8px 20px;

    border-radius: 50px;

    font-weight: 700;

}



.section-title h2 {


    font-size: 40px;

    margin-top: 20px;

    color: #102030;

    font-weight: 900;

}




.description-box {


    background: #f8fffb;

    padding: 50px;

    border-radius: 35px;

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

}



.description-box p {


    font-size: 17px;

    line-height: 1.9;

    color: #444;

    margin-bottom: 20px;

}




/*==============================
 ANIMATION
==============================*/


.about-content,
.about-card,
.description-box {

    animation: fadeUp .8s ease;

}



@keyframes fadeUp {


    from {

        opacity: 0;

        transform: translateY(30px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }


}







/*==============================
 RESPONSIVE
==============================*/


@media(max-width:992px) {


    .about-hero .about-container {


        flex-direction: column;

        text-align: center;

    }



    .about-content p {

        margin: auto;

    }



    .about-buttons {

        justify-content: center;

    }



    .about-card {

        width: 100%;

        max-width: 420px;

    }



}





@media(max-width:600px) {


    .about-content h1 {

        font-size: 34px;

    }



    .about-content p {

        font-size: 16px;

    }



    .about-buttons {

        flex-direction: column;

    }



    .about-buttons a {

        text-align: center;

    }



    .about-stats {

        grid-template-columns: 1fr;

    }



    .description-box {

        padding: 25px;

    }



    .section-title h2 {

        font-size: 30px;

    }



}



/*================================================
 DHANI FINANCE ABOUT PAGE
 MISSION VISION & CORE VALUES SECTION
 PREMIUM UI
================================================*/


/* MAIN SECTION */

.mission-section {

    padding: 100px 20px;

    background: #f8fffb;

}




/* CONTAINER */

.mission-section .about-container {

    max-width: 1200px;

    margin: auto;

}





/* SECTION HEADING */

.mission-section .section-title {

    text-align: center;

    margin-bottom: 60px;

}



.mission-section .section-title span {

    display: inline-block;

    background: #e8fff1;

    color: #00843d;

    padding: 10px 22px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 700;

}



.mission-section .section-title h2 {

    font-size: 42px;

    color: #102030;

    font-weight: 900;

    margin: 25px 0 15px;

}



.mission-section .section-title p {

    max-width: 750px;

    margin: auto;

    font-size: 17px;

    color: #666;

    line-height: 1.8;

}





/*================================
 MISSION VISION GRID
================================*/


.mission-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}





.mission-card {

    background: #ffffff;

    padding: 45px;

    border-radius: 30px;

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

    position: relative;

    overflow: hidden;

    transition: all .3s ease;

}



.mission-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(0, 132, 61, .15);

}





.mission-card:before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    background: #e8fff1;

    border-radius: 50%;

    right: -50px;

    top: -50px;

}





/* ICON */

.mission-icon {

    width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #00843d;

    color: #ffffff;

    border-radius: 20px;

    font-size: 32px;

    position: relative;

}





.mission-card h3 {

    font-size: 28px;

    color: #102030;

    margin: 25px 0 15px;

    font-weight: 800;

}



.mission-card p {

    font-size: 16px;

    color: #555;

    line-height: 1.8;

    margin-bottom: 15px;

}







/*================================
 CORE VALUES
================================*/


.values-wrapper {

    margin-top: 80px;

    text-align: center;

}



.values-wrapper h2 {

    font-size: 36px;

    color: #102030;

    font-weight: 900;

    margin-bottom: 40px;

}





.values-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}





.value-card {

    background: #ffffff;

    padding: 35px 25px;

    border-radius: 25px;

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

    transition: .3s ease;

}





.value-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 50px rgba(0, 132, 61, .15);

}




.value-card i {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    background: #e8fff1;

    color: #00843d;

    border-radius: 50%;

    font-size: 28px;

}



.value-card h3 {

    font-size: 21px;

    color: #102030;

    margin: 20px 0 12px;

    font-weight: 800;

}



.value-card p {

    font-size: 15px;

    color: #666;

    line-height: 1.7;

}





/*================================
 MOBILE RESPONSIVE
================================*/


@media(max-width:992px) {


    .values-grid {

        grid-template-columns: repeat(2, 1fr);

    }


}



@media(max-width:768px) {


    .mission-section {

        padding: 70px 20px;

    }


    .mission-section .section-title h2 {

        font-size: 30px;

    }



    .mission-grid {

        grid-template-columns: 1fr;

    }



    .mission-card {

        padding: 30px;

    }



    .values-grid {

        grid-template-columns: 1fr;

    }



    .values-wrapper h2 {

        font-size: 28px;

    }


}



/*====================================
 DHANI FINANCE SERVICES SECTION
====================================*/


.services-section {

    padding: 100px 20px;

    background: #ffffff;

}



.services-section .about-container {

    max-width: 1200px;

    margin: auto;

}





.services-grid {


    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 60px;

}





.service-card {


    background: #ffffff;

    padding: 40px 30px;

    border-radius: 30px;

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

    border: 1px solid rgba(0, 132, 61, .08);

    transition: .35s ease;

}



.service-card:hover {


    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(0, 132, 61, .15);


}





.service-icon {


    height: 75px;

    width: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e8fff1;

    color: #00843d;

    border-radius: 22px;

    font-size: 32px;


}




.service-card h3 {


    font-size: 26px;

    font-weight: 900;

    color: #102030;

    margin: 25px 0 15px;


}





.service-card p {


    font-size: 16px;

    line-height: 1.8;

    color: #555;

    margin-bottom: 25px;


}




.service-card a {


    text-decoration: none;

    color: #00843d;

    font-weight: 800;

    display: flex;

    align-items: center;

    gap: 10px;


}





.service-card a:hover {

    gap: 15px;

}







/* BOTTOM CTA BOX */


.service-bottom-box {


    margin-top: 70px;

    padding: 50px;

    background: #f7fff9;

    border-radius: 35px;

    text-align: center;


}



.service-bottom-box h2 {


    font-size: 34px;

    font-weight: 900;

    color: #102030;

    margin-bottom: 20px;


}



.service-bottom-box p {


    font-size: 17px;

    line-height: 1.9;

    color: #555;

    max-width: 950px;

    margin: 15px auto;


}



.service-bottom-box a {


    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    background: #00843d;

    color: white;

    padding: 16px 35px;

    border-radius: 50px;

    font-weight: 800;

    text-decoration: none;


}




@media(max-width:992px) {


    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }


}



@media(max-width:768px) {


    .services-grid {

        grid-template-columns: 1fr;

    }



    .service-bottom-box {

        padding: 30px;

    }



    .service-bottom-box h2 {

        font-size: 28px;

    }


}



/*====================================
 WHY CHOOSE DHANI FINANCE SECTION
====================================*/


.why-choose-section {


    padding: 100px 20px;

    background: #f8fffb;


}




.why-choose-section .about-container {

    max-width: 1200px;

    margin: auto;

}






/* TRUST STATS */


.trust-stats-grid {


    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

    margin-top: 60px;


}




.trust-stat-card {


    background: white;

    padding: 35px 25px;

    border-radius: 30px;

    text-align: center;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .07);

    transition: .3s;


}




.trust-stat-card:hover {


    transform: translateY(-8px);

    box-shadow: 0 25px 60px rgba(0, 132, 61, .15);


}




.stat-number {


    font-size: 42px;

    font-weight: 900;

    color: #00843d;

    margin-bottom: 15px;


}





.trust-stat-card h3 {


    font-size: 21px;

    font-weight: 800;

    color: #102030;

    margin-bottom: 12px;


}





.trust-stat-card p {


    font-size: 15px;

    line-height: 1.7;

    color: #666;


}







/* TRUST FEATURES */


.trust-feature-grid {


    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-top: 70px;


}




.trust-feature {


    background: white;

    padding: 35px;

    border-radius: 30px;

    display: flex;

    gap: 20px;

    align-items: flex-start;

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

    transition: .3s;


}



.trust-feature:hover {


    transform: translateY(-8px);


}




.trust-feature i {


    height: 60px;

    width: 60px;

    min-width: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #e8fff1;

    color: #00843d;

    font-size: 25px;

    border-radius: 18px;


}




.trust-feature h3 {


    font-size: 21px;

    font-weight: 800;

    color: #102030;

    margin-bottom: 10px;


}





.trust-feature p {


    font-size: 15px;

    line-height: 1.8;

    color: #666;


}







@media(max-width:992px) {


    .trust-stats-grid {


        grid-template-columns: repeat(2, 1fr);


    }



    .trust-feature-grid {


        grid-template-columns: 1fr;


    }



}




@media(max-width:600px) {


    .trust-stats-grid {


        grid-template-columns: 1fr;


    }



    .trust-feature {


        flex-direction: column;


    }



    .stat-number {


        font-size: 35px;


    }



}


/*====================================
 DHANI FINANCE LOAN PROCESS SECTION
====================================*/


.loan-process-section {


    padding: 100px 20px;

    background: white;


}





.loan-process-section .about-container {


    max-width: 1200px;

    margin: auto;


}







/* PROCESS WRAPPER */


.process-wrapper {


    margin-top: 70px;

    position: relative;


}



.process-wrapper:before {


    content: "";

    position: absolute;

    left: 35px;

    top: 0;

    height: 100%;

    width: 3px;

    background: #00843d;


}







.process-step {


    display: flex;

    align-items: flex-start;

    gap: 25px;

    margin-bottom: 45px;

    position: relative;


}







.step-number {


    height: 45px;

    width: 45px;

    background: #00843d;

    color: white;

    border-radius: 50%;


    display: flex;

    align-items: center;

    justify-content: center;


    font-weight: 900;

    z-index: 2;


}





.step-icon {


    height: 75px;

    width: 75px;


    display: flex;

    align-items: center;

    justify-content: center;


    background: #e8fff1;

    color: #00843d;


    font-size: 30px;


    border-radius: 22px;


}




.step-content {


    background: white;

    padding: 30px;


    border-radius: 25px;


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


    flex: 1;


}





.step-content h3 {


    font-size: 25px;

    font-weight: 900;

    color: #102030;

    margin-bottom: 12px;


}





.step-content p {


    font-size: 16px;

    line-height: 1.8;

    color: #666;


}







/* CTA */


.process-cta {


    margin-top: 70px;


    padding: 50px;


    background: #00843d;


    border-radius: 35px;


    text-align: center;


    color: white;


}




.process-cta h2 {


    font-size: 35px;

    font-weight: 900;

    margin-bottom: 15px;


}




.process-cta p {


    font-size: 17px;

    margin-bottom: 30px;


}





.process-cta a {


    display: inline-flex;

    align-items: center;

    gap: 10px;


    background: white;

    color: #00843d;


    padding: 16px 35px;


    border-radius: 50px;


    font-weight: 900;


    text-decoration: none;


}





@media(max-width:768px) {


    .process-wrapper:before {


        left: 22px;


    }



    .process-step {


        gap: 15px;


    }



    .step-number {


        height: 40px;

        width: 40px;


    }



    .step-icon {


        height: 60px;

        width: 60px;

        font-size: 22px;


    }



    .step-content {


        padding: 22px;


    }



    .step-content h3 {


        font-size: 21px;


    }



    .process-cta {


        padding: 30px;


    }



    .process-cta h2 {


        font-size: 27px;


    }


}