/*custom-web-development*/
    :root {
         --bg: #f6f8fb;
         --card: #ffffff;
         --text: #1f2937;
         --muted: #6b7280;
         --accent: #d97706;
         /* brand warm accent */
         --primary: #0d6efd;
         /* bootstrap primary */
         --radius: 12px;
     }
     .custom-web-dev-section {
         background-color: var(--bg, #f6f8fb);
         color: var(--text, #1f2937);
     }

     .custom-web-dev-section .section-title {
         font-size: 2.5rem;
         color: var(--accent, #d97706);
         font-weight: 700;
     }

     .custom-web-dev-section .lead {
         font-size: 1.125rem;
         color: var(--muted, #6b7280);
     }

     .service-card {
         background: var(--card, #fff);
         border-radius: var(--radius, 12px);
         box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
         transition: transform .3s ease, box-shadow .3s ease;
     }

     .service-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
     }

     .service-card i {
         color: var(--primary, #0d6efd);
     }

     .sub-title {
         color: var(--accent, #d97706);
         font-weight: 600;
     }

     .process-box {
         border: 1px solid rgba(15, 23, 42, 0.08);
         border-radius: 10px;
         background: var(--card, #fff);
         box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
     }

     .process-box h6 {
         font-weight: 600;
         margin-bottom: .75rem;
         color: var(--text, #1f2937);
     }

     .benefits-list {
         list-style: none;
         padding-left: 0;
     }

     .benefits-list li {
         margin-bottom: 1rem;
         font-size: 1rem;
         line-height: 1.6;
     }

     .benefits-list li strong {
         color: var(--accent, #d97706);
     }

     .custom-web-dev-section img {
         max-width: 100%;
         border-radius: var(--radius, 12px);
     }
     
     /*dynamic-website design */
     
     
     :root {
         --bg: #f6f8fb;
         --card: #ffffff;
         --text: #1f2937;
         --muted: #6b7280;
         --accent: #d97706;
         /* brand warm accent */
         --primary: #0d6efd;
         /* bootstrap primary */
         --radius: 12px;
     }

     .dynamic-section {
         background: var(--bg);
         padding: 48px 0;
         color: var(--text);
     }

     .dynamic-section .section-title {
         color: var(--accent);
         font-weight: 700;
         margin-bottom: 18px;
     }

     .dynamic-section p.lead {
         max-width: 900px;
         margin: 0 auto 28px;
         color: var(--muted);
         line-height: 1.7;
     }

     .feature-card {
         background: var(--card);
         border-radius: var(--radius);
         box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
         border: 1px solid rgba(15, 23, 42, 0.04);
         padding: 22px;
         text-align: center;
         transition: transform .28s ease, box-shadow .28s ease;
         height: 100%;
     }

     .feature-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
     }

     .feature-icon {
         width: 72px;
         height: 72px;
         border-radius: 50%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 14px;
         font-size: 24px;
         color: #fff;
         background: linear-gradient(135deg, var(--accent), #fb923c);
         box-shadow: 0 6px 18px rgba(217, 119, 6, 0.12);
     }

     .feature-card h5 {
         margin-bottom: 8px;
         font-size: 18px;
         font-weight: 600;
         color: var(--text);
     }

     .feature-card p {
         color: var(--muted);
         font-size: 14px;
         margin-bottom: 0;
     }

     .case-studies-section {
         padding: 48px 0;
     }

     .project-card {
         background: var(--card);
         border-radius: 12px;
         padding: 20px;
         border: 1px solid rgba(15, 23, 42, 0.04);
         box-shadow: 0 8px 20px rgba(2, 6, 23, 0.03);
         height: 100%;
     }

     .project-card h5 {
         font-weight: 700;
         margin-bottom: 8px;
         color: var(--primary);
     }

     .project-card p {
         color: var(--muted);
         font-size: 14px;
         margin-bottom: 12px;
     }

     .technology-section .tech-box {
         background: var(--card);
         border-radius: 10px;
         padding: 16px;
         border: 1px solid rgba(15, 23, 42, 0.04);
         box-shadow: 0 6px 12px rgba(2, 6, 23, 0.02);
     }

     .technology-section .tech-box i {
         color: var(--accent);
         margin-bottom: 8px;
     }

     .technology-section .tech-box p {
         margin: 0;
         color: var(--muted);
         font-weight: 600;
     }

     /* Benefits */
     .benefits-section .feature-card .feature-icon {
         background: linear-gradient(135deg, #06b6d4, #0ea5e9);
         box-shadow: 0 6px 18px rgba(14, 165, 233, 0.09);
     }

     /* Responsiveness tweaks */
     @media (max-width:767.98px) {
         .feature-icon {
             width: 56px;
             height: 56px;
             font-size: 20px;
         }
     }
 
 
 
 /*E-Commerce-Website*/
 
     :root {
         --v-blue: #0d6efd;
         --v-gold: #f9b52e;
         --v-light: #f8f9fc;
         --v-dark: #1e293b;
         --v-text-muted: #6b7280;
         --shadow-soft: 0 10px 32px rgba(0, 0, 0, .06);
         --shadow-hover: 0 16px 40px rgba(0, 0, 0, .10);
     }

     /* SECTION TITLE */
     .section-title h3 {
         font-size: 2rem;
         font-weight: 700;
         color: var(--v-blue);
     }

     .section-title p {
         color: var(--v-text-muted);
     }

     /* VEDANTA FEATURE CARDS */
     .vedanta-card {
         border: 0;
         border-bottom: 3px solid orange;
         /*border-right: 3px solid blue;*/
         border-radius: 16px;
         padding: 28px;
         text-align: center;
         background: #ffffff;
         box-shadow: var(--shadow-soft);
         transition: .25s ease;
     }

     .vedanta-card:hover {
         transform: translateY(-8px);
         box-shadow: var(--shadow-hover);
     }

     /* Icon Style */
     .vedanta-icon {
         width: 68px;
         height: 68px;
         border-radius: 50%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-size: 26px;
         color: #fff;
         margin-bottom: 12px;
         box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
     }

     /* Vedanta color variants (avoid overriding Bootstrap global classes) */
     .primary {
         background: linear-gradient(135deg, #007bff, #00b6ff);
     }

     .warning {
         background: linear-gradient(135deg, #f9d65c, #f7a21c);
     }

     .info {
         background: linear-gradient(135deg, #4dd0e1, #0288d1);
     }

     .success {
         background: linear-gradient(135deg, #57e389, #1ca64a);
     }

     /* Text inside cards */
     .vedanta-card .card-title {
         font-size: 1.1rem;
         font-weight: 600;
     }

     .vedanta-card .card-text {
         color: var(--v-text-muted);
         font-size: .95rem;
     }

     /* Tech Stack Badges (single consolidated definition)    */
     .badge-tech {
         display: inline-flex;
         align-items: center;
         gap: .5rem;
         padding: .35rem .6rem;
         border-radius: .4rem;
         background: #fff;
         border: 1px solid #eef0f3;
         box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
         font-size: .9rem;
         color: #333;
         transition: .2s ease;
     }

     .badge-tech:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
     }

     .badge-tech i {
         font-size: 18px;
         width: 30px;
         height: 30px;
         background: #f3f4f6;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
     }

     .vedanta-primary {
         color: #0d6efd;
     }

     .vedanta-info {
         color: #0dcaf0;
     }

     .vedanta-warning {
         color: #ffc107;
     }

     .vedanta-success {
         color: #198754;
     }

     .vedanta-danger {
         color: #dc3545;
     }

     .tech-stack {
         display: flex;
         flex-wrap: wrap;
         gap: .5rem;
         margin-top: .5rem;
     }

     /* CTA BLOCK */
     .contact-cta {
         background: linear-gradient(135deg, #fff8e1, #ffffff);
         border-left: 5px solid var(--v-gold);
         padding: 30px;
         border-radius: 14px;
         box-shadow: var(--shadow-soft);
     }

     /* RESPONSIVE */
     @media(max-width:992px) {
         .vedanta-icon {
             width: 58px;
             height: 58px;
             font-size: 22px;
         }

    
    .contact-cta > a {
        display: block;        
        width: 100%;           
        margin-bottom: 10px;  
        font-size: 16px;        
    }

    .contact-cta > a:last-child {
        margin-bottom: 0;       
    }
     }
     
     /*Web-Desigining*/
     
     .vedanta-services .card {
         border: 0;
         border-radius: 14px;
         transition: transform .28s ease, box-shadow .28s ease;
         background: #fff;
     }

     .vedanta-services .card:hover {
         transform: translateY(-8px);
         box-shadow: 0 18px 40px rgba(20, 20, 50, 0.10);
     }

     .vedanta-icon {
         width: 64px;
         height: 64px;
         border-radius: 50%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-size: 26px;
         margin-bottom: 12px;
         box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
     }

     .vedanta-icon.primary {
         background: linear-gradient(135deg, #fad961, #f76b1c);
     }

     .vedanta-icon.info {
         background: linear-gradient(135deg, #6dd5ed, #2193b0);
     }

     .vedanta-icon.success {
         background: linear-gradient(135deg, #7be495, #28c76f);
     }

     .vedanta-icon.secondary {
         background: linear-gradient(135deg, #fbc7aa, #fe6b8b);
     }

     .vedanta-icon.warning {
         background: linear-gradient(135deg, #fddb92, #d2cc69);
     }

     /* Why choose us — card style benefit items */
     .benefit-list {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 14px;
         list-style: none;
         padding: 0;
         margin: 0;
     }

     .benefit-item {
         display: flex;
         gap: 12px;
         align-items: flex-start;
         background: linear-gradient(180deg, #ffffff, #fbfbfd);
         border-radius: 12px;
         padding: 12px;
         box-shadow: 0 6px 20px rgba(10, 10, 30, .04);
         transition: transform .22s ease, box-shadow .22s ease;
     }

     .benefit-item:hover {
         transform: translateY(-6px);
         box-shadow: 0 20px 45px rgba(10, 10, 30, .08);
     }

     .benefit-icon {
         min-width: 44px;
         min-height: 44px;
         border-radius: 10px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         color: #fff;
         font-size: 18px;
     }

     .bi-speed {
         background: linear-gradient(135deg, #ff9966, #ff5e62);
     }

     .bi-convert {
         background: linear-gradient(135deg, #6a82fb, #fc5c7d);
     }

     .bi-seo {
         background: linear-gradient(135deg, #11998e, #38ef7d);
     }

     .bi-support {
         background: linear-gradient(135deg, #00c6ff, #0072ff);
     }

     .benefit-content {
         font-size: 14px;
         color: #243246;
     }

     .benefit-title {
         font-weight: 600;
         margin-bottom: 4px;
         font-size: 15px;
     }

     /* Tech badges — pill style with subtle hover */
     .badge-tech {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 8px 12px;
         margin: 6px 6px 0 0;
         border-radius: 999px;
         font-size: 13px;
         background: linear-gradient(90deg, #f1f5f9, #ffffff);
         color: #0f172a;
         box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
         transition: transform .18s ease, box-shadow .18s ease;
         border: 1px solid rgba(15, 23, 42, .04);
     }

     .badge-tech:hover {
         transform: translateY(-6px);
         box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
     }

     /* CTA button alignment responsive */
     @media (max-width:991px) {
         .benefit-list {
             grid-template-columns: 1fr;
         }

         .vedanta-icon {
             width: 56px;
             height: 56px;
             font-size: 22px;
         }

         .benefit-item {
             padding: 10px;
         }
     }
 
 /*UI-UX-Desigining*/
/* General Section Styling */

.projects-wrapper h3 {
    /*font-weight: 800;*/
    /*font-size:2rem;*/
    margin-bottom: 20px;
    color: #333333;
        font-family: "Inter", sans-serif;
}

.projects-wrapper p {
    color: #555;
    line-height: 1.8;
    font-size: 1rem;
}

/* Card / Blog Items */
.card-item {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 30px;
}

.card-item img {
    border-radius: 15px;
    transition: transform 0.3s;
}

.card-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

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

/* Section Backgrounds and Rounding */
.project-section {
    background: #ffffff;
    /*padding: 30px;*/
    border-radius: 30px;
    margin-bottom: 40px;
}

/* Lists Styling */
.projects-wrapper ul {
    list-style: none;
    padding-left: 0;
}

.projects-wrapper ul li::before {
    content: "\f00c"; /* Font Awesome check */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #0d6efd;
    margin-right: 10px;
}

/* Buttons */
.cta-btn {
    background: #0d6efd;
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 500;
    transition: background 0.3s;
}

.cta-btn:hover {
    background: #0b5ed7;
    color: #fff;
    text-decoration: none;
}

/* Feature Cards */
.feature-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}

.feature-card i {
    font-size: 28px;
    color: #0d6efd;
    margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 991px) {
    .project-section {
        border-radius: 20px;
    }
}