/*=========================================
  EMI Calculator Premium UI
  File : assets/css/emi.css
==========================================*/

:root {

    --primary: #ff6b00;
    --secondary: #ff9f43;
    --dark: #0f172a;
    --dark2: #1e293b;
    --white: #ffffff;
    --text: #334155;
    --border: #e5e7eb;
    --success: #16a34a;

    --radius: 20px;

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

    --transition: .35s ease;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;

    background: #f5f7fb;

    color: var(--text);

    line-height: 1.7;

}

img {

    max-width: 100%;

    display: block;

}

a {

    text-decoration: none;

    transition: var(--transition);

}

.container {

    width: 100%;

    max-width: 1200px;

    margin: auto;

    padding: 0 20px;

}

/*==========================
Hero
===========================*/

.emi-page {

    padding: 70px 0;

    background:
        linear-gradient(135deg,
            #fff8f1 0%,
            #f7fbff 100%);

}

.emi-header {

    text-align: center;

    margin-bottom: 50px;

}

.badge {

    display: inline-block;

    padding: 10px 22px;

    border-radius: 100px;

    background: rgba(255, 107, 0, .12);

    color: var(--primary);

    font-weight: 700;

    font-size: 14px;

    letter-spacing: .5px;

    margin-bottom: 18px;

}

.emi-header h1 {

    font-size: 48px;

    font-weight: 800;

    color: var(--dark);

    margin-bottom: 15px;

    line-height: 1.2;

}

.emi-header p {

    max-width: 760px;

    margin: auto;

    font-size: 18px;

    color: #64748b;

}

/*==========================
Calculator Box
===========================*/

.emi-box {

    display: grid;

    grid-template-columns: 1fr 420px;

    gap: 35px;

    align-items: start;

}

/*==========================
Calculator Card
===========================*/

.calculator {

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .8);

    border-radius: 24px;

    padding: 35px;

    box-shadow: var(--shadow);

}

.calculator h2 {

    font-size: 28px;

    font-weight: 800;

    margin-bottom: 30px;

    color: var(--dark);

}

.form-group {

    margin-bottom: 25px;

}

.form-group label {

    display: block;

    font-weight: 700;

    margin-bottom: 10px;

    color: var(--dark);

}

.form-group input {

    width: 100%;

    height: 58px;

    border: 1px solid #dbe3ef;

    border-radius: 14px;

    padding: 0 18px;

    font-size: 18px;

    outline: none;

    transition: .3s;

    background: #fff;

}

.form-group input:focus {

    border-color: var(--primary);

    box-shadow:

        0 0 0 4px rgba(255, 107, 0, .15);

}

/*==========================
Button
===========================*/

#calculateBtn {

    width: 100%;

    height: 60px;

    border: none;

    border-radius: 15px;

    background:

        linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    color: #fff;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    transition: .35s;

    box-shadow:

        0 15px 35px rgba(255, 107, 0, .30);

}

#calculateBtn:hover {

    transform: translateY(-3px);

    box-shadow:

        0 20px 40px rgba(255, 107, 0, .40);

}

/*==========================
Result Panel
===========================*/

.result {

    display: flex;

    flex-direction: column;

    gap: 22px;

}

.card {

    background: #fff;

    border-radius: 22px;

    padding: 30px;

    box-shadow: var(--shadow);

    position: relative;

    overflow: hidden;

    transition: .35s;

}

.card:hover {

    transform: translateY(-6px);

}

.card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 6px;

    height: 100%;

    background:

        linear-gradient(180deg,
            var(--primary),
            var(--secondary));

}

.card h4 {

    font-size: 16px;

    color: #64748b;

    margin-bottom: 12px;

    font-weight: 600;

}

.card h2 {

    font-size: 34px;

    font-weight: 800;

    color: var(--dark);

    word-break: break-word;

}


/*=========================================
 Premium Result Cards
=========================================*/

.result .card:nth-child(1) {
    border-top: 4px solid #ff6b00;
}

.result .card:nth-child(2) {
    border-top: 4px solid #16a34a;
}

.result .card:nth-child(3) {
    border-top: 4px solid #2563eb;
}

.card p {
    font-size: 14px;
    color: #64748b;
    margin-top: 10px;
}

/*=========================================
 Number Animation
=========================================*/

#emiResult,
#interestResult,
#paymentResult {

    transition: .4s;

    font-variant-numeric: tabular-nums;

}

/*=========================================
 Premium Inputs
=========================================*/

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

input[type="number"] {

    appearance: textfield;

}

/*=========================================
 Floating Background
=========================================*/

.emi-page {

    position: relative;

    overflow: hidden;

}

.emi-page::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    background: rgba(255, 107, 0, .08);

    border-radius: 50%;

    top: -180px;

    left: -120px;

    filter: blur(40px);

    z-index: 0;

}

.emi-page::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    background: rgba(37, 99, 235, .08);

    border-radius: 50%;

    bottom: -150px;

    right: -120px;

    filter: blur(40px);

    z-index: 0;

}

.container {

    position: relative;

    z-index: 2;

}

/*=========================================
 Glass Effect
=========================================*/

.calculator,
.card {

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

}

/*=========================================
 Hover Animation
=========================================*/

.calculator:hover {

    transform: translateY(-6px);

    transition: .35s;

}

.card:hover h2 {

    color: #ff6b00;

    transition: .35s;

}

/*=========================================
 Badge Animation
=========================================*/

.badge {

    animation: badgePulse 2.5s infinite;

}

@keyframes badgePulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}

/*=========================================
 Fade Animation
=========================================*/

.emi-header,
.calculator,
.result .card {

    animation: fadeUp .8s ease;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*=========================================
 Responsive
=========================================*/

@media(max-width:1100px) {

    .emi-box {

        grid-template-columns: 1fr;

    }

    .result {

        margin-top: 10px;

    }

}

@media(max-width:768px) {

    .emi-page {

        padding: 45px 0;

    }

    .emi-header h1 {

        font-size: 34px;

    }

    .emi-header p {

        font-size: 16px;

    }

    .calculator {

        padding: 25px;

    }

    .card {

        padding: 22px;

    }

    .card h2 {

        font-size: 28px;

    }

    #calculateBtn {

        height: 55px;

        font-size: 17px;

    }

}

@media(max-width:576px) {

    .container {

        padding: 0 15px;

    }

    .emi-header h1 {

        font-size: 28px;

    }

    .badge {

        font-size: 12px;

        padding: 8px 16px;

    }

    .form-group input {

        height: 52px;

        font-size: 16px;

    }

    .card h2 {

        font-size: 24px;

    }

    .card h4 {

        font-size: 15px;

    }

}




/*=========================
Why Dhani Section
=========================*/

.why-dhani {

    padding: 90px 0;

    background: #ffffff;

}

.section-title {

    max-width: 850px;

    margin: auto;

    text-align: center;

    margin-bottom: 60px;

}

.section-badge {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    background: #fff3eb;

    color: #ff6b00;

    font-weight: 700;

    margin-bottom: 15px;

}

.section-title h2 {

    font-size: 42px;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 18px;

    line-height: 1.3;

}

.section-title p {

    font-size: 18px;

    color: #64748b;

}

.why-grid {

    display: grid;

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

    gap: 25px;

}

.why-card {

    background: #fff;

    padding: 35px;

    border-radius: 22px;

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

    transition: .35s;

    border: 1px solid #eef2f7;

}

.why-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 50px rgba(255, 107, 0, .15);

}

.icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, #ff6b00, #ff9f43);

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    margin-bottom: 20px;

}

.why-card h3 {

    font-size: 22px;

    margin-bottom: 12px;

    color: #0f172a;

}

.why-card p {

    font-size: 16px;

    color: #64748b;

    line-height: 1.8;

}

@media(max-width:992px) {

    .why-grid {

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

    }

}

@media(max-width:768px) {

    .section-title h2 {

        font-size: 30px;

    }

    .why-grid {

        grid-template-columns: 1fr;

    }

}




/*=================================
Loan Information
=================================*/

.loan-info {

    padding: 90px 0;

    background: #f8fafc;

}

.loan-info-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 40px;

    align-items: start;

    margin-top: 60px;

}

.loan-content h3 {

    font-size: 30px;

    color: #0f172a;

    margin-bottom: 15px;

    margin-top: 30px;

    font-weight: 800;

}

.loan-content p {

    font-size: 17px;

    color: #64748b;

    line-height: 1.9;

    margin-bottom: 18px;

}

.loan-benefits {

    list-style: none;

    padding: 0;

    margin-top: 25px;

}

.loan-benefits li {

    padding: 14px 18px;

    background: #fff;

    margin-bottom: 15px;

    border-left: 4px solid #ff6b00;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);

    font-weight: 600;

}

.highlight-card {

    background: #fff;

    padding: 35px;

    border-radius: 22px;

    position: sticky;

    top: 100px;

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

}

.highlight-card h3 {

    font-size: 24px;

    margin-bottom: 25px;

    color: #0f172a;

}

.highlight-item {

    padding: 18px 0;

    border-bottom: 1px solid #ececec;

}

.highlight-item:last-child {

    border: none;

}

.highlight-item strong {

    display: block;

    margin-bottom: 8px;

    font-size: 18px;

    color: #ff6b00;

}

.highlight-item p {

    color: #64748b;

    font-size: 15px;

    line-height: 1.7;

}

@media(max-width:992px) {

    .loan-info-grid {

        grid-template-columns: 1fr;

    }

    .highlight-card {

        position: relative;

        top: 0;

    }

}