body{background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #707070;}
header{border-top: 1px solid #429d00;}
.txt-green{color: #429d00;}
.txt-gray{color: #707070;}
.top-nav{padding: 6px 4px; text-transform: uppercase; font-size: 13px; font-weight: 600; color: #707070;}
.top-nav span{display:block; padding-top: 4px;}
.top-nav:hover{color: #333;}
.top-nav img{width: 22px;}
.navbar-nav a{text-transform: uppercase; font-weight: 600; color: #707070; border-bottom: 2px solid transparent;}
.navbar-nav a:hover{color:#333; border-bottom: 2px solid #429d00;}
.nav-link:focus{color: #429d00; border-bottom: 2px solid #429d00;}
.navbar-brand img{width: 140px;}
.jumbotron{height: 500px; background-image: url("/images/header-image.jpeg"); background-position: center center; background-size: cover; padding: 4em; padding-top: 200px;}
.jumbotron-title{color: #ffffff; text-transform: uppercase; }
.btn-pluck{background-color: #429d00; color: #ffffff; text-transform: uppercase; padding: 12px 20px;}
.btn-buy{background-color: #0d6efd; color: #ffffff; text-transform: uppercase; padding: 12px 20px;}
footer{background-color: #429d00; color: #ffffff;}
.bottom-social img{width: 30px; margin: 6px;}
.footer-nav{text-transform: uppercase; color: #ffffff; padding: 0.5rem; border-bottom: 2px solid transparent;}
.footer-nav:hover{color: #ffffff; border-bottom: 2px solid #ffffff;}
.separator-w{width: 33%; background-color: white; height: 1px; margin: 3em auto;}
.cw-logo img{width:45px;}

/* Pages styles */
.phead{background-image: url("/images/shamrock.jpeg");}
.page-title{text-transform: uppercase; color: #ffffff; font-weight: 600; font-size: 24px;}
.side-button{display: block; padding: 20px 10px; border: 2px solid #429d00; border-radius: 6px; text-align: center; margin: 10px 0; text-transform: uppercase; color: #429d00; text-decoration: none; font-weight: 600;}
.side-button:hover{background-color: #429d00; color: #ffffff;}
.btn-link{color:#429d00;}
.homepage h2{text-align: center; text-transform:uppercase; font-size: 32px; color: #429d00; margin-top: 30px;}
.homepage h5{text-align: center; font-size: 14px; color: #429d00; margin: 30px 0;}
.steps-card{border: 1px solid #707070; padding:10px; text-align: center; border-radius: 4px; line-height: 1.1; height: 100%;}
.steps-card h4{text-transform: uppercase; font-size: 18px; color:#707070;}
.steps-card span{font-size: 80px; color:#429d00;}
.ct{padding: 0 20px;}
.ct h3{color: #429d00;}
.lt, .rt{background-color: #fafafa; color: #111;}
.lt p, .rt p{font-size:12px; font-style: italic; margin-bottom:30px;}
.questions{padding-top: 15px;}
.quot-text{color: #429d00;}
.help{ margin-top: -10px; margin-bottom: 20px; font-size: 13px; font-style: italic; padding: 8px; border: 1px dashed #429d00; background-color: #ecf5e6;}
.form-group{padding: 15px 10px;}
.form-group input[type=text], .form-group input[type=email], .form-group textarea{ border: 1px solid #429d00;}
.form-control:focus{border: 1px solid #429d00; box-shadow: none;}
.btn.focus, .btn:focus{box-shadow: none;}
.helper{    font-size: smaller;
    margin-top: -20px;
    display: block;
    color: green;
    padding: 2px 5px;}

ul.program-list{
	list-style-image: url('/images/shamrock-list.png');
}
.program-wish{
	margin: 10px 0px 30px;
}
.program-question{
	margin: 6px 0px 30px;
}
@media screen and (max-width: 600px){
	.jumbotron{height: 400px; padding: 2rem; padding-top: 220px;}
	.side-button{font-size: 12px; padding:10px; font-weight: 400;}	
}

/* Container for the Stripe Elements form */


/* Styling the individual elements */
.StripeElement {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 16px;
}

/* Focus state for the input fields */
.StripeElement--focus {
    border-color: #4CAF50;
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
}

/* Error state */
.StripeElement--invalid {
    border-color: #e74c3c;
}

#submit-button {
    background-color: #4CAF50; /* Green color */
    color: white;
    padding: 15px;
    border-radius: 4px;
    border: none;
    font-size: 18px;
    width: 100%;
    cursor: pointer;
}

#submit-button:hover {
    background-color: #45a049;
}

#payment-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

/* Adjust for small screens */
@media (max-width: 600px) {
    #payment-form {
        width: 100%;
        padding: 15px;
    }

    #submit-button {
        padding: 10px;
    }
}

#card-errors {
    color: #fa755a;
    font-size: 14px;
    margin-top: 10px;
}

.fixed-arrows {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1050; /* Above most elements */
}

.arrow-btn {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    font-size: 20px;
}

.long-text {
    word-wrap: break-word; /* Ensures words break at appropriate points */
    word-break: break-word; /* For compatibility with older browsers */
    white-space: normal;    /* Prevents long unbroken text from overflowing */
    overflow-wrap: break-word; /* Ensures modern handling of long text */
    text-align: justify;    /* Optionally aligns text for better readability */
    line-height: 1.6;       /* Adds space between lines for better readability */
    padding: 20px;          /* Adds some space around the text */
}