:root {
         --primary: #1e88e5;
         --light: #f7f9fc;
         --dark: #2c2c2c;
         --accent: #fbc02d;
     }

     body {
         font-family: "Segoe UI", sans-serif;
         color: var(--dark);
     }

     html,
     body {
         width: 100%;
         overflow-x: hidden;
     }

     * {
         box-sizing: border-box;
     }

     /* Top Bar */
     .top-bar {
         background: var(--primary);
         color: #fff;
         font-size: 14px;
     }

     /* ===== NAVBAR ===== */
     .custom-navbar {
         background: linear-gradient(90deg, #1e88e5, #42a5f5);
         box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         z-index: 9999;
     }

     /* Brand */
     .custom-navbar .navbar-brand {
         color: #fff;
         font-size: 20px;
         font-weight: 700;
         white-space: nowrap;
     }

     /* Links */
     .custom-navbar .nav-link {
         color: #e3f2fd;
         padding: 8px 14px;
         border-radius: 6px;
         transition: .3s;
     }

     .custom-navbar .nav-link:hover,
     .custom-navbar .nav-link.active {
         background: rgba(255, 255, 255, .25);
         color: #fff;
     }

     /* Toggler */
     .navbar-toggler {
         border: none;
     }

     .navbar-toggler-icon {
         filter: brightness(0) invert(1);
     }

     .hero-section {
         min-height: 90vh;
         background: linear-gradient(135deg, #f4f8ff, #ffffff);
         position: relative;
         overflow: hidden;
     }

     .hero-badge {
         background: #e3f2fd;
         color: #1e88e5;
         padding: 6px 16px;
         border-radius: 30px;
         font-size: 14px;
         font-weight: 500;
     }

     .hero-title {
         font-size: 48px;
         font-weight: 700;
         line-height: 1.2;
         color: #1f2933;
     }

     .hero-title span {
         color: #1e88e5;
     }

     .hero-desc {
         font-size: 18px;
         color: #5f6c7b;
         max-width: 520px;
     }

     .hero-img-wrapper {
         background: #ffffff;
         padding: 20px;
         border-radius: 20px;
         box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
         display: inline-block;
     }

     .hero-img-wrapper img {
         border-radius: 16px;
         max-height: 420px;
     }

     .hero-stats {
         display: flex;
         gap: 40px;
     }

     .hero-stats h4 {
         font-weight: 700;
         color: #1e88e5;
     }

     .hero-stats p {
         font-size: 14px;
         color: #6b7280;
     }

     .hero-section,
     .hero-img-wrapper,
     .hero-img-wrapper img {
         max-width: 100%;
         overflow-x: hidden;
     }


     /* Section Title */
     .section-title {
         font-weight: 600;
         color: var(--primary);
     }

     /* About */
     .about-img {
         border-radius: 12px;
     }

     /* Services Section */
     .services-section {
         background: #f8fafc;
     }

     /* Card */
     .service-card {
         background: #ffffff;
         border-radius: 16px;
         overflow: hidden;
         border: 1px solid #eef1f6;
         transition: all .35s ease;
     }

     .service-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 20px 45px rgba(30, 136, 229, .15);
     }

     /* Image */
     .service-img {
         width: 100%;
         height: 220px;
         object-fit: cover;
     }

     /* Text */
     .service-card h5 {
         font-weight: 600;
         color: #1f2933;
         margin-bottom: 10px;
     }

     .service-card p {
         font-size: 15px;
         line-height: 1.6;
     }

     /* Link */
     .service-link {
         display: inline-block;
         margin-top: 10px;
         color: var(--primary);
         font-weight: 500;
         text-decoration: none;
         transition: .3s;
     }

     .service-link i {
         margin-left: 5px;
         transition: .3s;
     }

     .service-link:hover {
         color: #0d6efd;
     }

     .service-link:hover i {
         transform: translateX(5px);
     }

     /* Mobile */

     .service-card,
     .service-img {
         max-width: 100%;
     }


     /* Contact Section */
     .contact-section {
         background: #f7f9fc;
     }

     /* Info Box */
     .contact-info-box {
         background: #ffffff;
         padding: 30px;
         border-radius: 16px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
     }

     .contact-item {
         display: flex;
         gap: 15px;
         margin-bottom: 20px;
     }

     .contact-item .icon {
         width: 45px;
         height: 45px;
         background: #e3f2fd;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--primary);
         font-size: 18px;
     }

     /* Form Box */
     .contact-form-box {
         background: #ffffff;
         padding: 30px;
         border-radius: 16px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
     }

     .form-control {
         border-radius: 10px;
         border: 1px solid #e0e6ed;
         padding: 10px 14px;
     }

     .form-control:focus {
         box-shadow: none;
         border-color: var(--primary);
     }


     /* Footer */
     .footer-section {
         background: #0d47a1;
         color: #e3f2fd;
         padding-top: 50px;
     }

     .footer-title {
         color: #ffffff;
         font-weight: 600;
         margin-bottom: 15px;
     }

     .footer-text {
         font-size: 14px;
         line-height: 1.6;
         color: #dbeafe;
     }

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

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

     .footer-links a {
         color: #dbeafe;
         text-decoration: none;
         font-size: 14px;
         transition: .3s;
     }

     .footer-links a:hover {
         color: #ffffff;
         padding-left: 5px;
     }

     .footer-bottom {
         background: #08306b;
         color: #cfe8ff;
         padding: 12px 0;
         margin-top: 40px;
         font-size: 14px;
     }

     /* Profile Section Start */
     .page-header {
         background: linear-gradient(90deg, #1e88e5, #42a5f5);
         color: #fff;
         padding: 60px 0;
     }

     .section-title {
         font-weight: 600;
         color: var(--primary);
         margin-bottom: 20px;
     }

     .info-box {
         background: #fff;
         padding: 25px;
         border-radius: 14px;
         box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
     }

     .table th {
         width: 35%;
         background: #f1f5fb;
     }

     .doc-card {
         background: #fff;
         border-radius: 14px;
         padding: 25px 20px;
         text-align: center;
         box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
         cursor: pointer;
         transition: .3s;
     }

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

     .doc-card i {
         font-size: 40px;
         color: #e53935;
         margin-bottom: 10px;
     }

     .view-text {
         font-size: 13px;
         color: #1e88e5;
     }

     /* PDF Viewer */
     .pdf-viewer {
         display: none;
         margin-top: 30px;
         border-radius: 14px;
         overflow: hidden;
         box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
     }

     .pdf-header {
         background: #1e88e5;
         color: #fff;
         padding: 10px 15px;
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .close-btn {
         cursor: pointer;
         font-size: 20px;
         font-weight: bold;
     }

     .close-btn:hover {
         color: #ffeb3b;
     }

     .pdf-viewer iframe {
         width: 100%;
         height: 600px;
         border: none;
     }



     /* Director Card */
     .director-card {
         background: #ffffff;
         border-radius: 14px;
         padding: 25px 20px;
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
         transition: all .3s ease;
     }

     .director-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
     }

     /* Image */
     .director-img {
         width: 120px;
         height: 120px;
         object-fit: cover;
         border-radius: 50%;
         border: 4px solid #1e88e5;
     }




     /*Profile End  */
/* Address Section */
.address-section {
    background: #f8f9fc;
}

.address-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.address-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.icon-box {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #1e88e5, #42a5f5);
    color: #fff;
    font-size: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.section-title {
    font-weight: 600;
    color: #1e293b;
}

.address-text {
    color: #555;
    font-size: 16px;
    line-height: 1.8;
}

.contact-info p {
    margin-bottom: 8px;
    font-size: 15px;
}

.contact-info i {
    color: #1e88e5;
    margin-right: 8px;
}

.contact-info a {
    color: #333;
    text-decoration: none;
}

.contact-info a:hover {
    color: #1e88e5;
}

     /* Navbar – Mobile & Tablet */
     @media (max-width: 991px) {


         .navbar-collapse {
             background: linear-gradient(90deg, #1e88e5, #42a5f5);
             margin-top: 10px;
             border-radius: 10px;
             padding: 10px 0;
         }

         .navbar-nav {
             text-align: center;
         }

         .navbar-nav .nav-link {
             padding: 10px 0;
             display: block;
         }

         /* Ensure toggler is visible */
         .navbar-toggler {
             display: block;
         }
     }

     /* Hero Section */
     @media (max-width: 768px) {

         .hero-section {
             text-align: center;
             padding: 60px 0;
         }

         .hero-title {
             font-size: 32px;
         }

         .hero-desc {
             margin: auto;
             font-size: 16px;
         }

         .hero-stats {
             justify-content: center;
             gap: 25px;
         }

         .hero-img-wrapper img {
             max-height: 300px;
         }

         .service-img {
             height: 180px;
         }

         .contact-info-box,
         .contact-form-box {
             padding: 20px;
         }

         .footer-section {
             text-align: center;
         }

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

     @media (max-width: 576px) {
         .hero-title {
             font-size: 28px;
         }

         .hero-desc {
             font-size: 14px;
         }

         .hero-stats {
             flex-direction: column;
             gap: 15px;
         }

         .hero-img-wrapper img {
             max-height: 250px;
         }

         .service-img {
             height: 150px;
         }

         .contact-info-box,
         .contact-form-box {
             padding: 15px;
         }
     }

     @media (max-width: 400px) {

         /* Navbar container alignment */
         .navbar .container {
             display: flex;
             align-items: center;
             justify-content: space-between;
             flex-wrap: nowrap;
         }

         /* Brand text smaller */
         .custom-navbar .navbar-brand {
             font-size: 14px;
             line-height: 1.2;
             max-width: 80%;
             overflow: hidden;
             text-overflow: ellipsis;
         }

         /* Toggle always right */
         .navbar-toggler {
             margin-left: auto;
             padding: 4px 6px;
         }
     }
      .hero {
            background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
            url('image/electrical-installation.jpg') center/cover no-repeat;
            color: #fff;
            padding: 90px 0;
        }
        .icon-box {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            height: 100%;
            transition: 0.3s;
        }
        .icon-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }