:root {
    --brand-blue: #0c2340;
}

body,
h1 span {
    font-family: "Raleway", sans-serif;
}

h1, h2 {
    font-family: "Playfair Display", Serif;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-blue);
}

ul.hd-arrows li {
	padding-left: 1.7em;
	list-style: none;
	background-image: url("icon-arrow-right.svg");
	background-repeat: no-repeat;
	background-position: left .15em;
	background-size: 1.2em;    
    margin: .5em 0;
}

.text-brand-blue{
    color: var(--brand-blue);
}

nav {
    background-color: white;
    transition: background-color .3s ease-in-out;
}

nav .hd-logo img+img  {
    display: none;
}

nav a {
    color: var(--brand-blue);
}

nav.hd-header-transparent ul:not(.aside) a,
nav.hd-header-transparent button:not(.aside) {
    color: white;
}
nav.hd-header-transparent {
    background-color: rgba(0,0,0,0.23);
}

nav.hd-header-transparent .hd-logo img {
    display: none;
}

nav.hd-header-transparent .hd-logo img+img {
    display: block;
}

#hd_hero_ctas a {
    font-family: "Playfair Display", Serif;
}

@media (max-width: 640px) {
    /* Hero section container - more specific selectors */
    main > section.relative:first-child {
        height: 700px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Video container - target the specific div with video */
    main > section.relative:first-child > .w-full.pb-12 {
        height: 700px !important;
        position: relative !important;
        padding-bottom: 0 !important;
    }
    
    /* Video element itself */
    main > section.relative:first-child video {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* Form overlay container - more specific targeting */
    main > section.relative:first-child .absolute.top-0.left-0 {
        height: 700px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    
    /* Form container - target the specific element with mobile-form-container class */
    main > section.relative:first-child .mobile-form-container.bg-white.bg-opacity-90 {
        margin-right: 16px !important;
        margin-left: 16px !important;
        margin-top: 5em !important;
        max-height: none !important;
        height: auto !important;
        padding: 1.5rem !important;
        overflow: visible !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        background-color: rgba(255, 255, 255, 0.9) !important;
        border-radius: 0.5rem !important;
    }
    
    /* Form element with ID selector for highest specificity */
    form#propertyForm {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
    }
    
    /* Form title */
    form#propertyForm > .text-base.font-semibold {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
    }
    
    /* All form inputs and selects - using ID for highest specificity */
    form#propertyForm input[type="text"],
    form#propertyForm input[type="email"],
    form#propertyForm select {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
        height: auto !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* Submit button - using multiple selectors for specificity */
    form#propertyForm button[type="submit"].btn {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
        height: auto !important;
        line-height: normal !important;
    }
    
    /* CTA buttons section - more specific targeting */
    section#hd_hero_ctas {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 2rem 1rem !important;
        margin-top: 1rem !important;
        width: 100% !important;
        gap: 1rem !important;
    }
    
    /* Individual CTA buttons */
    section#hd_hero_ctas > a.btn {
        width: 75% !important;
        max-width: 300px !important;
        text-align: center !important;
    }
    
    /* Hide desktop content on mobile - target the specific element */
    main > section.relative:first-child .pr-8.text-right.hidden {
        display: none !important;
    }
    
    /* Ensure Tailwind responsive classes don't override */
    .sm\:block {
        display: none !important;
    }
    
    /* Fix checkbox width on mobile - prevent stretching */
    #sms_optin {
        width: 26px !important;
        max-width: 26px !important;
        min-width: 26px !important;
        flex-shrink: 0 !important;
        margin-right: 0.5rem !important;
    }
    
    /* Ensure checkbox container doesn't stretch */
    form#propertyForm .flex.items-center {
        justify-content: flex-start !important;
        width: auto !important;
    }
}

.btn {
    color: white;
    border: 3px solid var(--brand-blue);
    background-color: var(--brand-blue);
}
.btn:hover {
    color: var(--brand-blue);
    background-color: white;
}

.btn-clear {
    color: var(--brand-blue);
    border: 3px solid white;
    background-color: white;
}
.btn-clear:hover {
    color: white;
    background-color: var(--brand-blue);
}

.mySwiper .swiper-slide {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYuNSAxMGMtLjIyMyAwLS40MzcuMDM0LS42NS4wNjUuMDY5LS4yMzIuMTQtLjQ2OC4yNTQtLjY4LjExNC0uMzA4LjI5Mi0uNTc1LjQ2OS0uODQ0LjE0OC0uMjkxLjQwOS0uNDg4LjYwMS0uNzM3LjIwMS0uMjQyLjQ3NS0uNDAzLjY5Mi0uNjA0LjIxMy0uMjEuNDkyLS4zMTUuNzE0LS40NjMuMjMyLS4xMzMuNDM0LS4yOC42NS0uMzVsLjUzOS0uMjIyLjQ3NC0uMTk3LS40ODUtMS45MzgtLjU5Ny4xNDRjLS4xOTEuMDQ4LS40MjQuMTA0LS42ODkuMTcxLS4yNzEuMDUtLjU2LjE4Ny0uODgyLjMxMi0uMzE4LjE0Mi0uNjg2LjIzOC0xLjAyOC40NjYtLjM0NC4yMTgtLjc0MS40LTEuMDkxLjY5Mi0uMzM5LjMwMS0uNzQ4LjU2Mi0xLjA1Ljk0NS0uMzMuMzU4LS42NTYuNzM0LS45MDkgMS4xNjItLjI5My40MDgtLjQ5Mi44NTYtLjcwMiAxLjI5OS0uMTkuNDQzLS4zNDMuODk2LS40NjggMS4zMzYtLjIzNy44ODItLjM0MyAxLjcyLS4zODQgMi40MzctLjAzNC43MTgtLjAxNCAxLjMxNS4wMjggMS43NDcuMDE1LjIwNC4wNDMuNDAyLjA2My41MzlsLjAyNS4xNjguMDI2LS4wMDZBNC41IDQuNSAwIDEgMCA2LjUgMTB6bTExIDBjLS4yMjMgMC0uNDM3LjAzNC0uNjUuMDY1LjA2OS0uMjMyLjE0LS40NjguMjU0LS42OC4xMTQtLjMwOC4yOTItLjU3NS40NjktLjg0NC4xNDgtLjI5MS40MDktLjQ4OC42MDEtLjczNy4yMDEtLjI0Mi40NzUtLjQwMy42OTItLjYwNC4yMTMtLjIxLjQ5Mi0uMzE1LjcxNC0uNDYzLjIzMi0uMTMzLjQzNC0uMjguNjUtLjM1bC41MzktLjIyMi40NzQtLjE5Ny0uNDg1LTEuOTM4LS41OTcuMTQ0Yy0uMTkxLjA0OC0uNDI0LjEwNC0uNjg5LjE3MS0uMjcxLjA1LS41Ni4xODctLjg4Mi4zMTItLjMxNy4xNDMtLjY4Ni4yMzgtMS4wMjguNDY3LS4zNDQuMjE4LS43NDEuNC0xLjA5MS42OTItLjMzOS4zMDEtLjc0OC41NjItMS4wNS45NDQtLjMzLjM1OC0uNjU2LjczNC0uOTA5IDEuMTYyLS4yOTMuNDA4LS40OTIuODU2LS43MDIgMS4yOTktLjE5LjQ0My0uMzQzLjg5Ni0uNDY4IDEuMzM2LS4yMzcuODgyLS4zNDMgMS43Mi0uMzg0IDIuNDM3LS4wMzQuNzE4LS4wMTQgMS4zMTUuMDI4IDEuNzQ3LjAxNS4yMDQuMDQzLjQwMi4wNjMuNTM5bC4wMjUuMTY4LjAyNi0uMDA2QTQuNSA0LjUgMCAxIDAgMTcuNSAxMHoiLz48L3N2Zz4=');
    background-size: 35px;
    background-repeat: no-repeat;
}

.mySwiper .swiper-slide p {
    padding-left: 3em;
    padding-right: 2em;
    padding-top: 1.5em;
}
.mySwiper .swiper-slide p:last-child {
    text-align: right;
    font-size: smaller;
}

.blue-background-clr , .swiper-pagination-bullet-active{
    background-color: var(--brand-blue);
}

.swiper-pagination-bullet{
    width: 16px;
    height: 16px;
}

.hd-instgram iframe {
    width: 100%!important;
    max-width: 1140px!important;
}

.bg-oceanside {
    background-image: url('ocean-side.jpg');
}

.bg-bikes {
    background-image: url('bikes.jpg');
}

.bg-tocalfall {
    background-image: url('tocalfall.jpg');
}

.bg-oliveway {
    background-image: url('225oliveway.jpg');
}

/* Desktop-specific form container height */
@media (min-width: 641px) {
    section.relative .bg-white.bg-opacity-90 {
        max-height: none; /* Remove height restriction to fit all content */
        height: auto;
        padding: 1.5rem !important; /* Better padding for desktop */
    }
    
    /* Ensure form has proper spacing on desktop */
    #propertyForm {
        gap: 0.5rem !important;
    }
    
    /* Restore normal margins on desktop */
    #propertyForm > div {
        margin-bottom: 0;
    }
}