/* Header Styling */
.header {
    position: relative;
    width: 100%;
    min-height: 300px; /* Changed from fixed height to min-height */
    overflow: visible; /* Changed from hidden to visible */
}

.header-image-container {
    position: relative;
    width: 100%;
    min-height: 300px; /* Match header min-height */
}

.header-image {
    width: 100%;
    height: 100%;
    min-height: 300px; /* Ensure minimum height */
    object-fit: cover;
    position: absolute; /* Position absolutely to allow overlay to determine height */
    top: 0;
    left: 0;
}

.header-overlay {
    position: relative; /* Changed from absolute to relative */
    width: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 60%, white 100%);
    padding: 20px;
    color: #333;
    min-height: 300px; /* Ensure minimum height */
}

/* Headline styling */
.headline {
    font-size: 2.5rem;
    color: #000;
    margin: 0 0 20px 0; /* Added bottom margin */
    z-index: 1;
}

.subheadline {
    font-size: 1.5rem;
    margin-left: 120px;
    margin-top: 20px; /* Reduced from 100px */
    margin-bottom: 20px; /* Added margin bottom */
    z-index: 1;
    color: #000;
}

/* Paragraph styling */
.paragraph p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #000;
    margin-top: 6px;
    margin-left: 120px;
    margin-bottom: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    hyphens: auto;
}

/* Responsive styles */
@media (max-width: 768px) {
    .header {
        min-height: auto; /* Allow header to adjust based on content */
    }
    
    .header-image-container {
        min-height: 100%; /* Allow container to adjust */
    }
    
    .header-image {
        position: absolute;
        height: 100%;
        min-height: 100%;
    }
    
    .header-overlay {
        min-height: auto; /* Allow overlay to adjust based on content */
        padding: 15px; /* Slightly reduced padding */
    }

    .headline {
        font-size: 1.8rem; /* Smaller font size */
        margin-bottom: 15px;
    }

    .subheadline {
        font-size: 1.2rem;
        margin-left: 15px; /* Reduced margin */
        margin-top: 15px;
    }

    .paragraph p {
        font-size: 1.2rem;
        margin-left: 15px; /* Reduced margin */
        margin-right: 15px; /* Added right margin for better readability */
    }
}

/* Additional small screen adjustments */
@media (max-width: 480px) {
    .headline {
        font-size: 1.5rem;
    }

    .subheadline {
        font-size: 1.2rem;
        margin-left: 10px;
    }

    .paragraph p {
        margin-left: 10px;
        margin-right: 10px;
        font-size: 1.2rem;
    }
}

 .chat-container {
     max-width: 900px;
     margin: 0 auto;
     padding: 20px;
 }
 .input-sizer {
     display: inline-grid;
     vertical-align: top;
     align-items: center;
     position: relative;
     border: solid 1px;
     padding: 0.5em;
     margin: 5px;
     width: 100%;
 }
 .input-sizer::after,
 .input-sizer textarea {
     width: 100%;
     min-width: 1em;
     grid-area: 1 / 1;
     font: inherit;
     padding: 0.25em;
     margin: 0;
     resize: none;
     background: none;
     appearance: none;
     border: none;
     font-size: 16pt;
 }
 .input-sizer::after {
     content: attr(data-value) ' ';
     visibility: hidden;
     white-space: pre-wrap;
 }
 .input-sizer:focus-within {
     outline: solid 1px blue;
     box-shadow: 4px 4px 0px blue;
 }
 textarea {
     overflow: hidden;
     font-size: 16pt;
        word-wrap: break-word;
    overflow-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    hyphens: auto;
 }
 .button-container {
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
 }
        

.button-71 {
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
	margin-left: 5px;
}
.button-71:hover {
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.button-71:active {
	position:relative;
	top:1px;
}        
.footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    color: #666;
    margin-top: 20px;
    width: 100%;
}

@media (max-width: 768px) {
    .footer {
        font-size: 0.7rem;
        padding: 15px;
    }
}