/* 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: url('../images/hero/hero.png'); */
          background: url('../images/4.jpeg');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
          padding: 150px 0 100px;
          /* Reduced top padding */
          min-height: 100vh;
          margin-top: 0;
          /* Reset this so it starts AFTER the white header */
          display: flex;
          align-items: center;
}

/* 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 #e0e0e0;
          border-radius: 0;
          /* Square edges look more architectural */
          padding: 12px 20px;
          height: auto;
          transition: all 0.3s ease;
}

.custom-input:focus {
          background-color: #ffffff;
          border-color: #194DA3;
          /* Nova Gold focus */
          box-shadow: none;
          outline: none;
}

/* For the Select Dropdown */
select.custom-input {
          color: #666;
          cursor: pointer;
}
/* 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 */
          }
}