*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: "Inter",sans-serif;
}

/* receipt page */
.receiptSection{
    margin: 4px;
    padding: 10px;
    border: 1px solid red;
    width: 50%;
}

.receiptHeader{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.receiptHeaderContent{
    width: 80vw;
}

.godNameDiv{
    display: flex;
    justify-content: space-between;
    margin: 5px 0px;
    font-size: 12px;
}

.thankyoupagebuttondiv {
    margin: 15px 0px;
    display: flex;
    gap: 5px;
    justify-content: center;
}

.buttonforthankyou {
    padding: 10px;
    border-radius: 4px;
    border: 0px;
    outline: none;
    cursor: pointer;
}

.nameOfGroup{
    text-align: center;
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: bold;
}

.dateandnumber{
    display: flex;
    justify-content: space-between;
}

.hrClass{
    margin: 10px 0px 0px 0px;   
    background: red;
    height: 5px;
    border-radius: 5px;
    border: 0px;
}

.lifetimeMemberRecipt{
    background: red;
    color: white;
    width: 185px;
    text-align: center;
    padding: 5px;
    border-radius: 0px 0px 20px 20px;
    font-weight: bold;
    height: 35px;
}

.dateAndReceiptNumber{
    margin: 10px 0px;
    padding: 0px 20px;
    width: 255px;
}

.rnameclass{
    display: flex;
    align-items: end;
}

.referencespan{
    color: #333;
    display: inline-block;
    width: 250px;
    text-align: center;
}

.dateDiv{
    display: flex;
    justify-content: space-between;
    margin: 0px 0px 15px 0px;
}

.detailsuserDiv{
    padding: 10px 20px;
    /* color: red; */
}

.dynamicData{
    display: inline-block;
    font-weight: bold;
    /* color: red; */
    /* border-bottom: 0.5px solid red; */
    /* padding: 0px 20px; */
}

.userName{
    display: inline-block;
    width: 85%;
    border-bottom: 0.5px solid red;
    padding: 0px 20px;
}

.userAdsress{
    display: inline-block;
    width: 91%;
    border-bottom: 0.5px solid red;
    padding: 0px 20px;
}

.userLocalAdd{
    border-bottom: 0.5px solid red;
    /* padding: 0px 20px; */
    display: inline-block;
    width: 140px;
    text-align: center;
}

.pincodeblock{
    border-bottom: 0.5px solid red;
    /* padding: 0px 20px; */
    display: inline-block;
    width: 80px;
    text-align: center;
}

.nameDiv{
    display: flex;
    flex-direction: row;
}

.transitionNumber{
    display: inline-block;
    width: auto;
    border-bottom: 0.5px solid red;
    text-align: center;
    padding: 0px 20px;

}



.detailsuserDiv p {
    margin-bottom: 10px;
}

.disclemerDiv{
    display: flex;
}

.disclemerLabel{
    padding: 0px 5px 0px 20px;
    /* color: red; */
}

.disclemerContent{
    /* color: red; */
}

.recipentdata{
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    /* color: red; */
}

.recipentname{
    border-bottom: 0.5px solid red;
    display: inline-block;
    width: 200px;
    text-align: center;
}

.recipentSignechuter{
    width: 45%;
}

.recipentSignechuterbox{
    display: inline-block;
    width: 240px;
}

.namelogoofsig{
    text-align: center;
}

.footerofreceipt{
    /* color: red; */
    text-align: center;
    margin-top: 10px;
}

.receiptMainDiv{
    color: red;
}

.bodyClass{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 1536px;
}

#error-message-for-icard {
    color: red; /* Change the color to red for error visibility */
    font-weight: bold; /* Make the text bold */
}


/* Styling for the header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f4f4f4;
  padding: 10px;
  margin-top: 40px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
  
.headerLogo {
  max-width: 80px;
  padding: 10px 0px;
}

.headerSecondSec {
  display: flex;
  padding: 0px 50px 0px 0px;
}

.headerUnorderlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.headerlist {
  padding: 5px 20px;
}

.headerlist a {
  text-decoration: none;
  color: #ef7307;
  font-weight: bold;
  font-size: 16px;

}
  
.headerlist a:hover {
  color: #951d1d;
  border-bottom: 1px solid #951d1d;
}

.formBtnDiv {
  position: fixed;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f4f4f4;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: flex;
  justify-content: center;
  border-radius: 5px;
}

.navigateBtnForForm {
    display: flex;
    Max-width: 300px;
    text-decoration: none;
    background-color: #951d1d;
    color: white;
    border: 2px solid #951d1d;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    justify-content: center;
}

.navigateBtnForForm:hover {
  background-color: white;
  color: #951d1d;
}

.mainContent {
  margin: 40px 25px 40px 25px;
  border: 1px solid #f4f4f4;
  padding: 8px;
  border-radius: 4px;
  background-color: #f4f4f4;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.paragraph1 {
  text-indent: 50px;
  font-size: 1em;
  line-height: 1.6;
  text-align: justify;
}

.paragraph2 {
  text-indent: 50px;
  font-size: 1em;
  line-height: 1.6;
  text-align: justify;
  margin-top: 40px;
}
  
.mainContent {
    position: relative;
    background-color: #f9f9f9; /* Optional: Set the background color */
    padding: 20px;
    z-index: 1;
}

.mainContent::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px; /* Adjust the width of the logo */
    height: 300px; /* Adjust the height of the logo */
    background-image: url('./assest/prajapati-samaj_logo-removebg-preview.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1; /* Control the transparency of the logo */
    transform: translate(-50%, -50%); /* Center the logo */
    z-index: -1; /* Place the logo behind the text */
}

.paragraph1, .paragraph2 {
    position: relative;
    z-index: 2;
    color: #333; /* Optional: Adjust the text color */
    font-size: 16px;
    line-height: 1.5;
}

/* Footer Styling */
.footer {
    background-color: #f4f4f4;
    padding: 10px 20px;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.footer-links {
    margin-bottom: 10px;
}

.footer-links a,
.footer-links span {
    color: #ef7307;
    text-decoration: none;
    margin: 0 10px;
}

.footer-links a:hover {
    text-decoration: underline;
}

.movingLineDiv {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background-color: #951d1d;
    margin: 10px 0px;
}

.movingLine {
    padding: 10px 0px;
    font-size: 16px;
    color: white;
}

.sloganDiv {
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 40px 25px;
}

.slogan.first::before {
    content: '“'; 
    font-size: 36px;
    vertical-align: middle;
    margin-right: 5px;
}

.slogan.last::after {
    content: '”';
    font-size: 36px;
    vertical-align: middle;
    margin-left: 5px;
}

.slogan {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
    line-height: 1.5;
    letter-spacing: 1px;
}

.sloganDiv p:nth-child(1) {
    color: #ef7307;
}

.sloganDiv p:nth-child(2) {
    color: #951d1d;
}

.sloganDiv p:nth-child(3) {
    color: #ef7307;
}

.formMainDiv{
    display: grid;
    justify-content: center;
    align-items: center;
    margin: 20px 0px;
}

.firstNameDiv{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50%;
}

.firstnameInputFiled{
    /* padding: 8px;
    border: 1px solid #f4f4f4; */
    /* background-color: #f4f4f4; */
    /* outline: none;
    border-radius: 5px; */
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    text-align: left;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s;
}

.firstnameInputFiled:focus {
    border-color: #d35400;
    outline: none;
}

.nameRowDiv{
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.formContainer{
    padding: 20px;
    border-radius: 5px; 
    background-color: #f4f4f4;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.addressHeader {
    display: inline-block;
    width: 30%;
    padding: 5px;
}

.addressRowDiv {
    margin-bottom: 10px;
}

.addressInputFiled{
    /* padding: 8px;
    border: 1px solid #f4f4f4; */
    /* background-color: #f4f4f4; */
    /* outline: none;
    border-radius: 5px; */
    width: 60%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    text-align: left;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s;
}

.addressInputFiled:focus {
    border-color: #d35400;
    outline: none;
}

.addressName{
    display: flex;
    margin: 10px 0px;
}


.logo_label_div{
    display: flex;
    justify-content: space-between;
}

input[type="file"]{
    display: none;
}

.file-label{
    display: grid;
    place-items: center;
    cursor: pointer;
    width: 200px;
    height: 120px;
    border: 1px solid gray;
    color: gray;
    background-color: rgb(249 250 252);
    border-color: rgba(140, 152, 164, .25); 
    border-radius: 4px;
}

#labelImage{
    margin: 20px 0px;
    position: relative;
}

.imagespan{
    font-size: 10px;
}

.xMarkPreviewImage{
    position: absolute;
    top: 5px;
    left:5px;
    background: #3a3a3a;
    color: #fff;
    padding: 0px 5px;
    border-radius: 3px;
}

.formsubmitBtn{
    padding: 10px;
    width: 200px;
    background-color: #951d1d;
    color: #fff;
    border-radius: 4px;
}

.formSubmitbtnDiv{
    display: flex;
    flex-direction: column;
    margin: 20px 0px;
    text-align: center;
}



/* card page */
.cardImg {
    width: 150px;
}

.cardSection{
    height: 100vh;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.dowlandhomepagediv{
    background-color: #f9f9f9;
    padding: 20px;
    margin: 40px 25px 40px 25px;
    border: 1px solid #f4f4f4;
    border-radius: 4px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.userDataSection{
    display: flex;
    flex-direction: column;
}

.headingForFiled{
    display: inline-block;
    width: 40px;
    font-weight: 600;
}

.headingForFiled1{
    display: inline-block;
    width: 28px;
    font-weight: 600;
}

.headingForFiled2{
    display: inline-block;
    width: 35px;
    font-weight: 600;

}

.userSubData {
    padding: 5px 5px;
    font-size: 7px;
    line-height: 10px;
    margin-top: 2px;
}

.dowlandBtnDiv{
    text-align: center;
    padding: 10px;
    width: 230px;
    display: flex;
    gap: 5px;
}


.cardSection {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.mainCardDiv {
    border: 1px solid #ccc;
    border-radius: 5px;
    /* padding: 5px; */
    box-sizing: border-box;
    width: 196.54px;  
    height: 317.48px; 
    background-color: #f4f4f4;
    position: relative;
}

.responeMessage{
    /* color: red; */
}

.headingDiv{
    text-align: center;
    border: 0px;
}

.headerp{
    font-size: 12px;
    /* padding: 3px; */
    font-weight: bold;
    color: white;
    text-align: center;
    padding-bottom: 2px;
    border: 0px;
}

.cardImgDiv{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 5px; */
    margin-top: 2px;
}

.IcardSerno{
    font-size: 8px;
}

/* .logoDiv {
    text-align: center;
} */

#barcode {
    width: 150px; /* Set the overall width of the barcode */
    height: 20px;
}

.h4titleclass {
    margin-bottom: 20px;
}
.userimage{
    border-radius: 5px;
}

.requiredFields{
    /* color: red; */
}

/* contact us page */
.container {
    width: 80%;
    margin: 50px auto;
    background-color: #f4f4f4;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1, h2 {
    color: #333;
}

p {
    color: #555;
    line-height: 1.6;
}

.contact-details {
    margin-top: 20px;
}

address {
    margin-top: 5px;
    font-style: normal;
}

.map {
    margin-top: 30px;
}

iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 8px;
}

/* .tacsection{
    margin: 30px 50px;
    border: 1px solid #f4f4f4;
    padding: 10px;
    border-radius: 4px;
    background-color: #f4f4f4;
} */


.tacsection h1{
    margin: 15px 0px;
    font-size: xxx-large;
}

.tacsection h2{
    margin: 45px 0px 20px 0px;
    font-size: xx-large;
}

.tacsection h3{
    margin: 10px 0px;
}

.tacParagraph{
    padding-left: 20px;
}

.subOldiv{
    padding-left: 20px;
}

.taclitag{
    color: #555;
    line-height: 1.6;
}


.userSubData {
    position: relative; /* Set the position to relative to position the pseudo-element */
    z-index: 1; /* Ensure the content appears above the pseudo-element */
    /* Other styles like padding, margin, etc., can be added here */
}

.userSubData::before {
    content: ""; /* Required to make the pseudo-element work */
    position: absolute; /* Position it absolutely within the parent */
    top: 0; /* Align it to the top */
    left: 0; /* Align it to the left */
    right: 0; /* Stretch it to the right */
    bottom: 0; /* Stretch it to the bottom */
    background-image: url('./assest/prajapati-samaj_logo-removebg-preview.png'); /* Add your image */
    background-size: contain; /* Cover the entire area */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent repeating */
    opacity: 0.1; /* Adjust the opacity if you want a transparent effect */
    z-index: -1; /* Ensure it is behind the content */
}

.signatureimage {
    position: absolute;
    right: 55px;
    bottom: 160px;
}

.content-box {
    width: 150px;
    /* height: 100px; */
    /* border: 1px solid #ddd; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center;
    text-align: center; */
    overflow: hidden;
    padding: 0px 5px;
}
.content-text {
    margin: 2px 0;
    font-size: 5px;
    color: #333;
}
.content-text.first::before {
    content: '“'; 
    font-size: 10px;
    vertical-align: middle;
    margin-right: 5px;
}
.content-text.last::after {
    content: '”';
    font-size: 10px;
    vertical-align: middle;
    margin-left: 5px;
}
.content-text.first {
    color: white;
    padding-left: 5px;
}
.content-text.second {
    color: white;
    padding-left: 20px;
}
.content-text.last {
    color: white;
    padding-left: 35px;
}
.thank-you-container {
    flex: 1; /* Take available space */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    text-align: center; /* Center text */
    background-color: #f9f9f9; /* Optional: add background color */
}
.thank-you-content {
    padding: 20px; /* Add padding for inner content */
    background-color: #fff; /* Background color for content */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: add shadow */
}
.footer {
    /* height: 50px; Set the height of the footer */
    background-color: #f1f1f1; /* Change color as needed */
    text-align: center; /* Center the footer text */
    line-height: 50px; /* Center text vertically */
}

.paymentfailed_h1{
    margin-bottom: 20px;
    font-size: 25px;
}


/* Loader overlay style */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it covers other elements */
  }
  
  /* Spinning loader circle */
  .loader-circle {
    border: 10px solid rgba(255, 255, 255, 0.3);
    border-top: 10px solid #ef7307;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
  }
  
  /* Animation for spinner */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  
@media print {
    .pdf-format {
        width: 210mm; /* Set for A4 */
        height: auto; /* Adjust height automatically */
        display: block; /* Ensure section is displayed */
        overflow: visible; /* Prevent content from being cut off */
        margin: 0; /* Remove margins for PDF */
        padding: 10mm; /* Add padding as needed */
    }
}


@media print {
    .receiptSection {
        width: 210mm; /* Adjust width for A4 size */
        height: auto; /* Allow height to be automatic */
        margin: 0; /* Remove margins for PDF */
        padding: 10mm; /* Padding for better layout */
    }
    
    /* Ensuring header is displayed properly */
    .receiptHeader {
        display: flex;
        justify-content: space-between;
        gap: 0; /* Remove gaps for printing */
    }
    
    /* Set specific widths for printed elements */
    .receiptHeaderContent {
        width: auto; /* Allow for dynamic width */
    }

    .godNameDiv,
    .dateDiv,
    .disclemerDiv,
    .recipentdata {
        display: flex;
        justify-content: space-between;
        margin: 0; /* Remove margins */
    }

    /* Other adjustments if necessary */
    .userName,
    .userAdsress,
    .userLocalAdd,
    .transitionNumber,
    .recipentname,
    .pincodeblock {
        width: auto; /* Allow dynamic width for print */
        border-bottom: 0.5px solid red; /* Keep borders for print */
    }
}





@media only screen and (max-width: 610px) {
    .nameRowDiv{
        flex-direction: column;
    }

    .headerSecondSec{
        padding: 0px;
    }

    .firstNameDiv{
        width: auto;
    }

    .addressRowDiv{
        display: flex;
        flex-direction: column;
    }

    .addressHeader{
        width: auto;
    }

    .addressInputFiled{
        width: auto;
    }

    .formBtnDiv{
        text-align: center;
    }

    .mainContent,
    .sloganDiv,
    .container,
    .tacsection,
    .dowlandhomepagediv{
        margin: 40px 10px ;
    }

    .headerlist{
        padding: 5px;
    }

    .container{
        width: auto;
        box-shadow: none;
    }

    .formMainDiv{
        display: block;
        margin: 20px 5px;
    }

    .addImageDiv {
        display: flex;
        justify-content: center;
    }

    .formSubmitbtnDiv{
        align-items: center;
    }
    .thankyoupagebuttondiv {
        flex-direction: column;

    }
}


/* donation box for homepage */

.donationBox {
    margin: 40px 10px;
    padding: 20px;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: #F9F9F9;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    padding-bottom: 30px;
}

a.donationBtn {
    text-decoration: none;
    background-color: #951D1D;
    padding: 10px 20px;
    color: #FFFFFF;
    font-size: 16px;
    border-radius: 5px;
}

/* ==================== Main Form Container ==================== */
.formMainDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.formContainer {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 730px;
}

/* ==================== Form Steps ==================== */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

/* ==================== Heading & Text ==================== */
h2 {
    text-align: center;
    font-size: 22px;
    color: #333;
    margin-bottom: 20px;
}

.paragraph1 {
    text-align: justify;
    line-height: 1.6;
    font-size: 16px;
    color: #444;
}

/* Highlighted Text */
.sportlightfordonation {
    color: #d35400;
    font-weight: bold;
}

/* ==================== Category Boxes ==================== */
.category {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
}

.category h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

/* ==================== Options Grid ==================== */
.options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    text-align: center;
}

/* ==================== Option Buttons ==================== */
.option {
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    background: white;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.option:hover {
    background: #d35400;
    color: white;
}

.option.selected {
    background: #d35400;
    color: white;
    border-color: #d35400;
}

/* Hide Default Radio Buttons */
input[type="radio"] {
    /* display: block; */
    margin: 0px 10px;
}

/* ==================== Custom Input Field ==================== */
.custom-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    transition: border-color 0.3s;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.custom-input:focus {
    border-color: #d35400;
    outline: none;
}

/* ==================== Total Sum and Selected Values ==================== */
.result, .array-output {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 15px;
    padding: 10px;
    background: #eef;
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* ==================== Buttons ==================== */
button {
    width: 100%;
    padding: 12px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

#nextBtn {
    background-color: #d35400;
    color: white;
}

#nextBtn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#backBtn {
    background-color: #555;
    color: white;
}

button:hover {
    opacity: 0.85;
}

/* ==================== Responsive Design ==================== */
@media (max-width: 600px) {
    .formContainer {
        padding: 15px;
    }

    .options {
        grid-template-columns: 1fr;
    }

    .option {
        width: 100%;
        padding: 12px;
    }

    .custom-input {
        width: 100%;
    }
}


/* Input Field Container */
.input-group {
    margin-bottom: 15px;
}

.input-group label {
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    text-align: left;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s;
}

.input-group input:focus {
    border-color: #d35400;
    outline: none;
}

/* Navigation Buttons */
button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

button:disabled {
    background: #ccc;
    cursor: not-allowed;
}


#backBtn {
    background: #6c757d;
    color: white;
}

#submitBtn {
    background: #d35400;
    color: white;
}

.donation-button{
    display: flex;
    gap: 10px;
}

.form-container {
    padding-top: 20px;
}
/* Responsive Styling */
@media (max-width: 600px) {
    .input-group input {
        width: 100%;
    }

    button {
        width: 100%;
    }
}

/* table for recipt */
/* Parent Container */
.donation-receipt {
    position: relative; /* Required for absolute positioning of the pseudo-element */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.8); /* Optional: Add a light background */
    padding: 20px; /* Ensures content is readable */
}

.donation-receipt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./assest/p-logo3.png');
    background-size: 150px auto;
    /* background-position: top left, 200px 0; */
    opacity: 0.7;
    z-index: -1; 
}


/* Ensuring Both Sections Have Equal Width */
.donation-details, .donor-details {
    width: 50%;
    padding: 15px;
    color: black;
    /* border: 1px solid #ccc; */
    border-radius: 8px;
    /* background-color: #f9f9f9; */
}

/* Table Styling */
.donation-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

/* Table Header */
.table-header {
    /* background-color: #007bff; */
    color: black;
    text-align: center;
    padding: 5px;
    height: 35px;
    border: 1px solid;
}

/* Ensure All Cells Have the Same Height */
.table-cell {
    padding: 5px;
    height: 35px; /* Set a fixed height for all cells */
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    border: 1px solid;
}

/* Alternating Row Colors */
/* .table-row:nth-child(even) {
    background-color: #f2f2f2;
} */

/* Merging the last two rows */
.table-row:last-child td,
.table-row:nth-last-child(2) td {
    font-weight: bold;
}

/* Receipt and Donor Details */
.receipt-info, .donor-info {
    margin-bottom: 15px;
}

.receipt-number, .receipt-date {
    font-weight: bold;
    font-size: 16px;
}

.label {
    font-weight: bold;
}

.amount {
    color: green;
    font-weight: bold;
}

.transaction-number {
    font-weight: bold;
    color: #d9534f;
}

.receiptHeaderDetails {
    padding: 0px 10px;
}

.receiptHeaderSpan {
    font-size: small;
    display: block;
    padding: 10px;
}

.underlined {
    /* display: inline-block; */
    min-width: 200px; /* Ensures consistent underline */
    min-height: 20px; /* Keeps lines uniform */
    border-bottom: 1px dotted black;
    text-align: center;
    padding: 0px 10px;
}


.hidden { 
    display: none; 
}