:root {
    /*Text Colors*/

    --textWhite: white;
    --textBlack: black;

    /*Logo Image*/

    --logoImage: url("/images/realtorlogo.png");

    /*Background Colors*/

    --bgDark: black;
    --bgLight: white;
    --bgMedium: rgb(185, 183, 183); 

    /*Business Theme Background Colors, can use these to place your company colors*/
    --bgTheme1: rgb(144, 144, 207);
    --bgTheme2: rgb(110, 182, 166);
    --bgTheme3: red;
    --bgTheme4: gold;
    --bgCustom: rgb(143, 124, 18);
    --primary-color: #0d203c;
    --secondary-color: #f76c6c;
    --background-color: #f4f7fa;
    --card-background: #ffffff;
    --border-color: #e0e6f1;
    --text-color: black;
    --heading-color: #0d203c;
    --input-bg: #ffffff;
    --total-bg: #fff0f0;
    --total-text: #e55c5c;

    /*section Background Images Big Screens*/

    --homeVideo: ;
    --ourListingsBGImage: url("/images/ourListingImage.png");
    --aboutBGImage: url("/images/modernPatio.png");
    --searchBGImage: url("/images/searchImage.png");
    --reviewsBGImages: url("/images/reviews.png");
    --contactBGImages: url("/images/modernint3.png");

    /*section background Images Small/Medium Screens*/

    --homeVideo: ;
    --ourListingsBGImageSM: url("/images/ourListingsImage.png");
    --aboutBGImageSM: url("/images/modernPatioSm.png");
    --searchBGImageSM: url("/images/searchMap.png");
    --reviewsBGImagesSM: url("/images/reviews.png");
    --contactBGImagesSM: url("/images/modernInt3small.png");

}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 95px; /* Match your navbar height */
}

body {
    overflow-x: hidden;
    font-family: "Poppins", serif;
    background-color: var(--textBlack);
    margin: 0 !important;
    padding: 0 !important;
}

.btn-outline-primary {
    border: 2px solid var(--textWhite);
}

.fa-solid:hover {
    color:
     var(--bgCustom);
}

.btn {
    background-color: var(--bgCustom);
    width: max-content;
    margin: auto;
    padding: 0 1rem !important;
}

.btn:hover {
    background-color: var(--textWhite);
    color: var(--textBlack) !important;
    border: 2px solid var(--textBlack);
}

.text-custom {
    color: var(--bgCustom) !important;
}

.textShadowBlk {
    text-shadow: 2px 2px 5px var(--textBlack);
}

.textShadowWht {
    text-shadow: 2px 2px 10px var(--textWhite);
}

.bgcustom {
    background-color: var(--bgCustom);
}

.text-custom {
    color: rgb(40, 30, 46);
}

section {
    min-width: 100vw !important;
}

/* Home */

#home {
    width: 100vw;
    height: auto !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
}

.whiteBG {
    background-color: rgba(250, 250, 250, .9);
}

@media (max-width: 991px) {

    .imgContainer {
        padding-bottom: 5rem;
    }

    .my-img {
        width: 200px !important;
        height: 200px !important;
    }
}

/* Custom Navbar Styles */

.navbar-nav .nav-item.active .nav-link {
    color: var(--bgCustom) !important; /* Highlight color */
    font-weight: bold;
}
.navbar-nav .nav-item .nav-link {
    transition: color 0.3s ease; /* Smooth transition for color change */
}


.navbar {
    transition: background-color 0.3s ease;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Hamburger Animation */
.navbar-toggler {
    border: none !important;
    padding: 0.75rem;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    transition: transform 0.3s ease;
    width: 1.5em;
    height: 1.5em;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6L24 24M24 6L6 24'/%3e%3c/svg%3e");
}

/* Mobile Menu Styles */
@media (max-width: 991px) {
    #navbarNav {
        position: fixed;
        top: 100px;
        left: 0;
        right: 0;
        height: calc(100vh - 100px);
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        padding: 2rem;
        overflow-y: auto;
        z-index: 1000;
    }

    .navbar-nav {
        width: 100%;
        text-align: center;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
    }

    .nav-link {
        font-size: 2rem !important;
        color: #000 !important;
        padding: 1.5rem !important;
        justify-content: center;
    }

    .nav-item {
        margin: .25rem 0;
    }
}

.nav-item:hover {
    background-color: var(--bgCustom);
    color: var(--textWhite) !important;
}

/* Desktop styles */

.hoverBlk:hover {
    color: var(--textBlack) !important;
}

@media (min-width: 992px) {
    #navbarNav {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        display: flex !important;
        position: static;
        background: transparent;
    }

    .collapsing {
        display: flex !important;
        transition: none !important;
    }
}

/* Services */

.card {
    width: 300px;
    height: 275px;
    background-image: url(/images/cedarPlanks.png);
    background-size: cover;
    inset: 0;
}

/* In your CSS file or <style> tag */
video.bg-video {
    position: absolute; /* or absolute if needed */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
  }

/* About */

#about {
    width: 100vw !important;
    height: 80vh !important;
    padding-bottom: 1rem !important;
    position: relative;
    z-index: 1;
    text-shadow: 2px 2px 5px var(--clrMain900);
}

#about:before {
    content: "";
    width: 100%;
    height: 100%;
    inset: 0;
    position: absolute;
    background-image: var(--aboutBGImage);
    background-size: cover;
    background-repeat: none;
    background-position: center;
    z-index: -1;
}

@media (max-width: 992px) {
    #about,
    section {
        height: auto !important;
    }
}

  /* Search */

  #search {
    width: 100vw !important;
    border: 1px solid var(--bgCustom);
    width: 100dvw; 
    height: auto;
  }

  .custom-ratio-container {
    border: 1px solid var(--bgCustom);
    position: relative;
    min-width: 350px;
    height: 800px;
    overflow: hidden;
    margin: auto;
    aspect-ratio: 4 / 3; /* Mobile default */
  }
  
  .custom-ratio-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
  }
  
  /* Use media query to change to 16:9 on larger screens */
  @media (min-width: 768px) {
    .custom-ratio-container {
      aspect-ratio: 16 / 9;
      margin: auto;
    }
  }
  
  
  /* --- Main Container (Desktop) --- */
    #calculator {
        width: 100dvw;
        background-color: var(--bgCustom);
    }
        .calculator-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            width: 1000px;
            width: 100%;
            background-color: var(--bgCustom);
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        /* --- General Element Styling --- */
        .form-group { margin-bottom: 20px; color: var(--text-color);}
        .form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px;  color: var(--text-color);}
        .input-wrapper { position: relative; }
        .input-wrapper .symbol { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; color: var(--text-color); font-weight: 500; }
        input[type="number"], select { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 16px; font-family: 'Inter', sans-serif; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
        input[type="number"] { padding-left: 30px; }
        input[type="number"]:focus, select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(13, 32, 60, 0.1); }
        .split-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .left-column, .right-column { display: flex; flex-direction: column; gap: 30px; }
        .section-card { padding: 25px; background-color: #fff; border: 1px solid var(--border-color); border-radius: 12px; }
        .breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .breakdown-item, .summary-item { padding: 15px; background-color: var(--background-color); border-radius: 10px; color: var(--text-color); }
        .breakdown-item p, .summary-item p { margin: 0; font-size: 14px; color: var(--text-color); }
        .breakdown-item h3, .summary-item h3 { margin: 5px 0 0 0; font-size: 22px; color: var(--heading-color); font-weight: 600; }
        .total-payment { padding: 20px; text-align: center; background-color: var(--total-bg); border-radius: 12px; margin-bottom: 20px; }
        .total-payment p { margin: 0; font-size: 14px; color: var(--total-text); font-weight: 500; }
        .total-payment h3 { margin: 5px 0 0 0; font-size: 36px; color: var(--total-text); font-weight: 700; }
        .summary-list { display: flex; flex-direction: column; gap: 10px; }
        
        /* --- Early Payoff Section --- */
        .payoff-result {
            margin-top: 15px;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            color: var(--primary-color);
            min-height: 48px;
        }
        .payoff-result p { margin: 5px 0; }
        .payoff-result span { font-weight: 700; color: var(--secondary-color); }
        
        /* --- Disclaimer Styling --- */
        .disclaimer {
            font-size: 12px;
            color: var(--text-color);
            font-style: italic;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
        }
        
        @media (max-width: 1100px) {
            body { padding: 20px 10px; }
            .calculator-container { grid-template-columns: 1fr; padding: 25px; gap: 30px; }
            .total-payment h3 { font-size: 32px; }
            .breakdown-item h3, .summary-item h3 { font-size: 20px; }
        }
        
        @media (max-width: 700px) {
            .split-group { grid-template-columns: 1fr; gap: 20px; }
            .split-group .form-group { margin-bottom: 0; }
            .breakdown-grid { grid-template-columns: 1fr; }
            .calculator-container { padding: 20px; }
        }


/* Contact */

#contact {
    width: 100vw !important;
    height: auto;
    background-color: var(--textBlack);
    background-image: var(--contactBGImages);
    inset: 0 !important;
    background-size: cover;
    text-shadow: 2px 2px 5px var(--textWhite);
    margin-bottom: -3rem !important;
}

.my-img {
    filter: drop-shadow(0 0 0.75rem var(--textWhite));
}

.containerInfo {
    background: rgba(255, 255, 255, 0.1); /* light overlay */
    border-radius: 16px;
    backdrop-filter: blur(10px); /* frosted glass effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1rem;
    color: var(--textBlack);
    max-width: fit-content;
}

@media (min-width: 768px) {
    #contact {
        background-image: var(--contactBGImagesSM);
    }

    .contactH2 {
        font-size: 3rem !important;
    }
}

/* Footer */


footer {
    width: 100vw !important;
    height: auto;
    padding-top: 3rem;
    background-color: var(--textBlack) !important;
}