/* style.css */
/* Common styles for body */
body, html {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    overflow-x: hidden; /* Prevent horizontal overflow */
    min-height: 100vh;

}


/* Hero section styles */
.hero {
    background: url('/static/images/hero-banner.webp') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    color: white;
    border-radius:0 0 30px 30px ;

    overflow: hidden; /* ensures pseudo-element doesn't overflow */
    z-index: 1;

}

.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('/static/images/hero-banner.webp') no-repeat center center;
    background-size: cover;
    filter: blur(0.7px); /* adjust blur strength */
    z-index: -1; /* behind content */
    transform: scale(1.05); /* optional: avoid visible edges */
}

.hero h1 {
    margin: 20px 0 0 0;
}


/* Responsive form adjustments */
@media (max-width: 768px) {
    .form-container {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
    }

    .form-container h2,
    .form-container h3 {
        text-align: center;
    }
}

/* Content sections */
.content-section,
.about-section,
.features-section,
.search-section {
    width: 100%;
    background-color: #fff;
    color: #333;
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.about-section,
.features-section {
    padding-left: 100px;
    padding-right: 100px;
}

.content-section h2,
.about-section h2,
.features-section h2,
.search-section h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.content-section p,
.about-section p,
.features-section p,
.search-section p {
    font-size: 18px;
    margin-bottom: 20px;
}

/* Ensuring images are responsive and do not overflow */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Feature styles */
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    width: 100%; /* Ensure it does not cause overflow */
    box-sizing: border-box;
    padding: 0 20px; /* Add padding to prevent overflow */
}

.feature {
    background: linear-gradient(135deg, #f4f4f4 80%, #c5d9e2 110%);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex: 1 1 calc(33% - 40px);
    max-width: calc(33% - 40px);
    box-sizing: border-box;
    position: relative;
    opacity: 1; /* Set to fully visible initially */
    transform: none; /* Remove initial transform to prevent shifting */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.feature.animate-on-scroll {
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Position for animation on scroll */
}

.feature.animate-on-scroll.visible {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Slide into place */
}

/* Left and right transforms for larger screens */
@media (min-width: 768px) {
    .feature-left.animate-on-scroll {
        transform: translateX(-20px);
    }

    .feature-right.animate-on-scroll {
        transform: translateX(20px);
    }

    .feature-left.animate-on-scroll.visible,
    .feature-right.animate-on-scroll.visible {
        transform: translateX(0);
    }
}

.step-content p{
    font-size: small;
}

/* Responsive feature adjustments */
@media (max-width: 768px) {
    .feature {
        flex: 1 1 calc(50% - 20px); /* Use 50% width for medium screens */
        max-width: calc(50% - 20px); /* Prevent overflow */
    }

    .about-section,
    .features-section {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 480px) {
    .feature {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 10px 0; /* Adjust margin for smaller screens */
        opacity: 1; /* Ensure visibility without animation on small screens */
        transform: none; /* No animation on small screens */
    }
}

/* Search button styles */
.search-button {
    padding: 17px 22px;
    border-radius: 30px;
    /* background: linear-gradient(45deg, #308cb4, #b3e5fc, #81d4fa); */
    border: #6ec1e4 1.5px solid;
    color: #6ec1e4;
    font-size: 16px;
    cursor: pointer;
    /* text-shadow: #333; */
    font-weight: bolder;
    background-color: white;
}

.search-button:hover {
    background: linear-gradient(45deg, #81d4fa, #b3e5fc, #6ec1e4);
    cursor: pointer;
    color: white;
    border: none;
    padding: 19px 23px;
}

/* About section styles */
.about-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.about-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Contact button styles */
.contact-button {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(45deg, #52528e, #7d7191, #a96dad);
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}

.contact-button:hover {
    background: linear-gradient(45deg, #a96dad, #7d7191, #52528e);
}

/* Custom styles for jQuery UI autocomplete */
.ui-autocomplete {
    background-color: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    z-index: 1000;
    border-radius: 30px;
}

.ui-menu-item {
    padding: 5px 10px;
    cursor: pointer;
}

.ui-menu-item:hover {
    background-color: #c1bebe;
    color: black;

}









/* Style for the autocomplete suggestions */
.ui-autocomplete {
    background-color: white; /* Set the background color to white */
    color: black;
    border: 1px solid #9c9c9c;  /* Add a border to the suggestions box */
    z-index: 1000;           /* Ensure it appears above other elements */
}

.ui-menu-item-wrapper {
    color: black;            /* Set the font color to black */
    padding: 8px;            /* Add some padding to the suggestions */
    cursor: pointer;         /* Change cursor to pointer on hover */
}

.ui-menu-item-wrapper:hover {
    background-color: #bdbdbd; /* Change background color on hover */
}



.about-section {
    text-align: center; /* Center the text for the section */
    padding: 40px 20px; /* Add padding for spacing */
    background-color: #f9f9f9; /* Light background for contrast */
}

.how-it-works {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: center; /* Center align items */
    align-items: flex-start; /* Align items to the start */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    max-width: 800px; /* Limit the width for better readability */
    margin: 0 auto; /* Center the section in the viewport */
}

.step {
    flex: 1; /* Allow steps to grow and fill the space equally */
    min-width: 200px; /* Minimum width for each step */
    max-width: 250px; /* Maximum width for each step */
    margin: 20px; /* Space between steps */
    position: relative; /* Position relative for possible future use */
}

.step-content {
    padding: 20px; /* Add padding for the step content */
    background: white; /* White background for contrast */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    height: 150px; /* Fixed height to ensure all boxes are the same size */
    display: flex; /* Use flexbox to center content */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    text-align: center; /* Center text within each step */
}

@media (max-width: 600px) {
    .step {
        width: 100%; /* Allow steps to take full width on small screens */
        margin: 10px 0; /* Adjust margin for smaller spacing */
    }
}







/* chevron animated */

.chevron-container {
    display: flex;
    justify-content: center; /* Center the chevron */
    margin-top: 20px; /* Space above the chevron */
}

.chevron {
    width: 24px;
    height: 6px;
    opacity: 0;
    transform: scale(0.3);
    animation: move-chevron 3s ease-out infinite;
}

.chevron:before,
.chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: #81d4fa; /* Set arrow color to #A09CDF */
}

.chevron:before {
    left: 0;
    transform: skewY(30deg);
}

.chevron:after {
    right: 0;
    transform: skewY(-30deg);
}

@keyframes move-chevron {
    25% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
        transform: translateY(12px); /* Adjusted for smaller movement */
    }
    66.6% {
        opacity: 1;
        transform: translateY(24px); /* Adjusted for smaller movement */
    }
    100% {
        opacity: 0;
        transform: translateY(36px) scale(0.5);
    }
}


.cta{
    margin-top: 100px;
}




.rep-guide-text{
    color: #6ec1e4;
}