/* --- Color Variables --- */
      :root {
        --primary-navy: #0f2942; /* Deep Trust Blue */
        --accent-gold: #f39c12; /* Premium Construction Gold */
        --accent-gold-hover: #d68910;
        --light-bg: #f8f9fa;
        --text-main: #4a4a4a;
      }

      /* ============================================ 
           Global Styles 
         ============================================ */
      body {
        font-family: "Open Sans", sans-serif;
        color: var(--text-main);
        background-color: #ffffff;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: "Montserrat", sans-serif;
        color: var(--primary-navy);
        font-weight: 700;
      }

      /* --- Buttons --- */
      .btn-theme {
        background-color: var(--accent-gold);
        color: #fff;
        font-weight: 600;
        border: none;
        padding: 10px 25px;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .btn-theme:hover {
        background-color: var(--accent-gold-hover);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
      }
      .btn-outline-theme {
        background-color: transparent;
        color: var(--primary-navy);
        border: 2px solid var(--primary-navy);
        font-weight: 600;
        padding: 8px 25px;
        transition: all 0.3s ease;
        text-transform: uppercase;
      }
      .btn-outline-theme:hover {
        background-color: var(--primary-navy);
        color: #fff;
      }

      /* --- Navbar --- */
      .navbar {
        border-bottom: 3px solid var(--accent-gold);
        background: #fff;
        padding: 15px 0;
      }
      .navbar-brand {
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
        font-size: 1.5rem;
        color: var(--primary-navy) !important;
        letter-spacing: 1px;
      }
      .navbar-brand span {
        color: var(--accent-gold);
      }
      .nav-link {
        font-weight: 600;
        color: var(--primary-navy) !important;
        margin: 0 10px;
        transition: color 0.3s;
      }
      .nav-link:hover {
        color: var(--accent-gold) !important;
      }

      /* ============================================ 
           Hero Section 
         ============================================ */
         
      .hero-section {
        background:
          linear-gradient(rgba(15, 41, 66, 0.8), rgba(15, 41, 66, 0.85)),
          url("https://sevenbrothers.co.in/wp-content/uploads/2025/10/hero-image-min_1.webp")
            center/cover no-repeat;
        color: white;
        padding: 150px 0;
        border-bottom: 5px solid var(--accent-gold);
      }
      .hero-section h1,
      .hero-section h4 {
        color: #fff;
      }
      .hero-section h4 {
        color: var(--accent-gold);
        letter-spacing: 2px;
        font-size: 1.2rem;
      }

      /* --- Stat Boxes --- */
      .stat-box {
        padding: 40px 20px;
        text-align: center;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease;
        border-bottom: 4px solid transparent;
        height: 100%;
      }
      .stat-box:hover {
        transform: translateY(-10px);
        border-bottom: 4px solid var(--accent-gold);
      }
      .stat-box h3 {
        font-size: 3rem;
        font-weight: 800;
        color: var(--primary-navy);
      }
      .stat-box span.counter-plus {
        color: var(--accent-gold);
      }

      /* ============================================ 
           Cards (Real Estate & Construction)
         ============================================ */
 
      .project-card {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        border: none;
        border-radius: 10px;
        overflow: hidden;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
        background: #fff;
      }
      .project-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      }
      .project-card img {
        height: 240px;
        object-fit: cover;
        border-bottom: 3px solid var(--accent-gold);
      }
      .project-card .card-title {
        font-size: 1.25rem;
      }

     /*  ============================================ 
           PROCESS SECTION  
         ============================================ */
      .process-card {
        background: #fff;
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        border-top: 4px solid var(--primary-navy);
      }
      .process-icon {
        font-size: 2.5rem;
        color: var(--accent-gold);
        margin-bottom: 20px;
      }
      .process-card ul li {
        margin-bottom: 10px;
      }
      .process-card ul li i {
        color: var(--accent-gold);
      }

      /* --- Team Section --- */
      .team-card {
        border: none;
        text-align: center;
        background: transparent;
      }
      .team-card img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 20px auto;
        border: 4px solid #fff;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }
      .social-icons a {
        color: var(--primary-navy);
        background: #fff;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 5px;
        font-size: 1.1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;
      }
      .social-icons a:hover {
        background: var(--accent-gold);
        color: #fff;
      }

      /* ============================================ 
           Meet Our Directors Section 
         ============================================ */

      .team-card-outline {
        border: 2px solid var(--primary-navy); /* Outline border */
        border-radius: 15px; /* Rounded corners for the card */
        text-align: center;
        background: #fff;
        padding: 40px 20px 30px 20px;
        transition: all 0.3s ease;
        height: 100%;
      }
      .team-card-outline:hover {
        transform: translateY(-8px);
        border-color: var(--accent-gold); /* Changes to gold on hover */
        box-shadow: 0 15px 30px rgba(15, 41, 66, 0.08); /* Soft shadow on hover */
      }
      .team-card-outline img {
        width: 160px;
        height: 160px;
        border-radius: 50%; /* Perfect circle */
        object-fit: cover;
        margin: 0 auto 20px auto;
        border: 3px solid var(--accent-gold); /* Gold outline around the image */
        padding: 4px; /* Creates a gap between the image and the gold border */
        background: #fff;
      }
      .social-icons a {
        color: var(--primary-navy);
        background: transparent;
        border: 1px solid var(--primary-navy); /* Outline style for social icons */
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 0 5px;
        font-size: 1.1rem;
        transition: all 0.3s;
      }
      .social-icons a:hover {
        background: var(--accent-gold);
        border-color: var(--accent-gold);
        color: #fff;
      }

    /*  ============================================ 
           FIELD WORKER SECTION  
         ============================================ */
         /* --- Field Workers Section --- */
        .field-worker-card {
            border: 1px solid rgba(15, 41, 66, 0.1); /* Subtle border */
            border-radius: 10px;
            transition: all 0.3s ease;
            background: #fff;
            height: 100%;
        }
        .field-worker-card:hover {
            border-color: var(--accent-gold);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(15, 41, 66, 0.08);
        }
        .field-worker-card .card-body {
            padding: 20px;
        }
        .field-worker-card .icon-wrapper {
            width: 60px;
            height: 60px;
            background-color: rgba(15, 41, 66, 0.05);
            color: var(--primary-navy);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-right: 15px;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        /* Icon turns gold with white icon on hover */
        .field-worker-card:hover .icon-wrapper {
            background-color: var(--accent-gold);
            color: #fff;
        }
    /*  ============================================ 
           GALLERY SECTION  
         ============================================ */

        .gallery-item {
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            border: 3px solid transparent;
            transition: all 0.3s ease;
        }
        .gallery-item:hover {
            border-color: var(--accent-gold);
            box-shadow: 0 10px 25px rgba(15, 41, 66, 0.15);
        }
        .gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s ease;
            display: block;
        }
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        /* Lightbox Overlay Icon */
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(15, 41, 66, 0.6); /* Navy blue tint */
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        .gallery-overlay i {
            color: #fff;
            font-size: 2.5rem;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }
        .gallery-item:hover .gallery-overlay i {
            transform: translateY(0);
        }

        /* --- Lightbox Modal Styles --- */
        #lightboxModal .modal-content {
            background-color: transparent;
            border: none;
        }
        #lightboxModal .btn-close {
            position: absolute;
            top: -20px;
            right: 20px;
            background-color: var(--accent-gold);
            opacity: 1;
            border-radius: 50%;
            padding: 10px;
            z-index: 1055;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        #lightboxModal .btn-close:hover {
            background-color: #fff;
        }
        #lightboxImage {
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            max-height: 85vh;
            object-fit: contain;
            width: 100%;
            border: 4px solid #fff;
        }

    /*  ============================================ 
           NAP & MAP   
        ============================================ */
        .contact-info-box {
            background: var(--light-bg);
            padding: 40px;
            border-radius: 10px;
            height: 100%;
            border-left: 5px solid var(--accent-gold);
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        }
        .contact-detail {
            display: flex;
            align-items: flex-start;
            margin-bottom: 25px;
        }
        .contact-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-navy);
            color: var(--accent-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin-right: 20px;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }
        .contact-detail:hover .contact-icon {
            background: var(--accent-gold);
            color: #fff;
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(243, 156, 18, 0.4);
        }
        .contact-text h5 {
            margin-bottom: 5px;
            font-weight: 700;
            font-size: 1.1rem;
        }
        .contact-text p, .contact-text a {
            color: var(--text-main);
            margin: 0;
            text-decoration: none;
            transition: color 0.3s;
            font-size: 0.95rem;
        }
        .contact-text a:hover {
            color: var(--accent-gold);
        }
        .map-container {
            border-radius: 10px;
            overflow: hidden;
            height: 100%;
            min-height: 400px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            border: 2px solid rgba(15, 41, 66, 0.1);
        }

    /*  ============================================ 
           Footer Section 
        ============================================ */
        .footer-area {
            background-color: var(--primary-navy);
            color: #e0e0e0;
            padding: 70px 0 20px;
            font-size: 0.95rem;
        }
        .footer-heading {
            color: #fff;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        .footer-heading::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 3px;
            background-color: var(--accent-gold);
        }
        .footer-area p {
            line-height: 1.8;
        }
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .footer-links li {
            margin-bottom: 12px;
        }
        .footer-links a {
            color: #e0e0e0;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }
        .footer-links a i {
            color: var(--accent-gold);
            font-size: 0.8rem;
            margin-right: 8px;
            transition: transform 0.3s ease;
        }
        .footer-links a:hover {
            color: var(--accent-gold);
        }
        /* Small arrow slides right on hover */
        .footer-links a:hover i {
            transform: translateX(5px);
        }
        .footer-social {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        .footer-social a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            background-color: rgba(255, 255, 255, 0.05);
            color: #fff;
            border-radius: 50%;
            transition: all 0.3s ease;
            text-decoration: none;
            border: 1px solid transparent;
        }
        .footer-social a:hover {
            background-color: var(--accent-gold);
            border-color: var(--accent-gold);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 50px;
            padding-top: 20px;
            text-align: center;
        }
        .footer-bottom p {
            margin: 0;
            font-size: 0.9rem;
        }
        .footer-bottom a {
            color: var(--accent-gold);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer-bottom a:hover {
            color: #fff;
        }
        /* Newsletter Input Styling */
        .newsletter-input {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
        }
        .newsletter-input:focus {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: var(--accent-gold);
            color: #fff;
            box-shadow: none;
        }
        .newsletter-input::placeholder {
            color: #aeb8c2;
        }

        
/*
============================================================================ 
           ABOUT US - PAGE CSS
============================================================================
 */
 /* --- About Section Styles --- */
.about-content-box {
  /* Initial visible height (approx 2 paragraphs) */
  max-height: 220px;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  position: relative;
}

/* Typography for the text content */
.about-content-text {
  color: #6c757d; /* Bootstrap text-muted color */
  line-height: 1.8;
  font-size: 0.95rem;
  text-align: justify;
}

.about-content-text h5 {
  color: #333;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.about-content-text ul {
  list-style-type: none; /* Remove default bullets */
  padding-left: 0;
  margin-bottom: 1rem;
}

.about-content-text ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.25rem;
}

/* Custom red bullet point */
.about-content-text ul li::before {
  content: "•";
  color: #e62e2e;
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 1.2em;
  line-height: 1;
}

/* The fade effect at the bottom */
.about-fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
}

@media (max-width:768px){

 .page-header h1{
  font-size: 30px !important;
  font-weight: 600px;
 }
}

/* 
====================================================
  FLOATING BUTTON
====================================================
*/
        .floating-action-menu {
            position: fixed;
            bottom: 30px;
            right: 30px;
            display: flex;
            flex-direction: column;
            gap: 15px; /* Creates the slight gap between buttons */
            z-index: 9999; /* Ensures it stays on top of all other content */
        }

        .floating-btn {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: white;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

        .floating-btn:hover {
            transform: scale(1.1);
            color: white;
        }

        .btn-call-floating {
            background-color: var(--primary-navy); /* Matches your theme */
        }

        .btn-whatsapp-floating {
            background-color: #25D366; /* Official WhatsApp Green */
        }

        /* Adjust position slightly for smaller mobile screens */
        @media (max-width: 768px) {
            .floating-action-menu {
                bottom: 20px;
                right: 20px;
            }
        }