/**{*/
/*    margin:0;*/
/*    padding:0;*/
/*    box-sizing:border-box;*/
/*    font-family:'Poppins',sans-serif;*/
/*}*/

/*body{*/
/*    background:#f5f9ff;*/
/*    color:#222;*/
/*    overflow-x:hidden;*/
/*}*/
/* ==========================================
   AVS FINANCIAL SERVICES - LUXURY FINTECH UI
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --avs-brand: #0A1E36;        /* Deep Premium Navy */
    --avs-brand-light: #163252;  /* Lighter Corporate Blue */
    --avs-gold: #D4AF37;         /* Authentic Metallic Gold */
    --avs-gold-glow: rgba(212, 175, 55, 0.15);
    --avs-bg-light: #F8FAFC;     /* Clean Off-White */
    --avs-text-main: #1E293B;    /* Dark Slate Text */
    --avs-text-muted: #64748B;   /* Soft Cool Grey */
    
    /* Luxury Soft Shadow Pack */
    --avs-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.02);
    --avs-shadow-md: 0 12px 40px rgba(10, 30, 54, 0.04);
    --avs-shadow-lg: 0 24px 60px rgba(10, 30, 54, 0.08);
    
    --avs-curve: 16px;
    --avs-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Ultra-Smooth Cinematic Transition */
}

/* Base Override for this block */
.avs-services-section, .avs-main-container, .avs-contact-section {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: -0.01em;
}

/* Smooth Section Layouts */
.avs-services-section {
    padding: 100px 0;
    margin-top:-100px;
    background: radial-gradient(100% 100% at 50% 0%, #FFFFFF 0%, var(--avs-bg-light) 100%);
}

.avs-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Headline Styling */
.avs-heading {
    text-align: center;
    margin-bottom: 60px;
}
.avs-heading h1 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--avs-brand);
    margin-bottom: 16px;
    letter-spacing: -0.03em;
}
.avs-heading p {
    color: var(--avs-text-muted);
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 3D Glassmorphic Cards Grid */
.avs-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 32px;
}

.avs-card {
    background: #FFFFFF;
    border-radius: var(--avs-curve);
    box-shadow: var(--avs-shadow-md);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.5s var(--avs-ease);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.avs-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--avs-brand) 0%, var(--avs-gold) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Hover State - Dynamic Lift & Glow */
.avs-card:hover {
    transform: translateY(-12px) scale(1.01);
    box-shadow: var(--avs-shadow-lg);
    border-color: rgba(20, 50, 90, 0.1);
}
.avs-card:hover::before {
    opacity: 1;
}

.avs-card-header {
    padding: 35px 35px 25px;
    background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
    border-bottom: 1px solid #F1F5F9;
}
.avs-card-header h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--avs-brand);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.avs-card-header h2 i {
    color: var(--avs-brand);
    background: var(--avs-bg-light);
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 1px solid #E2E8F0;
    transition: all 0.4s var(--avs-ease);
}
.avs-card:hover .avs-card-header h2 i {
    background: var(--avs-brand);
    color: #FFF;
    border-color: var(--avs-brand);
}
.avs-card-header p {
    font-size: 0.95rem;
    color: var(--avs-text-muted);
    line-height: 1.6;
}

/* List Formatting */
.avs-card-body {
    padding: 35px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.avs-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--avs-brand);
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    display: inline-block;
    opacity: 0.6;
}
.avs-service-list li {
    padding: 12px 0;
    color: var(--avs-text-main);
    font-weight: 500;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #F8FAFC;
}
.avs-service-list li i {
    color: var(--avs-gold);
    font-size: 0.9rem;
}

/* Benefit Capsule */
.avs-benefit-box {
    margin-top: auto;
    padding-top: 25px;
    border-top: 1px solid #F1F5F9;
}
.avs-benefit-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--avs-gold);
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    display: block;
}
.avs-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.avs-benefits li {
    background: #F1F5F9;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--avs-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.avs-benefits li i {
    color: #10B981; /* Premium Emerald Green for ticks */
}

/* Section Divider Titles */
.avs-section-title {
    text-align: center;
    margin: 100px 0 50px;
}
.avs-section-title h2 {
    color: var(--avs-brand);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* Why Choose Us Minimalist Mesh Grid */
.avs-main-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.avs-choose-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 24px;
}
.avs-choose-card {
    background: #FFFFFF;
    padding: 35px 25px;
    border-radius: var(--avs-curve);
    box-shadow: var(--avs-shadow-sm);
    border: 1px solid #E2E8F0;
    text-align: center;
    transition: all 0.4s var(--avs-ease);
}
.avs-choose-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--avs-shadow-md);
    border-color: var(--avs-gold);
}
.avs-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.4rem;
    transition: transform 0.4s ease;
}
.avs-choose-card:hover .avs-icon-circle {
    transform: rotateY(180deg);
}
.avs-icon-circle.avs-blue { background: rgba(10, 30, 54, 0.05); color: var(--avs-brand); }
.avs-icon-circle.avs-gold { background: var(--avs-gold-glow); color: var(--avs-gold); }

.avs-choose-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--avs-brand);
    margin-bottom: 12px;
}
.avs-choose-card p {
    font-size: 0.92rem;
    color: var(--avs-text-muted);
    line-height: 1.5;
}

/* Horizontal Floating Connected Roadmap */
.avs-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
}
.avs-process-card {
    background: #FFFFFF;
    padding: 45px 30px 35px;
    border-radius: var(--avs-curve);
    box-shadow: var(--avs-shadow-sm);
    border: 1px solid #E2E8F0;
    text-align: center;
    position: relative;
}
.avs-step {
    position: absolute;
    top: -18px;
    left: 40px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #FFFFFF;
}
.avs-step-blue { background: var(--avs-brand); box-shadow: 0 4px 14px rgba(10,30,54,0.3); }
.avs-step-gold { background: var(--avs-gold); box-shadow: 0 4px 14px rgba(212,175,55,0.3); }

.avs-process-icon {
    font-size: 2.2rem;
    color: var(--avs-brand);
    margin-bottom: 16px;
    opacity: 0.85;
}
.avs-process-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--avs-brand);
    margin-bottom: 10px;
}

/* Dynamic Glowing Contact Area */
.avs-contact-section {
    background: #040D1A;
    position: relative;
    padding: 100px 0;
    margin-top: 100px;
    overflow: hidden;
}
.avs-contact-section::after {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
}
.avs-contact-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}
.avs-left-contact h2 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin-bottom: 16px;
}
.avs-name {
    margin-bottom: 40px;
    border-left: 4px solid var(--avs-gold);
    padding-left: 20px;
}
.avs-name p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}
.avs-contact-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}
.avs-contact-info i {
    color: var(--avs-gold);
    font-size: 1.3rem;
    background: rgba(255, 255, 255, 0.04);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avs-contact-info p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.avs-social-icons a {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
}
.avs-social-icons a:hover {
    background: var(--avs-gold);
    color: var(--avs-brand);
    transform: translateY(-4px);
}

/* Glassmorphic Cyber-Form */
.avs-right-contact {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    padding: 50px 40px;
    border-radius: var(--avs-curve);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
}
.avs-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.avs-form-grid input, 
.avs-form-grid select, 
.avs-form-grid textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 16px 20px;
    color: #FFFFFF;
    font-size: 0.98rem;
    transition: all 0.3s var(--avs-ease);
    outline: none;
}
.avs-form-grid input::placeholder, 
.avs-form-grid textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.avs-form-grid input:focus, 
.avs-form-grid select:focus, 
.avs-form-grid textarea:focus {
    border-color: var(--avs-gold);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.15);
}
.avs-form-grid select option {
    background: #040D1A;
    color: #FFF;
}
.avs-form-grid textarea {
    grid-column: span 2;
}

.avs-submit-btn {
    width: 100%;
    margin-top: 30px;
    background: linear-gradient(90deg, var(--avs-gold) 0%, #E6C655 100%);
    color: var(--avs-brand);
    border: none;
    padding: 18px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25);
    transition: all 0.3s ease;
}
.avs-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
}

/* Native On-Scroll Reveals */
.avs-animate-up, .avs-fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.avs-show {
    opacity: 1;
    transform: translateY(0);
}

/* Responsiveness adjustments */
@media (max-width: 992px) {
    .avs-contact-container { grid-template-columns: 1fr; gap: 50px; }
    .avs-heading h1 { font-size: 2.2rem; }
    .avs-left-contact h2 { font-size: 2.4rem; }
}
/* ================= HEADER ================= */

.header-section{
    background:#fff;
    box-shadow:0 2px 20px rgba(0,0,0,0.08);
    position:sticky;
    top:0;
    z-index:1000;
}

.navbar-nav .nav-link{
    color:#0B2454;
    font-weight:600;
    margin:0 8px;
    transition:.3s;
}

.navbar-nav .nav-link:hover{
    color:#0B2454;
    transform:translateY(-2px);
}

.contact-btn{
    background:#0B2454;
    color:#fff;
    padding:10px 25px;
    border-radius:30px;
    font-weight:600;
    text-decoration:none;
    transition:.4s;
}

.contact-btn:hover{
    background:#0B2454;
    color:#fff;
}

/* ================= EMI SECTION ================= */

.container{
    max-width:1400px;
    margin:50px auto;
    padding:0 15px;
}

.emi-wrapper{
    display:flex;
    gap:25px;
}

.sidebar{
    width:300px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
}

.sidebar ul{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar li{
    padding:18px 20px;
    border-bottom:1px solid #eee;
    font-weight:500;
    cursor:pointer;
    transition:.3s;
}

.sidebar li:hover,
.sidebar .active{
    background:#0B2454;
    color:#fff;
}

.main-card{
    flex:1;
    background:#fff;
    border-radius:25px;
    padding:35px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.title{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:30px;
}

.title i{
    font-size:35px;
}

.title h2{
    color:#0B2454;
    font-weight:700;
    margin:0;
}

.content{
    display:flex;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
}

.form-group{
    margin-bottom:25px;
}

.form-group label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
}

.input-box{
    display:flex;
    gap:15px;
    align-items:center;
}

.input-box input[type="range"]{
    width:250px;
    accent-color:#0B2454;
}

.input-box input[type="number"]{
    width:120px;
    padding:10px;
    border:1px solid #ddd;
    border-radius:10px;
}

.btn{
    background:#0B2454;
    color:#fff;
    border:none;
    padding:14px 30px;
    border-radius:10px;
    font-weight:600;
    transition:.3s;
}

.btn:hover{
    background:#0B2454;
    transform:translateY(-3px);
}

/* ================= CHART ================= */

.chart-box{
    text-align:center;
}

.chart{
    width:260px;
    height:260px;
    border-radius:50%;
    background:conic-gradient(#0d6efd 0deg,#0d6efd 220deg,#083c7d 220deg,#083c7d 360deg);
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    position:relative;
}

.chart::before{
    content:"";
    width:170px;
    height:170px;
    background:#fff;
    border-radius:50%;
    position:absolute;
}

.chart-value{
    position:relative;
    z-index:2;
    font-size:22px;
    font-weight:700;
    color:#0B2454;
}

.legend{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:20px;
}

.legend span{
    display:flex;
    align-items:center;
    gap:8px;
}

.box1,
.box2{
    width:15px;
    height:15px;
    border-radius:3px;
}

.box1{
    background:#0B2454;
}

.box2{
    background:#0B2454;
}

/* ================= RESULT ================= */

.result-box{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:35px;
}

.result-card{
    background:#f8fbff;
    border-left:5px solid #0B2454;
    padding:20px;
    border-radius:15px;
    text-align:center;
}

.result-card h4{
    font-size:16px;
    margin-bottom:10px;
}

.result-card h2{
    color:#0B2454;
    font-weight:700;
}

.note{
    margin-top:25px;
    text-align:center;
    color:#666;
}

/* ================= SERVICES ================= */

.services-menu{
    padding:80px 20px;
}

.menu-wrapper{
    max-width:1300px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(220px,1fr));
    gap:25px;
}

.menu-wrapper h4{
    margin-top:100px;
}

.menu-card{
    background:#fff;
    padding:30px 20px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.4s;
}

.menu-card:hover{
    transform:translateY(-10px);
}

.icon-box{
    width:70px;
    height:70px;
    background:#eaf3ff;
    color:#0B2454;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    margin:auto auto 15px;
}

/* ================= CONTACT ================= */

.contact-section{
background:linear-gradient(135deg,#072042,#0d2c54);
padding:80px 8%;
position:relative;
overflow:hidden;
margin-top: 120px;
}

.contact-section::before{
content:'';
position:absolute;
width:400px;
height:400px;
background:rgba(255,255,255,.05);
border-radius:50%;
top:-120px;
right:-120px;
}

.contact-container{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:40px;
align-items:center;
}

.left-contact{
color:white;
}

.left-contact h2{
font-size:34px;
margin-bottom:30px;
}

.contact-info{
margin-bottom:25px;
display:flex;
gap:15px;
align-items:flex-start;
transition:.4s;
}

.contact-info:hover{
transform:translateX(10px);
}

.contact-info i{
color:#f4b400;
font-size:20px;
margin-top:5px;
}

.contact-info p{
font-size:14px;
line-height:1.8;
}

.social-icons{
margin-top:30px;
display:flex;
gap:15px;
}

.social-icons a{
width:45px;
height:45px;
background:rgba(255,255,255,.08);
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:white;
transition:.4s;
backdrop-filter:blur(10px);
}

.social-icons a:hover{
background:#f4b400;
transform:translateY(-8px);
}

/* FORM */

.contact-form{
background:rgba(255,255,255,.12);
padding:35px;
border-radius:20px;
backdrop-filter:blur(20px);
box-shadow:0 15px 40px rgba(0,0,0,.2);
animation:fadeUp 1s ease;
}

.form-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.contact-form input,
.contact-form textarea{
width:100%;
padding:14px;
border:none;
outline:none;
border-radius:10px;
background:rgba(255,255,255,.95);
font-size:14px;
}

.contact-form textarea{
grid-column:span 2;
resize:none;
height:120px;
}

.submit-btn{
margin-top:20px;
background:#f4b400;
color:white;
border:none;
padding:14px 35px;
font-weight:600;
border-radius:50px;
cursor:pointer;
transition:.4s;
}

.submit-btn:hover{
transform:translateY(-5px);
box-shadow:0 15px 25px rgba(244,180,0,.4);
}

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

@media(max-width:992px){

    .emi-wrapper{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
    }

    .contact-container{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    .content{
        flex-direction:column;
    }

    .input-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .input-box input[type="range"]{
        width:100%;
    }

    .chart{
        width:220px;
        height:220px;
    }

    .chart::before{
        width:140px;
        height:140px;
    }

    .result-box{
        grid-template-columns:1fr;
    }

    .navbar-nav{
        padding:20px 0;
    }
}