/* ===========================

   Reset & Base Styles

   =========================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --primary-color: #1e3a8a;

    --secondary-color: #3b82f6;

    --accent-color: #f97316;

    --text-dark: #1f2937;

    --text-light: #6b7280;

    --bg-light: #f3f4f6;

    --white: #ffffff;

    --transition: all 0.3s ease;

}



body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    line-height: 1.6;

    color: var(--text-dark);

    background: var(--white);

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    text-decoration: none;

    color: inherit;

}



/* ===========================

   Header & Navigation

   =========================== */

.header {

    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);

    padding: 0;

    position: absolute; 

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}



.navbar {

    padding: 15px 0;

}



.nav-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo h1 {

    color: var(--white);

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 3px;

}



.logo p {

    color: rgba(255,255,255,0.9);

    font-size: 13px;

    border-top: 1px solid rgba(255,255,255,0.3);

    padding-top: 3px;

}



.nav-menu {

    display: flex;

    list-style: none;

    align-items: center;

    gap: 30px;

}



.nav-menu a {

    color: var(--white);

    font-weight: 500;

    transition: var(--transition);

    padding: 8px 0;

    border-bottom: 2px solid transparent;

}



.nav-menu a:hover,

.nav-menu a.active {

    border-bottom-color: var(--accent-color);

}



.phone-link {

    background: var(--accent-color);

    padding: 10px 20px !important;

    border-radius: 25px;

    border: none !important;

}



.phone-link:hover {

    background: #ea580c;

    transform: scale(1.05);

}



.mobile-menu-toggle {

    display: none;

    flex-direction: column;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 5px;

}



.mobile-menu-toggle span {

    width: 25px;

    height: 3px;

    background: var(--white);

    margin: 3px 0;

    transition: var(--transition);

}



/* ===========================

   Hero Section

   =========================== */

.hero {

    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    color: var(--white);

    overflow: hidden;

    padding-top: 80px; 

}



.hero-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(rgba(30, 58, 138, 0.7), rgba(30, 58, 138, 0.7)), url('../images/hero-bg.jpg');

    background-size: cover;

    background-position: center;

    z-index: -1;

}



.hero-bg::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><circle cx="100" cy="100" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="300" cy="150" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="500" cy="80" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="700" cy="200" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="900" cy="120" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="1100" cy="180" r="2" fill="rgba(255,255,255,0.1)"/></svg>');

    opacity: 0.3;

}



.hero-content {

    position: relative;

    z-index: 1;

    max-width: 800px;

    padding: 80px 0;

}



.hero-title {

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 20px;

    line-height: 1.2;

}



.hero-subtitle {

    font-size: 20px;

    margin-bottom: 30px;

    opacity: 0.95;

}



.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}



.btn {

    display: inline-block;

    padding: 15px 35px;

    border-radius: 30px;

    font-weight: 600;

    transition: var(--transition);

    cursor: pointer;

    border: none;

    font-size: 16px;

}



.btn-primary {

    background: var(--accent-color);

    color: var(--white);

}



.btn-primary:hover {

    background: #ea580c;

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4);

}



.btn-secondary {

    background: var(--white);

    color: var(--primary-color);

}



.btn-secondary:hover {

    background: var(--bg-light);

    transform: translateY(-2px);

}



.btn-block {

    width: 100%;

}



/* ===========================



   Services Grid (FIXED & ALIGNED)



   =========================== */



.services-grid {



    padding: 80px 0;



    background: var(--bg-light);



}







.services-cards {



    display: grid;



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



    gap: 30px;



    align-items: stretch;



}







.service-card {



    background: var(--white);



    padding: 25px;



    border-radius: 12px;



    box-shadow: 0 5px 20px rgba(0,0,0,0.08);



    transition: var(--transition);



    display: flex;



    flex-direction: column;



    height: 100%; 



}







.service-card img {



    width: 100%;



    height: 200px;



    object-fit: cover;



    border-radius: 8px;



    margin-bottom: 20px;



}







.service-card:hover {



    transform: translateY(-10px);



    box-shadow: 0 10px 30px rgba(0,0,0,0.15);



}







.service-icon {



    width: 60px;



    height: 60px;



    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    margin-bottom: 15px;



}







.service-icon i {



    font-size: 24px;



    color: var(--white);



}







.service-card h3 {



    font-size: 22px;



    color: var(--primary-color);



    margin-bottom: 10px;



}







.service-card p {



    color: var(--text-light);



    margin-bottom: 15px;



    flex-grow: 0; 



}







.service-list {



    list-style: none;



    margin-top: auto;



}







.service-list li {



    padding: 6px 0;



    color: var(--text-dark);



    position: relative;



    padding-left: 25px;



    font-size: 14px;



}







.service-list li::before {



    content: '✓';



    position: absolute;



    left: 0;



    color: var(--accent-color);



    font-weight: bold;



}



/* ===========================

   Why Choose Us

   =========================== */

 .why-choose {

    padding: 100px 0;

    position: relative;

    background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('../images/why-choose-bg.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed; /* Parallax Effect */

    color: var(--white);

}



.why-choose .section-title {

    color: var(--white);

    text-align: center;

    font-size: 36px;

    margin-bottom: 50px;

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

}



.feature-item {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 30px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 15px;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: var(--transition);

}



.feature-item:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: translateY(-5px);

}



.feature-icon {

    font-size: 30px;

    color: #22c55e;

    background: rgba(34, 197, 94, 0.1);

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

}



.feature-item h3 {

    font-size: 18px;

    color: var(--white);

    line-height: 1.4;

}



/* ===========================

   CTA Section

   =========================== */

.cta-section {

    padding: 80px 0;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: var(--white);

    text-align: center;

}



.cta-section h2 {

    font-size: 36px;

    margin-bottom: 15px;

}



.cta-section h3 {

    font-size: 24px;

    margin-bottom: 30px;

    opacity: 0.9;

}



.cta-contact {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}



.cta-contact p {

    font-size: 20px;

    font-weight: 600;

}



/* ===========================

   Footer

   =========================== */

.footer {

    position: relative;

    padding: 80px 0 20px;

    /* Yahan humne dark overlay aur image mix ki hai */

    background: linear-gradient(rgba(17, 24, 39, 0.92), rgba(17, 24, 39, 0.92)), url('../images/footer-bg.jpg');

    background-size: cover;

    background-position: center;

    color: var(--white);

    border-top: 4px solid var(--accent-color);

}



.footer-content {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 40px;

    margin-bottom: 40px;

}



.footer-col h3 {

    font-size: 24px;

    margin-bottom: 15px;

    color: var(--white);

}



.footer-col h4 {

    font-size: 18px;

    margin-bottom: 15px;

    color: var(--accent-color);

    text-transform: uppercase;

}



.footer-col p {

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 10px;

    line-height: 1.7;

}



.footer-col ul {

    list-style: none;

}



.footer-col ul li {

    margin-bottom: 10px;

}



.footer-col ul li a {

    color: rgba(255, 255, 255, 0.8);

    transition: var(--transition);

}



.footer-col ul li a:hover {

    color: var(--accent-color);

    padding-left: 8px; /* Hover par thoda side move hoga */

}



.contact-info li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 15px;

    color: rgba(255, 255, 255, 0.8);

}



.contact-info i {

    color: var(--accent-color);

    margin-top: 5px;

    font-size: 18px;

}



.footer-bottom {

    text-align: center;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.5);

    font-size: 14px;

}



/* ===========================

   Page Header

   =========================== */

.page-header {

    padding: 80px 0;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: var(--white);

    text-align: center;

}



.page-header h1 {

    font-size: 42px;

    margin-bottom: 15px;

}



.page-header p {

    font-size: 20px;

    opacity: 0.9;

}



/* ===========================

   Services Detail Page

   =========================== */

.services-detail {

    padding: 80px 0;

    background: var(--bg-light);

}



.service-detail-card {

    background: var(--white);

    padding: 40px;

    margin-bottom: 40px;

    border-radius: 10px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

    position: relative;

}



.service-number {

    position: absolute;

    top: -20px;

    left: 40px;

    width: 60px;

    height: 60px;

    background: var(--accent-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    font-weight: 700;

    color: var(--white);

    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4);

}



.service-detail-content h2 {

    color: var(--primary-color);

    margin-bottom: 15px;

    margin-top: 10px;

}



.service-detail-content h2 i {

    margin-right: 10px;

    color: var(--secondary-color);

}



.service-description {

    font-size: 18px;

    color: var(--text-dark);

    margin-bottom: 25px;

}



.service-features {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

    margin-bottom: 25px;

}



.feature-col ul {

    list-style: none;

}



.feature-col ul li {

    padding: 10px 0;

    display: flex;

    align-items: center;

    gap: 10px;

}



.feature-col ul li i {

    color: #22c55e;

    font-size: 18px;

}



.service-highlight {

    background: var(--bg-light);

    padding: 25px;

    border-radius: 8px;

    margin-top: 25px;

}



.service-highlight strong {

    color: var(--primary-color);

}



.highlight-list {

    list-style: none;

    margin-top: 15px;

}



.highlight-list li {

    padding: 8px 0 8px 25px;

    position: relative;

}



.highlight-list li::before {

    content: '→';

    position: absolute;

    left: 0;

    color: var(--accent-color);

    font-weight: bold;

}



/* ===========================

   About Page

   =========================== */

.about-content {

    padding: 80px 0;

}



.about-intro {

    text-align: center;

    max-width: 800px;

    margin: 0 auto 60px;

}



.about-intro h2 {

    font-size: 32px;

    color: var(--primary-color);

    margin-bottom: 20px;

}



.about-intro h2 span {

    color: var(--text-light);

    font-size: 24px;

}



.about-description {

    font-size: 18px;

    color: var(--text-dark);

}



.about-services-list {

    background: var(--bg-light);

    padding: 40px;

    border-radius: 10px;

    margin-bottom: 60px;

}



.about-services-list h3 {

    font-size: 28px;

    color: var(--primary-color);

    margin-bottom: 30px;

}



.services-columns {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

}



.service-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 15px;

    background: var(--white);

    border-radius: 8px;

}



.service-item i {

    color: #22c55e;

    font-size: 24px;

    margin-top: 3px;

}



.why-choose-about {

    margin-bottom: 60px;

}



.why-choose-about h2 {

    font-size: 32px;

    color: var(--primary-color);

    margin-bottom: 40px;

    text-align: center;

}



.why-choose-about h2 i {

    color: var(--accent-color);

}



.reasons-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 25px;

}



.reason-card {

    background: var(--bg-light);

    padding: 25px;

    border-radius: 10px;

    text-align: center;

    transition: var(--transition);

}



.reason-card:hover {

    background: var(--white);

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    transform: translateY(-5px);

}



.reason-card i {

    font-size: 40px;

    color: var(--secondary-color);

    margin-bottom: 15px;

}



.reason-card h3 {

    font-size: 18px;

    color: var(--primary-color);

    margin-bottom: 10px;

}



.reason-card p {

    color: var(--text-light);

}



.about-cta-box {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: var(--white);

    padding: 60px;

    border-radius: 10px;

    text-align: center;

}



.about-cta-box h2 {

    font-size: 32px;

    margin-bottom: 15px;

}



.about-cta-box p {

    font-size: 18px;

    margin-bottom: 25px;

}



/* ===========================

   Contact Page

   =========================== */

.contact-section {

    padding: 80px 0;

    background: var(--bg-light);

}



.contact-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

}



.contact-info-box {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.contact-info-item {

    background: var(--white);

    padding: 25px;

    border-radius: 10px;

    display: flex;

    gap: 20px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.08);

}



.contact-icon {

    width: 60px;

    height: 60px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.contact-icon i {

    font-size: 24px;

    color: var(--white);

}



.contact-details h3 {

    color: var(--primary-color);

    margin-bottom: 8px;

}



.contact-details p {

    color: var(--text-light);

}



.cta-banner {

    background: linear-gradient(135deg, var(--accent-color), #ea580c);

    padding: 30px;

    border-radius: 10px;

    color: var(--white);

    text-align: center;

}



.cta-banner h3 {

    font-size: 22px;

    margin-bottom: 15px;

}



.cta-banner p {

    font-size: 18px;

}



.contact-form-box {

    background: var(--white);

    padding: 40px;

    border-radius: 10px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

}



.contact-form-box h2 {

    font-size: 28px;

    color: var(--primary-color);

    margin-bottom: 30px;

}



.form-group {

    margin-bottom: 20px;

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 15px;

    border: 1px solid #e5e7eb;

    border-radius: 8px;

    font-size: 16px;

    font-family: inherit;

    transition: var(--transition);

}



.form-group input:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--secondary-color);

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



.map-section {

    padding: 80px 0;

    background: var(--white);

}



.map-section h2 {

    text-align: center;

    font-size: 32px;

    color: var(--primary-color);

    margin-bottom: 40px;

}



.map-container {

    margin-bottom: 40px;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 5px 20px rgba(0,0,0,0.1);

}



.map-info {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

}



.map-info-card {

    background: var(--bg-light);

    padding: 25px;

    border-radius: 10px;

    text-align: center;

}



.map-info-card h3 {

    color: var(--primary-color);

    margin-bottom: 15px;

}



.map-info-card h3 i {

    color: var(--accent-color);

    margin-right: 8px;

}



.map-info-card p {

    color: var(--text-light);

}



/* ===========================

   Portfolio Page

   =========================== */

.portfolio-content {

    padding: 80px 0;

}



.portfolio-intro {

    text-align: center;

    max-width: 900px;

    margin: 0 auto 60px;

}



.portfolio-intro h2 {

    font-size: 32px;

    color: var(--primary-color);

    margin-bottom: 20px;

}



.portfolio-intro p {

    font-size: 18px;

    color: var(--text-dark);

    margin-bottom: 15px;

}



.industrial-services {

    background: var(--bg-light);

    padding: 50px;

    border-radius: 10px;

    margin-bottom: 60px;

    position: relative;

}



.service-number-badge {

    position: absolute;

    top: -25px;

    left: 50px;

    width: 70px;

    height: 70px;

    background: var(--accent-color);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    font-weight: 700;

    color: var(--white);

    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4);

}



.industrial-services h2 {

    font-size: 28px;

    color: var(--primary-color);

    margin-bottom: 30px;

    margin-top: 20px;

}



.industrial-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

}



.industrial-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    background: var(--white);

    border-radius: 8px;

}



.industrial-item i {

    color: #22c55e;

    font-size: 20px;

}



.why-industries {

    background: var(--white);

    padding: 50px;

    border-radius: 10px;

    margin-bottom: 60px;

    position: relative;

    box-shadow: 0 5px 20px rgba(0,0,0,0.05);

}



.why-industries h2 {

    font-size: 28px;

    color: var(--primary-color);

    margin-bottom: 30px;

    margin-top: 20px;

}



.reasons-grid-two {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 30px;

}



.reason-col {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.reason-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    background: var(--bg-light);

    border-radius: 8px;

}



.reason-item i {

    color: #22c55e;

    font-size: 20px;

}



.portfolio-cta {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: var(--white);

    padding: 60px;

    border-radius: 10px;

    text-align: center;

}



.portfolio-cta h2 {

    font-size: 36px;

    margin-bottom: 10px;

}



.portfolio-cta h3 {

    font-size: 24px;

    margin-bottom: 20px;

}



.portfolio-cta .contact-number {

    font-size: 20px;

    margin-bottom: 25px;

}



/* ===========================

   Responsive Design

   =========================== */

@media (max-width: 768px) {

    .mobile-menu-toggle {

        display: flex;

    }



    .nav-menu {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background: var(--primary-color);

        flex-direction: column;

        padding: 20px 0;

        gap: 0;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.3s ease;

    }



    .nav-menu.active {

        max-height: 500px;

    }



    .nav-menu li {

        width: 100%;

        text-align: center;

        padding: 10px 0;

    }



    .hero-title {

        font-size: 32px;

    }



    .hero-subtitle {

        font-size: 16px;

    }



    .hero-buttons {

        flex-direction: column;

    }



    .btn {

        width: 100%;

        text-align: center;

    }



    .services-cards {

        grid-template-columns: 1fr;

    }



    .section-title {

        font-size: 28px;

    }



    .contact-wrapper {

        grid-template-columns: 1fr;

    }



    .service-features {

        grid-template-columns: 1fr;

    }



    .reasons-grid {

        grid-template-columns: 1fr;

    }



    .reasons-grid-two {

        grid-template-columns: 1fr;

    }



    .footer-content {

        grid-template-columns: 1fr;

    }



    .page-header h1 {

        font-size: 28px;

    }



    .service-detail-card {

        padding: 30px 20px;

    }



    .about-cta-box,

    .portfolio-cta {

        padding: 40px 25px;

    }



    .industrial-services,

    .why-industries {

        padding: 30px 20px;

    }

}



@media (max-width: 480px) {

    .logo h1 {

        font-size: 18px;

    }



    .logo p {

        font-size: 11px;

    }



    .hero-title {

        font-size: 24px;

    }



    .hero-content {

        padding: 40px 0;

    }



    .service-number {

        width: 50px;

        height: 50px;

        font-size: 24px;

    }



    .service-number-badge {

        width: 60px;

        height: 60px;

        font-size: 28px;

    }

}


 /* ===== Service Hero Background ===== */
.service-hero {
    height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.service-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.service-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

 

 
  /* Individual Service Background Images */

.s1 {
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
                url('../images/hardware.jpg');
    background-size: cover;
    background-position: center;
}

.s2 {
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
                url('../images/repair.jpg');
    background-size: cover;
    background-position: center;
}

.s3 {
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
                url('../images/web.jpg');
    background-size: cover;
    background-position: center;
}

.s4 {
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
                url('../images/setup.jpg');
    background-size: cover;
    background-position: center;
}

/* Force all text white inside service cards */
.service-detail-card h2,
.service-detail-card p,
.service-detail-card li,
.service-detail-card i {
    color: #ffffff !important;
}

/* Fix for 3rd Service (Website Development) Invisible Fonts */

.service-detail-card.s3 .service-highlight {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 12px;
}

.service-detail-card.s3 .service-highlight strong,
.service-detail-card.s3 .highlight-list li {
    color: #ffffff !important;
    display: block !important;
}

.service-detail-card.s3 .highlight-list li::before {
    content: '✓';
    color: #f97316 !important;
    margin-right: 10px;
    font-weight: bold;
}



/* ===========================
   Industrial Page Styles
   =========================== */

/* Industrial Hero Section */
.industrial-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.95), rgba(59, 130, 246, 0.9)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%231e3a8a" width="1200" height="600"/><circle cx="200" cy="100" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="400" cy="200" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="600" cy="150" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="800" cy="250" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="1000" cy="180" r="3" fill="rgba(255,255,255,0.1)"/></svg>');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--white);
    overflow: hidden;
}

.industrial-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="30" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="15" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="70" cy="30" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="20" r="1" fill="rgba(255,255,255,0.05)"/></svg>');
    background-size: 100px 100px;
    opacity: 0.3;
    pointer-events: none;
}

.industrial-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(30, 58, 138, 0.9), rgba(59, 130, 246, 0.7));
    z-index: 1;
}

.industrial-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 80px 0;
}

.industrial-hero h1 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.industrial-hero p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.95;
    line-height: 1.6;
}

.btn-outline-white {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 13px 30px;
}

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

/* Digital Presence Section */
.digital-presence-section {
    padding: 80px 0;
    background: var(--white);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.content-text h2 {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.3;
}

.content-text p {
    font-size: 17px;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.7;
}

.content-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-placeholder {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, var(--bg-light), #e5e7eb);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.image-placeholder i {
    font-size: 80px;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.image-placeholder p {
    color: var(--text-light);
    font-size: 16px;
}

/* Industrial Services Section */
.industrial-services-section {
    padding: 80px 0;
    background: var(--bg-light);
}

.service-badge-container {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.service-number-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    font-size: 36px;
    font-weight: 700;
    color: var(--white);
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.3);
    margin-bottom: 20px;
}

.service-badge-container h2 {
    font-size: 36px;
    color: var(--primary-color);
}

.services-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

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

.checklist-item {
    background: var(--white);
    padding: 20px 25px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: var(--transition);
}

.checklist-item:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.checklist-item i {
    font-size: 24px;
    color: #22c55e;
    flex-shrink: 0;
}

.checklist-item span {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 500;
}

/* Why Industries Section */
.why-industries-section {
    padding: 80px 0;
    background: var(--white);
}

.industries-reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

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

.reason-item-check {
    background: var(--bg-light);
    padding: 20px 25px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: var(--transition);
}

.reason-item-check:hover {
    background: var(--white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.reason-item-check i {
    font-size: 24px;
    color: #22c55e;
    flex-shrink: 0;
}

.reason-item-check span {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 500;
}

/* Final CTA Section */
.final-cta-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.95), rgba(59, 130, 246, 0.9)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%231e3a8a" width="1200" height="600"/></svg>');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--white);
    text-align: center;
}

.final-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(30, 58, 138, 0.4) 100%);
    z-index: 1;
}

.final-cta-content {
    position: relative;
    z-index: 2;
}

.final-cta-content h2 {
    font-size: 42px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.final-cta-content h3 {
    font-size: 28px;
    margin-bottom: 25px;
    opacity: 0.95;
}

.cta-phone {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 35px;
}

.cta-phone i {
    margin-right: 10px;
}

.btn-large {
    padding: 18px 50px;
    font-size: 18px;
}

/* Responsive for Industrial Page */
@media (max-width: 768px) {
    .industrial-hero h1 {
        font-size: 28px;
    }

    .industrial-hero p {
        font-size: 16px;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .image-placeholder {
        height: 300px;
    }

    .image-placeholder i {
        font-size: 60px;
    }

    .services-checklist,
    .industries-reasons-grid {
        grid-template-columns: 1fr;
    }

    .checklist-item:hover {
        transform: translateX(0);
        transform: translateY(-5px);
    }

    .service-badge-container h2 {
        font-size: 28px;
    }

    .final-cta-content h2 {
        font-size: 28px;
    }

    .final-cta-content h3 {
        font-size: 20px;
    }

    .cta-phone {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .industrial-hero h1 {
        font-size: 24px;
    }

    .service-number-large {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .checklist-item,
    .reason-item-check {
        padding: 15px 20px;
    }

    .checklist-item span,
    .reason-item-check span {
        font-size: 15px;
    }
}
EOF

 /* Portfolio Page - Industrial Header Fix */
.industrial-hero {
    position: relative;
    padding: 120px 0;
    background-image: url('../images/industrial-hero.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    z-index: 1;
}

.industrial-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65); 
    z-index: -1;
}

/* 2. Content Image Styling */
.image-placeholder {
    background-image: url('../images/engineer-work.jpg'); /* Image Name */
    background-size: cover;
    background-position: center;
    min-height: 350px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 3. Final CTA Background */
.final-cta-section {
    position: relative;
    padding: 100px 0;
    background-image: url('../images/industrial-footer.jpg'); /* Image Name */
    background-size: cover;
    background-position: center;
    text-align: center;
    color: white;
    z-index: 1;
}

.final-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(37, 99, 235, 0.85); /* Blue shade like image_a3e99c */
    z-index: -1;
}

  /* --- Industrial Page (Portfolio.html) Custom Images Setup --- */

/* 1. First Section (IT Solution Hero Section) */
.industrial-hero {
    background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('../images/industrial-hero.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff !important;
}

/* 2. Second Section (Build a Strong Digital Presence) */
.digital-presence-section {
    background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url('../images/engineer-work1.jpg') !important;
    background-size: cover;
    background-position: center;
}

/* Right side white box image in 2nd section */
.digital-presence-section .image-placeholder {
    background-image: url('../images/engineer-work.jpg') !important;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    min-height: 350px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Remove placeholder icon and text if you want only the image */
.digital-presence-section .image-placeholder i, 
.digital-presence-section .image-placeholder p {
    display: none;
}

/* 3. Third Section (Our Industrial Services) */
.industrial-services-section {
    background-image: linear-gradient(rgba(240,244,248,0.95), rgba(240,244,248,0.95)), url('../images/industrial-services.jpg') !important;
    background-size: cover;
    background-position: center;
}

/* 4. Fourth Section (Why Industries Choose Us) */
.why-industries-section {
    background-image: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('../images/why-choose-us.jpg') !important;
    background-size: cover;
    background-position: center;
}

/* 5. Last Section (Let's Digitally Transform Your Industry) */
.final-cta-section {
    background-image: linear-gradient(rgba(37, 99, 235, 0.85), rgba(37, 99, 235, 0.85)), url('../images/industrial-footer.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff !important;
}

/* --- Mobile View Fix for IT & Website Solutions Section --- */

@media (max-width: 768px) {
    /* 1st Section (Hero) Fix */
    .industrial-hero {
        padding: 80px 0 !important; /* Padding badhane se image ki height badhegi */
        background-attachment: scroll !important; /* Mobile par fixed background kai baar issue karta hai */
        min-height: 400px; /* Minimum height deni hogi taaki image dikhe */
        display: flex;
        align-items: center;
    }

    /* Heading text size mobile ke hisaab se chota karein */
    .industrial-hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.3;
    }

    .industrial-hero p {
        font-size: 1rem !important;
    }

    /* Buttons ko ek ke niche ek karne ke liye */
    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* 2nd Section Content Text Alignment */
    .digital-presence-section {
        padding: 40px 0 !important;
    }
    
    .digital-presence-section .content-text {
        text-align: center;
        margin-bottom: 30px;
    }

    /* Mobile par image box ki height */
    .digital-presence-section .image-placeholder {
        min-height: 250px !important;
    }
}

/* --- About Us Page Background Images Setup --- */

/* 1. Our Services Include Section */
.services-include-section {
    position: relative;
    padding: 80px 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('../images/service1.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 2. Why Choose Galaxy IT Solution? Section */
.why-choose-galaxy-section {
    position: relative;
    padding: 80px 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url('../images/why-choose.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 3. Looking for a Reliable IT Partner? (CTA Section) */
.cta-reliable-section {
    position: relative;
    padding: 100px 0;
    background-image: linear-gradient(rgba(37, 99, 235, 0.7), rgba(37, 99, 235, 0.8)), url('../images/contact-us.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff !important;
    text-align: center;
}

/* Extra: Heading visibility fix for light backgrounds */
.services-include-section h2, 
.why-choose-galaxy-section h2 {
    color: #1e3a8a !important; /* Dark blue color for better contrast */
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

 /* --- About Us Page Background Images Fix --- */

/* 1. Our Services Include Section (service1.jpg) */
.about-services-list {
    background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), 
                url('../images/service1.jpg') no-repeat center center / cover !important;
    padding: 50px 20px !important;
    border-radius: 15px;
    margin-top: 30px;
}

/* 2. Why Choose Galaxy IT Solution? (why-choose.jpg) */
.why-choose-about {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), 
                url('../images/why-choose.jpg') no-repeat center center / cover !important;
    padding: 60px 20px !important;
    margin: 40px 0 !important;
    border-radius: 20px;
}

/* 3. Looking for a Reliable IT Partner? Box (contact-us.jpg) */
.about-cta-box {
    background: linear-gradient(rgba(37, 99, 235, 0.85), rgba(37, 99, 235, 0.9)), 
                url('../images/contact-us.jpg') no-repeat center center / cover !important;
    padding: 80px 30px !important;
    color: white !important;
    text-align: center;
    border-radius: 20px;
    margin-bottom: 50px;
}

/* Text color fix for CTA Box */
.about-cta-box h2, .about-cta-box p {
    color: white !important;
}

/* Mobile responsive fix */
@media (max-width: 768px) {
    .about-services-list, .why-choose-about, .about-cta-box {
        background-attachment: scroll !important;
        padding: 40px 15px !important;
    }
}

/* --- Contact Page Background Image Setup --- */

/* Pure Form aur Address section ko target karne ke liye */
.contact-section, section:has(.contact-info-card) {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(rgba(240, 244, 248, 0.9), rgba(240, 244, 248, 0.9)), 
                url('../images/contact-us1.jpg') no-repeat center center / cover !important;
}

/* Form aur Cards ko thoda uthane (elevation) ke liye takki wo image par saaf dikhein */
.contact-info-card, .contact-form-card, .contact-method-card {
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 15px;
}

/* Map wale section ko thoda saaf karne ke liye agar uske piche bhi image aa rahi ho */
.map-section {
    padding: 60px 0;
    background: #ffffff !important; /* Map ke piche white hi rakha hai taaki location saaf dikhe */
}

/* Mobile Responsive Fix */
@media (max-width: 768px) {
    .contact-section {
        background-attachment: scroll !important;
        padding: 40px 15px !important;
    }
}
/* Mobile view (768px se niche) */
@media (max-width: 768px) {
    .nav-menu {
        display: none; /* Pehle se chhupa rahega */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 70px; /* Header ki height ke hisaab se adjust karein */
        left: 0;
        background-color: #333; /* Aapka background color */
        padding: 20px;
        z-index: 1000;
    }

    /* Jab JS 'active' class lagayega tab menu dikhega */
    .nav-menu.active {
        display: flex !important;
    }

    .nav-menu li {
        margin: 10px 0;
        text-align: center;
    }
}