/* =====================
       INDEX PAGE CSS
    ====================== */
   body {
        font-family: 'Segoe UI', sans-serif;
    }

    /* =====================
       NAVBAR CSS
    ====================== */
    .navbar {
        background-color: #0b2c4d;
    }
    .navbar-brand, .nav-link {
        color: #fff !important;
        font-weight: 500;
    }
    .nav-link:hover {
        color: #0d6efd !important;
    }

    /* =====================
       HERO SECTION CSS
    ====================== */
    .hero {
         position: relative;
        /*background: linear-gradient(135deg, #0d6efd, #0b2c4d);*/
        background: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085') center/cover no-repeat;
        min-height: 70vh;
        display: flex;
        align-items: center;
        color: #fff;
    }
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(11, 44, 77, 0.85);
    }
    .hero-content {
        position: relative;
        z-index: 2;
    }

    /* =====================
     HOME INTRO SECTION CSS
    ===================== */
    .home-intro {
        background: #f8f9fa;
    }

    .home-intro-box {
        background: #ffffff;
        border-radius: 16px;
        padding: 50px 40px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    }

    .home-intro h2 {
        font-weight: 800;
    }

    .home-intro p {
        font-size: 16px;
        line-height: 1.8;
        color: #555;
    }

    .intro-feature {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 20px;
    }

    .intro-feature i {
        font-size: 28px;
        color: #0d6efd;
    }

    .intro-feature h6 {
        font-weight: 700;
        margin-bottom: 5px;
    }

    /* =====================
       FOOTER SECTION CSS
    ====================== */
    footer {
        background: #0b2c4d;
        color: #ccc;
        padding: 40px 0;
    }
    footer a {
        color: #ccc;
        text-decoration: none;
    }
    footer a:hover {
        color: #fff;
    }

     /* =====================
           ABOUT PAGE CSS
      ====================== */

        .about-img {
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0,0,0,0.15);
    }

       /* =====================
       SERVICES PAGE CSS
       ====================== */
        .section-padding {
            padding: 70px 0;
        }
        .section-title {
            font-weight: 700;
            margin-bottom: 40px;
        }
        .service-card {
            border: none;
            box-shadow: 0 0 25px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            height: 100%;
        }
        .service-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        .service-icon {
            font-size: 40px;
            color: #0d6efd;
        }

        /* =====================
         PORTFOLIO PAGE CSS
        ====================== */
        .section-padding {
            padding: 70px 0;
        }
        .section-title {
            font-weight: 700;
            margin-bottom: 40px;
        }

        .portfolio-card {
            border: none;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 0 25px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            background: #fff;
        }
        .portfolio-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
        }

        .portfolio-img {
            height: 220px;
            object-fit: cover;
        }

        .portfolio-tag {
            display: inline-block;
            font-size: 13px;
            background: #e9f1ff;
            color: #0d6efd;
            padding: 4px 10px;
            border-radius: 20px;
            margin-right: 6px;
            margin-bottom: 6px;
        }
   
       /* =====================
           TEAM PAGE CSS
        ====================== */
        .section-padding {
            padding: 80px 0;
        }

        .section-title {
            font-weight: 700;
            margin-bottom: 50px;
        }

        .team-card {
            border: none;
            border-radius: 4px;
            overflow: hidden;
            background: linear-gradient(145deg, #ffffff, #f1f6fb);
            box-shadow: 0 0 30px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            height: 100%;
        }

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

        .team-img {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid #0d6efd;
            margin: 30px auto 15px;
            display: block;
            background: #eee;
        }

        .team-role {
            font-size: 14px;
            font-weight: 600;
            color: #0d6efd;
        }

        .team-desc {
            font-size: 15px;
            color: #555;
        }

        /* =====================
           PRICING PAGE CSS
        ====================== */
        .section-padding {
            padding: 70px 0;
        }
        .section-title {
            font-weight: 700;
            margin-bottom: 40px;
        }

        .pricing-card {
            border: none;
            border-radius: 14px;
            box-shadow: 0 0 30px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            background: #fff;
            height: 100%;
        }
        .pricing-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 14px 35px rgba(0,0,0,0.15);
        }

        .pricing-header {
            background: #0b2c4d;
            color: #fff;
            padding: 25px;
            border-radius: 14px 14px 0 0;
        }

        .pricing-price {
            font-size: 36px;
            font-weight: 700;
        }

        .pricing-card ul {
            list-style: none;
            padding: 0;
        }
        .pricing-card ul li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
            font-size: 15px;
        }

        .badge-popular {
            background: #0d6efd;
            font-size: 12px;
            padding: 6px 12px;
        }