/* Custom Fonts (Optional, replace with actual font if known) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif; /* Example font */
    background-color: #ffffff; /* White background */
    overflow-x: hidden; /* Prevent horizontal scroll from absolute elements */
}

/* Custom Color Variables */
:root {
    --primaryLight: #b0bfe4;
    --primaryLightest: #e6f0ff;
    --primaryMedium: #869ed3;
    --primaryDark: #034da2;
    --primaryDarkest: #043c8d;
    --x-pattern-color: #e0e0e0; /* Light grey for the 'x' pattern */
}

/* Override Bootstrap Colors */
.text-dark-blue { color: var(--primaryDark) !important; }
.text-darkest-blue { color: var(--primaryDarkest) !important; }
.text-light-blue { color: var(--primaryDark) !important; }
.btn-primary {
    background-color: var(--primaryDarkest) !important;
    border-color: var(--primaryDarkest) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: var(--primaryDark) !important; /* Slightly lighter on hover */
    border-color: var(--primaryDark) !important;
}

/* Logo Styling */
.advoca-logo {
    max-width: 180px; /* Adjust size as needed */
    height: auto;
}

#right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Main Heading Adjustments */
h1.display-3 {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Responsive font size */
    line-height: 1.2;
}

/* Advoca Provides Box */
.advoca-provides-box {
    background-color: var(--primaryLightest);
    color: var(--primaryDarkest);
    border-color: var(--primaryDarkest) !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05) !important;
}
.advoca-provides-box ul li {
    line-height: 1.8;
    font-size: 1.1rem !important; /* Increased font size */
}

/* App Screenshot */
.phone-container {
    position: relative;
    max-width: 350px; /* Adjust to match visual size */
    filter: drop-shadow(0 0.5rem 1.5rem rgba(0, 0, 0, 0.15)); /* Soft shadow for the phone */
}

.app-screenshot {
    position: absolute;
    top: 17px;
    left: 17px;
    right: 17px;
    bottom: 17px;
    width: calc(100% - 34px);
    height: calc(100% - 34px);
    object-fit: cover;
    border-radius: 25px; /* Phones have rounded corners */
    z-index: 1;
}

.phone-border {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    z-index: 2;
}

/* Background Circles */
.bg-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

.circle-1 {
    width: 500px;
    height: 500px;
    background-color: #00BFFF; /* Deep Sky Blue */
    top: -150px;
    right: -150px;
}

.circle-2 {
    width: 300px;
    height: 300px;
    background-color: #87CEEB; /* Sky Blue */
    top: 100px;
    right: 50px;
}

.circle-3 {
    width: 400px;
    height: 400px;
    background-color: #AFEEEE; /* Pale Turquoise */
    bottom: -200px;
    left: -100px;
}

.circle-4 {
    width: 250px;
    height: 250px;
    background-color: #40E0D0; /* Turquoise */
    bottom: 50px;
    left: 150px;
}

.circle-5 {
    width: 200px;
    height: 200px;
    background-color: #48D1CC; /* Medium Turquoise */
    top: 300px;
    right: 250px;
}

.circle-6 {
    width: 350px;
    height: 350px;
    background-color: #00CED1; /* Dark Turquoise */
    bottom: -150px;
    left: 50px;
}

.waitlist-section .form-control-lg,
.waitlist-section .form-select-lg {
    min-width: 220px; /* Ensure inputs have a decent width */
}



/* Responsive adjustments for smaller screens */
@media (max-width: 991.98px) {
    #right-column {
        align-items: center;
        margin-top: 2rem;
    }

    .advoca-logo {
        max-width: 150px;
    }
    .phone-container {
        max-width: 300px;
    }
}

@media (max-width: 767.98px) {
    .circle-1 {
        top: 300px; /* Move down even further below the header */
        right: -250px;
    }
    .circle-2 {
        top: 450px; /* Move further down */
    }

    .text-light-blue {
        text-align: center;
    }
}