/* --- VARIABLES --- */
 :root {
     --primary: #002e5b;
     --accent: #fde428;
     --bg-light: #f3f7fc;
     --white: #ffffff;
     --text-dark: #1c1c1c;
     --transition: all 0.3s ease-in-out;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Segoe UI', sans-serif;


 }

 body {
     background-color: var(--bg-light);
     overflow-x: hidden;
 }

 a {
     text-decoration: none;
 }

 ul {
     list-style: none;
 }

 /* --- MAIN NAVBAR CONTAINER --- */
 .navbar-container {
     background-color: var(--white, #ffffff);
     position: sticky;
     top: 0;
     z-index: 1000;
     width: 100%;
     max-width: 100vw;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     box-sizing: border-box;
 }

 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 4%;
     max-width: 1440px;
     margin: 0 auto;
     box-sizing: border-box;
 }

 .logo-wrapper {
     text-decoration: none;
 }

 .logo-full {
     font-size: 24px;
     font-weight: 800;
     color: var(--primary, #333);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .logo-mobile {
     display: none;
     font-size: 22px;
     color: var(--primary, #333);
     background: var(--accent, #f0f0f0);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     align-items: center;
     justify-content: center;
 }

 /* --- Hamburger Menu Icon --- */
 .hamburger {
     display: none;
     font-size: 24px;
     cursor: pointer;
     color: var(--primary, #333);
 }

 /* --- Nav Links --- */
 .nav-links {
     display: flex;
     gap: 15px;
     list-style: none;
     margin: 0;
     padding: 0;

 }

 .nav-item {
     position: relative;
     padding: 12px 0;
 }

 .nav-link {
     color: var(--primary, #333);
     font-weight: 700;
     font-size: 13px;
     text-transform: uppercase;
     display: flex;
     align-items: center;
     gap: 5px;
     transition: 0.3s ease;
     cursor: pointer;
     text-decoration: none;
 }

 .nav-link:hover {
     color: #d63333;

 }

 .nav-link i {
     font-size: 10px;
     transition: transform 0.3s;
 }

 .nav-item:hover .nav-link i {
     transform: rotate(180deg);
 }

 /* --- Mega Menu --- */
 .mega-menu {
     position: absolute;
     top: 100%;
     left: 0;
     width: max-content;
     min-width: 300px;
     max-width: 1000px;
     background: var(--white, #ffffff);
     border-top: 3px solid #d63333;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
     padding: 20px;
     border-radius: 0 0 5px 5px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(15px);
     transition: all 0.3s ease-in-out;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     z-index: 999;
 }

 .nav-item:hover .mega-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .nav-links .nav-item:nth-last-child(-n+4) .mega-menu {
     left: auto;
     right: 0;
 }

 .mega-cat h4 {
     color: var(--primary, #333);
     font-size: 14px;
     border-bottom: 1px solid #f0f0f0;
     padding-bottom: 5px;
     margin-bottom: 10px;
 }

 .mega-cat a {
     display: block;
     color: #555;
     font-size: 13px;
     margin-bottom: 8px;
     transition: 0.2s;
     text-decoration: none;
 }

 .mega-cat a:hover {
     color: #d63333;
     padding-left: 5px;
     border-left: 2px solid #d63333;
 }



 /* --- 3. HERO SECTION (With Background Text) --- */
 .hero-section {
     background-color: var(--primary);
     min-height: 85vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 40px 20px;
     position: relative;
     overflow: hidden;

 }

 /* ATTRACTIVE BACKGROUND TEXT */
 .bg-text-branding {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 12vw;
     font-weight: 900;
     white-space: nowrap;
     text-transform: uppercase;
     z-index: 0;
     pointer-events: none;
     color: transparent;
     -webkit-text-stroke: 2px rgba(255, 255, 255, 0.05);
     opacity: 0.6;
     letter-spacing: 5px;
     animation: pulseText 5s infinite alternate;
 }

 @keyframes pulseText {
     0% {
         transform: translate(-50%, -50%) scale(1);
     }

     100% {
         transform: translate(-50%, -50%) scale(1.05);
     }
 }

 /* Hero Foreground Content */
 .hero-content {
     position: relative;
     z-index: 2;
     width: 100%;
 }

 .main-heading {
     color: var(--white);
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 30px;
     line-height: 1.2;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }

 /* Search Bar */
 .search-container {
     background: var(--white);
     border-radius: 50px;
     padding: 5px;
     display: flex;
     align-items: center;
     max-width: 650px;
     width: 100%;
     margin: 0 auto 50px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     border: 2px solid transparent;
     transition: 0.3s;
 }

 .search-container:focus-within {
     border-color: var(--accent);
     transform: scale(1.02);
 }

 .search-input {
     border: none;
     outline: none;
     flex: 1;
     padding: 15px 25px;
     font-size: 16px;
     border-radius: 50px;
     color: #333;
 }

 .search-btn {
     background: var(--primary);
     border: none;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     color: var(--white);
     font-size: 18px;
     cursor: pointer;
     transition: 0.3s;
     margin-right: 2px;
 }

 .search-btn:hover {
     background: var(--accent);
     color: var(--primary);
     rotate: 90deg;
 }

 /* Wrapper */
 .marquee {
     width: 100%;
     overflow: hidden;
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(10px);
     padding: 15px 0;
 }

 /* Moving Content */
 .marquee-content {
     display: flex;
     gap: 30px;
     width: max-content;
     animation: scroll 25s linear infinite;
 }

 /* Pause on hover */
 .marquee:hover .marquee-content {
     animation-play-state: paused;
 }

 /* Tag Style */
 .tag {
     padding: 8px 25px;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 30px;
     white-space: nowrap;
     color: #fff;
     font-size: 14px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: 0.3s;
 }

 .tag:hover {
     background: #f0a500;
     color: #000;
     transform: translateY(-3px);
 }

 /* Animation */
 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* --- Main Layout --- */
 .info-section {
     padding: 50px 4%;
     background-color: var(--bg-light);
     font-family: sans-serif;
     box-sizing: border-box;
 }

 .info-container {
     max-width: 1440px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.2fr 2fr;
     gap: 30px;
 }

 /* --- Panel Styles (Common for both Left & Right) --- */
 .panel {
     background: var(--white);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
 }

 .panel-header {
     background-color: var(--primary);
     color: var(--white);
     padding: 15px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 4px solid var(--accent);

 }

 .panel-header h2 {
     font-size: 16px;
     font-weight: 700;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 10px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .panel-header h2 i {
     color: var(--accent);
     font-size: 18px;
 }

 .view-btn {
     color: var(--primary);
     background: var(--accent);
     padding: 5px 15px;
     font-size: 12px;
     font-weight: 800;
     text-decoration: none;
     border-radius: 4px;
     transition: var(--transition);
 }

 .view-btn:hover {
     background: var(--white);
     color: var(--primary);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }

 /* ==========================================
   LEFT COLUMN: Scrolling Tenders
   ========================================== */
 .scrolling-wrapper {
     height: 380px;

     overflow: hidden;
     position: relative;
     padding: 0 20px;
     background: var(--white);
 }

 .scrolling-list {
     list-style: none;
     padding: 0;
     margin: 0;
     animation: scrollUp 15s linear infinite;
 }

 /* Hover karne par scrolling ruk jayegi */
 .scrolling-wrapper:hover .scrolling-list {
     animation-play-state: paused;
 }

 .scrolling-list li {
     padding: 18px 0;
     border-bottom: 1px dashed var(--border-color);
     font-size: 14px;
     line-height: 1.6;
     display: flex;
     gap: 12px;
     align-items: flex-start;
 }

 .scrolling-list li i {
     color: var(--primary);
     margin-top: 5px;
     font-size: 12px;
 }

 .scrolling-list li a {
     color: var(--text-dark);
     text-decoration: none;
     font-weight: 500;
     transition: var(--transition);
 }

 .scrolling-list li a:hover {
     color: var(--primary);
     text-decoration: underline;
 }

 .badge {
     background: var(--primary);
     color: var(--white);
     font-size: 10px;
     font-weight: bold;
     padding: 2px 6px;
     border-radius: 3px;
     margin-left: 5px;
     text-transform: uppercase;
     animation: blink 1.5s infinite;
 }

 /* ==========================================
   RIGHT COLUMN: Fixed Blogs
   ========================================== */
 .blog-content {
     padding: 20px;
     height: 380px;
     overflow-y: auto;

 }

 /* Custom Scrollbar for Blog Section */
 .blog-content::-webkit-scrollbar {
     width: 6px;
 }

 .blog-content::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 5px;
 }

 .blog-item {
     display: flex;
     gap: 18px;
     margin-bottom: 20px;
     padding-bottom: 20px;
     border-bottom: 1px solid var(--border-color);
 }

 .blog-item:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

 .blog-date {
     background: var(--bg-light);
     border: 1px solid var(--accent);
     color: var(--primary);
     min-width: 65px;
     height: 70px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
 }

 .blog-date span {
     font-size: 24px;
     font-weight: 800;
     line-height: 1;
     color: var(--primary);
 }

 .blog-info h3 {
     margin: 0 0 8px 0;
     font-size: 16px;
     line-height: 1.4;
 }

 .blog-info h3 a {
     color: var(--primary);
     text-decoration: none;
     transition: var(--transition);
 }

 .blog-info h3 a:hover {
     color: var(--accent);
 }

 .blog-info p {
     margin: 0;
     font-size: 14px;
     color: #666;
     line-height: 1.5;
 }

 /* ==========================================
   ANIMATIONS
   ========================================== */
 @keyframes scrollUp {
     0% {
         transform: translateY(380px);
     }


     100% {
         transform: translateY(-100%);
     }


 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.4;
     }
 }

 /* --- ABOUT SECTION STYLES --- */
 .about-section {
     padding: 80px 5%;
     background-color: var(--white);
     overflow: hidden;
     font-family: 'Segoe UI', sans-serif;
 }

 .about-container {
     max-width: 1200px;
     margin: 0 auto;
 }

 /* 1. TOP SPLIT LAYOUT (Image Left, Text Right) */
 .about-row {
     display: flex;
     align-items: center;
     gap: 60px;
     margin-bottom: 80px;
 }

 /* Image Side */
 .about-image-col {
     flex: 1;
     position: relative;
 }

 .img-frame {
     position: relative;
     z-index: 2;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     opacity: 0;
     transform: translateX(-50px);
     transition: 1s ease;
 }

 .img-frame img {
     width: 100%;
     display: block;
     transition: transform 0.5s;
 }

 .img-frame:hover img {
     transform: scale(1.05);
 }

 /* Decorative Background Box */
 .img-backdrop {
     position: absolute;
     top: -20px;
     left: -20px;
     width: 100%;
     height: 100%;
     border: 3px solid var(--accent);
     z-index: 1;
     border-radius: 10px;
     opacity: 0;
     transition: 1s ease 0.3s;

 }

 /* Floating Badge */
 .exp-badge {
     position: absolute;
     bottom: 30px;
     right: -20px;
     background: var(--primary);
     color: var(--white);
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 10px 20px rgba(0, 46, 91, 0.3);
     z-index: 3;
     text-align: center;
     border-bottom: 4px solid var(--accent);
     opacity: 0;
     transform: translateY(20px);
     transition: 1s ease 0.5s;
 }

 .exp-badge h3 {
     font-size: 28px;
     font-weight: 800;
     color: var(--accent);
     margin: 0;
 }

 .exp-badge span {
     font-size: 13px;
     font-weight: 600;
     text-transform: uppercase;
 }

 /* Text Side */
 .about-text-col {
     flex: 1;
     opacity: 0;
     transform: translateX(50px);
     transition: 1s ease;
 }

 .section-tag {
     color: var(--accent);
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     font-size: 14px;
     display: inline-block;
     margin-bottom: 10px;
     background: #002e5b10;
     padding: 5px 10px;
     border-radius: 4px;
 }

 .about-heading {
     font-size: 36px;
     color: var(--primary);
     font-weight: 800;
     line-height: 1.3;
     margin-bottom: 20px;
 }

 .about-desc {
     color: var(--text-gray);
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 25px;
 }

 .feature-list {
     list-style: none;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px;
     margin-bottom: 30px;
 }

 .feature-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-dark);
 }

 .feature-item i {
     color: var(--accent);
     background: var(--primary);
     width: 20px;
     height: 20px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
 }

 .btn-about {
     background: var(--primary);
     color: var(--white);
     padding: 12px 30px;
     border-radius: 5px;
     font-weight: 600;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: var(--transition);
     border: 2px solid var(--primary);
 }

 .btn-about:hover {
     background: transparent;
     color: var(--primary);
 }

 /* 2. STATS COUNTER ROW */
 .stats-row {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     background: var(--bg-light);
     padding: 40px;
     border-radius: 10px;
     text-align: center;
     opacity: 0;
     transform: translateY(30px);
     transition: 1s ease 0.2s;
 }

 .stat-item h2 {
     font-size: 38px;
     font-weight: 800;
     color: var(--primary);
     margin-bottom: 5px;
     display: flex;
     justify-content: center;
     align-items: baseline;
 }

 .stat-item h2 span {
     color: var(--accent);
     margin-left: 2px;
 }

 .stat-item p {
     font-size: 14px;
     color: var(--text-gray);
     font-weight: 600;
 }

 /* 3. VALUE CARDS ROW */
 .values-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     margin-top: 50px;
 }

 .value-card {
     background: var(--white);
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     border-bottom: 3px solid transparent;
     transition: var(--transition);
     opacity: 0;
     transform: translateY(30px);
 }

 /* Staggered animation delays handled in JS or CSS nth-child */

 .value-card:hover {
     transform: translateY(-10px);
     border-bottom-color: var(--accent);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .card-icon {
     width: 60px;
     height: 60px;
     background: #f3f7fc;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     color: var(--primary);
     margin-bottom: 20px;
     transition: 0.3s;
 }

 .value-card:hover .card-icon {
     background: var(--primary);
     color: var(--accent);
 }

 .value-card h3 {
     font-size: 20px;
     color: var(--primary);
     margin-bottom: 10px;
 }

 .value-card p {
     font-size: 14px;
     color: var(--text-gray);
     line-height: 1.6;
 }

 /* --- ANIMATION ACTIVE STATES (Added via JS) --- */
 .animate-active .img-frame {
     opacity: 1;
     transform: translateX(0);
 }

 .animate-active .img-backdrop {
     opacity: 1;
 }

 .animate-active .exp-badge {
     opacity: 1;
     transform: translateY(0);
 }

 .animate-active .about-text-col {
     opacity: 1;
     transform: translateX(0);
 }

 .animate-active .stats-row {
     opacity: 1;
     transform: translateY(0);
 }

 .value-card.animate-card {
     opacity: 1;
     transform: translateY(0);
 }

 /* --- SECTION STYLES --- */
 .services-section {
     padding: 100px 5%;
     background-color: var(--bg-gray);
     font-family: 'Segoe UI', sans-serif;
     position: relative;
 }

 .service-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .service-header h2 {
     font-size: 40px;
     color: var(--primary);
     font-weight: 800;
     position: relative;
     display: inline-block;
     z-index: 1;
 }

 /*
 .service-header h2::before {
     content: 'SERVICES';
     position: absolute;
     top: -30px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 80px;
     color: rgba(0, 46, 91, 0.05);
     font-weight: 900;
     z-index: -1;
     white-space: nowrap;
 } */

 /* --- GRID --- */
 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     max-width: 1400px;
     margin: 0 auto;
 }


 .service-card {
     background: var(--white);
     padding: 40px 30px;
     border-radius: 15px;
     position: relative;
     overflow: hidden;

     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     transition: 0.4s ease;
     cursor: pointer;
     z-index: 1;

     opacity: 0;
     transform: translateY(30px);
 }

 /* The Sliding Blue Background */
 .service-card::before {
     content: "";
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--primary);
     transition: top 0.4s ease;
     z-index: -1;
     border-radius: 15px;
 }

 /* Hover State: Slide Up */
 .service-card:hover::before {
     top: 0;

 }

 .service-card:hover {
     transform: translateY(-10px);
     /* Lift Card */
     box-shadow: 0 20px 40px rgba(0, 46, 91, 0.2);
 }

 /* Content Styling */
 .icon-wrapper {
     width: 70px;
     height: 70px;
     background: #f0f4f9;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     color: var(--primary);
     margin-bottom: 25px;
     transition: 0.4s;
 }

 .s-title {
     font-size: 22px;
     font-weight: 700;
     color: var(--primary);
     margin-bottom: 15px;
     transition: 0.4s;
 }

 .s-desc {
     font-size: 15px;
     color: var(--text-gray);
     line-height: 1.6;
     transition: 0.4s;
     margin-bottom: 25px;
 }

 .read-more {
     display: inline-block;
     background: var(--white);
     color: var(--primary);
     padding: 8px 20px;
     border-radius: 20px;
     font-size: 13px;
     font-weight: 700;
     text-decoration: none;
     opacity: 0;

     transform: translateY(20px);
     transition: 0.4s;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
 }

 /* --- HOVER COLOR CHANGES --- */

 /* Icon: White Bg, Yellow Icon */
 .service-card:hover .icon-wrapper {
     background: var(--white);
     color: var(--accent);
     transform: scale(1.1) rotateY(360deg);

 }

 /* Text: Become White */
 .service-card:hover .s-title {
     color: var(--white);
 }

 .service-card:hover .s-desc {
     color: rgba(255, 255, 255, 0.8);
 }

 /* Button: Appear and Slide Up */
 .service-card:hover .read-more {
     opacity: 1;
     transform: translateY(0);
 }

 /* Scroll Animation Class */
 .service-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* --- SECTION BACKGROUND --- */
 .contact-section {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 80px 20px;
     overflow: hidden;
     background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
     z-index: 1;
 }

 /* Dark Overlay */
 .contact-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 46, 91, 0.85);
     /* Blue Tint */
     z-index: -1;
 }

 /* --- FLOATING CONTAINER --- */
 .contact-container {
     width: 100%;
     max-width: 1100px;
     background: var(--white);
     border-radius: 20px;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
     display: flex;
     overflow: hidden;
     position: relative;
     z-index: 10;
     animation: floatUp 1s ease-out;
 }

 /* --- LEFT SIDE: INFO (Glass Effect) --- */
 .contact-info {
     flex: 1;
     background: var(--primary);
     color: var(--white);
     padding: 50px 40px;
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     overflow: hidden;
 }

 /* Decorative Circles */
 .circle-decor {
     position: absolute;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     z-index: 0;
 }

 .c1 {
     width: 150px;
     height: 150px;
     top: -50px;
     right: -50px;
 }

 .c2 {
     width: 200px;
     height: 200px;
     bottom: -80px;
     left: -50px;
 }

 .info-content {
     position: relative;
     z-index: 1;
 }

 .contact-header h3 {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 15px;
 }

 .contact-header p {
     font-size: 14px;
     opacity: 0.8;
     line-height: 1.6;
 }

 .info-items {
     margin-top: 40px;
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .info-item {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .icon-box {
     width: 45px;
     height: 45px;
     background: rgba(255, 255, 255, 0.15);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: var(--accent);
     transition: 0.3s;
     padding-bottom: 10px;
 }

 /* .info-item:hover .icon-box {
     background: var(--accent);
     color: var(--primary);
     transform: scale(1.1);

 } */

 .info-text span {
     display: block;
     font-size: 12px;
     opacity: 0.7;
     text-transform: uppercase;
     font-weight: 600;


 }

 .info-text p {
     font-size: 16px;
     font-weight: 600;
     color: var(--white);
     margin: 0;

 }

 .social-links {
     margin-top: 50px;
     display: flex;
     gap: 15px;
 }

 .social-btn {
     width: 40px;
     height: 40px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white);
     text-decoration: none;
     transition: 0.3s;
 }

 .social-btn:hover {
     background: var(--accent);
     color: var(--primary);
     border-color: var(--accent);
 }

 /* --- RIGHT SIDE: FORM --- */
 .contact-form {
     flex: 1.4;
     padding: 50px 40px;
     background: var(--white);
 }

 .form-header {
     margin-bottom: 30px;
 }

 .form-header h3 {
     color: var(--primary);
     font-size: 26px;
     font-weight: 800;
 }

 /* FLOATING LABEL INPUTS */
 .input-group {
     position: relative;
     margin-bottom: 30px;
 }

 .input-field {
     width: 100%;
     padding: 12px 0;
     font-size: 16px;
     color: var(--text-dark);
     border: none;
     border-bottom: 2px solid #ddd;
     background: transparent;
     outline: none;
     transition: 0.3s;
 }

 .input-label {
     position: absolute;
     top: 12px;
     left: 0;
     font-size: 16px;
     color: var(--text-gray);
     pointer-events: none;
     transition: 0.3s ease all;
 }

 /* Focus Effects */
 .input-field:focus,
 .input-field:valid {
     border-bottom-color: var(--primary);
 }

 /* Move Label Up */
 .input-field:focus~.input-label,
 .input-field:valid~.input-label {
     top: -10px;
     font-size: 12px;
     color: var(--primary);
     font-weight: 700;
 }

 /* Input Highlight Bar */
 .input-highlight {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 2px;
     width: 0;
     background: var(--accent);
     transition: 0.4s;
 }

 .input-field:focus~.input-highlight {
     width: 100%;
 }

 /* Textarea specific */
 textarea.input-field {
     resize: none;
     overflow: hidden;
 }

 /* Submit Button */
 .btn-submit {
     background: var(--primary);
     color: var(--white);
     border: none;
     padding: 14px 35px;
     border-radius: 50px;
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s;
     display: flex;
     align-items: center;
     gap: 10px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 20px rgba(0, 46, 91, 0.2);
 }

 .btn-submit::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: 0.5s;
 }

 .btn-submit:hover::before {
     left: 100%;
 }

 .btn-submit:hover {
     background: var(--accent);
     color: var(--primary);
     transform: translateY(-3px);
 }

 /* Success Message */
 .form-message {
     margin-top: 15px;
     font-size: 14px;
     font-weight: 600;
     display: none;
 }

 .form-message.success {
     color: green;
     display: block;
     animation: fadeUp 0.5s;
 }

 /* --- ANIMATIONS --- */
 @keyframes floatUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* --- FOOTER CONTAINER --- */
 .footer-section {
     background-color: var(--primary);
     color: var(--white);
     position: relative;
     padding-top: 100px;
     font-family: 'Segoe UI', sans-serif;
     overflow: hidden;
 }

 /* WAVE SVG DECORATION (Top) */
 .footer-wave {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     overflow: hidden;
     line-height: 0;
 }

 .footer-wave svg {
     position: relative;
     display: block;
     width: calc(137% + 1.3px);
     height: 80px;
 }

 .footer-wave .shape-fill {
     fill: #f8fbff;

 }

 /* Background Pattern */
 .footer-bg-pattern {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
     background-size: 30px 30px;
     opacity: 0.5;
     pointer-events: none;
 }

 /* --- MAIN CONTENT GRID --- */
 .footer-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 5% 50px;
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
     gap: 40px;
     position: relative;
     z-index: 1;
 }

 /* COL 1: BRAND INFO */
 .footer-brand h2 {
     font-size: 28px;
     font-weight: 800;
     color: var(--white);
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
 }

 .footer-brand h2 i {
     color: var(--accent);
 }

 .footer-desc {
     color: var(--text-light);
     font-size: 14px;
     line-height: 1.6;
     margin-bottom: 25px;
 }

 .social-icons {
     display: flex;
     gap: 15px;
 }

 .social-link {
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     color: var(--white);
     text-decoration: none;
     transition: var(--transition);
 }

 .social-link:hover {
     background: var(--accent);
     color: var(--primary);
     transform: translateY(-5px);
 }

 /* COL 2 & 3: LINKS */
 .footer-heading {
     font-size: 18px;
     font-weight: 700;
     color: var(--white);
     margin-bottom: 25px;
     position: relative;
     display: inline-block;
 }

 /* Yellow Underline */
 .footer-heading::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -8px;
     width: 40px;
     height: 3px;
     background: var(--accent);
     border-radius: 2px;
 }

 .footer-links {
     list-style: none;
     padding: 0;
 }

 .footer-links li {
     margin-bottom: 12px;
 }

 .footer-links a {
     text-decoration: none;
     color: var(--text-light);
     font-size: 14px;
     transition: var(--transition);
     display: inline-flex;
     align-items: center;
     gap: 5px;
 }

 /* Hover Slide Effect */
 .footer-links a:hover {
     color: var(--accent);
     transform: translateX(8px);
 }

 .footer-links a::before {
     content: "\f105";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     opacity: 0;
     transition: 0.3s;
     font-size: 12px;
 }

 .footer-links a:hover::before {
     opacity: 1;
 }

 /* COL 4: NEWSLETTER & CONTACT */
 .contact-box {
     background: rgba(255, 255, 255, 0.05);
     padding: 20px;
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     margin-bottom: 20px;
     text-align: center;
 }

 .c-item {
     /* display: flex; */
     align-items: flex-start;
     gap: 15px;
     margin-bottom: 15px;
 }

 .c-item:last-child {
     margin-bottom: 0;
 }

 .c-icon {
     color: var(--accent);
     font-size: 16px;
     margin-top: 3px;
 }

 .c-text h6 {
     font-size: 14px;
     color: var(--white);
     margin-bottom: 2px;
 }

 .c-text p {
     font-size: 13px;
     color: var(--text-light);
 }

 /* Subscribe Form */
 .subscribe-form {
     position: relative;
     margin-top: 20px;
 }

 .sub-input {
     width: 100%;
     padding: 12px 15px;
     border-radius: 5px;
     border: none;
     background: rgba(255, 255, 255, 0.1);
     color: var(--white);
     font-size: 14px;
     outline: none;
 }

 .sub-input:focus {
     background: rgba(255, 255, 255, 0.2);
 }

 .sub-btn {
     position: absolute;
     right: 5px;
     top: 5px;
     background: var(--accent);
     border: none;
     width: 32px;
     height: 32px;
     border-radius: 4px;
     color: var(--primary);
     cursor: pointer;
     transition: 0.3s;
 }

 .sub-btn:hover {
     background: var(--white);
 }

 /* --- FOOTER BOTTOM BAR --- */
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding: 20px 5%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #000f1f;
     /* Slightly darker */
     font-size: 13px;
     color: var(--text-light);
     position: relative;
     z-index: 2;
 }

 .bottom-links a {
     color: var(--text-light);
     text-decoration: none;
     margin-left: 20px;
     transition: 0.3s;
 }

 .bottom-links a:hover {
     color: var(--accent);
 }

 /* SCROLL TOP BUTTON */
 .scroll-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 45px;
     height: 45px;
     background: var(--accent);
     color: var(--primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     cursor: pointer;
     box-shadow: 0 4px 15px rgba(253, 228, 40, 0.4);
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     transition: all 0.3s ease;
 }

 .scroll-top.active {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .scroll-top:hover {
     background: var(--white);
     transform: translateY(-5px);
 }

 /* --- RESPONSIVE CSS --- */
 .hamburger {
     display: none;
     color: var(--primary);
     font-size: 24px;
     cursor: pointer;
 }

 /* tender list csss */

 .tender-section {
     max-width: 1000px;
     margin: 40px auto;
     padding: 0 15px;
 }

 .section-header {
     text-align: center;
     margin-bottom: 30px;
 }

 .section-header h2 {
     color: var(--primary);
     font-size: 28px;
     position: relative;
     display: inline-block;
     padding-bottom: 10px;
 }

 .section-header h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background-color: var(--accent);
 }

 /* Tenders List Container */
 .tender-list {
     display: grid;
     gap: 20px;
 }

 /* Individual Tender Card */
 .tender-card {
     background-color: var(--white);
     border-radius: 8px;
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     border-left: 5px solid var(--primary);
     transition: var(--transition);
 }

 .tender-card:hover {
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     transform: translateY(-2px);
     border-left-color: var(--accent);
 }

 .tender-info {
     flex: 1;
     padding-right: 20px;
 }

 .tender-title {
     color: var(--primary);
     font-size: 18px;
     margin-bottom: 8px;
     line-height: 1.4;
 }

 .tender-meta {
     display: flex;
     gap: 15px;
     font-size: 13px;
     color: var(--text-muted);
     margin-bottom: 10px;
     flex-wrap: wrap;
 }

 .tender-meta span {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .badge-active {
     background-color: #e8f5e9;
     color: #2e7d32;
     padding: 2px 8px;
     border-radius: 12px;
     font-weight: 600;
     font-size: 11px;
 }

 .tender-desc {
     font-size: 14px;
     color: var(--text-dark);
     line-height: 1.5;
 }

 /* Download Button */
 .download-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     background-color: var(--primary);
     color: var(--white);
     padding: 12px 20px;
     border-radius: 5px;
     text-decoration: none;
     font-weight: 600;
     font-size: 14px;
     transition: var(--transition);
     white-space: nowrap;
     border: 2px solid var(--primary);
 }

 .download-btn:hover {
     background-color: var(--accent);
     color: var(--primary-dark);
     border-color: var(--accent);
 }


 /* tender list css end */

 /* business services start */
 .exclusive-services {
     padding: 80px 20px;
     overflow: hidden;

 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
 }

 /* --- HEADER --- */
 .header-wrapper {
     margin-bottom: 50px;
 }

 .badge-icon {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 15px;
 }

 .badge-box {
     width: 30px;
     height: 30px;
     background: rgba(0, 46, 91, 0.1);
     color: var(--primary);
     border-radius: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .badge-text {
     color: var(--primary);
     font-weight: 700;
     font-size: 0.85rem;
     letter-spacing: 1px;
     text-transform: uppercase;
 }

 .main-heading1 {
     font-size: 2.8rem;
     color: var(--primary);
     font-weight: 700;
     line-height: 1.2;
 }

 .highlight-text {
     color: #e63946;
     position: relative;
     display: inline-block;
 }

 .c {
     color: var(--white);
     margin-bottom: 0px;

 }


 /* --- SLIDER CONTAINER --- */
 .slider-wrapper {
     position: relative;
     width: 100%;
 }

 .slider-track {
     display: flex;
     gap: 30px;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     padding-bottom: 40px;
     padding-top: 10px;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;

 }

 .slider-track::-webkit-scrollbar {
     display: none;

 }

 /* --- CARD DESIGN --- */
 .card {
     min-width: 350px;
     background: var(--white);
     border-radius: 20px;
     box-shadow: var(--card-shadow);
     overflow: hidden;
     scroll-snap-align: center;
     position: relative;
     transition: transform 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.03);
 }

 .card:hover {
     transform: translateY(-10px);
 }

 /* Image Area */
 .card-image-box {
     height: 200px;
     width: 100%;
     position: relative;
     overflow: hidden;
 }

 .card-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .card:hover .card-img {
     transform: scale(1.1);
 }

 /* Gradient Overlay on Image */
 .card-image-box::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(0, 46, 91, 0.2), rgba(0, 46, 91, 0.7));
 }

 /* Tag on Image */
 .card-tag {
     position: absolute;
     top: 20px;
     left: 20px;
     background: var(--white);
     color: var(--primary);
     padding: 5px 15px;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 700;
     z-index: 2;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 /* Floating Center Icon */
 .floating-icon {
     width: 60px;
     height: 60px;
     background: var(--white);
     border-radius: 50%;
     position: absolute;
     top: 170px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 5;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border: 2px solid var(--bg-light);
 }

 .floating-icon i {
     color: var(--primary);
     font-size: 1.5rem;
 }

 /* Floating Icon Pulse Animation */
 .card:hover .floating-icon {
     background: var(--accent);
     border-color: var(--accent);
     animation: pulse-border 1.5s infinite;
 }

 @keyframes pulse-border {
     0% {
         box-shadow: 0 0 0 0 rgba(253, 228, 40, 0.7);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(253, 228, 40, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(253, 228, 40, 0);
     }
 }

 /* Card Content */
 .card-body {
     padding: 45px 25px 25px 25px;
     text-align: center;
 }

 .card-title {
     font-size: 1.25rem;
     color: var(--primary);
     font-weight: 700;
     margin-bottom: 10px;
 }

 .card-desc {
     font-size: 0.9rem;
     color: var(--text-grey);
     margin-bottom: 20px;
     line-height: 1.5;
 }

 .divider {
     width: 100%;
     height: 1px;
     background: #eee;
     margin-bottom: 15px;
 }

 .read-more {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     color: var(--primary);
     text-decoration: none;
     font-weight: 600;
     font-size: 0.9rem;
     transition: 0.3s;
 }

 .read-more i {
     transition: 0.3s;
 }

 .card:hover .read-more {
     color: #e63946;
 }

 /* Turns Red on hover */
 .card:hover .read-more i {
     transform: translateX(5px);
 }

 /* --- NAVIGATION BUTTONS --- */
 .nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 50px;
     height: 50px;
     background: var(--white);
     border-radius: 50%;
     border: none;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     color: var(--primary);
     font-size: 1.2rem;
     cursor: pointer;
     z-index: 10;
     transition: 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .nav-btn:hover {
     background: var(--primary);
     color: var(--white);
 }

 .prev-btn {
     left: -25px;
 }

 .next-btn {
     right: -25px;
 }


 /* business services end */

 /* experence  */
 /* --- 2. SECTION STYLING --- */
 .hero-section1 {
     background-color: var(--bg-light);
     padding: 60px 20px;
     position: relative;
     min-height: 90vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 /* Circuit Pattern Background */
 .hero-section::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
     linear-gradient(rgba(0, 46, 91, 0.03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(0, 46, 91, 0.03) 1px, transparent 1px);
     background-size: 40px 40px;
     z-index: 0;
     pointer-events: none;
 }

 .container {
     max-width: 1200px;
     width: 100%;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     position: relative;
     z-index: 1;
 }

 /* --- 3. LEFT COLUMN (TEXT) --- */
 .text-col {
     flex: 1;
     padding-right: 40px;

     min-width: 300px;
 }

 .badge-container {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 20px;
     background: rgba(255, 255, 255, 0.6);
     padding: 5px 10px 5px 0;
     border-radius: 8px;
 }

 .icon-box {
     width: 40px;
     height: 40px;
     background: rgba(0, 46, 91, 0.1);
     color: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     font-size: 1.2rem;
     flex-shrink: 0;

 }

 .badge-text {
     color: var(--primary);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-size: 0.85rem;
 }

 h1 {
     font-size: 3.5rem;
     line-height: 1.25;
     color: var(--primary);
     font-weight: 700;
     margin-bottom: 20px;
 }

 .highlight {
     color: var(--primary);
     position: relative;
     display: inline-block;
     z-index: 1;
 }

 /* Yellow Underline */
 .highlight::after {
     content: '';
     position: absolute;
     bottom: 5px;
     left: 0;
     width: 100%;
     height: 12px;
     background-color: var(--accent);
     z-index: -1;
     opacity: 0.7;
     transform: skewX(-10deg);
 }

 p {
     color: var(--text-grey);
     font-size: 1rem;
     line-height: 1.7;
     margin-bottom: 30px;
     max-width: 90%;
 }

 /* --- 4. RIGHT COLUMN (IMAGE) --- */
 .visual-col {
     flex: 1;
     min-width: 300px;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .image-wrapper {
     position: relative;
     width: 100%;
     max-width: 550px;

     margin: 0 auto;
 }

 .masked-image {
     width: 100%;
     height: auto;
     border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
     box-shadow: 15px 15px 0px rgba(0, 46, 91, 0.05);
     animation: blob-float 8s ease-in-out infinite;
     display: block;
 }

 /* Play Button */
 .play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 70px;
     height: 70px;
     background: var(--white);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
     cursor: pointer;
     z-index: 10;
 }

 .play-btn i {
     color: var(--primary);
     font-size: 1.4rem;
     margin-left: 4px;
 }

 .play-btn::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: var(--white);
     z-index: -1;
     animation: pulse 2s infinite;
 }

 /* Decorative Shapes */
 .deco-shape {
     position: absolute;
     border-radius: 50px;
     z-index: 5;
     animation: float 6s ease-in-out infinite;
 }

 .shape-1 {
     width: 70px;
     height: 20px;
     background: var(--primary);
     top: 5%;
     right: 0;
     transform: rotate(-30deg);
 }

 .shape-2 {
     width: 90px;
     height: 25px;
     background: var(--accent);
     bottom: 10%;
     left: -10px;
     transform: rotate(-30deg);
     animation-delay: 1s;
 }

 /* --- 5. ANIMATIONS --- */
 @keyframes pulse {
     0% {
         transform: scale(1);
         opacity: 0.8;
     }

     100% {
         transform: scale(1.6);
         opacity: 0;
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0) rotate(-30deg);
     }

     50% {
         transform: translateY(-15px) rotate(-25deg);
     }
 }

 @keyframes blob-float {

     0%,
     100% {
         border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
     }

     33% {
         border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     }

     66% {
         border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     }
 }

 /* end */


 /* Service detial page design start */

 .service-detail-wrapper * {
     box-sizing: border-box;
 }

 /* --- LAYOUT UTILS --- */
 .sd-container {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 20px;

 }

 .sd-section {
     margin-bottom: 50px;
 }

 .sd-section-header {
     margin-bottom: 25px;
 }

 .sd-section-header h2 {
     color: var(--primary);
     font-size: 1.8rem;
     font-weight: 700;
     margin-bottom: 8px;
     line-height: 1.3;
 }

 .sd-divider {
     width: 50px;
     height: 4px;
     background-color: var(--accent);
     border-radius: 2px;
 }

 .sd-sub-heading {
     color: var(--primary);
     font-size: 1.4rem;
     margin-bottom: 20px;
     font-weight: 600;
 }

 /* --- BUTTONS --- */
 .sd-btn {
     display: inline-block;
     padding: 12px 25px;
     font-weight: 700;
     text-decoration: none;
     border-radius: 5px;
     transition: var(--transition);
     text-transform: uppercase;
     font-size: 0.9rem;
     text-align: center;
     border: none;
     cursor: pointer;
 }

 .sd-btn-accent {
     background-color: var(--accent);
     color: var(--primary);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 .sd-btn-accent:hover {
     background-color: #e6ce20;
     transform: translateY(-2px);
 }

 /* --- 1. HERO SECTION --- */
.sd-hero {
    background-color: var(--bg-light); /* Background change kiya taaki white box alag dikhe */
    padding: 60px 0;
    margin-bottom: 40px;
}

.sd-hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* --- 2. LEFT TEXT SIDE --- */
.sd-hero-text {
    flex: 1.2; /* Thodi zyada jagah text ko di hai */
    color: var(--primary); /* White ki jagah primary color kiya taaki text dikhe */
}

.sd-hero-text h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    color: var(--primary);
}

.sd-hero-text p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    opacity: 0.9;
    color: var(--text-dark);
    line-height: 1.6;
}

/* --- 3. EXPERT BOX (RIGHT SIDE) --- */
.sd-hero-expert {
    flex: 0.8; /* Box ko thoda compact rakha hai */
    width: 100%;
    max-width: 420px; /* Box zyada faile na */
    text-align: center;
    background: var(--white);
    padding: 35px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Premium shadow effect */
    border: 1px solid #eaeaea;
}

/* --- 4. EXPERT IMAGE (FULLY RESPONSIVE) --- */
.sd-hero-expert img {
    width: 300px; /* Exact 300px size */
    max-width: 100%; /* Agar screen 300px se choti ho toh image shrink ho jaye */
    aspect-ratio: 1 / 1; /* Ye image ko hamesha perfect Gol (Circle) rakhega */
    height: auto; /* Height auto rahegi width ke hisab se */
    object-fit: cover; /* Image fatega nahi */
    border-radius: 50%;
    
    /* Double Border Effect */
    border: 6px solid var(--white); 
    box-shadow: 0 0 0 4px var(--accent), 0 10px 20px rgba(0,0,0,0.1); 
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}

/* Image Hover Effect */
.sd-hero-expert:hover img {
    transform: scale(1.05); /* Hover karne par halka sa zoom hoga */
}

/* --- EXPERT META INFO --- */
.sd-expert-meta h4 {
    margin: 0;
    color: var(--primary);
    font-size: 22px;
    font-weight: 700;
}

.sd-expert-position {
    display: block;
    font-size: 15px;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 500;
}

/* PHONE BUTTON */
.sd-expert-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 20px;
    background: var(--primary);
    color: var(--white);
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 4px 10px rgba(0, 46, 91, 0.2);
}

.sd-expert-phone:hover {
    background: var(--accent);
    color: var(--primary);
    transform: translateY(-2px);
}

 /* --- 3. BENEFITS (Cards) --- */
 .sd-benefits-grid {
     display: grid;

     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
 }

 .sd-card {
     background: var(--white);
     border: 1px solid #eee;
     border-bottom: 3px solid var(--primary);
     padding: 25px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
 }

 .sd-card-header {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 15px;
 }

 .sd-icon-wrapper {
     width: 45px;
     height: 45px;
     background: var(--bg-light);
     color: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 1.1rem;
     flex-shrink: 0;

 }

 .sd-card h3 {
     color: var(--primary);
     font-size: 1.1rem;
     font-weight: 700;
     margin: 0;
     line-height: 1.3;
 }

 .sd-card p {
     font-size: 0.95rem;
     color: var(--text-muted);
     margin: 0;
     text-align: justify;
 }


 .sd-bg-light-box {
     background-color: var(--bg-light);
     padding: 30px;
     border-radius: 8px;
 }

 .sd-process-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .sd-process-item {
     background: var(--white);
     padding: 20px;
     border-radius: 8px;
     display: flex;
     gap: 15px;
     border-left: 4px solid var(--accent);
 }

 .sd-step-badge {
     background: var(--primary);
     color: var(--white);
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     flex-shrink: 0;
     font-size: 0.9rem;
     margin-top: 2px;
 }

 .sd-step-info h3 {
     color: var(--primary);
     font-size: 1.1rem;
     margin-bottom: 5px;
     font-weight: 700;
 }

 .sd-step-info p {
     margin: 0;
     font-size: 0.95rem;
     color: var(--text-muted);
 }


 .sd-doc-container {
     border: 1px dashed var(--primary);
     background: var(--bg-light);
     padding: 25px;
     border-radius: 8px;
 }

 .sd-doc-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 12px;
 }

 .sd-doc-list li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 0.95rem;
     color: var(--text-dark);
     font-weight: 500;
 }

 .sd-check-icon {
     color: var(--primary);
     background: var(--accent);
     width: 20px;
     height: 20px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.6rem;
     flex-shrink: 0;
     margin-top: 3px;
 }


 .sd-faq-grid {
     display: grid;
     gap: 15px;
 }

 .sd-faq-item {
     border: 1px solid #eee;
     padding: 15px;
     border-radius: 5px;
     background: #fff;
 }

 .sd-faq-q {
     color: var(--primary);
     font-weight: 700;
     margin-bottom: 8px;
     display: flex;
     gap: 8px;
     align-items: flex-start;
 }

 .sd-faq-q i {
     color: var(--accent);
     margin-top: 3px;
 }

 .sd-faq-item p {
     margin: 0;
     color: var(--text-muted);
     font-size: 0.95rem;
 }


 .sd-cta-bar {
     background-color: var(--primary);
     padding: 40px 0;
     margin-top: 40px;
     border-radius: 8px;
 }

 .sd-cta-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 20px;
 }

 .sd-cta-text h2 {
     color: var(--white);
     font-size: 1.6rem;
     margin-bottom: 5px;
 }

 .sd-cta-text p {
     color: #ccc;
     margin: 0;
 }


 /* Service detial page design end */

/* about section start */
 /* ── HERO ── */
 .hero {
     padding: 130px 80px 80px;
     background: var(--primary);
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 70px;
     align-items: center;
     max-width: 1300px;
     margin: 0 auto;
 }

 .hero-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--white);
     color: #8a6f00;
     border: 1px solid #f5d800;
     padding: 5px 14px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.5px;
     margin-bottom: 22px;
 }

 .hero h1 {
     font-family: 'Merriweather', serif;
     font-size: 46px;
     font-weight: 700;
     color: var(--white);
     line-height: 1.25;
     margin-bottom: 20px;
 }

 .hero h1 span {
     color: #005cbf;
     font-style: italic;
 }

 .hero p {
     font-size: 16px;
     font-weight: 300;
     color: var(--accent);
     line-height: 1.85;
     margin-bottom: 36px;
     max-width: 480px;
 }

 .hero-btns {
     display: flex;
     gap: 14px;
 }

 .btn-navy {
     background: var(--white);
     color: var(--primary);
     padding: 13px 30px;
     border-radius: 7px;
     font-size: 14px;
     border: 2px solid var(--accent);
     font-weight: 700;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: all 0.25s;
     box-shadow: 0 4px 14px rgba(0, 46, 91, 0.2);
 }

 .btn-navy:hover {
     background: var(--white);
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 46, 91, 0.25);
 }

 .btn-outline {
     background: white;
     color: var(--primary);
     border: 2px solid var(--accent);
     padding: 13px 30px;
     border-radius: 7px;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: all 0.25s;
 }



 /* Hero right — stats card */
 .hero-card {
     background: var(--white);
     border-radius: 16px;
     border: 1px solid var(--white);
     overflow: hidden;
     box-shadow: 0 8px 30px rgba(0, 46, 91, 0.08);
 }

 .hero-card-top {
     background: var(--primary);
     padding: 32px 36px;
     color: var(--white);
 }

 .hero-card-top h3 {
     font-family: 'Merriweather', serif;
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .hero-card-top p {
     font-size: 14px;
     color: var(--white);
     margin: 0;
     max-width: 999px;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }

 .stat-item {
     padding: 28px 32px;
     transition: background 0.2s;
 }

 .stat-item:hover {
     background: var(--accent);
 }

 .stat-item:nth-child(2n) {
     border-right: none;
 }

 .stat-item:nth-child(3),
 .stat-item:nth-child(4) {
     border-bottom: none;
 }

 .stat-num {
     font-family: 'Merriweather', serif;
     font-size: 36px;
     font-weight: 700;
     color: var(--primary);
     line-height: 1;
     margin-bottom: 6px;
 }

 .stat-num span {
     color: var(--primary);
     font-size: 28px;
 }

 .stat-label {
     font-size: 12px;
     font-weight: 600;
     color: var(--primary);
     text-transform: uppercase;
     letter-spacing: 0.8px;
 }

 /* ── SECTION WRAPPER ── */
 .section {
     max-width: 1200px;
     margin: 0 auto;
     padding: 90px 80px;
 }

 .section-label {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 14px;
 }

 .section-label::before {
     content: '';
     width: 24px;
     height: 3px;
     background: var(--accent);
     border-radius: 2px;
 }

 .section-title {
     font-family: 'Merriweather', serif;
     font-size: 38px;
     font-weight: 700;
     color: var(--primary);
     line-height: 1.3;
     margin-bottom: 16px;
 }

 .section-sub {
     font-size: 16px;
     font-weight: 300;
     color: var(--primary);
     max-width: 520px;
     line-height: 1.8;
 }

 /* ── ABOUT ── */
 .about-wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .about-img {
     position: relative;
 }

 .about-img img {
     width: 100%;
     height: 460px;
     object-fit: cover;
     border-radius: 14px;
     display: block;
     box-shadow: 0 16px 40px rgba(0, 46, 91, 0.12);
 }

 .about-badge {
     position: absolute;
     bottom: -18px;
     right: -18px;
     background: var(--accent);
     width: 120px;
     height: 120px;
     border-radius: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 24px rgba(0, 46, 91, 0.15);
     border: 4px solid var(--primary);
 }

 .about-badge strong {
     font-family: 'Merriweather', serif;
     font-size: 32px;
     font-weight: 700;
     color: var(--primary);
     line-height: 1;
 }

 .about-badge span {
     font-size: 9px;
     font-weight: 700;
     color: var(--primary);
     text-transform: uppercase;
     letter-spacing: 1px;
     text-align: center;
     margin-top: 3px;
 }

 .about-text .lead {
     font-size: 17px;
     font-weight: 600;
     color: var(--primary);
     line-height: 1.7;
     margin-bottom: 16px;
     padding-left: 16px;
     border-left: 4px solid var(--accent);
 }

 .about-text p {
     font-size: 15px;
     font-weight: 300;
     color: var(--text-dark);
     line-height: 1.9;
     margin-bottom: 14px;
 }

 .chips {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 28px;
 }

 .chip {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 8px 16px;
     background: var(--white);
     border: 1px solid var(--accent);
     border-radius: 20px;
     font-size: 13px;
     font-weight: 600;
     color: var(--primary);
     transition: all 0.25s;
     cursor: default;
 }

 .chip i {
     color: var(--primary);
     font-size: 12px;
 }

 .chip:hover {
     background: var(--primary);
     color: var(--white);
     border-color: var(--accent);
     transform: translateY(-2px);
 }

 .chip:hover i {
     color: var(--accent);
 }

 .ab{
    text-align: center;
    color: var(--white);
    justify-content: center;
 }
 /* ── FEATURES ── */
 .features-bg {
     background: var(--white);
     border-top: 1px solid var(--accent);
     border-bottom: 1px solid var(--accent);
 }

 .feat-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     margin-top: 50px;
 }

 .feat-card {
     background: var(--white);
     border: 1px solid var(--accent);
     border-radius: 14px;
     padding: 36px 28px;
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
 }

 .feat-card:hover {
     border-color: var(--primary);
     box-shadow: 0 12px 32px rgba(0, 46, 91, 0.1);
     transform: translateY(-4px);
 }

 .feat-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--accent);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
 }

 .feat-card:hover::after {
     transform: scaleX(1);
 }

 .feat-icon {
     width: 54px;
     height: 54px;
     background: var(--white);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     color: var(--primary);
     margin-bottom: 22px;
     transition: all 0.3s;
 }

 .feat-card:hover .feat-icon {
     background: var(--primary);
     color: var(--accent);
 }

 .feat-card h3 {
     font-size: 17px;
     font-weight: 700;
     color: var(--primary);
     margin-bottom: 10px;
 }

 .feat-card p {
     font-size: 14px;
     font-weight: 300;
     color: var(--text-dark);
     font-weight: 400;
     line-height: 1.8;
 }

 /* ── TEAM ── */
 .team-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px;
     margin-top: 50px;
 }

 .team-card {
     background: var(--white);
     border: 1px solid var(--primary);
     border-radius: 14px;
     overflow: hidden;
     transition: all 0.3s;
 }

 .team-card:hover {
     box-shadow: 0 14px 36px rgba(0, 46, 91, 0.1);
     transform: translateY(-4px);
 }

 .team-img-wrap {
     position: relative;
     overflow: hidden;
 }

 .team-img-wrap img {
     width: 100%;
     height: 280px;
     object-fit: cover;
     object-position: top;
     display: block;
     transition: transform 0.5s ease;
     filter: brightness(0.95);
 }

 .team-card:hover .team-img-wrap img {
     transform: scale(1.05);
 }

 .team-body {
     padding: 24px 26px;
     border-top: 1px solid var(--accent);
 }

 .team-role {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--primary);
     margin-bottom: 6px;
 }

 .team-name {
     font-family: 'Merriweather', serif;
     font-size: 20px;
     font-weight: 700;
     color: var(--primary);
     margin-bottom: 16px;
 }

 .team-phone {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--primary);
     border: 1px solid var(--accent);
     border-radius: 8px;
     padding: 9px 16px;
     font-size: 14px;
     font-weight: 600;
     color: var(--white);
     text-decoration: none;
     transition: all 0.25s;
     width: 100%;
     justify-content: center;
 }

 .team-phone i {
     color: var(--white);
     font-size: 13px;
 }

 .team-phone:hover {
     background: var(--primary);
     color: var(--white);
     border-color: var(--primary);
 }

 .team-phone:hover i {
     color: var(--accent);
 }

 /* ── CONTACT ── */
 .contact-bg {
     background: var(--primary);
 }

 .contact-wrap {
     max-width: 1200px;
     margin: 0 auto;
     padding: 80px;
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 80px;
     align-items: center;
 }

 .contact-left h3 {
     font-family: 'Merriweather', serif;
     font-size: 36px;
     font-weight: 700;
     color: var(--white);
     margin-bottom: 10px;
     line-height: 1.3;
 }

 .contact-left h3 em {
     font-style: italic;
     color: var(--accent);
 }

 .contact-left>p {
     font-size: 15px;
     font-weight: 300;
     color: rgba(255, 255, 255, 0.6);
     margin-bottom: 40px;
     line-height: 1.8;
 }

 .contact-items {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .c-item {
     display: flex;
     align-items: flex-start;
     gap: 16px;
 }

 .c-icon {
     width: 44px;
     height: 44px;
     background: rgba(253, 228, 40, 0.12);
     border: 1px solid rgba(253, 228, 40, 0.25);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 17px;
     color: var(--accent);
     flex-shrink: 0;
 }

 .c-text strong {
     display: block;
     font-size: 13px;
     font-weight: 700;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 3px;
 }

 .c-text span {
     font-size: 14px;
     font-weight: 300;
     color: rgba(255, 255, 255, 0.55);
     line-height: 1.7;
 }

 /* Contact right card */
 .contact-card {
     background: var(--white);
     border-radius: 16px;
     padding: 44px 40px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
 }

 .contact-card h4 {
     font-family: 'Merriweather', serif;
     font-size: 24px;
     font-weight: 700;
     color: var(--primary);
     margin-bottom: 8px;
 }

 .contact-card p {
     font-size: 14px;
     color: var(--text-dark);
     font-weight: 300;
     line-height: 1.7;
     margin-bottom: 30px;
 }

 .contact-card .btn-navy {
     width: 100%;
     justify-content: center;
     margin-bottom: 14px;
 }

 .contact-card .note {
     text-align: center;
     font-size: 12px;
     color: var(--primary);
     margin-bottom: 0;
 }

 /* about section end */

 /* contact header start */

 .hm-contact-hero {
     background: linear-gradient(rgba(254, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
         url('https://images.unsplash.com/photo-1521791136064-7986c2920216') center/cover no-repeat;

     padding: 90px 20px;
     text-align: center;
     color: var(--white);
 }

 .hm-contact-container {
     max-width: 1200px;
     margin: auto;
 }

 .hm-contact-title {
     font-size: 42px;
     font-weight: 700;
     margin-bottom: 15px;
 }

 .hm-contact-subtitle {
     max-width: 600px;
     margin: auto;
     font-size: 16px;
     opacity: 0.9;
     color: var(--primary);
 }

 .hm-contact-buttons {
     margin-top: 30px;
     display: flex;
     justify-content: center;
     gap: 15px;
     flex-wrap: wrap;
 }

 .hm-contact-buttons a {
     text-decoration: none;
     padding: 12px 24px;
     border-radius: 6px;
     font-weight: 600;
     transition: var(--transition);
 }

 /* CALL BUTTON */

 .hm-btn-call {
     background: var(--accent);
     color: var(--text-dark);
 }

 .hm-btn-call:hover {
     background: #ffd500;
 }

 /* MESSAGE BUTTON */

 .hm-btn-message {
     border: 2px solid var(--white);
     color: var(--primary);
 }

 .hm-btn-message:hover {
     background: var(--white);
     color: var(--primary);
 }

 /* contact header end */


/* responsive  */
 @media (max-width: 1250px) {
     .nav-links {
         position: fixed;
         top: 0;
         right: -100%;
         height: 100vh;
         width: 300px;
         background: var(--white, #ffffff);
         flex-direction: column;
         gap: 0;
         padding-top: 70px;
         box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
         transition: right 0.4s ease;
         overflow-y: auto;
         overflow-x: hidden;
         z-index: 1002;
     }

     .marquee {
         width: 100%;
         overflow: hidden;
         background: rgba(255, 255, 255, 0.08);
         backdrop-filter: blur(10px);
         padding: 15px 0;
     }


     /* Pause on hover */
     .marquee:hover .marquee-content {
         animation-play-state: paused;
     }

     .nav-links.active {
         right: 0;
     }

     .hamburger {
         display: block;
         z-index: 1003;
     }


     .nav-item {
         width: 100%;
         padding: 0;
         border-bottom: 1px solid #f0f0f0;
     }

     .nav-link {
         padding: 15px 20px;
         justify-content: space-between;
         font-size: 14px;
     }

     /* Mega menu for Mobile */
     .mega-menu {
         position: static;
         width: 100%;
         max-width: 100%;
         min-width: 100%;
         box-shadow: none;
         border-top: none;
         display: none;
         padding: 10px 25px;
         background: #f9f9f9;
         transform: none;
         opacity: 1;
         visibility: visible;
         grid-template-columns: 1fr;
     }


     .nav-links .nav-item:nth-last-child(-n+4) .mega-menu {
         left: auto;
         right: auto;
     }


     .nav-item.open .mega-menu {
         display: grid;
     }

     .nav-item.open .nav-link i {
         transform: rotate(180deg);
     }

 }

 @media (max-width: 1024px) {
.hero { padding: 110px 24px 60px; grid-template-columns: 1fr; gap: 50px; }
  .section { padding: 70px 24px; }
  .feat-grid { grid-template-columns: repeat(2,1fr); }
  .contact-wrap { padding: 60px 24px; grid-template-columns: 1fr; gap: 50px; }

     .footer-container {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 992px) {
     .hero-section {
         padding: 50px 20px;
         min-height: auto;
     }

     .container {
         flex-direction: column-reverse;

         gap: 40px;
     }

     .text-col {
         padding-right: 0;
         text-align: center;
         min-width: 100%;
     }

     .badge-container {
         justify-content: center;
     }

     h1 {
         font-size: 2.8rem;
     }

     p {
         margin: 0 auto 30px auto;
     }

     .visual-col {
         min-width: 100%;
     }

     .main-heading {
         font-size: 2.2rem;
     }

     .nav-btn {
         display: none;
     }

     .smc-grid-2 {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .smc-title {
         font-size: 2.8rem;
     }

     .smc-vission-grid {
         grid-template-columns: 1fr;
     }

     .smc-text-center.reveal-up {
         text-align: left;
     }

     .mb-50 {
         margin-bottom: 30px;
     }

      .sd-hero-text h1 {
        font-size: 2.4rem;
    }
    .sd-hero-expert img {
        width: 250px; /* Tablet me thoda chota kiya taaki layout set rahe */
    }
 }


 /* Tablet (< 900px) - Hide Top Bar Contact Info */
 @media (max-width: 900px) {
     .contact-info {
         display: none;
     }


     .marquee-content {
         display: flex;
         gap: 30px;
         width: max-content;
         animation: scroll 25s linear infinite;
     }


     .top-header .contact-info {
         display: none !important;
     }

     .top-header {
         justify-content: flex-end;
     }

     .about-row {
         flex-direction: column;
         text-align: center;
     }

     .feature-list {
         text-align: left;
     }

     .exp-badge {
         right: 0;
     }

     .stats-row {
         grid-template-columns: 1fr 1fr;
         gap: 30px;
     }

     .values-row {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 850px) {
     .contact-container {
         flex-direction: column;
         max-width: 500px;
     }

     .contact-info {
         padding: 40px 30px;
     }

     .c2 {
         left: auto;
         right: -50px;
         bottom: 10px;
     }
 }

 @media (max-width: 768px) {
     .service-title {
         font-size: 32px;
     }

     .services-grid {
         grid-template-columns: 1fr;
         padding: 0 10px;
     }

     .service-card {
         padding: 30px;
     }


     .service-card {
         transform: none !important;
     }

     .sd-hero-content {
         flex-direction: column;
         text-align: center;
     }

     .sd-hero-img {
         display: none;
     }


     .sd-hero-text h1 {
         font-size: 2rem;
     }

     .sd-cta-content {
         flex-direction: column;
         text-align: center;
     }

     .sd-cta-action {
         width: 100%;
     }

     .sd-btn-block {
         display: block;
         width: 100%;
         max-width: 300px;
         margin: 0 auto;
     }

     .hero h1 { font-size: 34px; }
  .about-wrap { grid-template-columns: 1fr; gap: 50px; }
  .about-badge { display: none; }
  .feat-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .section-title { font-size: 30px; }
     .sd-hero {
        padding: 40px 0;
    }
    
    .sd-hero-content {
        flex-direction: column; /* Mobile me upar niche layega */
        text-align: center;
        gap: 30px;
    }
    
    .sd-hero-expert {
        max-width: 100%; /* Mobile me box full width lega */
        padding: 30px 15px;
    }

    .sd-hero-expert img {
        width: 280px; /* Mobile me image fir se badi dikhegi */
    }
    
    .sd-hero-text p {
        font-size: 1rem;
    }
 }

 @keyframes slideUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (max-width: 600px) {
     .footer-container {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 15px;
         text-align: center;
     }

     .bottom-links a {
         margin: 0 10px;
     }

     .footer-wave {
         height: 50px;
     }


 }

 /* Mobile (596px) */
 @media (max-width: 596px) {
     .logo-full {
         display: none;
     }

     .logo-mobile {
         display: flex;
     }

     .main-heading {
         font-size: 28px;
     }

     .search-container {
         max-width: 92%;
         height: 40px;
     }
     .search-btn{
        height: 35px;
        width: 35px;
     }

     .bg-text-branding {
         font-size: 18vw;
         opacity: 0.4;
     }


 }

 @media (max-width: 576px) {
     .tender-section {
         margin: 20px auto;
     }

     .section-header h2 {
         font-size: 22px;
     }

     .tender-card {
         flex-direction: column;
         align-items: flex-start;
         padding: 15px;
         gap: 15px;
     }

     .tender-info {
         padding-right: 0;
     }

     .tender-title {
         font-size: 16px;
     }

     .tender-meta {
         gap: 10px;
         font-size: 12px;
     }

     .download-btn {
         width: 100%;
         padding: 12px;
         font-size: 15px;
     }

     h1 {
         font-size: 2.2rem;
     }

     .text-col {
         padding: 0 10px;
     }


     .shape-1,
     .shape-2 {
         display: none;
     }

     .masked-image {

         border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     }

     .exclusive-services {
         padding: 50px 15px;
     }

     .main-heading {
         font-size: 1.8rem;
     }

     .card {
         min-width: 280px;
         width: 85vw;
     }

     .slider-track {
         gap: 20px;
         padding-left: 10px;
         padding-right: 10px;
     }
 }

 @media (max-width: 480px) {
     .about-section {
         padding: 50px 20px;
     }

     .about-heading {
         font-size: 28px;
     }

     .feature-list {
         grid-template-columns: 1fr;
     }

     .stats-row {
         grid-template-columns: 1fr;
     }

     .img-backdrop {
         display: none;
     }


     .exp-badge {
         position: relative;
         bottom: auto;
         right: auto;
         margin-top: -30px;
         display: inline-block;
         width: auto;
     }

     .contact-section {
         padding: 40px 15px;
     }

     .contact-form {
         padding: 30px 20px;
     }

     .form-header h3 {
         font-size: 22px;
     }

     .btn-submit {
         width: 100%;
         justify-content: center;
     }

     .top-header .top-nav {
         gap: 15px;

     }

     .top-header .top-nav a {
         font-size: 12px;
     }

     .top-header .btn-login {
         padding: 5px 12px;
         font-size: 11px;
     }

     .sd-container {
         padding: 0 15px;
     }


     .sd-hero {
         padding: 40px 0;
     }

     .sd-hero-text h1 {
         font-size: 1.7rem;
     }

     .sd-hero-text p {
         font-size: 1rem;
     }

     .sd-section-header h2 {
         font-size: 1.5rem;
     }


     .sd-benefits-grid {
         grid-template-columns: 1fr;
     }


     .sd-doc-list {
         grid-template-columns: 1fr;
     }


     .sd-card {
         padding: 20px;
     }

     .sd-bg-light-box {
         padding: 20px;
     }


     .sd-process-item {
         flex-direction: column;
         gap: 10px;
     }

     .sd-step-badge {
         width: 25px;
         height: 25px;
         font-size: 0.8rem;
     }


     .sd-cta-text h2 {
         font-size: 1.4rem;
     }


     .sd-btn {
         width: 100%;
         display: block;
     }

     .sd-hero-text h1 {
        font-size: 2rem;
    }
    .sd-hero-expert img {
        width: 220px; /* Choti screen (jaise iPhone SE) me box se bahar na nikle */
    }
    .sd-expert-meta h4 {
        font-size: 20px;
    }
 }

 @media (max-width: 375px) {
     h1 {
         font-size: 1.8rem;
     }


     .play-btn {
         width: 50px;
         height: 50px;
     }

     .play-btn i {
         font-size: 1rem;
     }

     .icon-box {
         width: 35px;
         height: 35px;
     }

     .smc-container {
         padding: 0 15px;
     }

     /* More space for content */
     .smc-section {
         padding: 50px 0;
     }

     /* Adjust Main Typography */
     .smc-badge {
         font-size: 12px;
         padding: 6px 15px;
     }

     .smc-title {
         font-size: 1.7rem;
         margin-bottom: 15px;
     }

     .smc-title-md {
         font-size: 1.5rem;
     }

     .smc-desc {
         font-size: 0.95rem;
         margin-bottom: 25px;
     }

     .smc-btn-primary {
         padding: 12px 20px;
         font-size: 0.9rem;
         width: 100%;
         justify-content: center;
     }

     /* Floating Card Adjustment for 320px */
     .smc-floating-card {
         padding: 15px;
         width: 90%;
         gap: 12px;
         flex-direction: column;
         /* Stack vertically if very tight */
         text-align: center;
         border-left: none;
         border-top: 4px solid var(--accent);
     }

     .smc-floating-card i {
         font-size: 30px;
         margin-bottom: -5px;
     }

     .smc-floating-card h4 {
         font-size: 1.2rem;
     }

     .smc-floating-card span {
         font-size: 0.8rem;
     }

     /* Mission/Vision Cards */
     .smc-card-glow {
         padding: 25px 20px;
     }

     .smc-icon-wrap {
         width: 50px;
         height: 50px;
         font-size: 20px;
         margin-bottom: 15px;
     }

     .smc-card-glow h4 {
         font-size: 1.3rem;
     }

     /* Expertise Grid */
     .smc-expertise-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .smc-service-box {
         padding: 30px 20px;
     }

     .smc-service-icon {
         width: 60px;
         height: 60px;
         font-size: 24px;
         margin-bottom: 15px;
     }

     /* Feature List */
     .smc-feature-list li {
         gap: 12px;
         align-items: flex-start;
     }

     .smc-feature-list i {
         font-size: 20px;
         margin-top: 2px;
     }

     .smc-feature-list strong {
         font-size: 1.05rem;
     }

     .smc-feature-list p {
         font-size: 0.85rem;
     }

     /* Stats Grid - Make it 1 Column on 320px to prevent text overflow */
     .smc-stats-grid {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     .smc-stat-box {
         padding: 20px 15px;
     }

     .smc-stat-box i {
         font-size: 28px;
         margin-bottom: 10px;
     }

     .smc-stat-box h3,
     .smc-stat-box span {
         font-size: 2.2rem;
     }

     .smc-stat-box p {
         font-size: 0.85rem;
     }
 }

 /* Small Mobile (320px) */
 @media (max-width: 350px) {
     .navbar {
         padding: 10px;
     }

     .logo-mobile {
         width: 35px;
         height: 35px;
         font-size: 18px;
     }

     .search-input {
         font-size: 13px;
         padding: 10px 15px;
     }

     .btn-login {
         padding: 3px 8px;
         font-size: 10px;
     }

     .tag-pill {
         font-size: 12px;
         padding: 6px 15px;
     }

     .top-header {
         display: none !important;
     }

     .footer-container {
         justify-content: center;
         align-items: center;
         text-align: center;
     }


     .hero-section {
         padding: 30px 10px;
     }

     h1 {
         font-size: 1.5rem;
         margin-bottom: 15px;
     }

     p {
         font-size: 0.85rem;
         line-height: 1.5;
     }

     .badge-text {
         font-size: 0.75rem;
     }

     .image-wrapper {
         max-width: 100%;
     }


     .play-btn {
         width: 45px;
         height: 45px;
     }

     .main-heading {
         font-size: 1.5rem;
     }

     .card {
         min-width: 100%;
         width: 100%;
     }

     .card-image-box {
         height: 160px;
     }

     .floating-icon {
         top: 130px;
     }

     .card-body {
         padding: 40px 15px 20px 15px;
     }

     .sd-container {
         padding: 0 10px;
     }

     .sd-card-header {
         flex-direction: column;
         align-items: flex-start;
     }

     .sd-icon-wrapper {
         margin-bottom: 5px;
     }
 }



 /* ==========================================
   RESPONSIVE DESIGN (Mobile & Tablet)
   ========================================== */
@media screen and (max-width: 991px) {

    /* Grid ko single column kar dega */
    .info-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Padding thoda kam karega mobile ke liye */
    .info-section {
        padding: 30px 15px;
    }

    /* Panel header ka text size adjust */
    .panel-header h2 {
        font-size: 14px;
    }

    /* Mobile par height thodi kam taaki scroll easy ho (Optional) */
    .scrolling-wrapper,
    .blog-content {
        height: 300px;
    }

    /* Animation ko height ke hisab se adjust karein */
    @keyframes scrollUp {
        0% { transform: translateY(300px); } /* Container height ke barabar */
        100% { transform: translateY(-100%); }
    }
}


/* ==========================================
   MODERN TOP BANNER (SERVICE DETAIL PAGE)
   ========================================== */
   
.sd-top-banner {
    background: linear-gradient(135deg, #002e5b 0%, #002e5b 100%);
    padding: 70px 20px;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px; /* Niche wale section se gap */
}

/* Background me design ke liye transparent circles */
.sd-top-banner::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.sd-top-banner::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

/* Content styling */
.sd-banner-content {
    position: relative;
    z-index: 1; /* Taki text circles ke upar rahe */
    max-width: 800px;
    margin: 0 auto;
}

.sd-banner-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    text-transform: capitalize;
    letter-spacing: 1px;
}

.sd-banner-desc {
    font-size: 18px;
    font-weight: 300;
    opacity: 0.9;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Breadcrumb (Home / Service / Page) */
.sd-breadcrumb {
    font-size: 14px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 25px;
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.sd-breadcrumb a {
    color: #fde428; /* Yellow/Gold highlight color */
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.sd-breadcrumb a:hover {
    color: #ffffff;
}

.sd-separator {
    margin: 0 10px;
    color: #aaaaaa;
}

.sd-current-page {
    color: #ffffff;
    font-weight: 600;
}

/* Responsive for Mobile */
@media (max-width: 768px) {
    .sd-top-banner {
        padding: 50px 15px;
    }
    .sd-banner-title {
        font-size: 28px;
    }
    .sd-banner-desc {
        font-size: 15px;
    }
}

/* --- UNIQUE DIRECTOR SECTION CSS --- */

.corp-dir-wrapper {
    background-color: var(--bg-light);
    padding: 80px 20px; /* Desktop ke liye space */
    font-family: inherit;
    box-sizing: border-box;
}

.corp-dir-container {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* Header Styling */
.corp-dir-header {
    text-align: center;
    margin-bottom: 50px;
}

.corp-dir-header h2 {
    color: var(--primary);
    font-size: 2.5rem;
    margin-bottom: 10px;
    margin-top: 0;
}

.corp-dir-heading-line {
    height: 4px;
    width: 60px;
    background-color: var(--accent);
    margin: 0 auto;
    border-radius: 2px;
}

/* Card Layout */
.corp-dir-card {
    background-color: var(--white);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    gap: 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    border-top: 5px solid var(--primary);
    box-sizing: border-box;
}

/* --- Left Side: Profile, Name & Contacts --- */
.corp-dir-left-profile {
    flex: 0 0 300px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 2px dashed var(--bg-light); 
    padding-right: 30px;
}

.corp-dir-img-box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    padding: 6px;
    background-color: var(--white);
    border: 3px dashed var(--accent);
    margin-bottom: 20px;
}

.corp-dir-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.corp-dir-titles {
    text-align: center;
    margin-bottom: 25px;
}

.corp-dir-titles h3 {
    color: var(--primary);
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 5px;
}

.corp-dir-designation {
    display: inline-block;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.corp-dir-designation::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background-color: var(--accent);
    border-radius: 2px;
}

.corp-dir-contact-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.corp-dir-contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--bg-light);
    color: var(--text-dark);
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition);
    word-break: break-word;
}

.corp-dir-contact-link:hover {
    background-color: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 46, 91, 0.2);
}

.corp-dir-contact-link:hover svg {
    color: var(--accent);
}

/* --- Right Side: Content & Button --- */
.corp-dir-right-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.corp-dir-bio p {
    color: var(--text-dark);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: 25px;
}

/* Read More Button */
.corp-dir-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary);
    color: var(--white);
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
}

.corp-dir-read-btn:hover {
    background-color: var(--primary-dark);
    color: var(--accent);
    box-shadow: 0 8px 20px rgba(0, 46, 91, 0.2);
    transform: translateX(5px);
}

/* --- Mobile Responsiveness (Tablet & Phone) --- */
@media (max-width: 850px) {
    .corp-dir-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
        gap: 30px;
    }

    .corp-dir-left-profile {
        border-right: none;
        border-bottom: 2px dashed var(--bg-light);
        padding-right: 0;
        padding-bottom: 30px;
        flex: auto;
        width: 100%;
        max-width: 350px;
    }

    .corp-dir-right-content {
        align-items: center;
    }
}

/* --- EXTRA SMALL MOBILE (320px to 480px) FIX --- */
@media (max-width: 480px) {
    /* Section ki main padding kam kardi */
    .corp-dir-wrapper {
        padding: 30px 15px !important; 
    }
    
    /* Heading ke niche ka gap kam kar diya */
    .corp-dir-header {
        margin-bottom: 25px; 
    }
    
    .corp-dir-header h2 {
        font-size: 2rem;
    }

    /* Card ke andar ki spacing (padding aur gap) kam kardi */
    .corp-dir-card {
        padding: 20px 15px;
        gap: 20px;
    }

    .corp-dir-left-profile {
        padding-bottom: 20px;
    }

    /* Image thodi chhoti ki taaki mobile par fit aaye */
    .corp-dir-img-box {
        width: 160px;
        height: 160px;
    }

    /* Text ke gap kam kiye */
    .corp-dir-bio p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 15px;
    }
}