/* Header Main Container */
.main-header {
          position: relative;
          z-index: 999;
          width: 100%;
}

/* Sticky Wrapper - White Background */
.header-sticky {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          background-color: #ffffff !important;
          /* Pure white */
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          /* Subtle shadow for depth */
          transition: all 0.3s ease-in-out;
          padding: 10px 0;
}

/* Navbar Alignment */
.navbar {
          padding: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
}

/* Nav Links Color for White Background */
.nav-link {
          color: #333333 !important;
          /* Dark text for visibility */
          font-weight: 500;
          text-transform: uppercase;
          font-size: 14px;
          letter-spacing: 1px;
          padding: 15px 20px !important;
}

.nav-link:hover,
.nav-link.active {
          color: #194DA3 !important;
          /* Nova Gold on hover */
}

/* Mobile Adjustments */
@media (max-width: 991px) {
          .header-sticky {
                    padding: 15px 0;
          }

          .navbar-brand img {
                    max-width: 140px;
                    /* Adjust logo size for mobile */
          }

          /* Fix for the responsive menu positioning */
          .responsive-menu {
                    background: #ffffff;
                    border-top: 1px solid #eee;
          }
}

/* Ensure content doesn't hide under the sticky header */
body {
          padding-top: 80px;
          /* Adjust based on your header's actual height */
}

/************************************/
/**** 03. Header CSS (FIXED)   ****/
/************************************/

header.main-header {
          position: relative;
          z-index: 999;
}

header.main-header .header-sticky {
          position: fixed;
          /* Force sticky always for now */
          top: 0;
          left: 0;
          right: 0;
          width: 100%;
          z-index: 1000;
          background: #ffffff !important;
          /* Force white background */
          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
          /* Modern subtle shadow */
          transition: all 0.3s ease-in-out;
}

/* Force dark text for the links on white bg */
.main-menu ul li a {
          font-family: var(--accent-font);
          font-size: 16px;
          font-weight: 500;
          padding: 25px 15px !important;
          color: #333333 !important;
          /* Force dark gray/black text */
          text-transform: capitalize;
          display: block;
          transition: all 0.3s ease-in-out;
}

/* Hover State */
.main-menu ul li a:hover,
.main-menu ul li a:focus {
          color: #194DA3 !important;
          /* Nova Gold */
}

/* Navbar Alignment Fix */
.navbar {
          padding: 10px 0 !important;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: none !important;
          /* Remove the dark line */
}

/* Logo Resizing */
.navbar-brand img {
          max-height: 60px;
          width: auto;
}

/* Mobile Toggle Fix */
@media (max-width: 991px) {
          .navbar-toggle {
                    display: block;
          }

          .main-menu {
                    display: none;
                    /* Hide desktop menu on mobile */
          }

          .header-sticky {
                    padding: 10px 0;
          }
}
.hero {
          position: relative;
          background: #0a1628;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
          padding: 150px 0 100px;
          min-height: 100vh;
          margin-top: 0;
          display: flex;
          align-items: center;
          overflow: hidden;
}

/* Ken Burns Background */
.hero-kenburns .hero-kb-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url('../images/4.webp') center center / cover no-repeat;
          animation: kenBurns 20s ease-in-out infinite alternate;
          will-change: transform;
          z-index: 0;
}

@keyframes kenBurns {
          0% {
                    transform: scale(1) translate(0, 0);
          }
          100% {
                    transform: scale(1.15) translate(-1.5%, -1%);
          }
}

/* 1. Default State (When at the top) */
header.main-header .header-sticky {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          width: 100%;
          z-index: 1000;
          background: #ffffff;
          /* This transition makes the shrinking smooth */
          transition: all 0.4s ease-in-out;
          padding: 20px 0;
          /* Original large padding */
}

/* 2. Shrink State (Triggered via JS) */
header.main-header .header-sticky.is-sticky {
          padding: 5px 0;
          /* Much smaller padding */
          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

/* 3. Logo Shrinking */
.navbar-brand img {
          height: 60px;
          /* Original size */
          transition: all 0.4s ease-in-out;
}

header.main-header .header-sticky.is-sticky .navbar-brand img {
          height: 45px;
          /* Smaller logo on scroll */
}

/* 4. Adjust Nav Links padding so they center vertically */
.main-menu ul li a {
          transition: all 0.4s ease-in-out;
          padding: 15px 15px !important;
}

header.main-header .header-sticky.is-sticky .main-menu ul li a {
          padding: 10px 15px !important;
}
/* Layout Wrapper */
.nova-contact-wrapper {
          display: flex!important;
          /* flex-direction: column; */
          gap: 25px;
          /* Adds space between the two items */
          margin-top: 30px;
}
/* Media query for mobile devices (phones) */
@media (max-width: 767px) {
          .nova-contact-wrapper {
                    flex-direction: column !important;
                    /* Stacks items vertically */
                    gap: 20px;
                    /* Space between the two items when stacked */
                    align-items: flex-start !important;
                    /* Aligns items to the left */
          }

          /* Hides the vertical divider line on mobile since items are stacked */
          .contact-divider,
          .nova-contact-wrapper>div[style*="width: 1px"] {
                    display: none !important;
          }

          /* Adjusts the logo box for a better mobile fit */
          .logo-icon-box {
                    margin-right: 15px !important;
          }
}
.about-contact-item {
          display: flex;
          align-items: center;
          /* Aligns icon and text perfectly center */
          gap: 20px;
}

/* Fix for the Phone Icon Box */
.contact-icon {
          background: #194DA3 !important;
          /* Nova Gold */
          color: #ffffff !important;
          width: 60px !important;
          height: 60px !important;
          min-width: 60px;
          /* Prevents shrinking */
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          box-shadow: 0 4px 15px rgba(184, 149, 100, 0.2);
}

/* Fix for the Logo Box */
.logo-icon-box {
          width: 60px !important;
          height: 60px !important;
          min-width: 60px;
          background: #f9f9f9 !important;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10px;
          /* Gives the logo some padding inside the circle */
          border: 1px solid #eee;
}

.logo-icon-box img {
          max-width: 100%;
          height: auto;
          object-fit: contain;
}

/* Text Styling */
.about-contact-content p {
          margin: 0 !important;
          font-size: 14px;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #888;
}

.about-contact-content h3 {
          margin: 0 !important;
          font-size: 20px;
          font-weight: 700;
          color: #222;
}

/* Brand Slider Container */
.project-brand-item {
          text-align: center;
          padding: 30px 15px;
          transition: all 0.3s ease-in-out;
          border: 1px solid rgba(184, 149, 100, 0.1);
          /* Very subtle gold border */
          margin: 10px;
}

/* Icons */
.project-brand-item i {
          display: block;
          font-size: 32px;
          /* Bigger icons */
          color: #194DA3;
          /* Nova Gold */
          margin-bottom: 20px;
          transition: 0.3s;
}

/* Typography */
.project-brand-item h5 {
          color: #ffffff;
          font-family: 'Cinzel', serif;
          /* Or 'Playfair Display' */
          font-size: 16px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 2px;
          line-height: 1.4;
          margin: 0;
}

.project-brand-item h5 span {
          font-weight: 400;
          color: #194DA3;
          /* Highlight second word in gold */
          font-size: 14px;
}

/* Hover Effect */
.project-brand-item:hover {
          background: rgba(184, 149, 100, 0.05);
          border: 1px solid rgba(184, 149, 100, 0.5);
          transform: translateY(-5px);
}

.project-brand-item:hover i {
          transform: scale(1.1);
}

.custom-input {
          background-color: #f9f9f9;
          border: 1px solid #dcdcdc;
          border-radius: 6px;
          padding: 13px 20px;
          font-size: 15px;
          height: auto;
          color: #333333;
          transition: all 0.3s ease;
}

.custom-input:focus {
          background-color: #ffffff;
          border-color: #194DA3;
          box-shadow: 0 0 0 3px rgba(25, 77, 163, 0.12);
          outline: none;
          color: #111827;
}

.custom-input.is-invalid,
.has-error .custom-input {
          border-color: #e74c3c !important;
          background-color: #fffafa !important;
          box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12) !important;
}

.custom-input.is-valid {
          border-color: #27ae60 !important;
          background-color: #f9fff9 !important;
          box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1) !important;
}

.help-block.with-errors {
          color: #e74c3c;
          font-size: 13px;
          margin-top: 6px;
          font-weight: 500;
          line-height: 1.4;
          min-height: 18px;
}

.help-block.with-errors ul {
          list-style: none;
          padding-left: 0;
          margin-bottom: 0;
}

/* ======================================================== */
/* Luxury In-Page Custom Select Dropdown                     */
/* ======================================================== */

.luxury-select-container {
          position: relative;
          width: 100%;
}

.luxury-select-btn {
          width: 100%;
          height: 52px;
          background-color: #f9f9f9;
          border: 1px solid #dcdcdc;
          border-radius: 6px;
          padding: 0 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 15px;
          font-family: inherit;
          color: #555555;
          cursor: pointer;
          text-align: left;
          transition: all 0.25s ease;
          outline: none;
}

.luxury-select-btn:hover {
          background-color: #ffffff;
          border-color: #194DA3;
}

.luxury-select-container.is-open .luxury-select-btn,
.luxury-select-btn:focus {
          background-color: #ffffff;
          border-color: #194DA3;
          box-shadow: 0 0 0 3px rgba(25, 77, 163, 0.15);
          outline: none;
}

.luxury-select-btn.has-value {
          color: #111827;
          font-weight: 500;
}

.luxury-select-btn.is-invalid {
          border-color: #dc3545 !important;
          box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

.luxury-select-arrow {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #194DA3;
          font-size: 14px;
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          pointer-events: none;
}

.luxury-select-container.is-open .luxury-select-arrow {
          transform: rotate(180deg);
}

/* Floating Dropdown Menu */
.luxury-select-dropdown {
          position: absolute;
          top: calc(100% + 6px);
          left: 0;
          right: 0;
          background: #ffffff;
          border: 1px solid #e2e8f0;
          border-radius: 8px;
          box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
          list-style: none;
          padding: 6px;
          margin: 0;
          z-index: 1050;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-8px);
          transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
          pointer-events: none;
}

.luxury-select-container.is-open .luxury-select-dropdown {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          pointer-events: auto;
}

/* Dropdown Options */
.luxury-select-option {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 16px;
          border-radius: 6px;
          font-size: 15px;
          color: #334155;
          cursor: pointer;
          transition: all 0.2s ease;
}

.luxury-select-option .option-content {
          display: flex;
          align-items: center;
          gap: 12px;
}

.luxury-select-option .option-icon {
          font-size: 15px;
          color: #194DA3;
          width: 18px;
          text-align: center;
          transition: transform 0.2s ease;
}

.luxury-select-option:hover {
          background-color: #f0f5ff;
          color: #194DA3;
}

.luxury-select-option:hover .option-icon {
          transform: scale(1.15);
}

.luxury-select-option .check-icon {
          font-size: 14px;
          color: #194DA3;
          opacity: 0;
          transition: opacity 0.2s ease;
}

.luxury-select-option.is-selected {
          background-color: #194DA3;
          color: #ffffff;
          font-weight: 600;
}

.luxury-select-option.is-selected .option-icon {
          color: #ffffff;
}

.luxury-select-option.is-selected .check-icon {
          opacity: 1;
          color: #ffffff;
}
/* Social Wall Styles */
.social-card {
          background: #fff;
          border: 1px solid #eee;
          border-radius: 12px;
          overflow: hidden;
          height: 100%;
          transition: all 0.4s ease;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.social-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 20px 40px rgba(184, 149, 100, 0.15);
          border-color: #194DA3;
}

.social-card-header {
          padding: 20px;
          display: flex;
          align-items: center;
          color: #fff;
}

.social-card-header i {
          font-size: 24px;
          margin-right: 15px;
}

.social-card-header h4 {
          margin: 0;
          font-size: 18px;
          text-transform: uppercase;
          color: #fff;
}

/* Branded Backgrounds */
.fb-bg {
          background: #1877F2;
}

.insta-bg {
          background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.linkedin-bg {
          background: #0077b5;
}

.youtube-bg {
          background: #FF0000;
}

.social-card-body {
          padding: 20px;
}

/* Insta Grid inside card */
.insta-grid-social {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          margin-bottom: 15px;
}

.insta-grid-social img {
          width: 100%;
          aspect-ratio: 1/1;
          object-fit: cover;
          border-radius: 4px;
}

/* YouTube Play Button Overlay */
.yt-thumb {
          position: relative;
}

.yt-thumb i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          font-size: 40px;
          text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Buttons */
.follow-btn,
.yt-btn,
.read-more-social {
          display: block;
          margin-top: 10px;
          font-weight: 700;
          font-size: 13px;
          color: #194DA3;
          text-transform: uppercase;
          text-decoration: none;
}

/* Adding overlay to Hero Section */
.hero-section {
          position: relative;
          overflow: hidden;
}

.hero-section::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          /* Darkens image by 40% - Adjust 0.4 to 0.5 if you want it darker */
          background: rgba(0, 0, 0, 0.4);
          z-index: 1;
}

/* Ensure the text stays ABOVE the overlay */
.hero-content,
.hero-section .container {
          position: relative;
          z-index: 2;
}

/* Making Social Headers consistent with Nova Dark */
.social-card-header {
          background: #1a1a1a !important;
          /* Nova Deep Black */
          border-top: 4px solid;
          /* Colored line only at the top */
          padding: 15px 20px;
}

/* Individual accent colors for the top border only */
.fb-bg {
          border-top-color: #1877F2 !important;
}

.insta-bg {
          border-top-color: #e4405f !important;
}

.linkedin-bg {
          border-top-color: #0077b5 !important;
}

.youtube-bg {
          border-top-color: #FF0000 !important;
}

.social-card-header h4 {
          color: #ffffff;
          font-weight: 600;
          font-size: 16px;
}

.project-content h3 {
          color: #fffefc !important;
          /* Nova Gold */
          font-weight: 600;
          text-transform: uppercase;
          font-size: 13px;
          letter-spacing: 1px;
          margin-bottom: 5px;
}

.project-content h2 a {
          transition: color 0.3s ease;
}

.project-content h2 a:hover {
          color: #7CC242;
}
.footer-contact-content p {
          word-wrap: break-word;
          overflow-wrap: break-word;
          line-height: 1.6;
}

@media (max-width: 767px) {
          .footer-contact-content p {
                    font-size: 13px;
                    /* Slightly smaller for mobile */
          }
}

@media (max-width: 991px) {
          .main-menu {
                    display: none !important;
          }
}

/* Fancybox Custom Branding */
.fancybox__container {
    --fancybox-bg: rgba(10, 15, 28, 0.95);
    --fancybox-color: #ffffff;
    --fancybox-accent-color: #194DA3;
    z-index: 99999 !important;
}

.fancybox__caption {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center;
    padding: 14px 20px !important;
    background: rgba(10, 15, 28, 0.85) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fancybox__toolbar {
    background: rgba(10, 15, 28, 0.7) !important;
    backdrop-filter: blur(10px) !important;
}

.fancybox__button--close {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    margin: 8px !important;
    transition: all 0.25s ease !important;
}

.fancybox__button--close:hover {
    background: #e74c3c !important;
    color: #ffffff !important;
}

/* SweetAlert2 Nova Interiors Luxury Styling */
.swal2-popup {
    border-radius: 16px !important;
    padding: 28px 24px !important;
    box-shadow: 0 20px 60px rgba(10, 20, 40, 0.25) !important;
    font-family: inherit !important;
}

.swal2-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0e2d6d !important;
}

.swal2-styled.swal2-confirm {
    background-color: #194DA3 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    font-size: 15px !important;
    box-shadow: 0 4px 14px rgba(25, 77, 163, 0.35) !important;
    transition: all 0.3s ease !important;
}

.swal2-styled.swal2-confirm:hover {
    background-color: #7CC242 !important;
    box-shadow: 0 6px 18px rgba(124, 194, 66, 0.4) !important;
}

.swal2-timer-progress-bar {
    background: #7CC242 !important;
}

/* Anti-Spam Safe Email and Phone links */
.nova-safe-mail,
.nova-safe-tel {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    cursor: pointer;
}

.nova-safe-mail:hover,
.nova-safe-tel:hover {
    color: #7CC242 !important;
    text-decoration: underline !important;
}

/* ======================================================== */
/* Portrait Project Gallery & Full Clarity Lightbox Card     */
/* ======================================================== */
.project-gallery-portrait-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-gallery-portrait-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.project-gallery-portrait-card a {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.project-gallery-portrait-card img {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block;
    transition: transform 0.5s ease;
}

.project-gallery-portrait-card:hover img {
    transform: scale(1.02);
}

.project-gallery-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
    padding: 12px 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.project-gallery-badge .badge-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #194DA3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease;
}

.project-gallery-portrait-card:hover .project-gallery-badge .badge-icon {
    transform: scale(1.1);
    background: #b89564;
}