/* navabr  start*/
 /* Navbar Customization */
    .navbar {
      transition: all 0.3s ease;
    }

    .nav-link {
      color: #000 !important;
      letter-spacing: 1px;
      transition: 0.3s;
    }

    /* Hover effect aapke Red logo theme ke mutabiq */
    .nav-link:hover,
    .active-link {
      color: #dc3545 !important; /* Red Color */
    }

    /* Logo scaling for mobile */
    @media (max-width: 768px) {
      .navbar-brand img {
        height: 90px !important;
      }
    }

/* navabr  end*/


/* hero section */
/* Base Styles */
 .slide-title {
         
        font-size: 2.0rem !important;
        line-height: 1.1;
      }
    .serif {
      font-family: Sans-serif;
    }
    .tracking-widest {
      
      letter-spacing: 4px;
    }
    .ls-2 {
      letter-spacing: 2px;
    }
    .italic {
      font-style: Sans-serif;
    }
    .red-line-hero {
      border-left: 5px solid #dc3545;
      padding-left: 15px;
    }

    /* Hero Desktop */
    .carousel-caption-custom {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      z-index: 10;
      color: white;
    }
    .dark-gradient-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.3) 60%,
        transparent 100%
      );
      z-index: 1;
    }
    .ken-burns {
      animation: zoom 20s infinite alternate;
      object-fit: cover;
    }
    @keyframes zoom {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(1.1);
      }
    }

    .slider-nav-container {
      position: absolute;
      bottom: 40px;
      right: 40px;
      z-index: 20;
      display: flex;
    }
    .custom-slider-btn {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      padding: 12px 25px;
      font-size: 0.7rem;
      letter-spacing: 2px;
      transition: 0.3s;
    }
    .custom-slider-btn:hover {
      background: #dc3545;
      border-color: #dc3545;
    }

    /* About Elements */
    .red-decorative-box {
      position: absolute;
      bottom: -15px;
      right: 0;
      width: 100px;
      height: 100px;
      background-color: #dc3545;
      z-index: -1;
    }
    .about-floating-badge {
      bottom: 20px;
      left: -15px;
      border-left: 5px solid #dc3545;
      min-width: 160px;
    }

    /* --- CLEAN RESPONSIVE FIXES --- */
    @media (max-width: 768px) {
      /* Banner ki height thori kam ki (Professional Look) */
      section.vh-100 {
        height: 75vh !important;
      }

      .slide-title {
         
        font-size: 2.0rem !important;
        line-height: 1.1;
      }

      .slide-sub {
        font-size: 0.75rem;
        letter-spacing: 2px;
      }

      /* Description mobile pe thori choti */
      .slide-desc {
        font-size: 0.9rem !important;
        max-width: 100%;
        margin-bottom: 20px !important;
      }

      /* Buttons aur Nav adjustment */
      .hero-btn {
        padding: 10px 25px !important;
        font-size: 0.75rem;
      }

      .slider-nav-container {
        bottom: 20px;
        right: 20px;
      }

      .custom-slider-btn {
        padding: 8px 16px;
        font-size: 0.6rem;
      }

      /* About Section Spacing */
      .responsive-h2 {
        font-size: 1.8rem !important;
        margin-top: 15px;
      }

      .about-floating-badge {
        left: 5px;
        bottom: 5px;
        padding: 10px !important;
      }

      .btn-mobile-wide {
        width: 50%; /* Mobile pe button full width zyada acha lagta hai */
      }
    }
  @media (max-width: 768px) {
      /* Height kam kar di responsive mein */
      .hero-main-wrapper.vh-100 {
        height: 75vh !important;
      }
      .slide-title {
        font-size: 2.2rem !important;
        line-height: 1.1;
      }
      .slide-sub {
        font-size: 0.75rem;
        letter-spacing: 2px;
      }
      .slide-desc {
        font-size: 0.95rem !important;
        max-width: 100%;
        margin-bottom: 25px !important;
      }
      .hero-btn {
        padding: 10px 25px !important;
        font-size: 0.8rem;
      }
      .slider-nav-container {
        bottom: 20px;
        right: 20px;
      }
      .custom-slider-btn {
        padding: 8px 16px;
        font-size: 0.6rem;
      }
    }

     .serif { font-family: 'Cormorant Garamond', serif; }
  .responsive-h6 { letter-spacing: 2px; font-size: 0.8rem; }
  .responsive-h2 { font-size: 2.5rem; }
  .about-floating-badge { bottom: 20px; left: -15px; min-width: 220px; }
  .company-name-badge { font-weight: 600; font-size: 1.3rem; font-family: sans-serif; }
  .badge-subtext { font-size: 0.6rem; letter-spacing: 2px; }

  /* Accordion Customization */
  .accordion-button:not(.collapsed) {
    background-color: rgba(220, 53, 69, 0.08);
    color: #dc3545;
    box-shadow: none;
  }
  .accordion-button:focus { box-shadow: none; }
  .accordion-button { padding: 1.2rem 1rem; font-size: 0.95rem; transition: all 0.3s ease; }
  .accordion-body { font-size: 0.85rem; line-height: 1.6; }

  /* Responsive Fixes */
  @media (max-width: 768px) {
    .responsive-h2 { font-size: 1.7rem !important; margin-bottom: 1.2rem !important; }
    .responsive-h6 { font-size: 0.75rem !important; }
    .about-floating-badge { left: 0px; bottom: 10px; min-width: 150px; padding: 10px !important; }
    .company-name-badge { font-size: 1rem !important; }
    .accordion-button { font-size: 0.85rem !important; padding: 0.9rem 0.7rem; }
  }
/* end about */

/* Service Cards */
 .serif {
        font-family:Sans-serif ;
      }
      .ls-2 {
        letter-spacing: 3px;
      }

      /* --- Service Card Styles --- */
      .service-card {
        transition: all 0.4s ease;
        border: 1px solid #f1f1f1 !important;
      }
      .service-img {
        height: 260px;
        object-fit: cover;
        transition: transform 0.6s ease;
      }
      .service-card:hover .service-img {
        transform: scale(1.1);
      }
      .service-card:hover {
        transform: translateY(-10px);
        background: #fff;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
      }

      .service-link {
        color: #dc3545;
        text-decoration: none;
        font-weight: bold;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: 0.3s;
      }
      .service-link:hover {
        color: #000;
        letter-spacing: 2px;
      }

      /* --- Project Grid Styles --- */
      .project-card {
        position: relative;
        overflow: hidden;
        background: #000;
        width: 100%;
        cursor: pointer;
      }
      .project-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.8;
        transition: all 0.7s ease;
      }
      .project-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 40px;
        color: #fff;
        z-index: 2;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
      }
      .project-card:hover img {
        transform: scale(1.1);
        opacity: 0.6;
      }

      .view-all-link {
        color: #000;
        font-size: 0.75rem;
        font-weight: bold;
        text-decoration: none;
        border-bottom: 2px solid #dc3545;
        padding-bottom: 5px;
        letter-spacing: 2px;
      }

      /* --- Heights & Responsiveness --- */
      .big-card {
        height: 550px;
      }
      .small-card {
        height: 400px;
      }

      @media (max-width: 768px) {
        .big-card,
        .small-card {
          height: 350px;
        } /* Mobile par uniform height */
        .display-5 {
          font-size: 2rem !important;
        }
        .project-overlay {
          padding: 20px;
        }
        .project-overlay h3 {
          font-size: 1.5rem !important;
        }
        .project-overlay h4 {
          font-size: 1.2rem !important;
        }
      }
/* end service */

 .serif {
        font-family:Sans-serif;
      }
      .ls-2 {
        letter-spacing: 2px;
      }
      .italic {
        font-style: Sans-serif;
      }
      .object-fit-cover {
        object-fit: cover;
      }

      /* Luxury Card Hover Effects */
      .luxury-card {
        height: 450px;
        background: #000;
      }
      .luxury-card img {
        transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);
        opacity: 0.85;
      }
      .luxury-card:hover img {
        transform: scale(1.1);
        opacity: 0.6;
      }

      .card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.9) 0%,
          transparent 60%
        );
        transition: 0.4s ease;
      }
      .luxury-card:hover .card-overlay {
        background: linear-gradient(
          to top,
          rgba(220, 53, 69, 0.85) 0%,
          rgba(0, 0, 0, 0.4) 100%
        );
      }

      /* Process Steps Styles */
      .process-step {
        padding: 1.25rem;
        border-left: 4px solid #dc3545;
        background-color: #fff;
        height: 100%;
        transition: 0.3s;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      }
      .process-step:hover {
        background-color: #fceaea;
      }
      .step-num {
        font-size: 0.8rem;
        font-weight: bold;
        color: #dc3545;
        display: block;
        margin-bottom: 5px;
      }

      /* --- RESPONSIVE FIXES --- */
      @media (max-width: 768px) {
        .responsive-h1 {
          font-size: 2.2rem !important;
        }
        .luxury-card {
          height: 320px;
        } /* Mobile par card height kam */
        .card-overlay h4 {
          font-size: 1.3rem;
        }
        .btn-mobile-sm {
          width: 100%;
          font-size: 0.75rem !important;
          padding: 8px !important;
        }

        .border-custom-mobile {
          border-left: none !important;
          border-top: 3px solid #dc3545;
          padding-top: 20px;
          padding-left: 0 !important;
        }

        .process-step {
          padding: 0.8rem;
        }
        .process-step h6 {
          font-size: 0.85rem;
        }
      }

      @media (min-width: 992px) {
        .border-start-md {
          border-left: 1px solid #dee2e6 !important;
        }
      }
/* end process */

/* Footer */
 .ls-1 {
        letter-spacing: 1px;
      }
      .ls-2 {
        letter-spacing: 2px;
      }
      .serif {
        font-family: Sans-serif;
      }

      .social-icon {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        text-decoration: none;
        transition: 0.3s;
        border-radius: 50%;
      }
      .social-icon:hover {
        background: #dc3545;
        transform: translateY(-3px);
      }

      .footer-links a {
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        transition: 0.3s;
      }
      .footer-links a:hover {
        color: #dc3545;
        padding-left: 5px;
      }

      .hover-danger:hover {
        color: #dc3545 !important;
      }

      .btn-proposal {
        transition: all 0.4s ease;
        letter-spacing: 1px;
        font-size: 0.75rem;
      }
      .btn-proposal:hover {
        background-color: #dc3545;
        color: white !important;
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
      }

      /* --- Mobile Center Logic --- */
      @media (max-width: 991px) {
        .text-lg-start {
          text-align: center !important;
        }
        .footer-links {
          padding: 0 !important;
        }
        .w-100-mobile {
          width: 100%;
          max-width: 280px;
          margin: 0 auto;
          display: block;
        }
        /* Desktop hover effect (padding-left) mobile par center alignment kharab karti hai */
        .footer-links a:hover {
          padding-left: 0;
          text-decoration: underline;
        }
      }


      /* end footer  */


       .wa-float-circle {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 60px !important;
        right: 30px;
        
        background-color: #25d366;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
        z-index: 1000;
        transition: all 0.3s ease-in-out;
        text-decoration: none;
      }

      /* Hover effect: halka sa upar slide hoga aur color dark hoga */
      .wa-float-circle:hover {
        background-color: #128c7e;
        color: #fff;
        transform: translateY(-8px) scale(1.05);
      }

      /* Mobile ke liye size thoda chota */
      @media (max-width: 768px) {
        .wa-float-circle {
          width: 50px;
          height: 50px;
          bottom: 20px;
          right: 20px;
          font-size: 26px;
        }
      }

      /* Pulse animation (optional): Attention grab karne ke liye */
      .wa-float-circle::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;wa-float-circle
        border-radius: 50%;
        border: 2px solid #25d366;
        animation: wa-pulse 2s infinite;
        z-index: -1;
      }

      @keyframes wa-pulse {
        0% {
          transform: scale(1);
          opacity: 0.8;
        }
        100% {
          transform: scale(1.5);
          opacity: 0;
        }
      }
/* whatsapp ico end*/