/* Banner Full Width */
.banner-section {
    width: 100%;
    padding: 0;
    margin: 0;
}
.breadcrumb-overlay .A:hover{
    color:white;
}

.banner-container {
    position: relative;
    width: 100%;
    height: 600px; /* Increase height here */
    overflow: hidden;
}

/* Banner Image */
.banner-img {
    width: 100%;
    height: 150%;
    object-fit: cover;
}

/* Breadcrumb Overlay Centered */
.breadcrumb-overlay {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #4DB746;
    padding: 20px 35px;
    border-radius: 10px;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    display: flex;
    gap: 10px;
}

.breadcrumb-overlay .A {
    color: white !important;
    text-decoration: none;
}

.breadcrumb-overlay .divider {
    font-size: 28px;
    margin: 0 8px;
}


/* Responsive (tablet) */
@media (max-width: 991px) {
    .banner-container {
        height: 350px;
    }
    .breadcrumb-overlay {
        font-size: 24px;
        padding: 15px 25px;
    }
}

/* Responsive (mobile) */
@media (max-width: 600px) {
    .banner-container {
        height: 260px;
    }
    .breadcrumb-overlay {
        font-size: 12px;
        padding: 12px 20px;
    }
}




/* ============================
   SECTION 2 – SERVICE OVERVIEW
   ============================= */

.service-overview-section {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 40px;
    background: #ffffff;
}

/* LEFT IMAGE GROUP */
.left-images {
    position: relative;
    width: 350px;
    margin-left: 100px;
}

/* LARGE RECTANGLE */
.img-lg {
    width: 250px;
    height: 280px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    margin-bottom: 20px;
}

/* CIRCLE IMAGE */
.img-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: 0px;
    left: 280px;
    border: 4px solid #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* MEDIUM RECTANGLE */
.img-md {
    width: 250px;
    height: 270px;
    border-radius: 20px;
    object-fit: cover;
    margin-top: -60px;
    background: white;
    padding: 10px;
    margin-left: 200px;
}

/* EXPERIENCE BOX */
.exp-box {
    position: absolute;
    bottom: 20px;
    left: 10px;
    background: #f3edf8;
    padding: 10px;
    border-radius: 15px;
    width: 180px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
    text-align: center;
}

.two {
    background: #44ae3b;
    color: #fff;
    width: 30px !important;
    height: 30px;
    border-radius: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 700;
}

.exp-text {
    font-size: 22px;
    font-weight: 400;
    margin-top: 10px;
}


  .right-content h2{
        font-size: 36px !important;
        font-weight: 600;
        font-style: Bold;
    }
    .right-content p{
        text-align: justify;
        font-size: 22px !important ;
        font-weight: 400;
        font-style: medium;
    }



/* RIGHT CONTENT */
.right-content {
    max-width: 900px;
    margin-left: 200px;
}

.highlight {
    color: #4ae932;
    font-weight: 700;
}


/* =============================
   RESPONSIVE DESIGN
   ============================= */

/* TABLETS (max-width: 992px) */
@media (max-width: 992px) {

    .service-overview-section {
        flex-direction: column;
        padding: 40px 20px;
        gap: 40px;
    }

    .left-images {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    .img-lg,
    .img-md {
        width: 300px;
        height: 230px;
        margin-left: 100px;
    }

    .img-md {
        margin-top: -90px;
        margin-left: -100px;
    }

    .img-circle {
        position: relative;
        left: 250px;
        top: -260px;
        margin-bottom: 20px;
    }

    .exp-box {
        left: 50%;
        transform: translateX(-50%);
        bottom: -25px;
    }

    .right-content {
        margin-left: 0;
        max-width: 100%;
    }

    .right-content h2 {
        font-size: 36px !important;
    }

    .right-content p {
        text-align: justify;
        font-size: 30px !important;
    }
}

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

    .service-overview-section {
        padding: 30px 15px;
    }

  
    .img-md {
        width: 170px;
        height: 200px;
    }
    .img-lg{
         width: 170px;
        height: 200px;
        margin-left: 170px;
    }

    .img-circle {
        width: 140px;
        height: 140px;
        position: relative;
        left: 125px;
        top: -230px;
    }

    .right-content h2 {
        font-size: 30px !important;
    }

    .right-content p {
        font-size: 18px !important;
        text-align: justify;

        line-height: 1.7;
    }

    .exp-box {
        width: 120px;
        padding: 8px 10px;
    }

    .two {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}

/* SMALL MOBILE (max-width: 480px) */
@media (max-width: 480px) {

    .img-lg,
    .img-md {
        width: 150px;
        height: 180px;
    }

    .img-circle {
        width: 120px;
        height: 120px;
    }

    .right-content h2 {
        font-size: 28px !important;
    }

    .right-content p {
        font-size: 16px !important;
        text-align: justify;
    }

    .exp-box {
        bottom: 20px;
    }
}


/* BASE (no change) */
.focus-areas {
    margin: 0 100px;
    max-width: 100%;
    padding: 0 10px;
}

.focus-areas h4 {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: bold;
    margin-bottom: 10px;
}

.focus-areas p {
    font-size: clamp(16px, 2.5vw, 22px) !important;
    line-height: 1.6;
}

/* 1440px screens */
@media (max-width: 1440px) {
    .focus-areas {
        margin: 0 80px;
    }
}

/* 1024px screens */
@media (max-width: 1024px) {
    .focus-areas {
        margin: 0 60px;
    }
}

/* 768px screens */
@media (max-width: 768px) {
    .focus-areas {
        margin: 0 40px;
    }
}

/* 425px screens */
@media (max-width: 425px) {
    .focus-areas {
        margin: 0 20px;
    }
}

/* 375px screens */
@media (max-width: 375px) {
    .focus-areas {
        margin: 0 15px;
    }
}

/* 320px screens */
@media (max-width: 320px) {
    .focus-areas {
        margin: 0 10px;
    }
}



/*section 3*/

.facility-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
    padding:20px 8%;
    flex-wrap:wrap;
}

/* Left content */
.facility-left{ flex:1; min-width:300px; }
.facility-left h1{
    font-size:42px !important;
    font-weight:700;
    margin-bottom:20px;
}
.facility-left p{
    font-size:28px !important;
    line-height:28px;
    max-width:450px;
    margin-bottom:40px;
    color:#333;
    text-align:justify;
   
}

/* Buttons */
.btn-container{
    display:flex;
    justify-content:center;
    gap:25px;
}
.nav-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
    background: linear-gradient(
        to bottom,
        #72ee4f 0%,     /* Top green */
        #c8ffba 50%,    /* Light green (not pure white) */
        #72ee4f 100%    /* Bottom green */
    );
}

.nav-btn:hover{ background:#3fa541; }

/* Right Image */
.facility-right{ flex:1; min-width:300px; }
.facility-right img{
    width:100%;
    /*height: 300px;*/
    border-radius:18px;
}

/* Bottom Description */
.bottom-text{
   text-align: left;
    font-size:25px !important;
    margin-top:5px;
    padding:0 5px;
    color:#111;
}

/* Responsive */
@media(max-width:900px){
    .facility-container{ text-align:center; }
    .facility-left h1{ font-size:26px; }
    .facility-left p{ font-size:16px; margin-left: 100px;}
}







.core-section {
    background: #3c5f37;
    padding: 70px 40px;
    text-align: center;
    color: white;
    font-family: 'Poppins', sans-serif;
}

/* Title */
.core-section h1 {
    font-size: 70px !important;
    font-weight: 700;
}
.sub-text {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
}
.core-title {
    margin: 40px 0;
    font-size: 40px !important;
    font-weight: 600;
}

/* Grid */
.core-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
}

/* CARD */
.core-card {
    width: 300px;
    height: 280px;
    padding: 25px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background: #e3e9e4;
    transition: 0.4s ease;
}

/* BACKGROUND IMAGE (hidden initially) */
.core-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    opacity: 0;                /* hide image */
    transition: 0.4s ease-in-out;
    z-index: 0;
}

/* ICON + TEXT must stay above */
.card-icon,
.core-card h3,
.core-card p {
    position: relative;
    z-index: 2;
  text-align: left;
}

/* Text Styling */
.card-icon {
    width: 55px;
    margin-bottom: 10px;
   margin-left: -115px;
   background: white;
   border-radius: 10px;
   padding: 5px;
}
.core-card h3 {
    font-size: 18px !important;
    font-weight: 600;
    color: #1c1c1c;
}
.core-card p {
    font-size: 15px !important;
    color: #1c1c1c;
}

/* HOVER — Reveal Background Image */
.core-card:hover::before {
    opacity: 1;   /* show image */
}

/* HOVER — Change text to white */
.core-card:hover h3,
.core-card:hover p {
    color: white;
}

/* ============================================================
   RESPONSIVE — LARGE TABLET (max-width: 1200px)
   ============================================================ */
@media (max-width: 1200px) {

    .core-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .core-card {
        width: 260px;
        height: 220px;
    }
    .card-icon,
.core-card h3,
.core-card p {
    position: relative;
    z-index: 2;
  text-align: left;
}

/* Text Styling */
.card-icon {
    width: 55px;
    margin-bottom: 10px;
   margin-left: -150px;
}
}


/* ============================================================
   RESPONSIVE — TABLET (max-width: 992px)
   ============================================================ */
@media (max-width: 992px) {

    .core-section {
        padding: 60px 30px;
    }

    .core-section h1 {
        font-size: 50px !important;
    }

    .core-title {
        font-size: 32px !important;
    }

    .sub-text {
        font-size: 18px;
    }

    .core-grid {
        flex-wrap: wrap;
        gap: 25px;
    }

    .core-card {
        width: 260px;
        height: 210px;
        padding: 20px;
    }

    .core-card h3 {
        font-size: 22px !important;
        text-align: left;
    }

    .core-card p {
        font-size: 17px !important;
    }
    /* Text Styling */
.card-icon {
    width: 55px;
    margin-bottom: 10px;
   margin-left: -120px !important;
}
}


/* ============================================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

    .core-section h1 {
        font-size: 40px !important;
    }

    .core-title {
        font-size: 28px !important;
    }

    .sub-text {
        font-size: 16px;
        line-height: 1.6;
    }

    .core-card {
        width: 90%;
        height: 200px;
        padding: 18px;
    }

    .card-icon {
        width: 45px;
        margin-right:414px;
    }
}


/* ============================================================
   SMALL MOBILE (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {

    .core-section {
        padding: 50px 20px;
    }

    .core-section h1 {
        font-size: 32px !important;
    }

    .core-title {
        font-size: 22px !important;
    }

    .sub-text {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .core-card {
        width: 100%;
        height: 250px;
        padding: 16px;
    }

    .core-card h3 {
        font-size: 22px !important;
    }

    .core-card p {
        font-size: 17px !important;
    }

   .card-icon {
        width: 45px;
        margin-left: 10px !important;
    }
}






  /* ===========================
   SECTION WRAPPER
=========================== */
.client-approach {
    width: 100%;
    padding: 80px 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===========================
   MAIN BANNER
=========================== */
.approach-banner {
    width: 92%;
    max-width: 1500px;
    height: 350px;
    border-radius: 35px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* FULL BACKGROUND IMAGE */
.approach-img {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* LEFT WHITE FADE */
.left-gradient {
    position: absolute;
    left: 0;
    top: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
    z-index: 2;
}

/* LEFT TEXT */
.approach-content {
    position: relative;
    width: 45%;
    padding: 40px;
    z-index: 3;
}

.approach-content h2 {
    font-size: 36px !important;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top:-24px;
}

.approach-content p {
    font-size: 20px !important;
    color: #000;
    line-height: 150%;
    text-align:justify;
}
@media (max-width: 600px) {
  .approach-content p {
    font-size: 14px !important;
  }
}
/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .approach-content p {
    font-size: 17px !important;
  }
}
/* ===========================
   3 CARDS (Compact)
=========================== */
.approach-cards {
    width: 92%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: -60px;
    z-index: 10;
}

.card {
    width: 100%;
    max-width: 250px;
    padding: 18px 20px;
    background: #e7f9dc;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    text-align: left;
}

.card .icon {
    width: 40px;
    padding: 8px;
    border-radius: 10px;
    background: #72e08d;
    margin-bottom: 10px;
}

.card h3 {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    margin: 0;
}

/* ===========================
   RESPONSIVE DESIGN
=========================== */
@media (max-width: 1024px) {
    .approach-banner {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .approach-banner {
        height: 400px;
    }

    .approach-content {
        width: 80%;
        padding: 25px;
    }

    .left-gradient {
        width: 100%;
    }

    .approach-cards {
        flex-direction: column;
        align-items: center;
        gap: 18px;
        margin-top: -30px;
    }

    .card {
        max-width: 330px;
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .approach-content h2 {
        font-size: 28px;
    }

    .approach-content p {
        font-size: 14px;
    }

    .vision-left h2{
        font-size: 34px;
    }
    .vision-left p{ font-size: 20px; text-align: justify;}
 }






/* ================== SECTION WRAPPER ================== */
.solutions-portfolio{
    padding:60px 8%;
}

.heading{
    font-size:55px !important;
    font-weight:800;
    text-align:left;
}

.sub-heading{
    font-size:22px !important;
    font-weight: 600;
    margin-top:-10px;
    font-weight: 500;
    opacity:0.8;
}

/* ================== TWO SIDE LAYOUT ================== */
.portfolio-container {
    margin-top: 50px;
    display: flex;
    gap: 60px;
    align-items: flex-start;
    align-items: flex-start;
}


/* ================== LEFT IMAGE AREA ================== */
.left-profile {
    position: sticky;
    top: 120px;        /* Adjust based on your navbar height */
    width: 42%;
    height: fit-content;
}


.team-img{
    width:100%;
    border-radius:30px;
    position: relative;
    object-fit:cover;
}


/* ================== RIGHT 11 CARD LIST ================== */
.solutions-list{
    width:55%;
    display:flex;
    flex-direction:column;
    gap:22px;
}

/* EACH CARD */
.sol-card{
    display:flex;
    align-items:center;
    border-radius:20px;
    padding:18px;
    position:relative;
    min-height:120px;
    overflow:hidden;
}


.sol-card:nth-child(odd){           /* 1,3,5,7,9,11 */
    background:#f6fff6;            /* Light */
}

.sol-card:nth-child(even){         /* 2,4,6,8,10 */
    background:#c3f8c1;            /* Dark */
}


/* Image inside card */
.sol-card img{
    width:120px;
    height:90px;
    border-radius:14px;
    object-fit:cover;
}

/* number badge */
.num{
    position:absolute;
    left:120px;
    top:50px;
    background:#fff;
    border-radius:50%;
    font-weight:700;
    height:38px;
    width:38px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#7e4ff2;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    font-size:17px;
}

/* TEXT INSIDE CARD */
.text{
    margin-left:80px;
    width:80%;
    font-size: 36px !important;
}

.text h3{
    margin:0;
    font-size:25px !important;
    font-weight:700;
}

.text p{
    margin-top:3px;
    opacity:0.8;
    font-size:18px !important;
    line-height:1.5;
}
/* ---------- Tablet Responsive ---------- */
@media (max-width: 1024px) {

    .portfolio-container {
        flex-direction: column;
        gap: 40px;
    }

    .left-profile {
        position: relative;   /* disable sticky in mobile/tablet */
        top: 0;
        width: 100%;
    }
    .heading{
        font-size: 26px !important;
    }

    .solutions-list {
        width: 100%;
    }
 
}


/* ---------- Mobile Responsive ---------- */
@media (max-width: 650px) {

    .solutions-portfolio {
        padding: 40px 5%;
    }

    .heading {
        font-size: 38px !important;
    }

    .sub-heading {
        font-size: 16px !important;
    }

    .sol-card {
        flex-direction: column;
        text-align: center;
        padding: 22px;
    }

    .sol-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
    }
   

    .num {
        left: 50%;
        top: 60px;
        transform: translateX(-50%);
    }

    .text {
        margin-left: 0;
        margin-top: 20px;
        width: 100%;
    }
}



.tech-section {
    /*padding: 60px;*/
    font-family: 'Poppins', sans-serif;
}

.tech-title {
    font-size: 55px !important;
    font-weight: 800;
}

.tech-subtext {
    width: 70%;
    font-size: 22px !important;
    line-height: 1.6;
}

.tech-subtext span {
    color: #34a853;
    font-weight: 600;
}

/* MAIN LAYOUT */
.tech-container {
    display: flex;
    align-items: center;
    margin-top: 50px;
    gap: 30px;
}


/* LEFT IMAGE GROUP */
.tech-images {
    position: relative;
    display: flex;
    gap: 20px;
    /* margin-left: 80px; */
}

.tech-img1 {
    width: 320px;
    height: 320px;
    margin-top: 50px;
    object-fit: cover;
    border-radius: 40px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.tech-img {
    width: 320px;
    margin-bottom: 40px;
    height: 320px;
    object-fit: cover;
    border-radius: 40px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}


/* CENTER LOGO — THIS WAS MISSING */
.center-logo {
    position: absolute;
    bottom: -5px;
    left: 55%;
    transform: translateX(-50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: contain;
    z-index: 10;
}

/* RIGHT FEATURE GRID */
.tech-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 0px;
    /*margin-left: 120px;*/
}

.feature-box {
    text-align: center;
    width: 260px;
}

.feature-box h3 {
    color: #34a853;
    font-weight: 700;
    margin-top: 12px;
    font-size: 28px !important;
    
}

.feature-box p {
    font-size: 20px !important;
    line-height: 1.5;
}

/* ICON PLACEHOLDERS */
.feature-icon-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
  background: linear-gradient(
    to bottom,
    #D9FFCD 0%,      /* light green */
    #96E37D 100%     /* dark green */
);

    padding: 10px;
    border-radius: 50%;
}


.green-light { background: #c8f5cd; }
.green-mid   { background: #6bbf6d; }
.green-dark  { background: #4a8d4c;}


/* ================================
   FIX IMAGE OUT OF SCREEN
   FOR 1351px – 1245px WIDTH
=================================*/

@media (max-width: 1351px) {

    .tech-img1,
    .tech-img {
        width: 200px;
        height: 320px;
    }
    .tech-container {
    display: flex;
    align-items: center;
    margin-top: 50px;
   
}

}

/* ================================
   TABLET VIEW (≤ 1024px)
=================================*/
/* ===== DESKTOP — Reduce space between left & right ===== */



@media (max-width: 1024px) {

    .tech-container {
        flex-direction: column;
        text-align: center;
        
    }

    .tech-images {
        justify-content: center;
        margin-left: 0;
        flex-direction: column;
        gap: 30px;
        margin-bottom: 20px !important;
    }

    .tech-img1,
    .tech-img {
        width: 300px;
        height: 420px;
    }

    .tech-features {
        grid-template-columns: 1fr 1fr;
        justify-items: center;
    }
        .service-overview-section{
        display: flex;
        flex-direction: column;
    }
    .right-content {width: 1000px;margin: 0px;}
    .right-content{text-align: justify;}
    .facility-left h1{font-size: 36px;}
    .facility-left p{justify-content: left; margin-left: -10px; text-align: justify;}
    .tech-images{display: flex; flex-direction: row;}
    .tag3{
        width: 590px;
        font-size: 28px !important;
    }
}


/* ================================
   MOBILE VIEW (≤ 768px)
=================================*/
@media (max-width: 768px) {

    .tech-section {
        padding: 30px 20px;
    }

    .tech-title {
        font-size: 32px !important;
        line-height: 1.3;
    }

    .tech-subtext {
        width: 100%;
        font-size: 15px;
    }

    /* LEFT IMAGE — SHOW ONE BY ONE VERTICALLY */
    .tech-images {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        margin-left: 0;
        position: relative;
    }

    .tech-img1,
    .tech-img {
        width: 260px;   /* reduced width */
        height: 340px;  /* reduced height */
        border-radius: 25px;
    }

    /* CENTER LOGO — adjust position for small screen */
    .center-logo {
        position: absolute;
        bottom: -15px;
        width: 80px;
        height: 80px;
        transform: translateX(-50%);
    }

    /* RIGHT FEATURES — ONE BY ONE */
    .tech-features {
        display: block; /* remove grid */
    }

    .feature-box {
        width: 100%;
        max-width: 300px;
        margin: 0 auto 25px auto;
    }

    .feature-icon-img {
        width: 70px;
        height: 70px;
    }

    .feature-box h3 {
        font-size: 18px;
    }
}


/* ================================
   SMALL MOBILE (≤ 480px)
=================================*/
@media (max-width: 480px) {

    .tech-title {
    font-size: 26px !important;
    }

    .tech-img1,
    .tech-img {
        width: 220px;
        height: 300px;
    }

    .feature-box {
        max-width: 450px;
    }
            .img-lg{
             width: 150px;
            height: 180px;
            margin-left: 10px;
        }
        .img-circle {
            width: 120px;
            height: 120px;
            position: relative;
            top: -200px;
            left: 100px;
        }
        .facility-left p{
            margin: 0px;
        }
}








/* Main section */
.innovation-roadmap{
    width:100%;
    text-align:center;
    padding:20px 0;
}

/* Heading */
.innovation-roadmap h1{
    font-size:46px;
    font-weight:800;
}

/* Subtitle */
.innovation-roadmap .subtitle{
    font-size:22px !important;
    font-weight: 500;
    margin:0 auto 50px auto;
    color:#333;
    text-align: justify;
    width: 90%;
}

/* All roadmap rows */
.roadmap-row{
    background:#e6ffcf;
    width:85%;
    margin:32px auto;
    padding:20px 50px;
    border-radius:70px;
    display:flex;
    align-items:center;
    position:relative;
    font-size:20px;
    font-weight:500;
    box-shadow:inset 0 0px 18px rgba(0,0,0,0.08);
}

/*** Alternating position ***/
.roadmap-row.right .circle{ right:100px; }
.roadmap-row.left .circle{ left:100px; }

/* Tag badge */
.tag{
    background:#fff;
    border:2px solid #20ac26;
    padding:6px 12px;
    border-radius:40px;
    font-size:13px !important;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    margin-right:20px;
    margin-top: -50px;
}

.tag2{
     
    margin-left: 210px;
  

}

/* Small green dot inside tag */
.tag i{
    width:12px;height:12px;
    background:#1ea822;
    border-radius:50%;
    margin-right:6px;
}

.tag3 {
font-size: 22px !important;
margin-top: 100px;
margin-left: -100px;


}

/* The large numbered circle */
.circle{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:180px;
    height:180px;
    border-radius:50%;
    background:#8af06d;
    margin-left: -30px;
    font-size:44px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 22px rgba(0,0,0,0.25);
}

.Circle-1{
    margin-right: -70px !important;
}

@media screen and (max-width: 1024px) and (max-height: 651px) {

    .roadmap-row {
        width: 88%;
        padding: 18px 25px;
        height: auto;
        border-radius: 60px;
        gap: 20px;
    }

    .circle {
        width: 120px;
        height: 120px;
        font-size: 20px;;
       
    }
   

    .tag-box {
        align-items: flex-start;
    }

    .tag {
        font-size: 13px !important;
        padding: 4px 12px;
    }

    .tag3 {
        font-size: 20px !important;
        margin-left: 0;
    }

    .innovation-roadmap h1 {
        font-size: 38px;
    }

    .innovation-roadmap .subtitle {
        font-size: 18px;
    }
}
/* ================================
   ROADMAP RESPONSIVE
=================================*/

/* TABLET */
@media (max-width: 992px) {
    .roadmap-row {
        width: 95%;
        padding: 20px;
        font-size: 18px;
        border-radius: 40px;
    }

    .circle {
        width: 120px;
        height: 120px;
        font-size: 32px;
    }

    .tag {
        font-size: 13px;
        margin-top: 0;
    }
}

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

    .innovation-roadmap h1 {
        font-size: 32px;
    }

    .subtitle {
        font-size: 16px !important;
        margin-bottom: 40px;
    }

    /* Stack Rows */
    .roadmap-row {
        flex-direction: column;
        text-align: center;
        padding: 25px;
        border-radius: 30px;
        padding-bottom: 100px;
    }

    /* Circle comes center */
    .circle {
        position: absolute;
        bottom: -50px;
        left: 55% !important;
        transform: translateX(-50%);
        width: 100px;
        height: 100px;
        font-size: 28px;
        margin-top: 43px;
    }


    /* Tags align center */
    .tag, .tag2 {
        margin: 0 auto 15px auto !important;
        display: inline-flex;
    }

    /* Text below tag */
    .tag3 {
        margin: 10px auto;
        width: 100%;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {

    .roadmap-row {
        padding: 30px;
    }

    .circle {
        width: 80px;
        height: 80px;
        font-size: 22px;
        margin-top:85px !important ;
        left:58% !important;
    } 

    .tag {
        font-size: 12px;
        padding: 5px 10px;
    }

    .tag3 {
        font-size: 14px;
        margin-bottom: 40px !important;
    }
  
}




 .future-vision{
    width:90%;
    margin:10px auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-family:"Poppins",sans-serif;
    gap:40px;
}

/* Left Text Block */
.vision-left{
    width:50%;
}

.vision-left h2{
    font-size:45px ;
    font-weight:800;
    margin-bottom:25px;
}

.vision-left p{
    font-size:20px !important;
    line-height:1.6;
    color:#333;
    text-align: justify;
   
}

/* Right Image Container */
.vision-right{
    width:450px;
    height: 500px !important;
    background:#e7ffcf;
    border-radius:60px;
    padding:5px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Main VR image */
.vision-img{
  
    border-radius:40px;

}

/* Floating top-right glossy badge (same as screenshot) */
.vision-badge{
    width:110px;
    position:absolute;
    top:-30px;
    right:-30px;
    filter:drop-shadow(0 8px 12px rgba(0,0,0,0.25));
}

/* Responsive */
@media screen and (min-width: 800px) and (max-width: 1024px){
    /* Correct text alignment for 800–900px range */
    .roadmap-row {
        flex-direction: column;
        text-align: center;
        padding: 5px 20px;
        margin-bottom: 50px;
    }

    .roadmap-row.left .circle,
    .roadmap-row.right .circle {
        position: absolute;
        bottom: 10px;
        left: 54% !important;
        right: auto !important;
        transform: translate(-50%,14%);
        width: 100px;
        height: 100px;
        top: 100px;
    }

    .tag {
        margin: 0 auto 15px auto !important;
        display: inline-flex;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .tag2 {
        margin-left: 0 !important;
    }

    .tag3 {
        margin: 10px 0 40px;
        margin-left: 0 !important;
        width: 100%;
    }
}
@media(max-width:900px){
    .future-vision{flex-direction:column;justify-content: center;}
    .vision-left, .vision-right{width:100%;}
    .vision-badge{top:-20px;right:-20px;width:85px;}
    .vision-img{
    width:80%;
    border-radius:40px;
    height: 420px;
    margin-bottom: 10px;
    

}


}



/* Title outside section */
.brand-title {
    text-align: left;
    font-size: 55px;
    font-weight: 800;
    margin: 20px 0 30px 0;
    margin-left: 50px;
    font-family: "Poppins", sans-serif;
    color: #000;
}

/* Tablet */
@media (max-width: 992px) {
    .brand-title {
        font-size: 70px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .brand-title {
        font-size: 33px;
    }
}

/* Small Mobile */
@media (max-width: 400px) {
    .brand-title {
        font-size: 38px;
    }
}