:root{--page-max:1180px}
html{-webkit-text-size-adjust:100%}
body{background:#f8f9fa;min-width:320px}
main.container{max-width:var(--page-max)}
.card{border:0;border-radius:1rem}
.display-6{letter-spacing:-.03em}
.preview,.review-img{width:100%;max-width:220px;aspect-ratio:1/1;object-fit:cover;border:1px solid #ddd;border-radius:.75rem;background:#fff}
.form-control,.form-select,.btn{min-height:44px}
textarea.form-control{min-height:96px}
.category-card .btn{width:100%}
.review-value{overflow-wrap:anywhere}
.payment-result-card{max-width:650px}
.payment-result-card dd{overflow-wrap:anywhere}

@media (min-width:768px){
  .category-card .btn{width:auto}
}

@media (max-width:767.98px){
  main.container{padding-left:1rem!important;padding-right:1rem!important}
  .page-heading{align-items:flex-start!important;gap:.75rem;flex-direction:column}
  .page-heading>a{align-self:flex-start}
  .card-body{padding:1rem}
  .btn-lg{width:100%;font-size:1rem}
  .preview,.review-img{max-width:180px}
  .review-media{text-align:center}
  .payment-result-card .card-body{padding:1.5rem!important}
  .payment-result-card dt,.payment-result-card dd{width:100%;max-width:100%;flex:0 0 100%}
  .payment-result-card dt{margin-top:.7rem}
  .payment-result-card dd{margin-bottom:0}
}

@media (max-width:575.98px){
  h1,.h1{font-size:1.75rem}
  .display-6{font-size:2rem}
  .form-control,.form-select{font-size:16px}
  .preview,.review-img{max-width:160px}
}
.terms-link{min-height:auto!important;font-size:inherit;line-height:inherit;vertical-align:baseline;text-decoration:underline}
.terms-content{line-height:1.65}
.terms-content section:last-of-type{margin-bottom:0!important}
@media (max-width:575.98px){
  .modal-dialog{margin:.5rem}
  .modal-content{max-height:calc(100vh - 1rem);border-radius:.9rem}
  .modal-header,.modal-body,.modal-footer{padding:1rem}
  .modal-footer .btn{width:100%}
}

/* Compact image preview: image is processed client-side before upload. */
.image-preview-wrap {
  display: inline-block;
  max-width: 140px;
}
.preview {
  width: 120px;
  height: 120px;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.preview-meta {
  max-width: 140px;
  line-height: 1.25;
}
@media (max-width:575.98px){
  .image-preview-wrap{max-width:120px}
  .preview{width:100px;height:100px;max-width:100px}
  .preview-meta{max-width:120px}
}


/* Traditional sober Indian theme */
:root {
    --vnf-maroon: #6f1d1b;
    --vnf-saffron: #c56a21;
    --vnf-gold: #d8ad53;
    --vnf-cream: #fbf6ec;
    --vnf-ink: #352f2a;
    --vnf-muted: #7a6f65;
    --vnf-border: #e7d8bd;
}

.site-body {
    background: var(--vnf-cream);
    color: var(--vnf-ink);
}

.top-accent {
    height: 5px;
    background: linear-gradient(90deg, var(--vnf-maroon), var(--vnf-gold), var(--vnf-saffron));
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: .75rem;
    white-space: normal;
}

.brand-lockup strong,
.brand-lockup small {
    display: block;
}

.brand-lockup strong {
    color: var(--vnf-maroon);
    font-size: 1rem;
    line-height: 1.15;
}

.brand-lockup small {
    color: var(--vnf-muted);
    font-size: .75rem;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #fff5dd;
    border: 1px solid var(--vnf-gold);
    color: var(--vnf-maroon);
    font-size: 1.3rem;
    flex: 0 0 auto;
}

.navbar .nav-link {
    color: var(--vnf-ink);
    font-weight: 600;
    border-radius: .5rem;
    padding-inline: .8rem !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--vnf-maroon);
    background: #fff7e8;
}

.hero-slider {
    border-bottom: 1px solid var(--vnf-border);
}

.hero-slide {
    min-height: 230px;
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero-slide::before,
.hero-slide::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    opacity: .18;
}

.hero-slide::before {
    width: 300px;
    height: 300px;
    right: 6%;
    top: -100px;
    border: 28px double var(--vnf-gold);
}

.hero-slide::after {
    width: 190px;
    height: 190px;
    right: 22%;
    bottom: -90px;
    border: 18px dotted var(--vnf-saffron);
}

.hero-slide-one {
    background: linear-gradient(120deg, #fff8e8, #f7ead5);
}

.hero-slide-two {
    background: linear-gradient(120deg, #f8eee6, #fff9ef);
}

.hero-content {
    padding-block: 2.75rem;
}

.hero-content h1,
.hero-content h2 {
    color: var(--vnf-maroon);
    max-width: 760px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.hero-content p {
    max-width: 690px;
    color: #665c53;
    margin-bottom: 0;
}

.hero-kicker {
    color: var(--vnf-saffron);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
}

.site-main {
    min-height: 40vh;
}

.site-main > .container,
.site-main > main.container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.card,
.form-control,
.form-select,
.btn {
    border-radius: .7rem;
}

.card {
    border: 1px solid var(--vnf-border);
}

.card-header {
    background: #fff8ea;
    border-color: var(--vnf-border);
}

.form-label {
    font-weight: 600;
    color: #4d433b;
}

.form-control,
.form-select {
    border-color: #d7c9b5;
    background-color: #fffefb;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vnf-gold);
    box-shadow: 0 0 0 .2rem rgba(216, 173, 83, .16);
}

.btn-primary {
    background: var(--vnf-maroon);
    border-color: var(--vnf-maroon);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #5b1716;
    border-color: #5b1716;
}

.btn-outline-secondary {
    border-color: #a69178;
    color: #5b5148;
}

.page-heading h1,
.payment-result-card h1 {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--vnf-maroon);
}

.site-footer {
    margin-top: 2rem;
    background: #4c1716;
    color: #f6ead9;
    border-top: 4px solid var(--vnf-gold);
}

.site-footer a {
    color: #f8dfaa;
    text-decoration: none;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .45rem 1rem;
}

@media (min-width: 992px) {
    .footer-links {
        justify-content: flex-end;
    }
}

@media (max-width: 767.98px) {
    .hero-slide {
        min-height: 190px;
    }

    .hero-content {
        padding-block: 2rem;
    }

    .hero-content h1,
    .hero-content h2 {
        font-size: 1.65rem;
    }

    .brand-lockup strong {
        font-size: .9rem;
    }

    .brand-lockup small {
        font-size: .68rem;
    }

    .navbar-collapse {
        padding-top: .75rem;
    }
}