/* =====================================================
   VANAPRASTHASHRAM WEBSITE
   COMMON STYLES
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8f5ee;
    color:#222;
    overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Cormorant Garamond',serif;
}

img{
    max-width:100%;
    display:block;
}

/* =========================
        NAVBAR
========================= */

.navbar{
    background:#fff !important;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    padding:12px 0;
}

.navbar-brand{
    color:#12372A !important;
    font-weight:700;
    font-size:24px;
    display:flex;
    align-items:center;
}

.navbar-brand img{
    width:50px;
    height:50px;
    border-radius:50%;
    margin-right:10px;
}

.nav-link{
    color:#333 !important;
    margin-left:18px;
    font-weight:500;
    transition:.3s;
}

.nav-link:hover,
.nav-link.active{
    color:#C9A227 !important;
}

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

.hero{
    min-height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    position:relative;
    background:
    linear-gradient(rgba(18,55,42,.72),
    rgba(18,55,42,.72)),
    url("hero.jpeg");
    background-size:cover;
    background-position:center;
}

.hero .container{
    position:relative;
    z-index:2;
}

.hero h1{
    font-size:70px;
    font-weight:700;
    margin-bottom:20px;
}

.hero p{
    font-size:20px;
    max-width:850px;
    margin:auto;
    line-height:1.8;
}

.highlight{
    color:#C9A227;
}
.hero-title{
    font-family: 'Cormorant Garamond', serif; /* Use the same font as before */
    font-size: clamp(3rem, 8vw, 6rem);        /* Same large size */
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}

.gold-text{
    color: #c89b2c;   /* Same gold colour */
}

.hero-tagline{
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
}

/* =========================
         BUTTONS
========================= */

.btn-main,
.btn-warning{
    background:#12372A;
    color:#fff !important;
    border:none;
    padding:13px 35px;
    border-radius:35px;
    transition:.3s;
    text-decoration:none;
}

.btn-main:hover,
.btn-warning:hover{
    background:#C9A227;
    color:#fff;
}

/* =========================
         SECTIONS
========================= */

.section{
    padding:80px 0;
}

.section-title{
    text-align:center;
    font-size:50px;
    color:#12372A;
    margin-bottom:50px;
}

/* =========================
         CARDS
========================= */

.card-custom{
    background:#fff;
    border-radius:25px;
    padding:35px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

.card-custom:hover{
    transform:translateY(-8px);
}

.card-custom h3,
.card-custom h4{
    color:#12372A;
    margin:20px 0;
}

.card-custom p{
    line-height:1.8;
    color:#444;
}

/* =========================
         IMPACT
========================= */

.impact-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#FFF3CF;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#C9A227;
    font-size:40px;
    margin:auto;
}

/* =========================
         GALLERY
========================= */

.gallery-img{
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:18px;
    transition:.3s;
}

.gallery-img:hover{
    transform:scale(1.04);
}
/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-box{
    background:#fff;
    padding:50px;
    border-radius:30px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.contact-box h2{
    color:#12372A;
    font-size:45px;
    margin-bottom:20px;
}

.contact-text{
    line-height:1.8;
    color:#444;
    margin-bottom:30px;
}

/* CONTACT ICONS */

.contact-icons,
.social-icons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:25px;
}

.contact-icon,
.social-icons a{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#C9A227;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:24px;
    transition:.3s;
}

.contact-icon:hover,
.social-icons a:hover{
    background:#12372A;
    transform:translateY(-5px);
}

/* CONTACT FORM */

.message-card{
    background:#fff;
    padding:40px;
    border-radius:25px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.message-card h3{
    color:#12372A;
    margin-bottom:25px;
}

.message-card input,
.message-card textarea{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:12px;
    margin-bottom:18px;
    font-size:16px;
}

.message-card textarea{
    min-height:150px;
    resize:vertical;
}

.message-card button{
    background:#12372A;
    color:#fff;
    border:none;
    padding:14px 35px;
    border-radius:35px;
    transition:.3s;
}

.message-card button:hover{
    background:#C9A227;
}

/* GOOGLE MAP */

.map-container iframe{
    width:100%;
    height:450px;
    border:none;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* =====================================================
   ABOUT PAGE
===================================================== */

.about-card{
    background:#fff;
    border-radius:25px;
    padding:35px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    height:100%;
}

.about-card h3{
    color:#12372A;
    margin-bottom:20px;
}

.about-card p{
    line-height:1.8;
}

/* =====================================================
   EVENTS
===================================================== */

.event-card{
    background:#fff;
    border-radius:25px;
    padding:30px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.3s;
    height:100%;
}

.event-card:hover{
    transform:translateY(-8px);
}

.event-card img{
    border-radius:20px;
    margin-bottom:20px;
}

.event-card h3{
    color:#12372A;
    margin-bottom:15px;
}

.event-card p{
    color:#555;
    line-height:1.8;
}

/* =====================================================
   FOOTER
===================================================== */

footer{
    background:#12372A;
    color:#fff;
    padding:40px 0;
    margin-top:80px;
}

footer h5{
    color:#C9A227;
    margin-bottom:15px;
}

footer p,
footer a{
    color:#ddd;
    text-decoration:none;
}

footer a:hover{
    color:#fff;
}
/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-box{
    background:#fff;
    padding:50px;
    border-radius:30px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.contact-box h2{
    color:#12372A;
    font-size:45px;
    margin-bottom:20px;
}

.contact-text{
    line-height:1.8;
    color:#444;
    margin-bottom:30px;
}

/* CONTACT ICONS */

.contact-icons,
.social-icons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-top:25px;
}

.contact-icon,
.social-icons a{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#C9A227;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:24px;
    transition:.3s;
}

.contact-icon:hover,
.social-icons a:hover{
    background:#12372A;
    transform:translateY(-5px);
}

/* CONTACT FORM */

.message-card{
    background:#fff;
    padding:40px;
    border-radius:25px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.message-card h3{
    color:#12372A;
    margin-bottom:25px;
}

.message-card input,
.message-card textarea{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:12px;
    margin-bottom:18px;
    font-size:16px;
}

.message-card textarea{
    min-height:150px;
    resize:vertical;
}

.message-card button{
    background:#12372A;
    color:#fff;
    border:none;
    padding:14px 35px;
    border-radius:35px;
    transition:.3s;
}

.message-card button:hover{
    background:#C9A227;
}

/* GOOGLE MAP */

.map-container iframe{
    width:100%;
    height:450px;
    border:none;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* =====================================================
   ABOUT PAGE
===================================================== */

.about-card{
    background:#fff;
    border-radius:25px;
    padding:35px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    height:100%;
}

.about-card h3{
    color:#12372A;
    margin-bottom:20px;
}

.about-card p{
    line-height:1.8;
}

/* =====================================================
   EVENTS
===================================================== */

.event-card{
    background:#fff;
    border-radius:25px;
    padding:30px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.3s;
    height:100%;
}

.event-card:hover{
    transform:translateY(-8px);
}

.event-card img{
    border-radius:20px;
    margin-bottom:20px;
}

.event-card h3{
    color:#12372A;
    margin-bottom:15px;
}

.event-card p{
    color:#555;
    line-height:1.8;
}

/* =====================================================
   FOOTER
===================================================== */

footer{
    background:#12372A;
    color:#fff;
    padding:40px 0;
    margin-top:80px;
}

footer h5{
    color:#C9A227;
    margin-bottom:15px;
}

footer p,
footer a{
    color:#ddd;
    text-decoration:none;
}

footer a:hover{
    color:#fff;
}
/* =====================================================
   SUPPORT PAGE
===================================================== */

/* HERO */

.support-hero{
    min-height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    background:
    linear-gradient(rgba(18,55,42,.75),
    rgba(18,55,42,.75)),
    url("hero.jpeg");
    background-size:cover;
    background-position:center;
}

.support-hero h1{
    font-size:65px;
    margin-bottom:20px;
}

.support-hero p{
    max-width:800px;
    margin:auto;
    font-size:20px;
    line-height:1.8;
}

/* SUPPORT CARDS */

.support-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    max-width:1200px;
    margin:60px auto;
}

.support-card{
    background:#fff;
    border-radius:28px;
    padding:40px 30px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    text-align:center;

    min-height:420px;
    transition:.3s;
}

.support-card:hover{
    transform:translateY(-8px);
}

.support-card i{
    font-size:48px;
    color:#d4a91f;
    margin-bottom:20px;
}

.support-card h3{
    margin-bottom:18px;
}

.support-card p{
    flex:1;
    margin-bottom:30px;
    line-height:1.6;
}

.support-btn{
    width:200px;
    padding:14px;
    border:none;
    border-radius:50px;
    background:#0f4d3a;
    color:#fff;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.support-btn:hover{
    background:#d4a91f;
    color:#0f4d3a;
}

/* Desktop: Center last two cards */
.support-grid .support-card:nth-child(4){
    grid-column:1/2;
    justify-self:end;
}

.support-grid .support-card:nth-child(5){
    grid-column:2/3;
    justify-self:start;
}

/* Tablet */
@media (max-width:992px){

    .support-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .support-grid .support-card:nth-child(4),
    .support-grid .support-card:nth-child(5){
        grid-column:auto;
        justify-self:stretch;
    }

}

/* Mobile */
@media (max-width:768px){

    .support-grid{
        grid-template-columns:1fr;
        gap:25px;
        width:90%;
        margin:40px auto;
    }

    .support-card{
        min-height:auto;
        padding:35px 25px;
    }

    .support-card i{
        font-size:42px;
    }

    .support-card h3{
        font-size:30px;
        margin-bottom:15px;
    }

    .support-card p{
        font-size:18px;
        margin-bottom:25px;
    }

    .support-btn{
        width:100%;
        max-width:220px;
        font-size:20px;
        padding:15px;
    }

}
/* =====================================================
   POPUP FORMS
===================================================== */

.form-popup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    z-index:9999;
    overflow-y:auto;
    padding:30px;
}

.form-box{
    background:#fff;
    max-width:950px;
    margin:40px auto;
    border-radius:25px;
    padding:45px;
    position:relative;
    box-shadow:0 15px 45px rgba(0,0,0,.25);
}

.close{
    position:absolute;
    top:18px;
    right:25px;
    font-size:34px;
    cursor:pointer;
    color:#12372A;
}

.form-box h1{
    text-align:center;
    color:#12372A;
    margin-bottom:10px;
}

.subtitle{
    text-align:center;
    color:#666;
    margin-bottom:35px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:22px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    font-weight:600;
    margin-bottom:8px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:14px;
    border:1px solid #d9d9d9;
    border-radius:12px;
    font-size:16px;
    font-family:inherit;
}

.form-group textarea{
    min-height:130px;
    resize:vertical;
}

.full-width{
    grid-column:1/-1;
}

.form-submit{
    margin:35px auto 0;
    display:block;
    background:#12372A;
    color:#fff;
    border:none;
    padding:15px 40px;
    border-radius:35px;
    font-size:17px;
    cursor:pointer;
    transition:.3s;
}

.form-submit:hover{
    background:#C9A227;
}

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

@media(max-width:768px){

.hero h1,
.support-hero h1{
    font-size:38px;
}

.hero p,
.support-hero p{
    font-size:17px;
}

.section-title{
    font-size:38px;
}

.contact-box,
.message-card,
.card-custom,
.about-card,
.event-card,
.support-card{
    padding:25px;
}

.form-popup{
    padding:12px;
}

.form-box{
    width:100%;
    max-width:100%;
    margin:10px auto;
    padding:25px 18px;
    border-radius:18px;
}

.form-grid{
    grid-template-columns:1fr;
    gap:18px;
}

.full-width{
    grid-column:1;
}

.close{
    top:12px;
    right:18px;
    font-size:28px;
}

.form-submit{
    width:100%;
}

.support-card h3{
    min-height:auto;
}

}
/* =====================================================
   TESTIMONIALS
===================================================== */

.testimonial-card{
    background:#fff;
    padding:35px;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;
    transition:.3s;
}

.testimonial-card:hover{
    transform:translateY(-8px);
}

.testimonial-card img{
    width:80px;
    height:80px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 20px;
}

.testimonial-card h4{
    color:#12372A;
    margin-bottom:8px;
}

.testimonial-card small{
    color:#C9A227;
    font-weight:600;
}

.testimonial-card p{
    margin-top:20px;
    line-height:1.8;
    color:#555;
}

/* =====================================================
   SHARE REVIEW CARD
===================================================== */

.review-box{
    background:white;
    border-radius:25px;
    padding:45px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.review-box h2{
    color:#12372A;
    margin-bottom:15px;
}

.review-box p{
    max-width:700px;
    margin:0 auto 30px;
    line-height:1.8;
    color:#555;
}

/* =====================================================
   GALLERY
===================================================== */

.gallery img{
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:18px;
    transition:.35s;
    cursor:pointer;
}

.gallery img:hover{
    transform:scale(1.04);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

/* =====================================================
   EVENT GALLERY
===================================================== */

.event-gallery img{
    width:100%;
    border-radius:18px;
    transition:.3s;
}

.event-gallery img:hover{
    transform:scale(1.03);
}

/* =====================================================
   UTILITIES
===================================================== */

.text-gold{
    color:#C9A227;
}

.text-green{
    color:#12372A;
}

.bg-light-custom{
    background:#f8f5ee;
}

.rounded-xl{
    border-radius:25px;
}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f2f2f2;
}

::-webkit-scrollbar-thumb{
    background:#C9A227;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#12372A;
}

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

@media(max-width:992px){

.section{
    padding:60px 0;
}

.hero{
    min-height:70vh;
}

.hero h1{
    font-size:46px;
}

.support-hero h1{
    font-size:42px;
}

.section-title{
    font-size:40px;
}

.contact-box,
.message-card,
.review-box{
    padding:30px;
}

}

@media(max-width:768px){

.navbar-brand{
    font-size:20px;
}

.hero{
    min-height:60vh;
    padding:70px 15px;
}

.hero h1,
.support-hero h1{
    font-size:34px;
}

.hero p,
.support-hero p{
    font-size:16px;
}

.section-title{
    font-size:32px;
}

.contact-box,
.message-card,
.review-box,
.support-card,
.card-custom,
.about-card,
.event-card,
.testimonial-card{
    padding:22px;
}

.gallery img,
.gallery-img{
    height:220px;
}

footer{
    text-align:center;
}

.social-icons,
.contact-icons{
    justify-content:center;
}

}

@media(max-width:576px){

.hero h1,
.support-hero h1{
    font-size:30px;
}

.hero p,
.support-hero p{
    font-size:15px;
}

.btn-main,
.support-btn,
.form-submit{
    width:100%;
}

.gallery img,
.gallery-img{
    height:180px;
}

.form-box{
    padding:20px 15px;
}

}
/* Submit Buttons */

.form-submit{
    display:block;
    width:fit-content;
    margin:30px auto 0;
    padding:15px 40px;
    background:#12372A;
    color:#ffffff;
    border:none;
    border-radius:50px;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s ease;
    text-align:center;
}

.form-submit:hover{
    background:#C9A227;
    color:#ffffff;
}

/* Mobile */

@media (max-width:768px){

.form-submit{
    width:100%;
    max-width:320px;
}

}
/* SHARE EXPERIENCE */

.review-box{
    background:#fff;
    max-width:900px;
    margin:auto;
    padding:50px;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:center;
}

.review-box h2{
    color:#12372A;
    margin-bottom:15px;
}

.review-box p{
    color:#555;
    line-height:1.8;
    max-width:700px;
    margin:0 auto 35px;
}

.review-box .form-control,
.review-box .form-select{
    border-radius:12px;
    padding:14px;
    margin-bottom:15px;
}

@media(max-width:768px){

.review-box{
    padding:25px;
}

}
/* HERO */

.hero{
    position:relative;
    min-height:110vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    background:
    linear-gradient(rgba(7,45,30,.78),rgba(7,45,30,.78)),
    url("hero1.jpeg");

    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:1000px;
margin: auto;
  padding:120px 20px 100px;
}

.hero-logo img{
    width:130px;
    margin-bottom:25px;
}

.hero-title{

    font-family:'Cormorant Garamond',serif;
    font-size:6rem;
    color:#d4af37;
    font-weight:700;
    margin-bottom:35px;
    line-height:1;
}
.hero-title{
    margin-top:40px;
}

.hero-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-bottom:35px;
}

.hero-divider span{

    width:160px;
    height:2px;
    background:#c9a227;
}

.hero-divider i{

    color:#d4af37;
    font-size:22px;
}

.hero-tagline{

    letter-spacing:8px;
    color:white;
    font-size:1.4rem;
    font-weight:500;
    margin-bottom:35px;
}

.hero-text{

    color:white;
    font-size:1.45rem;
    line-height:1.8;
    max-width:720px;
    margin:40px auto 60px;
    margin-bottom:45px;

    font-family:'Cormorant Garamond',serif;
}

.hero-buttons{

    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
margin-top: 50px;
}

.btn-gold{

    background:#c9a227;
    color:#103d2d;
    padding:16px 38px;
    border-radius:50px;
    font-weight:600;
    font-size:1.1rem;
    transition:.4s;
}

.btn-gold:hover{

    background:#e2bf53;
    color:#103d2d;
    transform:translateY(-5px);
}

.btn-outline-light{

    border:2px solid white;
    color:white;
    padding:16px 38px;
    border-radius:50px;
    font-weight:600;
    transition:.4s;
}

.btn-outline-light:hover{

    background:white;
    color:#103d2d;
}

.hero-buttons i{

    margin-right:10px;
}
@media(max-width:768px){

.hero{

padding:100px 20px;

}

.hero-logo img{

width:90px;

}

.hero-title{

font-size:3.2rem;

}

.hero-divider span{

width:70px;

}

.hero-tagline{

font-size:1rem;
letter-spacing:4px;

}

.hero-text{

font-size:1.1rem;

}

.hero-buttons{

flex-direction:column;
align-items:center;

}

.hero-buttons a{

width:260px;

}

}
@media (max-width:1200px){
    .support-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media (max-width:768px){
    .support-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:576px){
    .support-grid{
        grid-template-columns:1fr;
    }
}
/* ================= FEATURED VIDEO ================= */

.featured-video{

    padding:80px 0;
    background:#faf7f1;

}

.video-header{

    text-align:center;
    margin-bottom:40px;

}

.video-header h2{

    font-family:'Cormorant Garamond', serif;
    font-size:3rem;
    color:#0f4d3a;
    margin-bottom:15px;

}

.video-header p{

    max-width:750px;
    margin:auto;
    color:#666;
    font-size:18px;
    line-height:1.8;

}

.video-box{

    max-width:1000px;
    margin:auto;

    border-radius:25px;
    overflow:hidden;

    box-shadow:0 20px 40px rgba(0,0,0,.18);

    border:8px solid #fff;

}

.video-box iframe{

    width:100%;
    aspect-ratio:16/9;
    border:none;

}
@media(max-width:768px){

.video-header h2{

font-size:2.2rem;

}

.video-header p{

font-size:16px;

}

.video-box{

border-radius:18px;

}

}
.payment-info{

margin-top:30px;
padding:30px;
border-radius:15px;
background:#faf8f3;

}

.success-message{

text-align:center;
margin-bottom:30px;

}

.success-message i{

font-size:55px;
color:#0f4d3a;
margin-bottom:15px;

}

.success-message h3{

color:#0f4d3a;
margin-bottom:10px;

}

.payment-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin:30px 0;

}

.payment-card{

background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
text-align:center;

}

.payment-card h4{

color:#0f4d3a;
margin-bottom:20px;

}

.payment-card p{

margin:10px 0;

}

.qr-code{

width:220px;
max-width:100%;
border-radius:10px;
margin:15px auto;

}

.transaction-note{

margin-top:25px;
padding:20px;
background:#fff;
border-left:5px solid #d4a91f;
border-radius:12px;

}