/* Unique class names with vlead- prefix & brand colors #07666b / #f5c205 */
    .vlead-root {
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(180deg, #fafcfd 0%, #f0f5f7 100%);
      overflow-x: hidden;
    }

    /* Smooth scroll */
    html {
      scroll-behavior: smooth;
    }
   .ms-3{
       font-size:1.2rem !important;
   }
    /* ===== ANIMATIONS & TRANSITIONS ===== */
    @keyframes vlead-float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
      100% { transform: translateY(0px); }
    }

    @keyframes vlead-pulse-glow {
      0% { box-shadow: 0 0 0 0 rgba(7, 102, 107, 0.2); }
      70% { box-shadow: 0 0 0 12px rgba(7, 102, 107, 0); }
      100% { box-shadow: 0 0 0 0 rgba(7, 102, 107, 0); }
    }

    @keyframes vlead-shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    @keyframes vlead-fade-up {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes vlead-scale-in {
      from { opacity: 0; transform: scale(0.92); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Product image section */
    .vlead-hero-image-section {
      background: linear-gradient(135deg, #ffffff 0%, #e8f3f5 100%);
      padding-top: 1rem;
      padding-bottom: 1rem;
      position: relative;
      overflow: hidden;
    }

    .vlead-hero-image-section::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(245,194,5,0.08) 0%, transparent 70%);
      border-radius: 50%;
      z-index: 0;
    }

    .vlead-product-img-wrapper {
      max-width: 1100px;
      margin: 0 auto;
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 25px 50px -8px rgba(7, 102, 107, 0.15);
      border: 1px solid rgba(7, 102, 107, 0.12);
      background: #fff;
      transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1);
      position: relative;
      z-index: 2;
      animation: vlead-scale-in 0.9s ease-out;
    }

    .vlead-product-img-wrapper:hover {
      transform: translateY(-8px) scale(1.01);
      box-shadow: 0 35px 60px -10px rgba(7, 102, 107, 0.25);
      border-color: #f5c205;
    }

    .vlead-product-img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      transition: transform 0.8s ease;
    }

    .vlead-product-img-wrapper:hover .vlead-product-img {
      transform: scale(1.03);
    }

    /* Accent elements */
    .vlead-accent-border {
      border-left: 6px solid #f5c205;
      padding-left: 1.5rem;
      transition: border-left-color 0.3s;
    }

    .vlead-text-primary {
      color: #07666b !important;
    }

    .vlead-text-accent {
      color: #f5c205 !important;
    }

    .vlead-badge-yellow {
      background: linear-gradient(145deg, #f5c205, #e6b304);
      color: #1e1e1e;
      font-weight: 700;
      padding: 0.55rem 1.5rem;
      border-radius: 50px;
      display: inline-block;
      letter-spacing: 0.3px;
      box-shadow: 0 6px 14px rgba(245, 194, 5, 0.25);
      transition: all 0.3s ease;
      border: 1px solid rgba(255,255,255,0.3);
      animation: vlead-float 4s ease-in-out infinite;
    }

    .vlead-badge-yellow:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 24px rgba(245, 194, 5, 0.4);
      background: #f5c205;
    }

    .vlead-btn-outline-teal {
      border: 2px solid #07666b;
      color: #07666b;
      font-weight: 700;
      border-radius: 50px;
      padding: 0.7rem 2rem;
      transition: all 0.35s cubic-bezier(0.2, 0.8, 0.4, 1);
      background: transparent;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .vlead-btn-outline-teal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
      background: #07666b;
      transition: width 0.4s ease;
      z-index: -1;
    }

    .vlead-btn-outline-teal:hover::before {
      width: 100%;
    }

    .vlead-btn-outline-teal:hover {
      color: white;
      border-color: #07666b;
    }

    .vlead-btn-yellow {
      background: linear-gradient(145deg, #f5c205, #e0b004);
      color: #1a1a1a;
      font-weight: 700;
      border: none;
      border-radius: 50px;
      padding: 0.7rem 2rem;
      transition: all 0.35s cubic-bezier(0.2, 0.8, 0.4, 1);
      box-shadow: 0 8px 18px rgba(245, 194, 5, 0.3);
      position: relative;
      overflow: hidden;
    }

    .vlead-btn-yellow::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -60%;
      width: 200%;
      height: 200%;
      background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.4) 50%, transparent 80%);
      transform: rotate(25deg);
      animation: vlead-shimmer 3s infinite;
    }

    .vlead-btn-yellow:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 28px rgba(245, 194, 5, 0.45);
      background: #f5c205;
    }

    /* Section titles */
    .vlead-section-title {
      font-weight: 800;
      font-size: 1.6rem;
      color: #07666b;
      position: relative;
      display: inline-block;
      margin-bottom: 1.5rem;
      letter-spacing: -0.02em;
    }

    .vlead-section-title:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -12px;
      width: 80px;
      height: 5px;
      background: linear-gradient(90deg, #f5c205, #fde68a, #f5c205);
      border-radius: 10px;
      transition: width 0.4s ease;
    }

    .vlead-section-title:hover:after {
      width: 120px;
    }

    /* Cards & purpose blocks */
    .vlead-icon-circle {
      width: 50px;
      height: 50px;
      background: linear-gradient(145deg, rgba(7,102,107,0.08), rgba(245,194,5,0.05));
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #07666b;
      font-size: 1.8rem;
      margin-bottom: 1.2rem;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border: 1px solid rgba(7,102,107,0.1);
    }

    .vlead-card-purpose {
      background: white;
      border-radius: 28px;
       padding: 0.5rem 1rem;
      box-shadow: 0 8px 24px rgba(0,0,0,0.02);
      border: 1px solid rgba(7, 102, 107, 0.06);
      height: 100%;
      transition: all 0.4s ease;
      backdrop-filter: blur(2px);
      position: relative;
      overflow: hidden;
    }

    .vlead-card-purpose::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 0;
      background: #f5c205;
      transition: height 0.4s ease;
    }

    .vlead-card-purpose:hover::before {
      height: 100%;
    }

    .vlead-card-purpose:hover {
      transform: translateY(-12px);
      box-shadow: 0 30px 45px -12px rgba(7, 102, 107, 0.15);
      border-color: rgba(245, 194, 5, 0.3);
    }

    .vlead-card-purpose:hover .vlead-icon-circle {
      background: #07666b;
      color: white;
      transform: scale(1.05) rotate(2deg);
      border-radius: 18px;
      box-shadow: 0 10px 20px rgba(7,102,107,0.25);
    }

    /* Specs grid */
    .vlead-specs-grid {
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(8px);
      border-radius: 32px;
      padding: 2rem 2.2rem;
      border: 1px solid rgba(7,102,107,0.08);
      box-shadow: 0 15px 30px -10px rgba(0,0,0,0.03);
      transition: box-shadow 0.5s, transform 0.3s;
    }

    .vlead-specs-grid:hover {
      box-shadow: 0 28px 48px -12px rgba(7, 102, 107, 0.12);
      transform: translateY(-5px);
    }

    .vlead-spec-item {
      display: flex;
      align-items: baseline;
      border-bottom: 1px dashed rgba(7,102,107,0.15);
      padding: 1rem 0;
      transition: padding 0.2s;
    }

    .vlead-spec-item:hover {
      background: rgba(245,194,5,0.03);
      padding-left: 8px;
      border-bottom-color: #f5c205;
    }

    .vlead-spec-label {
      font-weight: 700;
      min-width: 160px;
      color: #07666b;
    }

    .vlead-spec-value {
      color: #1e293b;
      font-weight: 500;
    }

    /* Application badges */
    .vlead-application-badge {
      background-color: white;
      border-radius: 50px;
      padding: 0.6rem 1.4rem;
      font-weight: 600;
      color: #07666b;
      border: 1.5px solid rgba(7,102,107,0.2);
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.01);
      display: inline-flex;
      align-items: center;
    }

    .vlead-application-badge i {
      color: #f5c205;
      margin-right: 8px;
      font-size: 1.1rem;
      transition: transform 0.2s;
    }

    .vlead-application-badge:hover {
      background: #07666b;
      color: white;
      border-color: #07666b;
      transform: scale(1.02) translateY(-3px);
      box-shadow: 0 12px 18px -8px rgba(7,102,107,0.3);
    }

    .vlead-application-badge:hover i {
      color: white;
      transform: rotate(5deg);
    }

    /* Benefit list items */
    .vlead-benefit-item {
      display: flex;
      margin-bottom: 0.2rem;
      padding: 0.75rem 1rem;
      border-radius: 20px;
      transition: all 0.3s ease;
      background: transparent;
    }

    .vlead-benefit-item:hover {
      background: white;
      box-shadow: 0 12px 20px -10px rgba(7,102,107,0.1);
      transform: translateX(8px);
    }

    /* Contact strip */
    .vlead-contact-strip {
      background: linear-gradient(115deg, #07666b 0%, #0a848f 100%);
      border-radius: 40px;
      color: white;
      padding: 2.5rem 2.5rem;
      box-shadow: 0 30px 40px -12px rgba(7, 102, 107, 0.35);
      transition: all 0.5s;
      border: 1px solid rgba(255,255,255,0.1);
      position: relative;
      overflow: hidden;
    }

    .vlead-contact-strip::after {
      content: '';
      position: absolute;
      top: -30%;
      right: -10%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(245,194,5,0.15) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    .vlead-contact-strip:hover {
      transform: scale(1.002);
      box-shadow: 0 40px 55px -10px #07666b55;
    }

    /* Fade-up default animation class */
    .vlead-fade-up {
      animation: vlead-fade-up 0.9s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
      opacity: 0;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .vlead-section-title {
        font-size: 1.8rem;
      }
      .vlead-spec-label {
        min-width: 120px;
      }
      .vlead-product-img-wrapper {
        border-radius: 20px;
      }
    }

    /* AOS overrides if needed */
    [data-aos] {
      transition-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
    }
    .b{
        font-size:20px;
    }
    
    
    @media only screen and (max-width: 576px) {
      .vlead-section-title{
          font-size: 1.1rem;
      }
      .vlead-section-title{
          margin-bottom: 1.2rem;
      }
      .fs-5{
          font-size:1.1rem;
      }
      fs-3 {
  font-size: calc(1.2rem + .3vw) !important;
}.a{
    padding-left:0px !important;
    padding-right:0px !important;
}
.vlead-benefit-item{
    padding:0rem 0rem;
}
      .b{
          font-size:18px;
      }
      .ad{
          font-size: 16px !important;
      }
      .vlead-solar-material-section .vlead-section-title{
          font-size: 1.1rem !important;
      }
    }
    
    
    /* Using vlead- prefix and brand colors #07666b / #f5c205 */
  
  .vlead-solar-material-section {
    position: relative;
    overflow: hidden;
  }

  .vlead-solar-material-section::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -5%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(245, 194, 5, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
  }

  .vlead-solar-material-section::after {
    content: '';
    position: absolute;
    bottom: 5%;
    left: -8%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(7, 102, 107, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
  }

  /* Section title */
  .vlead-solar-material-section .vlead-section-title {
    font-weight: 800;
    font-size: 1.6rem;
    color: #07666b;
    position: relative;
    display: inline-block;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
  }

  .vlead-solar-material-section .vlead-section-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100px;
    height: 5px;
    background: linear-gradient(90deg, #f5c205, #fde68a, #f5c205);
    border-radius: 10px;
    transition: width 0.5s ease;
  }

  .vlead-solar-material-section .vlead-section-title:hover:after {
    width: 160px;
  }

  /* ===== SIDE BY SIDE GRID ===== */
  .vlead-solar-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
   margin: 0rem 0 0.5rem;
    position: relative;
    z-index: 2;
  }

  /* Individual Solar Card */
  .vlead-solar-card-side {
    background: linear-gradient(145deg, #ffffff, #fafdfe);
    border-radius: 32px;
    border: 1px solid rgba(7, 102, 107, 0.08);
    box-shadow: 0 15px 35px -12px rgba(7, 102, 107, 0.08);
    transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(4px);
    height: 100%;
  }

  .vlead-solar-card-side::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 0;
    background: linear-gradient(180deg, #f5c205, #07666b);
    transition: height 0.6s ease;
    z-index: 2;
  }

  .vlead-solar-card-side:hover::before {
    height: 100%;
  }

  .vlead-solar-card-side:hover {
    transform: translateY(-12px);
    box-shadow: 0 35px 50px -15px rgba(7, 102, 107, 0.2);
    border-color: rgba(245, 194, 5, 0.3);
    background: linear-gradient(145deg, #ffffff, #f5fbfc);
  }

  /* Card Inner Layout */
  .vlead-solar-card-inner-side {
    padding: 1rem 1.5rem;
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Icon Wrapper */
  .vlead-solar-icon-wrapper-side {
    width: 55px;
    height: 55px;
    background: linear-gradient(145deg, rgba(7, 102, 107, 0.08), rgba(245, 194, 5, 0.06));
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 1.5px solid rgba(7, 102, 107, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .vlead-solar-card-side:hover .vlead-solar-icon-wrapper-side {
    background: linear-gradient(145deg, #07666b, #0a7f86);
    border-radius: 20px;
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 15px 25px rgba(7, 102, 107, 0.35);
  }

  .vlead-solar-icon-wrapper-side i {
    font-size: 2rem;
    color: #07666b;
    transition: all 0.3s ease;
  }

  .vlead-solar-card-side:hover .vlead-solar-icon-wrapper-side i {
    color: #f5c205;
    transform: scale(1.1);
  }

  /* Card Title */
  .vlead-solar-card-title-side {
    font-size: 1.2rem;
    font-weight: 700;
    color: #07666b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    letter-spacing: -0.01em;
  }

  .vlead-card-number-side {
    display: inline-block;
    background: linear-gradient(145deg, #f5c205, #e6b304);
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 800;
    padding: 0.25rem 0.8rem;
    border-radius: 40px;
    box-shadow: 0 4px 10px rgba(245, 194, 5, 0.3);
    transition: transform 0.3s;
  }

  .vlead-solar-card-side:hover .vlead-card-number-side {
    transform: scale(1.05);
  }

  /* Feature List */
  .vlead-solar-feature-list-side {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
  }

  .vlead-solar-feature-list-side li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.7rem 1rem;
    background: transparent;
    border-radius: 16px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
  }

  .vlead-solar-feature-list-side li:hover {
    background: rgba(7, 102, 107, 0.03);
    border-left-color: #f5c205;
    transform: translateX(6px);
  }

  .vlead-solar-feature-list-side li i {
    color: #f5c205;
    font-size: 0.8rem;
    flex-shrink: 0;

    filter: drop-shadow(0 2px 4px rgba(245, 194, 5, 0.3));
    transition: transform 0.3s ease;
  }

  .vlead-solar-feature-list-side li:hover i {
    transform: rotate(5deg) scale(1.15);
    color: #07666b;
  }

  .vlead-solar-feature-list-side li span {
    color: #2c3e50;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Quality Assurance Badge */
  .vlead-quality-assurance-side {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
  }

  .vlead-assurance-badge-side {
    background: linear-gradient(145deg, #ffffff, #f0f9fb);
    border: 2px solid rgba(7, 102, 107, 0.15);
    border-radius: 60px;
    padding: 1rem 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 25px -8px rgba(7, 102, 107, 0.12);
    transition: all 0.4s ease;
    animation: vlead-float 5s ease-in-out infinite;
  }

  .vlead-assurance-badge-side:hover {
    background: linear-gradient(145deg, #07666b, #0a7f86);
    border-color: #f5c205;
    box-shadow: 0 20px 35px -8px rgba(7, 102, 107, 0.45);
    transform: scale(1.02);
  }

  .vlead-assurance-badge-side i {
    color: #f5c205;
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 5px rgba(245, 194, 5, 0.4));
    transition: all 0.3s;
  }

  .vlead-assurance-badge-side:hover i {
    color: #ffffff;
    transform: rotate(10deg);
  }

  .vlead-assurance-badge-side span {
    font-weight: 700;
    color: #07666b;
    letter-spacing: 0.5px;
    font-size: 1.1rem;
    transition: color 0.3s;
  }

  .vlead-assurance-badge-side:hover span {
    color: #ffffff;
  }

  /* Responsive adjustments */
  @media (max-width: 992px) {
    .vlead-solar-cards-grid {
      gap: 1.5rem;
    }
    
    .vlead-solar-card-title-side {
      font-size: 1.4rem;
    }
  }

  @media (max-width: 768px) {
    .vlead-solar-cards-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    
    .vlead-solar-card-inner-side {
      padding: 2rem 1.5rem;
    }
    
    .vlead-solar-card-title-side {
      font-size: 1.5rem;
    }
    
    .vlead-solar-icon-wrapper-side {
      width: 75px;
      height: 75px;
    }
    
    .vlead-solar-icon-wrapper-side i {
      font-size: 2.5rem;
    }
  }

  @media (max-width: 576px) {
    .vlead-solar-card-inner-side {
      padding: 1.8rem 1.5rem;
    }
    
    .vlead-solar-card-title-side {
      font-size: 1rem;
    }
    
    .vlead-solar-icon-wrapper-side {
      width: 50px;
      height: 50px;
    }
    
    .vlead-solar-icon-wrapper-side i {
      font-size: 1.5rem;
    }
    
    .vlead-assurance-badge-side {
      padding: 0.8rem 1.5rem;
    }
    
    .vlead-assurance-badge-side span {
      font-size: 0.9rem;
    }
    
    .vlead-solar-feature-list-side li {
      padding: 0.5rem 0.8rem;
    }
    .vlead-specs-grid{
    padding: 1rem 1.5rem;
    }
    .ms-3 {
  margin-left: 0rem !important;
}
    
  }

  /* Animation keyframes */
  @keyframes vlead-float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
  }

  /* Performance optimization */
  .vlead-solar-card-side,
  .vlead-solar-icon-wrapper-side,
  .vlead-solar-feature-list-side li,
  .vlead-assurance-badge-side {
    will-change: transform, box-shadow;
  }