/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Floating Button Container */
.floating-message {
    /* Define CSS variables for scaling and translation */
    --scale: 1;
    --translateY: 0px;

    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 94, 77, 0.9);
    color: #ffffff;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 99999;
    display: flex;
    align-items: center;
    will-change: transform; /* Optimize for transform changes */

    /* Combine scaling and translateY using CSS variables */
    transform: scale(var(--scale)) translateY(var(--translateY));

    /* Transition for scaling and other property changes */
    transition: 
        transform 0.5s ease-in-out, 
        background 0.5s ease-in-out, 
        color 0.5s ease-in-out, 
        box-shadow 0.5s ease-in-out;

    /* Apply the updated bouncing animation */
    animation: bounceFloating 2s infinite;
}

.floating-message:hover {
    /* Update the scale variable on hover */
    --scale: 1.1;

    /* Update other styles on hover */
    color: #ffffff;
    background: rgba(255, 165, 77, 0.9);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Bounce Animation Keyframes with 10 Steps */
@keyframes bounceFloating {
    0%    { --translateY: 0px; }
    3.125% { --translateY: -0.625px; }
    6.25%  { --translateY: -1.25px; }
    9.375% { --translateY: -1.875px; }
    12.5%  { --translateY: -2.5px; }
    15.625% { --translateY: -3.125px; }
    18.75%  { --translateY: -3.75px; }
    21.875% { --translateY: -4.375px; }
    25%     { --translateY: -5px; }
    28.125% { --translateY: -5.625px; }
    31.25%  { --translateY: -6.25px; }
    34.375% { --translateY: -6.875px; }
    37.5%   { --translateY: -7.5px; }
    40.625% { --translateY: -8.125px; }
    43.75%  { --translateY: -8.75px; }
    46.875% { --translateY: -9.375px; }
    50%     { --translateY: -10px; }
    53.125% { --translateY: -9.375px; }
    56.25%  { --translateY: -8.75px; }
    59.375% { --translateY: -8.125px; }
    62.5%   { --translateY: -7.5px; }
    65.625% { --translateY: -6.875px; }
    68.75%  { --translateY: -6.25px; }
    71.875% { --translateY: -5.625px; }
    75%     { --translateY: -5px; }
    78.125% { --translateY: -4.375px; }
    81.25%  { --translateY: -3.75px; }
    84.375% { --translateY: -3.125px; }
    87.5%   { --translateY: -2.5px; }
    90.625% { --translateY: -1.875px; }
    93.75%  { --translateY: -1.25px; }
    96.875% { --translateY: -0.625px; }
    100%    { --translateY: 0px; }
}

/* Optional: Icon Styling (If you use an icon) */
.floating-message .message-content i {
    margin-right: 8px;
    /* Add any additional icon-specific styles here */
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .floating-message {
        bottom: 15px;
        right: 15px;
        padding: 10px 15px;
        font-size: 14px;
    }

    .floating-message .message-content i {
        margin-right: 6px;
    }
}



/* Expandable Form Styling */

.expandable-form {

    display: none;

    position: fixed;

    bottom: 80px;

    right: 20px;

    background: radial-gradient(circle, rgba(255, 165, 77, 0.8), rgba(35, 50, 75, 0.8)); /* Radial Gradient from Tangerine to Charcoal Blue */

    color: #000;

    padding: 30px;

    border-radius: 10px;

    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.9);

    z-index: 1001;

}



.expandable-form input,

.expandable-form textarea {

    width: 100%;

    margin-bottom: 10px;

    padding: 10px;

    border: 1px solid #ccc;
	
	background: rgba(20, 25, 35, 0.9);
	
	color:rgba(255,255,255,1.00);

    border-radius: 5px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

}







/* Base Button Styles */
.expandable-form button {
    position: relative; /* Establishes a containing block for the pseudo-elements */
    background: rgba(255, 94, 77, 0.9);
    color: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 10px 20px; /* Increased padding for better visibility */
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    overflow: hidden; /* Ensures the animated arrows don't overflow the button */
    transition: 0.8s; /* Transition for hover effects */
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hover State */
.expandable-form button:hover {
    transform: scale(1.05);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 165, 77, 0.9);
    border: 0px solid rgba(231, 76, 60, 1);
    padding: 10px 20px; /* Maintain padding on hover */
    border-radius: 5px;
    cursor: pointer;
}

/* Pseudo-elements for Animated Arrows */
.expandable-form button::before,
.expandable-form button::after {
    content: '\f105'; /* Unicode for fa-angle-right */
    font-family: 'Font Awesome 5 Free'; /* Ensure correct Font Awesome family */
    font-weight: 900; /* Solid style */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px; /* Increased size for better visibility */
    color: rgba(231, 76, 60, 0); /* Start fully transparent */
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through the pseudo-elements */
    /* Animation properties */
    animation: arrowFlow var(--flow-duration, 1s) linear infinite;
}

/* Positioning for ::before and ::after */
.expandable-form button::before {
    left: -60px; /* Start further off-screen to the left for larger arrows */
    animation-delay: 0s; /* No delay for the first arrow */
}

.expandable-form button::after {
    left: -60px; /* Start further off-screen to the left for larger arrows */
    animation-delay: calc(var(--flow-duration, 1s) * 0.5); /* Half the duration delay for spacing */
}

/* Hover State - Activate Animation */
.expandable-form button:hover::before,
.expandable-form button:hover::after {
    color: rgba(231, 76, 60, 0.5); /* Set to desired opacity */
    opacity: 0.5;
}

/* Keyframes for arrowFlow Animation */
@keyframes arrowFlow {
    0% {
        left: -60px; /* Start off-screen */
        opacity: 0;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        left: 100%; /* Move to the end of the button */
        opacity: 0.5;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        left: 100%; /* Off-screen to the right */
        opacity: 0;
    }
}

/* Adjustable Animation Frequency */
:root {
    --flow-duration: 1s; /* Default animation duration */
}

/* Classes to Control Animation Speed */
.expandable-form button.fast-flow::before,
.expandable-form button.fast-flow::after {
    --flow-duration: 0.5s; /* Faster animation */
}

.expandable-form button.slow-flow::before,
.expandable-form button.slow-flow::after {
    --flow-duration: 1.5s; /* Slower animation */
}

/* Optional: Icon Styling (If you use an existing icon inside the button) */
.expandable-form button .icon {
    margin-right: 8px;
    font-size: 16px; /* Adjust as needed */
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .expandable-form button {
        padding: 8px 16px; /* Adjust padding for smaller screens */
        font-size: 14px;
    }

    .expandable-form button::before,
    .expandable-form button::after {
        font-size: 30px; /* Adjust arrow size for smaller screens */
        left: -40px; /* Adjust starting position for smaller arrows */
    }
}
















.thank-you-message {

    text-align: center;

    padding: 20px;
	
	background: rgba(20, 25, 35, 0.9);

    color: #white; /* Muted blue, or any other color from your palette */

}



.thank-you-message h3 {

    margin-bottom: 10px;

    color: #2D3142; /* Dark navy */
	
	background: rgba(20, 25, 35, 0.9);

}



.error-message {

    color: red;
	background: rgba(20, 25, 35, 0.9);
	
	
	border-radius: 10px;
	
	padding: 5px;

    font-size: 14px;

    margin-bottom: 10px;

}



/* Default Input Styles */
input, textarea {
    border: 1px solid #ccc; /* Gray color initially */
    padding: 10px;
    margin-bottom: 10px;
    transition: border-color 0.9s ease, background-color 0.9s ease, color 0.9s ease; /* Smooth color change */
    background-color: rgba(205, 206, 255, 0.9); /* Light blue background */
    color: rgba(26, 26, 26, 1.00); /* Dark text color */
}

/* Focus State - No Text or Background Color Change */
input:focus, textarea:focus {
    transition: 1.5s;
    border-color: rgba(79, 93, 117, 1); /* Muted blue color on focus */
    background-color: rgba(205, 206, 255, 0.9); /* Light blue background */
    color: rgba(26, 26, 26, 1.00); /* Dark text color */
    outline: none; /* Remove the outline for better styling */
}

/* Autofill Styles (Force Background and Text Color) */
/* WebKit-based browsers (Chrome, Opera, Safari) */
input:-webkit-autofill, textarea:-webkit-autofill {
    background-color: rgba(205, 206, 255, 0.9) !important; /* Light blue background */
    color: rgba(26, 26, 26, 1.00) !important; /* Dark text */
    box-shadow: 0 0 0 1000px rgba(205, 206, 255, 0.9) inset !important; /* Force background color */
    -webkit-text-fill-color: rgba(26, 26, 26, 1.00) !important; /* Force text color */
    border: 1px solid rgba(79, 93, 117, 1); /* Muted blue border */
    transition: background-color 0s ease-in-out, color 0s ease-in-out; /* No transition delay */
}

/* Mozilla (Firefox) Autofill Styles */
input:-moz-autofill, textarea:-moz-autofill {
    background-color: rgba(205, 206, 255, 0.9) !important; /* Light blue background */
    color: rgba(26, 26, 26, 1.00) !important; /* Dark text */
    box-shadow: 0 0 0 1000px rgba(205, 206, 255, 0.9) inset !important; /* Force background color */
    border: 1px solid rgba(79, 93, 117, 1); /* Muted blue border */
    transition: background-color 0s ease-in-out, color 0s ease-in-out; /* No transition delay */
}

/* General Autofill State (For other browsers that support autofill) */
input:autofill, textarea:autofill {
    background-color: rgba(205, 206, 255, 0.9) !important; /* Light blue background */
    color: rgba(26, 26, 26, 1.00) !important; /* Dark text */
    box-shadow: 0 0 0 1000px rgba(205, 206, 255, 0.9) inset !important; /* Force background color */
    border: 1px solid rgba(79, 93, 117, 1); /* Muted blue border */
    transition: background-color 0s ease-in-out, color 0s ease-in-out; /* No transition delay */
}





.error-message {

    color: red;

    font-size: 14px;

    margin-bottom: 10px;

}



/* Initially hidden state */

#formContainer.hidden {

    display: block; /* We still need the element to take up space initially */

    opacity: 0;

    pointer-events: none; /* Prevent interaction while hidden */

    transition: opacity 0.5s ease;

}



/* Visible state */

#formContainer.visible {

    display: block;

    opacity: 1;

    pointer-events: auto; /* Allow interaction */

    transition: opacity 0.5s ease;

}



/* Sending Overlay Styling */

.sending-overlay {
	
	background: rgba(20, 25, 35, 0.3);
	
	color: white;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1002;

}



.overlay-content {

    position: absolute; /* Make the position absolute within the overlay */

    top: 50%; /* Place at the vertical center */

    left: 50%; /* Place at the horizontal center */

    transform: translate(-50%, -50%) translate(0, -30px); /* Adjust with additional values */

    background: rgba(20, 25, 35, 0.9);

    padding: 100px;

    border-radius: 30px;

    text-align: center;

    color: white;

    font-size: 2em;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}