/* Base feature list styles */
/* Light menu styles (for dark backgrounds) */
/* Menu Light Version */
#menu.menu-light ul li a,
#menu.menu-light ul > li > a {
    color: #ffffff !important;
}

/* Menu Dark Version */
#menu.menu-dark ul li a,
#menu.menu-dark ul > li > a {
    color: #000000 !important;
}

/* Common heading styles */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;  /* Default bold weight */
    letter-spacing: 0.225em;
    line-height: 1em;
    margin: 0 0 1em 0;
    text-transform: uppercase;
    text-align: center;
}

/* Font weight variants */
h1.medium, h2.medium, h3.medium, h4.medium, h5.medium, h6.medium {
    font-weight: 400;
}

/* Default heading styles */
h1 {
    font-size: 1.5em;
    line-height: 1.5em;
}

h2 {
    font-size: 1.25em;
    line-height: 1.5em;
}
h3 {
    font-size: 1.0em;
    line-height: 1.75em;
}

h4 {
    font-size: 0.80em;
    line-height: 1.5em;
}

h5 {
    font-size: 0.70em;
    line-height: 1.5em;
}

h6 {
    font-size: 0.7em;
    line-height: 1.5em;
}

/* === ALTERNATE STYLES === */

/* H1 Variants */
h1.heading1 {
    font-size: 1.40em !important;
    line-height: 1.6em;
    font-weight: 700;
}

h1.heading2 {
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: 900;
    text-align: right;
}

/* H2 Variants */
h2.heading1 {
    font-size: 1.0em !important;
    line-height: 1em;
    position: relative;
}

/* Ensure h2.heading1 does not inherit the horizontal lines */
h2.heading1:before, 
h2.heading1:after {
    display: none !important;
    content: none !important;
}

h2.heading2 {
    font-size: 3.5em;
    line-height: 1em;
    position: relative;
}

/* Ensure h2.heading2 does not inherit the horizontal lines */
h2.heading2:before, 
h2.heading2:after {
    /*display: none !important;*/
    /*content: none !important;*/
}
/* Centered headings with size variants */
h2.center {
    text-align: center;
	font-size: 3.5em;
}
h3.center {
    text-align: center;
	font-size: 1.75em;
}

h4.center {
    text-align: center;
	font-size: 1.25em;
}

/* Light variant (for dark backgrounds) */
h1.light, h2.light, h3.light, h4.light, h5.light, h6.light,
h1.heading1.light, h1.heading2.light, h2.heading1.light, h2.heading2.light {
    color: #ffffff;
}

/* Dark variant (for light backgrounds) */
h1.dark, h2.dark, h3.dark, h4.dark, h5.dark, h6.dark,
h1.heading1.dark, h1.heading2.dark, h2.heading1.dark, h2.heading2.dark {
    color: #2d2624;
}

/* Major headers with underline */
h1.major, h2.major, h3.major, h4.major, h5.major, h6.major,
h1.heading1.major, h1.heading2.major, h2.heading1.major, h2.heading2.major {
    border-bottom: solid 2px;
    display: inline-block;
    padding-bottom: 1em;
    position: relative;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 2em 20px;
	text-align: left !important;

}

.feature-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1em;
    padding-left: 0;
    position: relative;
}
/* Mobile adjustments */
@media screen and (max-width: 1280px) {
	
	.feature-list {
    list-style: none;
    padding: 0;
    margin: .5em 5px;
	text-align: left !important;

}
    .feature-list li {
       margin: .25em 10px .25em;
    }

    .feature-list li strong {
        margin-bottom: 0.25em; /* Space between title and text */
    }
}
@media screen and (max-width: 1024px) {
	
	.feature-list {
    list-style: none;
    padding-left: 5px;
    margin: .5em 5px;
	text-align: left !important;

}
    .feature-list li {
       margin: 1em 50px 1em;
    }

    .feature-list li strong {
        margin-bottom: 0.25em; /* Space between title and text */
    }
}

@media screen and (max-width: 736px) {
    .feature-list li {
        /*flex-direction: column; /* Stack title and text vertically */*/
        align-items: stretch; /* Stretch items to full width */
		margin:0;
    }

    .feature-list li strong {
        margin-bottom: 0.25em; /* Space between title and text */
    }
}

/* Dark version (for light backgrounds) */
.feature-list.dark li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #2d2624;  /* Dark color for light backgrounds */
    margin-right: 10px;
    min-width: 16px;
    display: inline-block;
}

/* Light version (for dark backgrounds) */
.feature-list.light li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ffffff;  /* Light color for dark backgrounds */
    margin-right: 10px;
    min-width: 16px;
    display: inline-block;
}
/* Plain List - No Icons or Bullets */
.feature-list.plain {
    list-style: none;
    padding: 0;
    margin: 2em 0;
}

.feature-list.plain li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1em;
    padding-left: 0;
    position: relative;
}
@media screen and (max-width: 980px) {

    .feature-list.plain {
margin: 2em 1em 1em 4em;
    }
}


.bame-feature-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  margin:auto;
}

.bame-feature-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 0.5px solid rgba(200, 200, 200, 0.4); /* Lighter, softer border */
  padding: 10px 0;
  text-align:left;
}

.bame-feature-title {
  font-weight: bold;
  width: 40%;
  color: #fff;
}

.bame-feature-description {
  width: 55%;
  color: #fff;
}
/* Ensure no icons or bullets appear */
.feature-list.plain li:before {
    content: none !important;
    display: none !important;
}

.feature-list.light2 {
    column-count: 2; /* Split into 2 columns */
    column-gap: 2em; /* Space between columns */
    list-style-position: inside; /* Keep bullets aligned within columns */
    padding: 0; /* Remove default padding if any */
    margin: 0 0 0 1em; /* Slight left indent for readability, adjust as needed */
}
.feature-list.light2 li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ffffff;  /* Light color for dark backgrounds */
    margin-right: 10px;
    min-width: 16px;
    display: inline-block;
}
/* Ensure list items don’t break across columns */
.feature-list.light2 li {
    break-inside: avoid; /* Prevents items from splitting between columns */
    margin-bottom: 0.5em; /* Space between items vertically */
}
/* Mobile adjustments */
@media screen and (max-width: 1280px) {
.feature-list.light2 {
    column-count: 1; /* Split into 2 columns */
    column-gap: 2em; /* Space between columns */
    list-style-position: inside; /* Keep bullets aligned within columns */
    padding: 0; /* Remove default padding if any */
    margin: 0 0 0 1em; /* Slight left indent for readability, adjust as needed */
}
@media screen and (max-width: 980px), screen and (max-width: 736px) {
  .feature-list.plain,
  .feature-list.plain li,
 {
    display: block;
    text-align: center;
    padding-left: 0;
  }

  .feature-list li {
    margin-bottom: 15px; /* adds spacing between each list item for better readability */
  }

  .feature-list li a {
    display: inline-block;
    margin-top: 5px; /* separates email address clearly from label */
  }
}
@media screen and (max-width: 1024px) {
	
	
}
@media screen and (max-width: 980px) {

    .feature-list.light2 {
        column-count: 1; /* Single column on mobile */
        margin-left: -18px; /* Remove left margin for full-width alignment */
    }
}
@media screen and (max-width: 780px) {

    .feature-list.light2 {
        column-count: 1; /* Single column on mobile */
        margin-left: -35px; /* Remove left margin for full-width alignment */
    }
}
@media screen and (max-width: 736px) {
    .list-wrapper {
        max-width: 100%; /* Full width on mobile */
        padding-left: 0; /* Remove large left padding */
        margin: 0 auto; /* Center the wrapper */
    }

    .feature-list.light2 {

        margin-left: -50px; /* Remove left margin for full-width alignment */
    }
}

/* Responsive adjustments for feature-listcontact */
@media screen and (max-width: 980px) {
    .feature-listcontact {
        list-style: none;
        padding-left: 0;
        margin: 0 auto;
        text-align: center;
    }

    .feature-listcontact li {
        display: block;
        margin-bottom: 30px; /* spacing between items */
       border:none;
    }

    .feature-listcontact li a {
        display: block;
        margin-top: 5px; /* separates email link from label clearly */
        word-break: break-all;
		border:none;
    }
}


/* Style the link to look consistent with other items */
.invisible-link {
    text-decoration: none; /* Assuming this is already styled, adjust if needed */
    color: inherit; /* Match the list item color */
}

.feature-block {
    margin-bottom: 1.5em;
    padding: 1em;

}

/* Base feature block styles */
.feature-block h4 {
    margin-bottom: 0.5em;
}

/* Dark variant (for light backgrounds) */
.feature-block.dark h4 {
    color: #000000;
    border-bottom: 1px solid rgba(0,0,0, 0.20);
}

/* Light variant (for dark backgrounds) */
.feature-block.light h4 {
    color: #ffffff;

}
/* HR base styles */
hr {
    border: none;
    margin: 20px auto;  /* Center the HR */
    clear: both;
}

/* Color variants */
hr.light {
    border-top: 1px solid rgba(255, 255, 255, 0.20);
}

hr.dark {
    border-top: 1px solid rgba(0, 0, 0, 0.20);
}

.note {
    font-style: italic;
    margin: 1em 0;
    padding: 1em;
    background: rgba(255, 255, 255, 0.80);
}

.contact-link {
    text-align: center;
    margin-top: 2em;
}

.contact-link .button.special {
    font-size: 1.2em;
    padding: 1em 2em;
}
/* Container Styles */
.contact-form-container {
    width: 325px;
    position: fixed;
    top: 90px;
    left: -325px;
    background: #fff;
    z-index: 9999;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out;
    padding: 10px;
    display: block;
}

.contact-form-container.open {
    left: 0;
}


/* Close Button */
.close-form-button {
    position: absolute;
    top: -30px;  /* Move up above the form */
    right: 0;    /* Align with right edge */
    background: transparent;
    border: none;
    font-size: 24px;
    color: #ff0000;
    cursor: pointer;
    font-weight: bold;
    z-index: 10;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.close-form-button:hover {
    color: black;
}

/* Form Header */
.form-content {
    padding: 10px;
}

.form-title {
    color: #6d0f14;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.form-subtitle {
    color: #6d0f14;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* Form Fields */
.form-group {
    margin-bottom: 12px;
}

.input-wrapper {
    position: relative;
}
.contact-phone-text {
    margin-top: 25px;
    color: #666;
    font-size: 16px;
    text-align: center;
    /* You can adjust these properties as needed */
    position: relative;
    padding: 5px 0;
}
.form-input,
.form-textarea {
    width: 100%;
    padding: 8px 12px 8px 35px !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    color: #2d2624 !important;
}

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

/* Input Icons */
.input-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #666;
    z-index: 2;
    font-family: "FontAwesome";
    font-size: 14px;
    width: 14px;
    text-align: center;
}

.form-textarea + .input-icon {
    top: 16px;
    transform: none;
}

/* Placeholder Styles */
/* Placeholder styles with increased specificity */
.contact-form-container .form-input::placeholder,
.contact-form-container .form-textarea::placeholder {
    color: #7e7775 !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

/* Webkit browsers */
.contact-form-container .form-input::-webkit-input-placeholder,
.contact-form-container .form-textarea::-webkit-input-placeholder {
    color: #7e7775 !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

/* Firefox */
.contact-form-container .form-input::-moz-placeholder,
.contact-form-container .form-textarea::-moz-placeholder {
    color: #7e7775 !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

/* IE/Edge */
.contact-form-container .form-input:-ms-input-placeholder,
.contact-form-container .form-textarea:-ms-input-placeholder {
    color: #7e7775 !important;
    font-size: 14px !important;
    opacity: 1 !important;
} 

/* Hide placeholder on focus */
.form-input:focus::placeholder,
.form-textarea:focus::placeholder,
.form-input:focus::-webkit-input-placeholder,
.form-textarea:focus::-webkit-input-placeholder,
.form-input:focus::-moz-placeholder,
.form-textarea:focus::-moz-placeholder,
.form-input:focus:-ms-input-placeholder,
.form-textarea:focus:-ms-input-placeholder {
    opacity: 0;
}

/* Submit Button */
.form-actions {
text-align: center;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.submit-button {
    background-color: #6d0f14;
    color: #fff;
    border: none;
    padding: 8px 20px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 75%;
    
    /* Add these properties for perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px; /* Set a fixed height */
}

.submit-button:hover {
    background-color: #4b0a0d;
}

.form-call-to-action {
    margin-top: 25px;
    color: #666;
    font-size: 16px;
}

/* Captcha */
.captcha-container {
    margin-bottom: 15px;
    width: 100%;
}

.captcha-image {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 5px;
    padding: 10px;
    min-height: 50px;
    user-select: none;
    color: #1c4004;  /* Updated text color */
}

.captcha-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 45%, 
        rgba(255, 255, 255, 0.5) 50%, 
        rgba(255, 255, 255, 0.1) 55%, 
        transparent 100%);
    z-index: 1;
}

.refresh-captcha {
    position: absolute;
    right: 10px;
    top: 25% !important; /* Adjusted from 50% to move up */
    transform: translateY(-50%);
    cursor: pointer;
    color: #6d0f14;
    font-size: 16px;
    z-index: 2;
}

/* Feedback Tab */
.feedback-tab {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #6d0f14;
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10000;
    border-top-right-radius: 5px;
    white-space: nowrap;
    display: block !important; /* Force visibility */
    pointer-events: auto !important; /* Ensure clickable */
}

/* Explicitly ensure it works above 1280px */
@media screen and (min-width: 1281px) {
    .feedback-tab {
        pointer-events: auto;
        z-index: 10000;
        display: block;
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .contact-form-container {
        width: 300px;
        left: -300px;
    }
}
/* Fix phone input background */
.contact-form-container .form-group input#phone.form-input[type="tel"] {
    background: #90909040 !important;
    background-color: #90909040 !important;
}

/* Hide placeholders on focus for all browsers */
input:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0 !important;
    visibility: hidden !important;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    opacity: 0 !important;
    visibility: hidden !important;
}

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
    opacity: 0 !important;
    visibility: hidden !important;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    opacity: 0 !important;
    visibility: hidden !important;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    opacity: 0 !important;
    visibility: hidden !important;
}
/* Validation Styles */
.form-input.invalid,
.form-textarea.invalid {
    border-color: #ff4444 !important;
    background-color: #fff0f0 !important;
}

.error-message {
    display: none;
    color: #ff4444;
    font-size: 12px;
    margin-top: 5px;
    padding-left: 35px;
    line-height: 1.4;
}




/* Mobile adjustments */
@media screen and (max-width: 1280px) {
	.bame-feature-container2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
  margin:auto;
}
		
}

@media screen and (max-width: 736px) {
    .bame-feature-row {
        flex-direction: column; /* Stack title and description vertically */
        padding: 15px 0; /* Slightly more padding for spacing */
    }

    .bame-feature-title,
    .bame-feature-description {
        width: 100%; /* Full width on mobile */
        margin-bottom: 5px; /* Space between title and description */
    }

    .bame-feature-description {
        margin-bottom: 0; /* No extra margin after description */
    }
}
/* New wrapper for two-column layout */
.spotlight-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px; /* Space between text and image */
	margin-left: 8%;
}
.spotlight-container8 {
    display: flex;
    align-items: center;
   justify-content: space-between;
    gap: 40px; /* Space between text and image */
	margin-left: 8%;
}


/* Content on the left */
.spotlight-content {
    width: 62%;
}

/* Image on the right */
.spotlight-image {
   width: 100%;
    display: flex;
    justify-content: left;
	 height: 100%; /* Match the spotlight section height */
}
.spotlight-content, .spotlight-image {
        width: auto;
    }
.spotlight-imageright {
    /*width: 35%;*/
    display: flex;
    justify-content: right;
	 height: 100%; /* Match the spotlight section height */
}
.spotlight-imageright img {
   /* width: 90%; /* Make the image take the full width of its container */
    height: 100%; /* Make it stretch to fill height */
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
.spotlight-imageleft {
    /*width: 35%;*/
    display: flex;
    justify-content: right;
	 height: 100%; /* Match the spotlight section height */
}
.spotlight-imageleft img {
   /* width: 90%; /* Make the image take the full width of its container */
    height: 100%; /* Make it stretch to fill height */
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
.spotlight-image img {
   /* width: 90%; /* Make the image take the full width of its container */
    height: 100%; /* Make it stretch to fill height */
    object-fit: cover; /* Ensures the image fills the div without distortion */
}

/* New targeted style for specific image */
.spotlight-image.phone5 img {
    width: 100%;  /* Makes the image take 90% of the div width */
    height: 1250px !important; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
	justify-content:left !important;
}
.spotlight-image.phone5a img {
    width: 90%;  /* Makes the image take 90% of the div width */
    height: 750px !important; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
	justify-content:left !important;
}
.spotlight-image.phone5b img {
    width: 90%;  /* Makes the image take 90% of the div width */
    height: 810px !important; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
	justify-content:right !important;
}
.spotlight-imageright.phone5b img {
    width: 90%;  /* Makes the image take 90% of the div width */
    height: 810px !important; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
	justify-content:right !important;
}
.spotlight-image.phone9 img {
    width: 95%;  /* Makes the image take 90% of the div width */
    
    object-fit: cover; /* Ensures the image fills the div without distortion */
	justify-content:left !important;
}
.spotlight-image.phone7 img {
    width: 100% !important;  /* Makes the image take 90% of the div width */
    height: 100% !important; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
.spotlight-image.phone8 img {
    width: 100% !important;  /* Makes the image take 90% of the div width */
    height: 855px !important; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
.spotlight-image.phone8a img {
    width: 90%;  /* Makes the image take 90% of the div width */
    height: 100%; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
.spotlight-image.phone8 img {
    width: 90% ;  /* Makes the image take 90% of the div width */
    height: 100%; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
.spotlight-image.phone8c img {
    width: 90% ;  /* Makes the image take 90% of the div width */
    height: 100%; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
}

/* Mobile adjustments */
@media screen and (max-width: 1280px) {
	.spotlight-image.phone9 img {
    width: 85%;  /* Makes the image take 90% of the div width */
    height: 600px; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
	justify-content:left !important;
	margin-left:10%;
}
.spotlight-image.phone8 img {
    width: 100% !important;  /* Makes the image take 90% of the div width */
    height: 640px !important; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
.spotlight-image.phone8a {
    width: 56%;  /* Makes the image take 90% of the div width */
    height: 100%; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
	margin-left:-30px;
}
.spotlight-image.phone8b {
    width: 60%;  /* Makes the image take 90% of the div width */
    height: 100%; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
.spotlight-image.phone8b img{
    width: 60%;  /* Makes the image take 90% of the div width */
    height: 100%; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
.spotlight-image.phone8c img{
    width: 60%;  /* Makes the image take 90% of the div width */
    height: 100%; /* Stretch to fill height */ 
    object-fit: cover; /* Ensures the image fills the div without distortion */
}
/*.spotlight-image.phone8c img{
    width: 60%;  
    height: 100%; 
    object-fit: cover; 
}*/
		
}

@media screen and (max-width: 980px) {
    .spotlight-image {
        display: flex; /* Use flex to center the image */
        justify-content: center; /* Center horizontally */
        width: 100%; /* Full width of the row */
        padding: 0; /* Remove any padding that might offset centering */
    }

    .spotlight-image img {
        width: 100%; /* Full width of container */
        height: auto; /* Let height adjust naturally */
        max-height: 400px; /* Cap height to avoid oversized images */
        object-fit: cover; /* Crop to fit */
    }
	.spotlight-imageright {
        display: flex; /* Use flex to center the image */
        justify-content: center; /* Center horizontally */
        width: 100%; /* Full width of the row */
        padding: 0; /* Remove any padding that might offset centering */
    }

    .spotlight-imageright img {
        width: 100%; /* Full width of container */
        height: auto; /* Let height adjust naturally */
        max-height: 400px; /* Cap height to avoid oversized images */
        object-fit: cover; /* Crop to fit */
    }
	.spotlight-imageleft {
        display: flex; /* Use flex to center the image */
        justify-content: center; /* Center horizontally */
        width: 100%; /* Full width of the row */
        padding: 0; /* Remove any padding that might offset centering */
    }

    .spotlight-imageleft img {
        width: 100%; /* Full width of container */
        height: auto; /* Let height adjust naturally */
        max-height: 400px; /* Cap height to avoid oversized images */
        object-fit: cover; /* Crop to fit */
    }

    /* Remove specific fixed heights for mobile */
    .spotlight-image.phone5 img,
	.spotlight-image.phone5a img,
	.spotlight-image.phone5b img,
    .spotlight-image.phone9 img,
	 .spotlight-image.phone8a img,
	 	 .spotlight-image.phone8c img,
    .spotlight-image.phone8 img {
        height: auto !important; /* Override fixed heights */
        max-height: 853px !important; /* Consistent cap */
    }
}
/* New targeted style for specific image */

.spotlight:nth-child(3) {
    background-color: rgba(0, 0, 0, 0.225);
    padding-top: 0px !important;
}
/* Responsive adjustments */
@media (max-width: 1280px) {
    .spotlight-container8 {

   justify-content: space-between;

}
    }
@media (max-width: 1024px) {
    .spotlight-container {
	display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px; /* Space between text and image */
	margin-left: 1px;
	display:block;
}
    }

@media (max-width: 900px) {
    .spotlight-container {
        flex-direction: column;
        text-align: center;
		margin-left: 1px;
		display:block
    }

    .spotlight-content, .spotlight-image {
        width: 100%;
    }
}
/* Two-column layout */
.two-column-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px; /* Space between title and content */
}

/* Title column */
.column-title {
    width: 35%; /* Adjust width for balance */
    text-align: left;
}

/* Content column */
.column-content {
    width: 60%;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .two-column-container {
        flex-direction: column;
        text-align: center;
    }

    .column-title, .column-content {
        width: 100%;
    }
}
.invisible-link, 
.invisible-link:link, 
.invisible-link:visited, 
.invisible-link:hover, 
.invisible-link:focus, 
.invisible-link:active {
    text-decoration: none !important; /* Forces removal of underline */
    color: inherit !important; /* Ensures it keeps the text color */
    outline: none !important; /* Removes any focus outline */
	border-bottom: none !important;
}
.list-wrapper {
    max-width: 800px; /* Adjust to fit your design */
	padding-left:	200px;
}
.list-wrapper2 {
    max-width: 800px; /* Adjust to fit your design */
	padding-left:	200px;
}
@media screen and (max-width: 1280px) {
.list-wrapper2 {
	max-width: 800px; /* Adjust to fit your design */
	padding-left:	35%;
}
    }
}
@media screen and (max-width: 1024px) {
.list-wrapper {
        padding-left: 5px; /* Reduced padding for mobile */
    }
	.list-wrapper2 {
	padding-left:	25%;
}
}

/* Mobile version */
@media screen and (max-width: 736px) {
    .list-wrapper {
        padding-left: 100px; /* Reduced padding for mobile */
    }
	.list-wrapper2 {
	margin:	auto;
}
}
@media screen and (max-width: 480px) {
    .list-wrapper {
       
    }
	.list-wrapper2 {
	margin:	25px 25px 5px 55px;
}
}
.two-column-container {
    gap: 20px 40px; /* Space between title and content */
}
}
/* Default styles for desktop */
.spotlight-headphones {
    /* Original .spotlight styles */
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-wrap: nowrap; /* Retained from previous to allow wrapping */
   /* gap: 20px; /* Retained for spacing between content and image */
    padding: 20px; /* Retained for overall section padding */
	background-color: rgba(0, 0, 0, 0.125);
}
.spotlight-headphones--bg-light {
    background-color: rgba(0, 0, 0, 0.015); /* Semi-transparent white */
}
.content-headphones {
    /* Original .spotlight .content styles */
    -moz-order: 2;
    -webkit-order: 2;
    -ms-order: 2;
    order: 2;
    max-width: 48em;
    width: 60%; /* From original .spotlight .content */
    padding-left: 50px; /* From original .spotlight .content */
    /* Removed the commented-out padding: 2em 4em 0.1em 4em */
	margin:auto;
}

.spotlight-imageright-headphones {

    display: flex;
    justify-content: right;
    height: 100%; 

    width: 52%; 
}

.spotlight-imageright-headphones img {
    /* Original .spotlight-imageright img styles */
    height: 100%; /* Make it stretch to fill height */
    object-fit: cover; /* Ensures the image fills the div without distortion */
    /* Removed the commented-out width: 90% */
    width: 100%; /* Ensure it takes the full width of its container */
    display: block; /* Retained from previous */
}
.spotlight-imageright-headphones1 {
    /* Original .spotlight-imageright styles */
    display: flex;
    justify-content: right;
    height: 100%; /* Match the spotlight section height */
    /* Removed the commented-out width: 35% */
    width: 40%; /* Adjusted to complement content's 60% width */
}

.spotlight-imageright-headphones1 img {
    /* Original .spotlight-imageright img styles */
    height: 100%; /* Make it stretch to fill height */
    object-fit: cover; /* Ensures the image fills the div without distortion */
    /* Removed the commented-out width: 90% */
    width: 100%; /* Ensure it takes the full width of its container */
    display: block; /* Retained from previous */
}
.spotlight-imageright-headphones2 {
    /* Original .spotlight-imageright styles */
    display: flex;
    justify-content: right;
    height: 100%; /* Match the spotlight section height */
    /* Removed the commented-out width: 35% */
    width: 55%; /* Adjusted to complement content's 60% width */
}

.spotlight-imageright-headphones2 img {
    /* Original .spotlight-imageright img styles */
    height: 100%; /* Make it stretch to fill height */
    object-fit: cover; /* Ensures the image fills the div without distortion */
    /* Removed the commented-out width: 90% */
    width: 100%; /* Ensure it takes the full width of its container */
    display: block; /* Retained from previous */
}
.spotlight-imagecenter-headphones {
    width: 100%;
    text-align: center;
}

.spotlight-imagecenter-headphones img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 70%;
}

.spacer-50-headphones {
    height: 50px;
}

@media screen and (max-width: 2000px) {
	.spotlight-imageright-headphones img {

    height: 100%; 
    object-fit: cover; 

    width: 100%; 
    display: block; 
}
.content-headphones {

    order: 2;
    max-width: 48em;
    width: 60%; 
    padding-left: 50px;
	margin:auto;
}
.spotlight-headphones {

    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-wrap: nowrap; 

    padding: 20px;
	background-color: rgba(0, 0, 0, 0.125);
}

}

@media screen and (max-width: 1800px) {
	.spotlight-imageright-headphones img {

    height: 100%; 
    object-fit: cover; 

    width: 100%; 
    display: block; 
}
.content-headphones {

    order: 2;
    max-width: 48em;
    width: 60%; 
    padding-left: 50px;
	margin:auto;
}
.spotlight-headphones {

    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-wrap: nowrap; 

    padding: 20px;
	background-color: rgba(0, 0, 0, 0.125);
}

}
/* Tablet breakpoint (max-width: 1024px) */
@media screen and (max-width: 1280px) {
			.spotlight-headphones .image {
				width: 45%;
			}
			.spotlight-headphones .content {
				width: 55%;
			}
			   /* .spotlight-headphones {
        flex-direction: column;
        align-items: stretch;
		background-color:	rgba(0, 0, 0, 0.15);
    }*/
.spotlight-headphones {
    /* Original .spotlight styles */
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-wrap: nowrap; /* Retained from previous to allow wrapping */
   /* gap: 20px; /* Retained for spacing between content and image */
    padding: 20px; /* Retained for overall section padding */
	background-color: rgba(0, 0, 0, 0.125);
}
    .content-headphones {
        width: 90%;
        padding-left: 6%; /* Your preferred tablet padding */
        padding-right: 1%;
        max-width: none; /* Override max-width for tablet */
    }

    .spotlight-imageright-headphones {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        height: auto; /* Override height: 100% for stacking */
    }

    .spotlight-imageright-headphones img {
        width: 100%;
        height: 550px; /* Fixed height for tablet */
        object-fit: cover;
        object-position: center;
    }
	.spotlight-imageright-headphones1 {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        height: auto; /* Override height: 100% for stacking */
    }

    .spotlight-imageright-headphones1 img {
        width: 100%;
        height: 550px; /* Fixed height for tablet */
        object-fit: cover;
        object-position: center;
    }
.spotlight-imageright-headphones2 {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        height: auto; /* Override height: 100% for stacking */
    }

    .spotlight-imageright-headphones2 img {
        width: 100%;
        height: 550px; /* Fixed height for tablet */
        object-fit: cover;
        object-position: center;
    }
    .spacer-50-headphones {
        height: 20px;
    }

		}
@media screen and (max-width: 1024px) {
    .spotlight-headphones {
        flex-direction: column;
        align-items: stretch;
		background-color:	rgba(0, 0, 0, 0.15);
    }

    .content-headphones {
        width: 90%;
        padding-left: 80px; /* Your preferred tablet padding */
        padding-right: 20px;
        max-width: none; /* Override max-width for tablet */
    }

    .spotlight-imageright-headphones {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        height: auto; /* Override height: 100% for stacking */
    }

    .spotlight-imageright-headphones img {
        width: 100%;
        height: 300px; /* Fixed height for tablet */
        object-fit: cover;
        object-position: center;
    }
	.spotlight-imageright-headphones1 {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        height: auto; /* Override height: 100% for stacking */
    }

    .spotlight-imageright-headphones1 img {
        width: 100%;
        height: 500px; /* Fixed height for tablet */
        object-fit: cover;
        object-position: center;
    }
	.spotlight-imageright-headphones2 {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        height: auto; /* Override height: 100% for stacking */
    }

    .spotlight-imageright-headphones2 img {
        width: 100%;
        height: 900px; /* Fixed height for tablet */
        object-fit: cover;
        object-position: center;
    }

    .spacer-50-headphones {
        height: 20px;
    }
}

/* Mobile breakpoint (max-width: 736px) */
@media screen and (max-width: 736px) {
    .spotlight-headphones {
        flex-direction: column;
    }

    .content-headphones {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        max-width: none;
    }

    .spotlight-imageright-headphones {
        width: 100%;
        max-width: none;
        height: auto;
    }

    .spotlight-imageright-headphones img {
        height: 200px;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }
	.spotlight-imageright-headphones1 {
        width: 100%;
        max-width: none;
        height: auto;
    }

    .spotlight-imageright-headphones1 img {
        height: 300px;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }
	.spotlight-imageright-headphones2 {
        width: 100%;
        max-width: none;
        height: auto;
    }

    .spotlight-imageright-headphones2 img {
        height: 300px;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }

    .spacer-50-headphones {
        height: 10px;
    }
}
@media screen and (max-width: 480px) {
.spotlight-imageright-headphones2 img {
        height: 400px;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }
}

.signup {
    width: 80%;
    margin: 0 auto; /* Centers the div horizontally */
}
.actions-list {
    margin: 0 0 1em;
    display: none;
}

.button-custom {
    background-color: #4ca1f4;
    box-shadow: none !important;
    color: #ffffff !important;
    -moz-appearance: none;
    height: 2.5em;
    line-height: 2.5em;
    padding: 0 1.55em;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 0 2px #fff inset;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.225em;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    transition: background-color 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s;
    white-space: nowrap;
    width: 270px;
}

.button-commercial-extra {
    margin-bottom: 24px;
    margin-top: 5px;
}

/* Spacer utilities */
.spacer-5 {
    height: 5px;
    width: 100%;
    display: block;
    clear: both;
}

.spacer-10 {
    height: 10px;
    width: 100%;
    display: block;
    clear: both;
}

.spacer-15 {
    height: 15px;
    width: 100%;
    display: block;
    clear: both;
}

.spacer-20 {
    height: 20px;
    width: 100%;
    display: block;
    clear: both;
}
.spacer-30 {
    height: 30px;
    width: 100%;
    display: block;
    clear: both;
}
.spacer-40 {
    height: 40px;
    width: 100%;
    display: block;
    clear: both;
}
.spacer-50 {
    height: 50px;
    width: 100%;
    display: block;
    clear: both;
}
.spacer-75 {
    height: 75px;
    width: 100%;
    display: block;
    clear: both;
}
@media screen and (max-width: 980px), screen and (max-width: 736px) {
    .hide-on-mobile {
        display: none !important;
    }
}
/* Outer wrapper for image and text */
.spotlight-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
  /*max-width: 1400px; /* Constrain content width */
  margin: 0 auto; /* Center on page */
  padding: 20px;
}

/* Image column */
.spotlight-image {
  width: 40%;
  display: flex;
  justify-content: center; /* Center image horizontally */
  align-items: center; /* Center image vertically */
}

.spotlight-image.phone8c img {
  width: 100%;
  height: auto; /* Avoid distortion */
  max-height: 800px; /* Cap height */
  object-fit: cover;
}

/* Text column */
.spotlight-content5 {
  width: 60%;
  padding: 0 1px;
}

/* Inner two-column layout for text */
.two-column-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: -41px;
  margin-left:50px;
  padding-bottom:	20px;
}

.column-title {
  width: 35%;
  text-align: left;
}

.column-content {
  width: 60%;
}

/* Responsive Breakpoints */

/* 1400-1600px: Slight adjustments for larger screens */
@media screen and (min-width: 1400px) and (max-width: 1600px) {
  .spotlight-wrapper {
    gap: 50px;
  }
  .spotlight-image {
    width: 45%; /* More space for image */
  }
  .spotlight-content5 {
    width: 55%;
  }
  .spotlight-image.phone8c img {
    max-height: 900px;
  }
}

/* 1280px: Refine layout */
@media screen and (max-width: 1280px) {
  .spotlight-wrapper {
    gap: 30px;
    padding: 15px;
  }
  .spotlight-image {
    width: 40%;
  }
  .spotlight-content5 {
    width: 60%;
  }
  .spotlight-image.phone8c img {
    max-height: 700px;
  }
  /* Inner two-column layout for text */
.two-column-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-bottom: 0px;
}

.column-title {
  width: 30%;
  text-align: left;
}

.column-content {
  width: 70%;
}
}

/* 1024px: Adjust padding and image size */
@media screen and (max-width: 1024px) {
  .spotlight-wrapper {
    gap: 20px;
    padding: 10px;
  }
  .spotlight-image {
    width: 45%;
  }
  .spotlight-content5 {
    width: 55%;
  }
  .two-column-container {
    gap: 1px;
	padding-left:5px;
  }
  .spotlight-image.phone8c img {
    max-height: 600px;
  }
}

/* 780px: Narrower layout, still two columns */
@media screen and (max-width: 780px) {
  .spotlight-wrapper {
    gap: 15px;
    padding: 10px;
  }
  .spotlight-image {
    width: 40%;
  }
  .spotlight-content5 {
    width: 60%;
  }
  .two-column-container {
    flex-direction: column; /* Stack title and content */
    gap: 10px;
  }
  .column-title, .column-content {
    width: 100%;
    text-align: center; /* Center text for better mobile look */
  }
  .spotlight-image.phone8c img {
    max-height: 500px;
  }
}

/* 736px: Stack everything vertically */
@media screen and (max-width: 736px) {
  .spotlight-wrapper {
    flex-direction: column;
    gap: 20px;
    padding: 10px;
  }
  .spotlight-image, .spotlight-content5 {
    width: 100%;
  }
  .spotlight-image.phone8c img {
    max-height: 400px;
    width: 100%;
  }
  .two-column-container {
    flex-direction: column;
    gap: 10px;
  }
  .column-title, .column-content {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 1800px) {
.contact-form-container {
    width: 325px;
    position: fixed;
    top: 90px;
    left: -325px;
    background: #fff;
    z-index: 9999;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out;
    padding: 10px;
    display: block;
}

.contact-form-container.open {
    left: 0;
}
.feedback-tab {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #6d0f14;
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10000;
    border-top-right-radius: 5px;
    white-space: nowrap;
    display: block !important; /* Force visibility */
    pointer-events: auto !important; /* Ensure clickable */
}
/* Form Header */
.form-content {
    padding: 10px;
}

.form-title {
    color: #6d0f14;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.form-subtitle {
    color: #6d0f14;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

/* Form Fields */
.form-group {
    margin-bottom: 12px;
}

.input-wrapper {
    position: relative;
}
.contact-phone-text {
    margin-top: 25px;
    color: #666;
    font-size: 16px;
    text-align: center;
    /* You can adjust these properties as needed */
    position: relative;
    padding: 5px 0;
}
.form-input,
.form-textarea {
    width: 100%;
    padding: 8px 12px 8px 35px !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    color: #2d2624 !important;
}

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

/* Input Icons */
.input-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #666;
    z-index: 2;
    font-family: "FontAwesome";
    font-size: 14px;
    width: 14px;
    text-align: center;
}

.form-textarea + .input-icon {
    top: 16px;
    transform: none;
}



/* Button */
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 3px;
		border: 0;
		box-shadow: inset 0 0 0 2px #fff;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 600;
		height: 3.125em;
		letter-spacing: 0.225em;
		line-height: 3.125em;
		padding: 0 2.75em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: rgba(144, 144, 144, 0.25);
		}
		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(144, 144, 144, 0.5);
		}
		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}
		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			display: block;
			margin: 0 0 1em 0;
			width: 100%;
		}
		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.8em;
		}
		input[type="submit"].big,
		input[type="reset"].big,
		input[type="button"].big,
		button.big,
		.button.big {
			font-size: 1.35em;
		}
		input[type="submit"].special,
		input[type="reset"].special,
		input[type="button"].special,
		button.special,
		.button.special {
			background-color: #ed4933;
			box-shadow: none !important;
			color: #ffffff !important;
		}
			input[type="submit"].special:hover,
			input[type="reset"].special:hover,
			input[type="button"].special:hover,
			button.special:hover,
			.button.special:hover {
				background-color: #ef5e4a !important;
			}
			input[type="submit"].special:active,
			input[type="reset"].special:active,
			input[type="button"].special:active,
			button.special:active,
			.button.special:active {
				background-color: #eb341c !important;
			}
		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			opacity: 0.25;
		}
}

/*  new form styles */
/* Ensure box-sizing is consistent */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Contact Form Container - Hidden by default */
.cf-contact-form-container {
  display: none;
  position: fixed;
  bottom: 60px;
  left: 20px;
  width: 300px;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Class to show the form when the contact button is clicked */
.cf-contact-form-container.is-visible {
  display: block;
}

/* Close Form Button */
.cf-close-form-button {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #6d0f14 !important;
  cursor: pointer;
  font-weight: bold;
  z-index: 10;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Form Content */
.cf-form-content {
  padding: 40px 10px 10px 10px;
}

/* Form Title */
.cf-form-title {
  color: #6d0f14;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

/* Form Subtitle */
.cf-form-subtitle {
  color: #6d0f14;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

/* Input Styles */
.cf-form-input,
.cf-form-textarea {
  width: 100%;
  padding: 8px 12px 8px 35px !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  color: #191717 !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: #90909040;
  outline: 0;
  text-decoration: none;
}

/* Placeholder Text Color */
.cf-form-input::placeholder,
.cf-form-textarea::placeholder {
  color: #c99d9d !important; /* Medium gray for visibility */
  opacity: 1; /* Ensure full opacity (some browsers reduce opacity by default) */
}

/* Vendor prefixes for broader browser support */
.cf-form-input::-webkit-input-placeholder,
.cf-form-textarea::-webkit-input-placeholder {
  color: #c99d9d;
}

.cf-form-input:-moz-placeholder,
.cf-form-textarea:-moz-placeholder {
  color: #c99d9d;
  opacity: 1;
}

.cf-form-input::-moz-placeholder,
.cf-form-textarea::-moz-placeholder {
  color: #c99d9d;
  opacity: 1;
}

.cf-form-input:-ms-input-placeholder,
.cf-form-textarea:-ms-input-placeholder {
  color: #c99d9d;
}

.cf-form-input[type="text"],
.cf-form-input[type="email"],
.cf-form-input[type="tel"] {
  height: 2.75em;
}

.cf-form-textarea {
  height: auto;
}

/* Input Invalid State */
.cf-form-input:invalid,
.cf-form-textarea:invalid {
  box-shadow: none;
}

/* Input Wrapper */
.cf-input-wrapper {
  position: relative;
}

/* Input Icons */
.cf-input-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 16px;
}

/* CAPTCHA Container */
.cf-captcha-container {
  position: relative;
}

/* CAPTCHA Image */
.cf-captcha-image {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 5px;
  padding: 10px;
  min-height: 50px;
  user-select: none;
  color: #1c4004;
}

.cf-captcha-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 100%
  );
  z-index: 1;
}

/* CAPTCHA Refresh Icon */
.cf-captcha-refresh {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #666;
  cursor: pointer;
  z-index: 2;
}

.cf-captcha-refresh:hover {
  color: #6d0f14;
}

/* Submit Button */
.cf-submit-button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  background-color: #6d0f14;
  border-radius: 8px;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  height: 40px;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  width: 75%;
  margin:auto;
}

/* Contact Phone Text */
.cf-contact-phone-text {
  margin-top: 25px;
  color: #666;
  font-size: 16px;
  text-align: center;
  position: relative;
  padding: 5px 0;
}

/* Form Group */
.cf-form-group {
  margin-bottom: 15px;
}

/* Form Actions */
.cf-form-actions {
  text-align: center;
}
/* Error Message Styles */
.error-message {
  color: #ff0000; /* Red for visibility */
  font-size: 12px;
  margin-top: 5px;
  display: none; /* Hidden by default, shown by JavaScript */
}

/* Invalid Input Styling */
.cf-form-input.invalid,
.cf-form-textarea.invalid {
  border-color: #ff0000; /* Red border for invalid inputs */
}
.history-highlight {
    background-color: #CBDFE7;
    /*border-left: 6px solid #2a6496;*/
    padding: 20px;
    margin: 30px auto;
    max-width: 700px;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-align: center;
	border-radius: 15px; 

}

.history-highlight h2 {
    color: #2a6496;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.history-highlight p {
    font-size: 1.1em;
    color: #333;
}

.history-highlight img {
    margin-top: 15px;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.history-highlight img:hover {
    transform: scale(1.03);
}
.history-highlight a img {
        text-decoration: none; /* Redundant for images, but safe */
    border-bottom: none;

	border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.history-highlight a:hover img {
    border-color: #2a6496;
    transform: scale(1.03);
}
.history-highlight a {
    text-decoration: none;
}

/*new banner styles */
body {
  padding-top: 50px; /* Creates the 75px space */
}

/* Style the banner-text section */
.banner-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 1000;
}

/* Fine-tune the text position within the 275px space */
.banner-text .inner {
  margin-top: 20px;
}

/* Apply the before/after lines to the h2 in banner-text */
.banner-text h2 {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
  -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
  transition: transform 0.5s ease, opacity 0.5s ease;
  display: inline-block;
  opacity: 1;
  padding: 0.35em .75em;
  position: relative;
  z-index: 1;
  line-height:.75em;
}

.banner-text h2:before, .banner-text h2:after {
  -moz-transition: width 0.85s ease;
  -webkit-transition: width 0.85s ease;
  -ms-transition: width 0.85s ease;
  transition: width 0.85s ease;
  -moz-transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  transition-delay: 0.25s;
  background: #fff; /* Adjust color if needed */
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  width: 100%;
}

.banner-text h2:before {
  top: 0;
  left: 0;
}

.banner-text h2:after {
  bottom: 0;
  right: 0;
}

/* Loading animation for the lines */
body.is-loading .banner-text h2 {
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
  opacity: 0;
}

body.is-loading .banner-text h2:before, body.is-loading .banner-text h2:after {
  width: 0;
}

/* Style the banner section */
#banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#banner .panel.home {
  position: relative;
}

/* Responsive adjustments */
@media screen and (max-width: 736px) {
  body {
    padding-top: 150px;
  }
  .banner-text .inner {
    margin-top: 15px;
  }
  .banner-text h2 {
    font-size: 1.25em;
	line-height:1.25em;
  }
}
html body.landing #page-wrapper {
  background-attachment: scroll !important; /* Makes the background move with the page */
  background-position: center top !important; /* Aligns the image to the top */
  background-size: 95% !important; /* Matches the size from the #main > header rule */
}

/* Remove the redundant background rule for #main > header since it’s not applying */
#main > header {
  background-image: none !important; /* Just to ensure it doesn’t interfere */
}

/* Ensure #banner doesn’t interfere (optional, since it doesn’t have a background image) */
#banner {
  background-attachment: scroll !important; /* In case it inherits a fixed background */
}