/* =========================================================
   SHANTA KRISHNA APARTMENTS
   COLOR THEME — OFF-WHITE + PEACH + COFFEE
   All color decisions live here. style.css / responsive.css
   only handle layout, so nothing below needs !important.
========================================================= */

:root {

    /* MAIN COLORS */
    --off-white: #FFF9F2;
    --warm-white: #FDF5EC;
    --beige: #F3E5D5;

    --peach: #DFA184;
    --peach-light: #F0C2AA;
    --peach-dark: #C77F62;

    --coffee: #654438;
    --coffee-dark: #3D2923;
    --coffee-deep: #291B17;
    --coffee-light: #8A6659;

    /* TEXT */
    --text-dark: #382822;
    --text-medium: #725C52;
    --text-soft: #9A8176;

    /* BORDERS */
    --border: rgba(101, 68, 56, 0.16);

    /* SHADOW */
    --soft-shadow: 0 12px 35px rgba(61, 41, 35, 0.09);
    --medium-shadow: 0 18px 45px rgba(61, 41, 35, 0.14);
}


/* =========================================================
   BODY
========================================================= */
body {
    background-color: var(--off-white);
    color: var(--text-dark);
}


/* =========================================================
   HEADER / NAVBAR
   Transparent over the hero, solidifies with a shadow once
   the page scrolls — the header is the same on every page.
========================================================= */
.site-header {
    background: rgba(61, 41, 35, 0.55);
    border-bottom: 1px solid rgba(223, 161, 132, 0.18);
}

.site-header.scrolled {
    background: rgba(61, 41, 35, 0.97);
}

nav a,
#navbar a {
    color: var(--off-white);
}

nav a:hover,
nav a.active,
#navbar a:hover,
#navbar a.active {
    color: var(--peach-light);
}

nav a::after {
    background: var(--peach);
}

.header-cta {
    background: var(--peach);
    color: var(--coffee-dark);
}

.header-cta:hover {
    background: var(--peach-light);
    transform: translateY(-3px);
}


/* =========================================================
   HAMBURGER
========================================================= */
.hamburger span {
    background: var(--peach-light);
}

/* MOBILE MENU — COLOR ONLY */
@media (max-width: 992px) {

    #navbar {
        background: linear-gradient(150deg, #52372E, #291B17);
    }

    #navbar a {
        color: var(--off-white);
        border-color: rgba(255,255,255,0.08);
    }

    #navbar a:hover,
    #navbar a.active {
        color: var(--peach-light);
    }

    .mobile-only-cta {
        background: var(--peach);
        color: var(--coffee-dark) !important;
        text-align: center;
        border: none !important;
        border-radius: 12px;
        font-weight: 600;
    }

    .mobile-only-cta:hover {
        background: var(--peach-light);
    }
}


/* =========================================================
   HOME HERO
========================================================= */
.hero-content h3 {
    color: var(--peach-light);
}

.hero-content h1 {
    color: #FFFFFF;
}

.hero-content p {
    color: #F9ECE5;
}

.hero .overlay {
    background: rgba(61, 41, 35, 0.42);
}


/* =========================================================
   BUTTONS
========================================================= */
.btn {
    background: var(--peach);
    color: var(--coffee-dark);
    border-color: var(--peach);
}

.btn:hover {
    background: var(--peach-light);
    color: var(--coffee-dark);
    box-shadow: 0 10px 30px rgba(223,161,132,.25);
}

.btn2 {
    background: transparent;
    color: #FFFFFF;
    border-color: var(--peach-light);
}

.btn2:hover {
    background: var(--peach);
    color: var(--coffee-dark);
}


/* =========================================================
   HOME ABOUT
========================================================= */
.about {
    background: var(--off-white);
}

.about-content h4 {
    color: var(--peach-dark);
}

.about-content h2 {
    color: var(--coffee-dark);
}

.about-content p {
    color: var(--text-medium);
}

.stats div {
    background: var(--warm-white);
    border-color: var(--border);
    box-shadow: var(--soft-shadow);
}

.stats h3 {
    color: var(--peach-dark);
}

.stats p {
    color: var(--coffee-light);
}


/* =========================================================
   PROJECT HIGHLIGHTS
========================================================= */
.highlights {
    background: var(--beige);
}

.highlights h2 {
    color: var(--coffee-dark);
}

.highlight-card {
    background: var(--off-white);
    border-color: var(--border);
    box-shadow: var(--soft-shadow);
}

.highlight-card:hover {
    box-shadow: var(--medium-shadow);
}

.highlight-card i {
    color: var(--peach-dark);
}

.highlight-card h3 {
    color: var(--coffee);
}

.highlight-card p {
    color: var(--text-medium);
}


/* =========================================================
   APARTMENTS
========================================================= */
.apartments {
    background: var(--off-white);
}

.apartments h2 {
    color: var(--coffee-dark);
}

.card {
    background: var(--warm-white);
    border-color: var(--border);
    box-shadow: var(--soft-shadow);
}

.card h3 {
    color: var(--coffee);
}

.card p {
    color: var(--text-medium);
}

.card a {
    background: var(--coffee);
    color: var(--off-white);
}

.card a:hover {
    background: var(--peach);
    color: var(--coffee-dark);
}


/* =========================================================
   ABOUT PAGE
========================================================= */
.about-page-hero{
    background-color: var(--coffee-deep);
}

/* Subpage hero titles (About / Amenities / Gallery / Contact) sit on a
   dark photo + gradient overlay, so they need explicit light colors
   rather than inheriting the (dark) body text color. */
.about-hero-content span,
.amenities-hero-content span,
.gallery-hero-content span,
.contact-hero-content span {
    color: var(--peach-light);
}

.about-hero-content h1,
.amenities-hero-content h1,
.gallery-hero-content h1,
.contact-hero-content h1 {
    color: #FFFFFF;
}

.about-hero-content p,
.amenities-hero-content p,
.gallery-hero-content p,
.contact-hero-content p {
    color: #F3E6DF;
}

.hero-scroll,
.hero-scroll i {
    color: var(--peach-light);
}

.hero-btn {
    border-color: var(--peach-light);
    color: var(--peach-light);
}

.hero-btn:hover {
    background: var(--peach);
    color: var(--coffee-dark);
}

.hero-number {
    color: var(--peach-light);
}

.about-introduction {
    background: var(--off-white);
}

.about-story {
    background: var(--warm-white);
}

.vision-section {
    background: var(--beige);
}

.architecture-section {
    background: var(--off-white);
}

.about-intro-title > span,
.story-content > span,
.vision-heading > span,
.architecture-content > span {
    color: var(--peach-dark);
}

.about-intro-title h2,
.story-content h2,
.vision-heading h2,
.architecture-content h2 {
    color: var(--coffee-dark);
}

.about-intro-title strong,
.story-content strong,
.vision-heading strong,
.architecture-content strong {
    color: var(--peach-dark);
}

.about-intro-text p,
.story-content p,
.architecture-content p {
    color: var(--text-medium);
}

.about-intro-text .large-text {
    color: var(--coffee);
}

.gold-line {
    background: var(--peach);
}

.image-number {
    background: var(--coffee);
    color: var(--peach-light);
}

.story-stat strong {
    color: var(--peach-dark);
}

.story-stat span {
    color: var(--coffee-light);
}

.vision-card {
    background: var(--off-white);
    border-color: var(--border);
    box-shadow: var(--soft-shadow);
}

.vision-card:hover {
    border-color: var(--peach);
    box-shadow: var(--medium-shadow);
}

.vision-icon,
.vision-card > span {
    color: var(--peach-dark);
}

.vision-card h3 {
    color: var(--coffee);
}

.vision-card p {
    color: var(--text-medium);
}

.about-page-btn {
    background: var(--coffee);
    border-color: var(--coffee);
    color: var(--off-white);
}

.about-page-btn:hover {
    background: var(--peach);
    border-color: var(--peach);
    color: var(--coffee-dark);
}

.about-page-btn.outline {
    background: transparent;
    color: var(--coffee);
    border-color: var(--coffee);
}

.about-page-btn.outline:hover {
    background: var(--coffee);
    color: var(--off-white);
}

.lifestyle-overlay {
    background: rgba(61, 41, 35, 0.58);
}

.lifestyle-content > span,
.about-final-content > span {
    color: var(--peach-light);
}

.lifestyle-content h2,
.about-final-content h2 {
    color: #FFFFFF;
}

.lifestyle-content h2 strong,
.about-final-content h2 strong {
    color: var(--peach-light);
}

.lifestyle-content p,
.about-final-content p {
    color: #F7E9E2;
}

.about-final-cta {
    background: var(--coffee-dark);
}


/* =========================================================
   AMENITIES
========================================================= */
.amenities-hero{
    background-color: var(--coffee-deep);
}

.amenities-intro {
    background: var(--off-white);
}

.amenities-list {
    background: var(--warm-white);
}

.intro-left > span,
.intro-right > span {
    color: var(--peach-dark);
}

.intro-left h2 {
    color: var(--coffee-dark);
}

.intro-left strong {
    color: var(--peach-dark);
}

.intro-right p {
    color: var(--text-medium);
}

.intro-right .intro-large {
    color: var(--coffee);
}

.amenity-content {
    background: var(--warm-white);
}

.amenity-content > span {
    color: var(--peach-dark);
}

.amenity-content h2 {
    color: var(--coffee-dark);
}

.amenity-content h2 strong {
    color: var(--peach-dark);
}

.amenity-content p {
    color: var(--text-medium);
}

.amenity-features div {
    color: var(--coffee);
}

.amenity-features i {
    color: var(--peach-dark);
}

.amenity-number {
    color: var(--peach-light);
}

.amenities-grid-section {
    background: var(--beige);
}

.grid-heading span {
    color: var(--peach-dark);
}

.grid-heading h2 {
    color: var(--coffee-dark);
}

.grid-heading h2 strong {
    color: var(--peach-dark);
}

.amenity-card {
    background: var(--off-white);
    border-color: var(--border);
    box-shadow: var(--soft-shadow);
}

.amenity-card:hover {
    border-color: var(--peach);
    box-shadow: var(--medium-shadow);
}

.amenity-card i {
    color: var(--peach-dark);
}

.amenity-card h3 {
    color: var(--coffee);
}

.amenity-card p {
    color: var(--text-medium);
}

.video-overlay {
    background: rgba(61,41,35,.64);
}

.video-content > span {
    color: var(--peach-light);
}

.video-content h2 {
    color: white;
}

.video-content h2 strong {
    color: var(--peach-light);
}

.video-content p {
    color: #F8EAE3;
}

.video-play-btn {
    background: var(--peach);
    border-color: var(--peach);
    color: var(--coffee-dark);
}

.watch-text {
    color: var(--off-white);
}

.amenities-cta {
    background: var(--coffee);
}

.amenities-cta-content > span {
    color: var(--peach-light);
}

.amenities-cta-content h2 {
    color: white;
}

.amenities-cta-content h2 strong {
    color: var(--peach-light);
}

.amenities-cta-content p {
    color: #F8EAE3;
}


/* =========================================================
   GALLERY
========================================================= */
.gallery-hero{
    background-color: var(--coffee-deep);
}

.gallery-section {
    background: var(--warm-white);
}

.gallery-item {
    background: var(--beige);
}

.gallery-intro {
    background: var(--off-white);
}

.gallery-intro > span {
    color: var(--peach-dark);
}

.gallery-intro h2 {
    color: var(--coffee-dark);
}

.gallery-intro h2 strong {
    color: var(--peach-dark);
}

.gallery-intro p {
    color: var(--text-medium);
}

.filter-btn {
    background: transparent;
    color: var(--coffee);
    border-color: var(--coffee-light);
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--coffee);
    border-color: var(--coffee);
    color: var(--off-white);
}

.gallery-overlay {
    background: linear-gradient(transparent, rgba(61,41,35,.90));
}

.gallery-overlay span {
    color: var(--peach-light);
}

.gallery-overlay h3 {
    color: white;
}

.view-image {
    border-color: var(--peach-light);
    color: var(--peach-light);
}

.view-image:hover {
    background: var(--peach);
    color: var(--coffee-dark);
}

.lightbox {
    background: rgba(41,27,23,.96);
}


/* =========================================================
   CONTACT PAGE
========================================================= */
.contact-hero{
    background-color: var(--coffee-deep);
}

.contact-about {
    background: var(--off-white);
}

.contact-section {
    background: var(--beige);
}

.small-title {
    color: var(--peach-dark);
}

.contact-about-content h2,
.contact-info h2 {
    color: var(--coffee-dark);
}

.contact-about-content h2 strong,
.contact-info h2 strong {
    color: var(--peach-dark);
}

.contact-about-content p,
.contact-info > p {
    color: var(--text-medium);
}

.contact-icon {
    background: var(--off-white);
    color: var(--peach-dark);
    border-color: var(--peach);
}

.contact-detail span {
    color: var(--text-soft);
}

.contact-detail a,
.contact-detail p {
    color: var(--coffee);
}

.contact-detail a:hover {
    color: var(--peach-dark);
}


/* =========================================================
   CONTACT FORM
========================================================= */
.contact-form-box {
    background: var(--off-white);
    border: 1px solid var(--border);
    box-shadow: var(--medium-shadow);
}

.form-heading span {
    color: var(--peach-dark);
}

.form-heading h3 {
    color: var(--coffee-dark);
}

.form-heading p {
    color: var(--text-medium);
}

.input-group label {
    color: var(--coffee-light);
}

.input-group input,
.input-group select,
.input-group textarea {
    background: #FFFCF8;
    color: var(--coffee-dark);
    border: 1px solid rgba(101,68,56,.23);
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: #A68C80;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: var(--peach-dark);
    outline: none;
    box-shadow: 0 0 0 3px rgba(223,161,132,.13);
}

.contact-submit {
    background: var(--coffee);
    color: var(--off-white);
}

.contact-submit:hover {
    background: var(--peach);
    color: var(--coffee-dark);
}

.contact-submit:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none !important;
}

.form-message.error{
    color:#B3392C;
}

.form-message.success{
    color: var(--coffee);
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */
.success-box {
    background: var(--off-white);
}

.success-box i {
    color: var(--peach-dark);
}

.success-box h2 {
    color: var(--coffee-dark);
}

.success-box p {
    color: var(--text-medium);
}

.success-quote {
    color: var(--peach-dark);
    border-color: rgba(199,127,98,.30);
}


/* =========================================================
   MAP
========================================================= */
.map-section {
    background: var(--off-white);
}

.map-container {
    background: var(--warm-white);
}

.map-heading > span {
    color: var(--peach-dark);
}

.map-heading h2 {
    color: var(--coffee-dark);
}

.map-heading h2 strong {
    color: var(--peach-dark);
}

.map-heading p {
    color: var(--text-medium);
}


/* =========================================================
   FOOTER
========================================================= */
.footer {
    background: var(--coffee-deep);
    color: var(--off-white);
    border-top: 1px solid rgba(223,161,132,.25);
}

.footer-col h3 {
    color: var(--peach-light);
}

.footer-col h3::after{
    background: var(--peach);
}

.footer-brand p,
.visit-col p,
.footer .contact-item p {
    color: #DCC9C0;
}

.footer-col a {
    color: #EADDD6;
}

.footer-col a:hover {
    color: var(--peach-light);
}

.footer .contact-item > i {
    color: var(--peach-light);
}

.social-icons a {
    color: var(--peach-light);
    border-color: rgba(240,194,170,.30);
}

.social-icons a:hover {
    background: var(--peach);
    color: var(--coffee-dark);
    border-color: var(--peach);
}

.footer-btn {
    background: var(--peach);
    color: var(--coffee-dark);
    border-color: var(--peach);
}

.footer-btn:hover {
    background: var(--peach-light);
    border-color: var(--peach-light);
}

.footer-btn-outline{
    color: var(--peach-light);
    border-color: rgba(240,194,170,.5);
}

.footer-btn-outline:hover{
    background: rgba(240,194,170,.12) !important;
    color: var(--peach-light);
}

.footer-bottom {
    border-color: rgba(255,255,255,.08);
}

.footer-bottom p,
.footer-bottom a {
    color: #CDBAB1;
}

.footer-bottom a:hover {
    color: var(--peach-light);
}

.footer-bottom span {
    color: #77675F;
}


/* =========================================================
   FLOATING BUTTONS
========================================================= */
.floating-call {
    background: var(--coffee);
    color: var(--off-white);
}

.floating-call:hover {
    background: var(--peach);
    color: var(--coffee-dark);
}

.floating-whatsapp {
    background: #25D366;
    color: white;
}