@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@300;400;500;600;700&display=swap');

 @import url('https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&display=swap');

 @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500;600;700&display=swap');





/* =============================
   GLOBAL NAVBAR OFFSET
============================= */
:root {
    --navbar-height: 90px;
}

/* =============================
   COMPASS HERO BANNER
============================= */
.compass-banner {
    background: linear-gradient(
        135deg,
        #041a4e 0%,
        #0b3c91 55%,
        #0e4fb3 100%
    );
    padding-top: var(--navbar-height);      /* below navbar */
    min-height: calc(100vh - var(--navbar-height));
    color: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}

/* =============================
   MAIN LAYOUT GRID
============================= */
.compass-container {
/*    max-width: 1200px;*/
/*    margin: auto 0px auto 40px;*/
    height: 100%;
   padding: 0px 0px 0px 50px;
    display: flex;
/*    grid-template-columns: 50% 41%;*/
/*    column-gap: 150px;*/
}

/* =============================
   LEFT COLUMN
============================= */
.compass-left {
    position: relative;
/*    height: 100%;*/
     width:50%;
}

/* Breadcrumb - TOP LEFT */
.breadcrumb {
    position: absolute;
    top: 20px;
    left: 0;
    font-size: 14px;
    opacity: 0.85;
    letter-spacing: 0.2px;
    font-family: 'Schibsted Grotesk', sans-serif;
}

/* Main Content - BOTTOM LEFT */
.compass-content {
    position: absolute;
    bottom: 40px;
    left: 0;
    max-width: 600px;
}

.compass-content h1 {
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 18px;
    line-height: 1.15;
    font-family: 'Agdasima', sans-serif;
}

.compass-content .description {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 28px;
    font-family: 'Schibsted Grotesk', sans-serif;
}

/* CTA Button */
.btn-primary {
    display: inline-block;
    background: #ffffff;
    color: #0b3c91;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    font-family: 'Instrument Sans', sans-serif;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

/* =============================
   RIGHT IMAGE PANEL
============================= */
/*.compass-image {
    height: 100%;
    display: flex;
    align-items: center;
}

.compass-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}*/


.compass-image {
    position: relative;
    height: 100%;
    width:50%;
    /* RIGHT SIDE BACKGROUND */
    background: linear-gradient(
        135deg,
        #173d9a 0%,
        #0e2f7a 45%,
        #071b48 75%,
        #041235 100%
    );

    display: flex;
    align-items: center;
    justify-content: center;

        padding: 30px 0px 30px 0px;

}

.compass-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(255,255,255,0.08),
        transparent 65%
    );
    pointer-events: none;
}


/* Actual image */
.compass-image img {
    position: relative;
       width: 100%;
    height: 100%;
    object-fit: cover;           
    max-width: none;
    transform: translateX(6%);
    border-radius: 8px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.35);
    z-index: 1;

}
/* =============================
   RESPONSIVE - TABLET / MOBILE
============================= */
@media (max-width: 992px) {
    .compass-banner {
        min-height: auto;
        padding-top: var(--navbar-height);
    }

    .compass-container {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
    }

    .compass-left {
        position: relative;
        height: auto;
        margin-bottom: 40px;
         padding-left: 20px!important;
    }

    .breadcrumb {
        position: relative;
        margin-bottom: 20px;
    }

    .compass-content {
        position: relative;
        bottom: auto;
        max-width: 100%;
    }

    .compass-content h1 {
        font-size: 34px;
    }

    .compass-image img {
        height: auto;
        object-fit: contain;
    }

    .compass-container {
    padding:0!important;
}

}


@media (max-width: 768px) {

.compass-left{
    padding-left: 20px!important;
}

.compass-container {
    padding:0!important;
}


.compass-image{
    padding:0px;
}
}

@media (max-width: 992px) {

  .compass-container {
    grid-template-columns: 1fr;
    column-gap: 0;

    /* ✅ SHUFFLE ORDER */
    grid-template-areas:
        "left"
        "image"
        "content";
  }

  /* Break left column into parts */
  .compass-left {
    display: contents;   /* ✅ KEY FIX */
  }

  .breadcrumb {
    grid-area: left;
    padding-left: 20px;
  }

  .compass-image {
    width: 100%;
    grid-area: image;
    margin: 20px 0px;
  }

  .compass-content {
    grid-area: content;
    padding: 50px 20px;
  }

  .compass-image img {
    transform: none;
    max-width: 90%;
    margin: auto;
    display: block;
  }

  .btn-primary {
    width: 100%;
  }
}


/* =============================
   OPTIONAL – SUBTLE PREMIUM MOTION
   (Enable only if you want)
============================= */
/*
.compass-image img {
    animation: slowZoom 18s ease-in-out infinite alternate;
}

@keyframes slowZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}
*/




/*.compass-banner {
    background: linear-gradient(
        135deg,
        #041a4e 0%,
        #0b3c91 55%,
        #0e4fb3 100%
    );
    padding: 100px 0;
    color: #fff;
}

.compass-container {

    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 0 24px;
}

.compass-content {
    flex: 1;
}

.breadcrumb {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 20px;
}

.compass-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 18px;
}

.compass-content .description {
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 28px;
}

.btn-primary {
    display: inline-block;
    background: #ffffff;
    color: #0b3c91;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
}

.compass-image {
    flex: 1;
    text-align: right;
}

.compass-image img {
    max-width: 100%;
    border-radius: 6px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}


@media (max-width: 992px) {
    .compass-container {
        flex-direction: column;
        text-align: center;
    }

    .compass-image {
        text-align: center;
        margin-top: 40px;
    }

    .compass-content h1 {
        font-size: 36px;
    }
}
*/


/* SECTION */
.barriers-section {
  background: #F9F9F9;
  padding: 80px 0px;
  color: #fff;
}

/* CONTAINER */
.barriers-container {
  display: flex;
  align-items: center;          /* ✅ vertical alignment */
  justify-content: center;
  padding: 0 20px;
}

/* LEFT */
.barriers-left h2 {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 40px;
  color: #0b1c3e; /* dark navy like figma */
  font-family: 'Agdasima', sans-serif;
    font-weight: 400;
}

/* PILLS GRID */
.barriers-list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 16px 24px;
  font-family: 'Schibsted Grotesk', sans-serif;
}

.navigator .barriers-list {
    display: grid;
    grid-template-columns: repeat(1, max-content);
    gap: 16px 24px;
    font-family: 'Schibsted Grotesk', sans-serif;
}

/* SINGLE PILL */
.pill {
  background: #F1F1F1;
  color: #0b1c3e;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* ICON */
.pill .icon {
  font-size: 16px;
  margin-bottom:0px;
}

/* RIGHT IMAGE */
.barriers-image {
  width: 40%;
/*  display: flex;*/
/*  justify-content: end;*/
}
.barriers-image img {
/*  max-width: 100%;*/
/*  width: 100%;*/
/*  height: 100%;*/

    width: 100%;
    height: 100%;
    object-fit: cover;
}

.barriers-left {
  width: 55%;
}


/* RESPONSIVE */
@media (max-width: 992px) {
  .barriers-container {
           gap: 50px;
        display: flex;
        flex-direction: column;
  }


  .barriers-left {
  width: 100%;
}


.barriers-image {
  width: 100%;
}

  .barriers-left h2 {
    font-size: 34px;
  }

  .barriers-list {
    grid-template-columns: 1fr;
  }

  .navigator .barriers-list {
    grid-template-columns: 1fr;
  }

 .navigator .pill {
   
     white-space: wrap; 
}

}


/*solution section*/


.solutions-section {
    padding: 80px 20px;
    background: #FFF3DB;
}

.solutions-title {
    text-align: center;
    font-size: 50px;
    font-weight: 400;
    margin-bottom: 40px;
    font-family: 'Agdasima', sans-serif;
}

.consulting-subtitle {
    max-width: 820px;
    margin: 0 auto 90px;
    font-size: 16px;
    line-height: 1.7;
    color: #042067;
     font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
    text-align:center;
}

.navigator .solutions-title {
    text-align: center;
    font-size: 50px;
    font-weight: 400;
    margin-bottom: 10px!important;
    font-family: 'Agdasima', sans-serif;
}

/* TABS */
.solutions-tabs {
    display: flex;
/*    max-width: 1100px;*/
    margin: auto;
    background: #fff;
    border: 1px solid #ddd;
}

/*.sol-tab {
    flex: 1;
    padding: 16px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border-right: 1px solid #ddd;
    background: #fff;
    color: #555;
}

.sol-tab:last-child {
    border-right: none;
}

.sol-tab.active {
    background: #f5f5f5;
    font-weight: 600;
    color: #000;
}
*/
/* TAB BUTTON */
.sol-tab {
    flex: 1;
    padding: 14px;
    font-size: 16px;
    border: none;
    background: #fff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: #525252;
    border-right: 1px solid #ddd;
    transition: color 0.3s ease;
    text-transform:uppercase;
}

.sol-tab:last-child {
    border-right: none;
}

/* WIPE FILL ANIMATION */
.sol-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #f5f5f5;
    z-index: -1;
    transition: width 2.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ACTIVE STATE */
.sol-tab.active::before {
    width: 100%;

}

.sol-tab.active {
    width: 100%;
    color:#000;
    font-weight: bold;
}

/* CONTENT PANEL */
.solutions-content {
    margin-top: 40px;
}

.sol-panel {
    display: none;
    background: #060d06;
    border-radius: 14px;
    padding: 60px;
/*    max-width: 1200px;*/
    margin: auto;
    align-items: center;
    justify-content: space-between;
}

.sol-panel.active {
    display: flex;
}

/* LEFT */
.sol-left {
    width: 55%;
}

.sol-left h3 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 16px;
     font-family: 'Agdasima', sans-serif;
}

.sol-left p {
    color: #ccc;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 22px;
    font-family: 'Schibsted Grotesk', sans-serif;
}

.sol-list {
    list-style: none;
    margin-bottom: 28px;
    padding-left: 0px;
    font-family: 'Schibsted Grotesk', sans-serif;
}


/*.sol-list li {
    font-size: 14px;
    padding: 14px 52px 14px 16px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    margin-bottom: 10px;
    position: relative;
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
*/

/*.sol-list {
    list-style: none;
    padding: 0;
    margin: 0;
}*/

.sol-list li {
    font-size: 14px;
    padding: 14px 48px 14px 16px; /* RIGHT padding reserves space */
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    margin-bottom: 10px;
    position: relative;
    color: #fff;
    word-break: break-word; /* safety for long words */
}

/* check circle */
.sol-list li::after {
    content: "✓";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2CF000;
    color: #000;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 700;
}









/* BUTTON */
.sol-btn {
    background: #042067;
    padding: 14px 26px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
/*    border-radius: 6px;*/
    text-transform: uppercase;
}

/* RIGHT */
.sol-right {
    width: 40%;
}

.sol-right img {
    width: 100%;
    border-radius: 10px;
}

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

.consulting .sol-tab {
        padding: 16px 22px;
    font-size: 14px;
}
    .sol-panel {
        flex-direction: column;
        padding: 40px;
    }

    .sol-left,
    .sol-right {
        width: 100%;
    }

    .solutions-tabs {
        overflow-x: auto;
    }

    .sol-tab {
        flex: 0 0 100%;
        white-space: nowrap;

    }

    .sol-list li {
    font-size: 14px;
/*    padding: 14px 12px!important;*/
}


.sol-right img {
    width: 100%;
    border-radius: 10px;
    margin-top: 50px;

}

}


/*section two solution*/

.solution-section2 {
  background: #f5f5f5;
  padding: 80px 20px;
  color: #fff;
}

.solution-wrap2 {
  max-width: 1300px;
  margin: auto;
  overflow: hidden;
}

/* Left Image */
.solution-image2 {
  width: 50%;
  float: left;
}

.solution-image2 img {
  width: 100%;
  border-radius: 16px;
  display: block;
}

/* Right Content */
.solution-content2 {
  width: 50%;
  float: right;
  padding-left: 60px;
}

.solution-content2 h2 {
  font-size: 52px;
  line-height: 52px;
  font-weight: 400;
  margin-bottom: 32px;
  color: #0b1628;
  font-family: 'Agdasima', sans-serif;
}

/* Tabs */
.solution-tabs2 {
  margin-bottom: 24px;
}

.solution-tabs2 button {
  border: 1px solid transparent;
  background: #fff;
  color: #000;
  padding: 12px 18px;
/*  border-radius: 8px;*/
  margin-right: 10px;
  cursor: pointer;
  font-size: 14px;
  width:180px;
}

.solution-tabs2 button.active {
  background: #fff3cd;
  color: #000;
  border: 1px solid #FECE51;
}

/* LIST */
.sol-list2 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sol-list2 li {
  position: relative;
  padding: 12px 22px 12px 14px;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  margin-bottom: 14px;
  font-size: 14px;
  color: #000;
  font-family: 'Schibsted Grotesk', sans-serif;
  width:95%;
}



.sol-list2 li img{
  padding-right: 10px;
}



/* Icon (left) */
/*.sol-list2 li::before {
  content: "⚙";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
}*/

/* Hide all panels */
.solution-tab-panels .sol-list2 {
  display: none;
}

/* Show only active */
.solution-tab-panels .sol-list2.active {
  display: block;
}

/* ===============================
   RESPONSIVE – TABLET & MOBILE
   =============================== */

@media (max-width: 1024px) {

  .solution-content2 {
    padding-left: 30px;
  }

  .solution-content2 h2 {
    font-size: 42px;
    line-height: 44px;
  }
}

@media (max-width: 768px) {
    
    .solution-tabs2 button {
 
  width:auto;
}

  .solution-section2 {
    padding: 60px 16px;
  }

  /* Stack image & content */
  .solution-image2,
  .solution-content2 {
    float: none;
    width: 100%;
  }

  .solution-image2 {
    margin-bottom: 40px;
  }

  .solution-content2 {
    padding-left: 0;
  }

  .solution-content2 h2 {
    font-size: 34px;
    line-height: 38px;
    margin-bottom: 24px;
  }

  /* Tabs wrap into next line */
  .solution-tabs2 {
    white-space: normal;
    display:flex;
  }

  .solution-tabs2 button {
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {

  .solution-section2 {
    padding: 48px 14px;
  }

  .solution-content2 h2 {
    font-size: 28px;
    line-height: 32px;
  }

  .solution-tabs2 button {
    font-size: 13px;
    padding: 12px;
  }

  /* List items */
  .sol-list2 li {
    font-size: 13px;
    padding: 14px 16px;
    line-height: 1.4;
    display: flex;
  }
}



/*rubicr video */

.rubric-hero {
    position: relative;
    height: 700px;
    background: linear-gradient(
        135deg,
        #081a3a 0%,
        #0b2d6d 45%,
        #07162f 100%
    );
    overflow: hidden;
    padding: 20px 60px;
    display: flex;
    flex-direction: column;
    text-align:center;
}


.hero-title {
    z-index: 5; 
    display: inline-block;
    margin: 0 auto;
    
}

.hero-title h1 {
    color: #fff;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.3;
    /*max-width: 700px;*/
    font-family: 'Bai Jamjuree', sans-serif;
    text-align:center;
    background: #0a296200; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    
   
}


.hero-video-wrap {
    position: relative;
    margin-top: 40px;
    width: 100%;
    height: 550px;
    z-index: 2;
}

.hero-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    /*opacity: 0.9;*/
}

.grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
    background-size: 10px 10px;
    animation: gridBlink 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes gridBlink {
    0%   { opacity: 0.15; }
    50%  { opacity: 0.35; }
    100% { opacity: 0.15; }
}

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

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

    .rubric-hero {
        height: auto;
        padding: 40px 30px;
    }

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

    .hero-video-wrap {
        margin-top: 30px;
        height: auto;
    }

    .grid-overlay {
        background-size: 26px 26px;
    }
}

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

    .rubric-hero {
        padding: 30px 20px;
        text-align: center;
    }

    .hero-title h1 {
        font-size: 26px;
        line-height: 1.4;
    }

    .hero-video-wrap {
        margin-top: 25px;
        height: auto;
    }

    .hero-video-wrap video {
        border-radius: 4px;
    }

    .grid-overlay {
        background-size: 10px 10px;
        /*opacity: 0.2;*/
    }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {

    .hero-title h1 {
        font-size: 22px;
    }

    .hero-video-wrap {
        height: auto;
    }
}



/*usecase*/


.usecase-section {
    padding: 80px 60px;
    background: #F9F9F9;
}

.section-title {
    font-size: 50px;
    font-weight: 400;
    margin-bottom: 40px;
    color: #0b1f44;
    font-family: 'Agdasima', sans-serif;
}

.usecase-wrapper {
    display: flex;
    gap: 100px;
     
}

.navigator .usecase-wrapper {
    display: flex;
    gap: 100px;
     align-items: flex-start;
}

/* LEFT TABS */


.navigator .industry-tabs {
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;          /* IMPORTANT */
    gap: 12px;                /* spacing between cards */
}

.navigator .tab {
   flex: 0 0 calc(50% - 6px); /* 2 columns */
    box-sizing: border-box;

    height: 55px;         /* ensures equal height */
    padding: 14px 16px;

    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;

    display: flex;
    align-items: center;
    text-transform: uppercase;

}


@media(max-width: 768px){

    .navigator .tab {
    flex: 0 0 calc(100%);
    text-align: center;
}
  .navigator .industry-tabs { width: 100%; flex-wrap: nowrap; }

  .navigator .feature-box {
    width: 100%!important;
    margin-top: -50px!important;
}
}
  
.industry-tabs {
    width: 55%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

.navigator .feature-box {
    width: 45%;
    background: #fff;
    color: #1a1a1a;
    border-radius: 12px;
    padding: 28px 30px;
    position: relative;
    margin-top: -150px;
    min-height:450px;
}

.industry-tabs .tab {
    background: #fff;
    color: #091a3d;
    padding: 16px 22px;
    border-radius: 6px!important;
    font-weight: 500;
    cursor: pointer;
    transition: 0.25s ease;
    border: 1px solid #ccc;
    font-size: 14px;
    align-self: center;
}

.industry-tabs .tab:hover {
    background: #f5f5f5;
}

.industry-tabs .tab.active {
    background: #fff7d6;
    border-color: #ffc82c!important;
    border-radius:unset;
    border-radius: 6px;
}

/* FEATURE BOX */
.feature-box {
    width: 50%;
    background: #fff;
    color: #1a1a1a;
    border-radius: 12px;
    padding: 28px 30px;
    position: relative;
}

.compass .feature-box {
    width: 50%;
    background: #fff;
    color: #1a1a1a;
    border-radius: 12px;
    padding: 28px 30px;
    position: relative;
    min-height:530px;
}

.feature-box h3 {
    margin-top: 0;
    font-size: 20px;
}

.feature-box ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

/*.feature-box li {
    margin-bottom: 14px;
    padding-left: 28px;
    position: relative;
    font-size: 14px;
   
     padding: 12px 30px 12px 14px;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  margin-bottom: 14px;
  font-size: 14px;
  color: #000;
  font-family: 'Schibsted Grotesk', sans-serif;
}

.feature-box li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: green;
    font-size: 16px;
}
*/


.feature-box li {
    /*max-width: fit-content;*/
    min-height: 48px;              /* ✅ base height */
    border: 2px solid #B0E0BF;
    border-radius: 999px;          /* ✅ perfect pill */
    margin-bottom: 14px;
    position: relative;

    font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
    color: #000;

    padding: 10px 28px 10px 44px;   /* ✅ symmetric vertical padding */
    line-height: 1.4;
    white-space: normal;           /* ✅ allow wrapping */
    display: inline-flex;          /* ✅ pill wraps content */
    align-items: center;           /* ✅ vertical centering */
    font-size: 14px;
    width:100%;
}

.feature-box li::before {
    content: "";
    width: 20px;
    height: 20px;
    background: #238C00;
    border-radius: 50%;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 10L9 13L14 7' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.powered {
    position: absolute;
    left: 30px;
    bottom: 20px;

    font-size: 14px;
    color: #555;
}

.powered {
    font-size: 14px;
    color: #555;
}

.powered-label {
    font-weight: 700 !important;
    color: #000;
}

.powered-value {
    font-weight: 400;
    margin-left: 6px;
}


@media (max-width: 768px) {
    
    .compass .feature-box {
    width: 100%;
    
}

    .powered {
        left: 20px;
        bottom: 14px;
        font-size: 12px;
    }

    .feature-box {
        padding-bottom: 70px;   /* ✅ more space for smaller screens */
    }
}



.feature-box {
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .feature-box li {
        max-width: 100%;        /* ✅ full width on mobile */
        border-radius: 18px;    /* ✅ softer on small screens */
        font-size: 14px;
        padding: 10px 20px 10px 42px;
    }

    .feature-box li::before {
        left: 12px;
    }
}


@media (max-width: 992px) {

    .usecase-wrapper {
        flex-direction: column;
        gap: 32px;
    }

    /* Tabs: one at a time */
    .industry-tabs {
        width: 100%;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
    }

    .industry-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab {
        flex: 0 0 100%;
        scroll-snap-align: start;
        text-align: center;
        font-size: 15px;
        padding: 15px;
        border-radius: 8px;
                line-height: 15px;
        /* align-items: center; */
        align-self: center;
    }

    /* Feature box below */
    .feature-box {
        width: 100%;
    }

     .industry-tabs {
        overflow-x: auto;
        scroll-snap-type: x mandatory;

        /* show scrollbar */
        scrollbar-width: thin;               /* Firefox */
        scrollbar-color: #c5c5c5 transparent;
    }

    .industry-tabs::-webkit-scrollbar {
        height: 6px;
    }

    .industry-tabs::-webkit-scrollbar-track {
        background: transparent;
    }

    .industry-tabs::-webkit-scrollbar-thumb {
        background: #c5c5c5;
        border-radius: 4px;
    }

    .tab {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
}



@media (max-width: 768px) {
    .section-title {
        font-size: 26px;
        text-align: left;
    }

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

    .tab.active {
    background: #fff7d6;
    border-color: #ffc82c;
}

.industry-tabs {
    scroll-snap-type: x mandatory;
}

.tab {
    scroll-snap-align: start;
}
}


/*.case-studies {


   background:
    url("../assets/images/services/Compass/aibg.png") top center / 1200px no-repeat,
    radial-gradient(circle at top right, #1a2456, #050b2c);
  padding: 80px 50px 0;
  color: #fff;
  overflow: hidden;
  position: relative;
}*/

.case-studies {
  background: radial-gradient(circle at top right, #1a2456, #050b2c);
  padding: 50px 50px 0;
  color: #fff;
  overflow: hidden;
  position: relative;
}

.case-studies::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/services/Compass/aibg.png") top center / 1200px no-repeat;
  z-index: 0;
  background-size: 1000px;
}

/* keep content above bg image */
.case-studies > * {
  position: relative;
  z-index: 1;
}

.case-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* LEFT */
.case-left {
  max-width: 55%;
}

.case-left h2 {
  font-size: 42px;
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 20px;
  font-family: 'Agdasima', sans-serif;
    font-weight: 400;
}

.subtitle {
  font-size: 16px;
  opacity: 0.85;
  margin-bottom: 40px;
  font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

.case-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.case-item {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,0.06);
  padding: 18px 24px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.case-item .icon {
    margin-bottom:0px;
  /*width: 34px;
  height: 34px;
  background: #fff;
  color: #0a0f3c;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;*/
}

.case-item .text {
  flex: 1;
  font-size: 16px;
  font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

.case-item .download {
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
}

/* RIGHT */
.case-right img {
  width: 480px;
  max-width: 100%;
  height: auto;
}

/* ✅ RESPONSIVE */
@media (max-width: 992px) {
  .case-container {
    flex-direction: column;
    text-align: left;
  }

  .case-left {
    max-width: 100%;
  }

  .case-right img {
    width: 100%;
    max-width: 420px;
    margin-top: 40px;
  }
}


@media (max-width: 768px) {
  .case-studies::before {
    background-size: 800px;
  }
}



@media (max-width: 768px) {

  .case-item {
    display: flex;
    flex-wrap: wrap;              /* KEY FIX */
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }

  /* Icon */
  .case-item .icon {
    flex: 0 0 24px;
  }

  .case-item .icon img {
    width: 20px;
    height: 20px;
  }

  /* Text next to icon */
  .case-item .text {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
  }

  /* Download below text, aligned with text */
  .case-item .download {
    flex: 0 0 calc(100% - 34px);   /* pushes below text */
    margin-left: 34px;             /* aligns under text, not icon */
/*    margin-top: 6px;*/
    font-size: 13px;
    display: inline-block;
  }
}

.case-list .case-item a{
    cursor: pointer;
}

/*modal on cilck*/

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-box {
  background: #fff;
  width: 90%;
  max-width: 520px;
  padding: 24px;
  border-radius: 12px;
  position: relative;
}

.modal-box h3 {
  text-align: center;
  margin-bottom: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-grid input,
.form-grid select {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.checkbox {
  display: block;
  font-size: 13px;
  margin: 16px 0;
}

.modal-download {
  width: 100%;
  background: #072366;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  cursor: pointer;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field label {
  font-size: 13px;
  margin-bottom: 6px;
  color: #333;
  font-weight: 500;
}


@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  form{
    overflow-y: scroll;
    height:400px;
  }
}


/*faq*/


.faq-section {
  background: #F9F9F9;
  color: #0b1b3d;
  padding: 80px 40px;
}

.faq-title {
  font-size: 60px;
  font-weight: 500;
  color: #0b1b3d;
  margin-bottom: 40px;
   font-family: 'Agdasima', sans-serif;
    font-weight: 400;
}

.faq-item {
  border-bottom: 1px solid rgb(157 141 141 / 25%);
}

.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: #040C1F;
  cursor: pointer;
  text-align: left;
}

.faq-question span {
  max-width: 90%;
}

/*.faq-question .icon {
  font-size: 22px;
  color: #1f5eff;
  transition: transform 0.3s ease;

}*/

.faq-question .icon {
  width: 20px;
  height: 20px;
  border: 1.5px solid #042067;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #042067;
  transition: transform 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}

/* PLUS */
.faq-question .icon::before {
  content: "+";
  font-size: 16px;
  line-height: 0.5;
  font-weight: 500;
  margin-top:-4px;
}

/* MINUS (ACTIVE) */
.faq-item.active .icon::before {
  content: "–";   /* real minus, not rotated + */
  line-height: 0.5;
  margin-top:-4px;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer p {
  padding: 0 0 24px 0;
  font-size: 15px;
  color: #6b7ca6;
}

/* Active state */
/*.faq-item.active .faq-answer {
  max-height: 200px;
}*/

/*.faq-item.active .icon {
  transform: rotate(45deg);
}
*/

/* Minus when active */
.faq-item.active .icon::before {
  content: "–";
}

/* ===== ANSWER (SMOOTH HEIGHT) ===== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}

/* Active state */
.faq-item.active .faq-answer {
  max-height: 500px; /* large safe value */
  opacity: 1;
}

/* Answer text */
.faq-answer p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

/* ===== MOBILE TUNING ===== */
@media (max-width: 768px) {
    
    .faq-title {
  font-size: 32px;
    }
  .faq-question {
    align-items: flex-start;
  }

  .faq-question span {
    font-size: 15px;
  }

  .faq-answer p {
    font-size: 14px;
  }
}

/*schecule demo*/

.demo-section {
  background: #dbe6ff;
  padding: 60px 60px;
  margin: 40px;
}

.demo-container {
/*  max-width: 1200px;*/
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: stretch; /* important */
}

/* LEFT */
.demo-left {
  flex: 1;
}

/*.demo-left {
  display: flex;
  flex-direction: column;
  height: 100%;
}*/

.demo-left {
  flex: 0 0 45%;
/*  padding: 0 70px 0 90px;*/
  position: relative;      /* anchor absolute globe */
}

.demo-left h1 {
  font-size: 52px;
  margin-bottom: 10px;
  color: #0b1437;
   font-family: 'Agdasima', sans-serif;
    font-weight: 400;
}

.subtitle {
  font-size: 18px;
  margin-bottom: 30px;
   font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

.contact-info {
  margin-bottom: 40px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 15px;
   font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}


.contact-info .info-item {
  display: flex;
  align-items: center;   /* ✅ vertical centering */
  gap: 12px;
}

.contact-info .info-item span {
  display: flex;         /* ✅ fixes baseline issue */
  align-items: center;
  justify-content: center;
}

.contact-info .info-item img {
  width: 18px;           /* adjust if needed */
  height: 18px;
  display: block;        /* ✅ removes inline-image gap */
}

.contact-info .info-item p {
  margin: 0;
  line-height: 1.4;
}

.globe {
  margin-top: auto;   /* ✅ THIS pushes image to bottom */
}

.globe {
  position: absolute;
  bottom: -60px;               /* force touch bottom */
  left: 0px;              /* align with text */
}

.globe img {
  width: 350px;
  display: block;
}

/*.globe img {
  width: 220px;
  margin-top: -4px;
  position: absolute;
}*/
/* RIGHT FORM CARD */
.demo-right {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 40px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group label {
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
   font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

textarea {
  height: 120px;
  resize: none;
   font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

.form-group.full {
  margin-top: 20px;
}

.demo-section .demo-btn {
  margin-top: 30px;
  background: #0a2a7a;
  color: #fff!important;
  padding: 14px 28px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  float: right;
  font-family: 'Instrument Sans', sans-serif;
}

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

    .demo-section {
  
  margin: 0px;
}

    .demo-left {
  flex: 0 0 45%;
  padding: 0px;
  position: relative;      /* anchor absolute globe */
}

    .demo-section {
    background: #dbe6ff;
    padding: 60px 30px;
}

  .demo-container {
    flex-direction: column;
    gap:0px;
  }

  .demo-left h1 {
    font-size: 36px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .demo-btn {
    float: none;
    width: 100%;
  }

  .globe {
    display: none;
  }

  .demo-section form{
    overflow-y: unset;
        height: 100%;
  }

  .demo-section .demo-btn {
  margin-top: 30px;
  background: #0a2a7a;
  color: #fff!important;
  padding: 14px 28px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  float: none;
  font-family: 'Instrument Sans', sans-serif;
  width:100%!important;
}

}


/*esg messge*/

.esg-section {
/*    background: #000;*/
    padding: 80px 50px;
}

.esg-container {
/*    max-width: 1300px;*/
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 0 20px;
}

.esg-left {
    width: 50%;
    color: #fff;
}

.esg-left h2 {
    font-size: 52px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 28px;
     font-family: 'Agdasima', sans-serif;
    font-weight: 400;
    color:#040C1F;
}

.esg-left p {
    font-size: 18px;
    line-height: 1.7;
    color: #525252;
    margin-bottom: 18px;
    max-width: 620px;
     font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

/* RIGHT IMAGE */
.esg-right {
    width: 50%;
    display: flex;
    justify-content: flex-end;
}

.esg-right img {
    width: 100%;
    max-width: 550px;
    border-radius: 6px;
    object-fit: cover;
}


@media (max-width: 768px) {
    
    .esg-section {
    /* background: #000; */
    padding: 80px 0px;
}

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

    .esg-left, .esg-right {
        width: 100%;
    }

    .esg-left h2 {
        font-size: 34px;
    }

    .esg-left p {
        max-width: 100%;
    }

    .esg-right {
        justify-content: center;
    }
}


/*framework*/


.greenarc-section {
    background: radial-gradient(ellipse at center, #0b1340 0%, #050a26 80%);
    padding: 100px 20px 110px;
    color: #fff;
}

.greenarc-container {
    max-width: 1250px;
    margin: 0 auto;
    text-align: center;
}

/* TITLE */
.greenarc-title {
    font-size: 52px;
    font-weight: 300;
    line-height: 1.25;
    margin-bottom: 22px;
    font-family: 'Agdasima', sans-serif;
    font-weight: 400;
}

/* SUBTITLE */
.greenarc-subtitle {
    max-width: 820px;
    margin: 0 auto 90px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
     font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

/* STEPS */
.greenarc-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
    position: relative;
}

/* VERTICAL DIVIDERS */
.greenarc-steps::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25%;
    width: 1px;
    background: rgba(255,255,255,0.15);
}
.greenarc-steps::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(255,255,255,0.15);
}

.greenarc-steps .step:nth-child(3)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -30px;
    width: 1px;
    background: rgba(255,255,255,0.15);
}

/* STEP */
.step {
    text-align: left;
    position: relative;
}

.icon {
    display: inline-block;
    font-size: 26px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.step h4 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 14px;
    font-family: 'Agdasima', sans-serif;
    font-weight: 400;
}

.step p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
    max-width: 260px;
     font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}


@media (max-width: 992px) {

    .step {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.step:nth-child(4){
        border-bottom: none;
    }

.icon {
  flex-shrink: 0;
  width: 40px;
}

.icon img {
  width: 100%;
  display: block;
}

.step-content {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.step-content h4 {
  margin: 0 0 6px;
}

.step-content p {
  margin: 0;
}


    .greenarc-steps {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .greenarc-steps::before,
    .greenarc-steps::after,
    .greenarc-steps .step:nth-child(3)::after {
        display: none;
    }

    .step {
        text-align: left;
    }

    .step p {
        margin: 0 auto;
    }

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


/*why-impactree*/

.why-impactree{
/*  background:#000;*/
  color:#fff;
  padding:80px 0;
  font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

/* ===== Heading ===== */
.impact-heading{
  width:90%;
  max-width:1200px;
  margin:0 auto 60px;
   font-family: 'Agdasima', sans-serif;
    font-weight: 400;
    color:#040C1F;
}

.impact-heading h2{
  font-size:52px;
  font-weight:500;
  line-height:1.2;
  margin-bottom:18px;
   font-family: 'Agdasima', sans-serif;
    font-weight: 400;
    color:#040C1F;
}

.impact-heading p{
  max-width:720px;
  color:#888;
  font-size:16px;
   font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

/* ===== Layout ===== */
.impact-container{
  width:90%;
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:50px;
}

/* ===== Tabs ===== */
.impact-tabs{
  width:35%;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.impact-tabs .tab{
  /*background:#fff;
  color:#111;
  padding:14px 20px;
  border-radius:30px;
  border:none;
  text-align:left;
  font-size:14px;
  cursor:pointer;
  transition:.25s ease;
  width: 100%;
*/
  background: #F1F1F1;
  color: #0b1c3e;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align:left;
  font-size:14px;
  cursor:pointer;
  border:1px solid #f0dca200!important;
  
}

.tab.active{
  background:transparent;   
  color:#000;
   border-radius: 999px;
   border-color:#042067!important;
}

/* ===== Image ===== */
.impact-image{
  width:30%;
}

.impact-image img{
  width:100%;
  border-radius:12px;
  display:block;
}

/* ===== Text ===== */
.impact-content{
  width:35%;
}

.impact-content p{
  font-size:15px;
  line-height:1.6;
  color:#8d8d8d;
   font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

/* ===== Mobile ===== */
@media(max-width:768px){
  .impact-container{
    flex-direction:column;
/*    text-align:center;*/
  }

  .impact-tabs .tab{
    width: 100%;
    text-align: left;
  }

  .impact-tabs,
  .impact-image,
  .impact-content{
    width:100%;
  }

  .impact-heading h2{
  font-size:32px;
}
}


/*CTA*/

.cta-hero{
/*  background:#000;*/
  padding:80px 0;
   font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

.cta-container{
  width:90%;
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:80px;
}

/* LEFT IMAGE */
.cta-image{
  width:45%;
}

.cta-image img{
  width:100%;
  border-radius:14px;
  display:block;
}

/* RIGHT CONTENT */
.cta-content{
  width:55%;
  color:#fff;
}

.cta-content h2{
  font-size:52px;
  line-height:1.2;
  font-weight:500;
  margin-bottom:22px;
  font-family: 'Agdasima', sans-serif;
    font-weight: 400;
    color:#040C1F;
}

.cta-content p{
  font-size:16px;
  color:#8b8b8b;
  max-width:520px;
  margin-bottom:34px;
   font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}

/* CTA BUTTON */
.cta-btn{
  display:inline-block;
  padding:14px 28px;
  background:#0b2a57;
  color:#fff;
  font-size:14px;
  text-decoration:none;
  font-weight:500;
  letter-spacing:.5px;
  border-radius:2px;
  transition:.25s ease;
   font-family: 'Instrument Sans', sans-serif;

}

.cta-btn:hover{
  background:#123a78;
}

/* MOBILE */
@media(max-width:768px){
  .cta-container{
    flex-direction:column;
    text-align:left;
    gap:40px;
  }

  .cta-image,
  .cta-content{
    width:100%;
  }

  .cta-content p{
    margin-left:auto;
    margin-right:auto;
  }

  .cta-content h2{
  font-size:32px;
}
}


/*Innovation page*/

.impact-section2 {
    width: 100%;
    padding: 80px 0;
    background: #ffffff; /* keep white like image */
}

.impact-section2 .impact-container {
/*    max-width: 1200px;*/
    margin: 0 auto;
    text-align: center;
    display: block;
}

.impact-subtitle {
    font-size: 32px;
    font-weight: 400;
    color: #0E1A33; /* dark navy like screenshot */
    margin-bottom: 40px;
   font-family: 'Agdasima', sans-serif;
    font-weight: 400;

}

.impact-heading {
    font-size: 42px;
    font-weight: 400;
    line-height: 1.3;
    color: #4A4A4A; /* grey tone exactly like the image */
    
       font-family: 'Schibsted Grotesk', sans-serif;
    font-weight: 400;
}


@media(max-width:768px){

    .impact-heading {
    font-size: 20px;
   
}

.impact-section2 {
    width: 100%;
    padding: 60px 0px 0px 0px;
}

}


/* ====================== */
/* MAIN FRACTAL SECTION   */
/* ====================== */

.fractal-section {
    width: 100%;
    padding: 40px;
/*    background: #000;*/
}

.fractal-wrapper {
    position: relative;
    width: 100%;
    height: 460px;
    background: url('../assets/images/innovation/fractalsbg.png') center/cover no-repeat;
    border-radius: 16px;
/*    overflow: hidden;*/
/*    z-index: 1;*/
}

.fractal-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
/*    background: rgba(0, 0, 0, 0.64); */
/*    z-index: 2*/
}

/* Text Box Overlay */
.fractal-content {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 50%;
    color: #fff;
    z-index: 3;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6); 
}

.fractal-content h2 {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: 'Bai Jamjuree', sans-serif;
}

.fractal-content p {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.9;
    font-family: 'Schibsted Grotesk', sans-serif;
}

/* Icon top-right */
.fractal-icon {
    position: absolute;
    top: -20px;
    right: 30px;
}

.fractal-icon img {
    width: 90px;
    height: 90px;
    border-radius: 12px;
}


/* ====================== */
/* BOTTOM REGULATORY ROW */
/* ====================== */

.reg-section {
/*    background: #000;*/
    color: #fff;
    margin-top: 40px;
       padding: 0px 40px 60px 40px;
}

.reg-title {
    font-size: 36px;
    color: #040C1F; 
    margin-bottom: 40px;
    font-family: 'Agdasima', sans-serif;
    font-weight: 400;
}

.reg-grid {
    display: grid;
    grid-template-columns: 1fr 2px 1fr 2px 1fr;
    gap: 30px;
    align-items: start;
}

.reg-item {
    font-size: 18px;
    line-height: 1.6;
    color: #525252;
    font-family: 'Schibsted Grotesk', sans-serif;
}

.reg-divider {
    width: 1px;
    background: #3a3a3a;
    height: 100%;
    margin: 0 auto;
}


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

    .fractal-wrapper {
        height: 380px;
    }

    .fractal-content {
        width: 60%;
        top: 30px;
        left: 30px;
        padding: 18px;
    }

    .fractal-content h2 {
        font-size: 36px;
    }

    .fractal-icon img {
        width: 75px;
        height: 75px;
    }

    .reg-title {
        font-size: 30px;
    }
}


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


.fractal-icon {
    position: absolute;
    top: -20px;
}

    .fractal-section {
        padding: 20px;
    }

    .fractal-wrapper {
        height: auto;
        padding-bottom: 40px;
    }

    .fractal-content {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.55);
        border-radius: 10px;
        margin-top: 30px; 
    }

    .fractal-content h2 {
        font-size: 30px;
    }

    .fractal-icon {
/*        top: 10px;*/
        right: 10px;
    }

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

    /* Regulatory grid stacks vertically */
    .reg-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .reg-divider {
        display: none;
    }

    .reg-title {
        font-size: 28px;
        text-align: left;
    }
}


/* ===== Small Mobile (max-width: 480px) ===== */
@media (max-width: 480px) {

    .fractal-content h2 {
        font-size: 26px;
    }

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

    .fractal-icon img {
        width: 60px;
        height: 60px;
    }

     .reg-section {
        margin-top:0px;
        padding: 50px 20px;
    }

    .reg-title {
        font-size: 28px;
        text-align: left;
    }

    /* STACK 1 COLUMN WITH DIVIDERS */
    .reg-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        position: relative;
    }

    .reg-item {
        padding: 10px 0;
        text-align: left;
    }

    /* Divider for every item */
    .reg-item:not(:last-child) {
        border-bottom: 1px solid #3a3a3a;
        padding-bottom: 20px;
        margin-bottom: 10px;
    }

    /* Hide vertical dividers on mobile */
    .reg-divider {
        display: none;
    }
}


/*codex*/

/* MAIN WRAPPER */
.codex-section {
    width: 100%;
    padding: 40px;
    color: #fff;
    font-family: 'Schibsted Grotesk', sans-serif;
}

/* TOP BANNER */
.codex-wrapper {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: 14px;
    background: url('../assets/images/innovation/codexbg.png') center/cover no-repeat;
/*    overflow: hidden;*/
}

/* ICON */
.codex-icon {
    position: absolute;
    top: -25px;
    left: 20px;
    z-index: 5;
}

.codex-icon img {
    width: 85px;
    height: 85px;
    border-radius: 12px;
}

/* RIGHT-SIDE GLASS BOX */
.codex-content {
    position: absolute;
    right: 40px;
    top: 40px;
    width: 45%;
    padding: 30px;
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

.codex-content h2 {
    font-size: 38px;
    font-weight: 500;
    margin-bottom: 16px;
     font-family: 'Bai Jamjuree', sans-serif;
   
}

.codex-content p {
    line-height: 1.6;
    font-size: 16px;

}

/* BOTTOM SECTION */
.codex-bottom {
    margin-top: 40px;
     padding: 0px 40px 60px 40px;
}

.bottom-title {
   color: #040C1F; 
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 30px;
    font-family: 'Agdasima', sans-serif;
    font-weight: 400;
}

/* GRID */
.bottom-grid {
    display: grid;
    grid-template-columns: 1fr 2px 1fr 2px 1fr;
    gap: 30px;
    align-items: start;
    color: #525252;

}

.grid-item {
    color: #8f8f8f;
    font-size: 18px;
    line-height: 1.6;
}

.divider {
    background: #2e2e2e;
    width: 2px;
    height: 100%;
}

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

    .codex-content {
        width: 60%;
        right: 20px;
        top: 30px;
        padding: 25px;
    }

    .codex-content h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {

    .codex-section {
    width: 100%;
    padding: 0px;

}

    .codex-wrapper {
        height: auto;
        padding-bottom: 40px;
    }

    .codex-content {
        position: relative;
        width: 100%;
        right: 0;
        top: 0;
        margin-top: 30px;
    }

    .codex-icon {
        top: -60px;
    }

    /* Bottom grid = stacked */
    .bottom-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .divider {
        display: none;
    }

    .grid-item {
        padding-bottom: 15px;
        border-bottom: 1px solid #2e2e2e;
    }

    .grid-item:last-child {
        border-bottom: none;
    }

    .bottom-title {
        text-align: left;
        font-size: 28px;
    }
}



/*eden*/


/* === EDEN / AI Suite SECTION === */

.eden-section {
  width: 100%;
  padding: 40px;
  color: #fff;
  font-family: 'Schibsted Grotesk', sans-serif;
}

.eden-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: 16px;
  background: url('../assets/images/innovation/edenbg.png') center/cover no-repeat;
/*  overflow: hidden;*/
}

/* overlay shade (optional) */
.eden-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1;
}

.eden-icon {
  position: absolute;
  top: -20px;
  right: 30px;
  z-index: 5;
}

.eden-icon img {
  width: 90px;
  height: 90px;
  border-radius: 12px;
}

.eden-content {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 45%;
  padding: 25px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  z-index: 3;
}

.eden-content h2 {
  font-size: 38px;
  font-weight: 500;
  margin-bottom: 18px;
  font-family: 'Bai Jamjuree', sans-serif;
}

.eden-content p {
  font-size: 16px;
  line-height: 1.6;
}

/* Bottom grid section */
.eden-bottom {
  margin-top: 50px;
/*  padding: 0 20px;*/
      padding: 0px 40px 60px 40px;
}

.eden-bottom .bottom-title {
  font-size: 36px;
  color: #040C1F;
  margin-bottom: 30px;
  font-family: 'Agdasima', sans-serif;
    font-weight: 400;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 2px 1fr 2px 1fr;
  gap: 30px;
  align-items: start;
}

.grid-item {
  font-size: 18px;
  line-height: 1.6;
  color: #525252;
}

.divider {
  background: #444;
  width: 2px;
  height: 100%;
}

/* === RESPONSIVE RULES === */

@media (max-width: 992px) {
  .eden-wrapper {
    height: 360px;
  }
  .eden-content {
    width: 60%;
    left: 20px;
    top: 30px;
    padding: 20px;
  }
  .eden-content h2 {
    font-size: 32px;
  }
  .eden-icon img {
    width: 70px;
    height: 70px;
  }
  .bottom-title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {

     .eden-bottom {
        padding: 50px 20px;
        margin-top: 0px;
    }

  .eden-section {
    padding: 20px 10px;

  }
  .eden-wrapper {
    height: auto;
    padding-bottom: 60px;
  }
  .eden-content {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
/*    margin-top: 20px; */
  }
  .eden-icon {
    top: -20px;
    right: 15px;
  }
  .bottom-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .divider {
    display: none;
  }
  .grid-item {
    border-bottom: 1px solid #444;
    padding-bottom: 20px;
  }
  .grid-item:last-child {
    border-bottom: none;
  }
  .bottom-title {
    text-align: left;
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .eden-content h2 {
    font-size: 28px;
  }
  .eden-content p {
    font-size: 14px;
  }
  .eden-icon img {
    width: 60px;
    height: 60px;
  }
}


/*why it matters*/

/*.matter-section {
    width: 100%;
    padding: 60px 40px;
}

.matter-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.matter-text {
    width: 45%;
    color: #E0E0E0;
}

.matter-text h2 {
    font-size: 52px;
    font-weight: 400;
    margin-bottom: 25px;
    color: #040C1F;
    font-family: 'Agdasima', sans-serif;
}

.matter-text p {
    font-size: 18px;
    line-height: 1.7;
    color: #525252;
    font-family: 'Schibsted Grotesk', sans-serif;
}

.matter-image {
    width: 55%;
    position: relative;
}

.matter-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transform: translateY(20px); 
}



@media (max-width: 992px) {
    .matter-container {
        flex-direction: column-reverse;
        text-align: center;
    }

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

    .matter-image {
        width: 90%;
    }

    .matter-text h2 {
        font-size: 40px;
    }
}

@media (max-width: 600px) {
    .matter-section {
        padding: 30px 15px;
    }

    .matter-text h2 {
        font-size: 34px;
    }

    .matter-text p {
        font-size: 15px;
    }

    .matter-image {
        width: 100%;
    }
}
*/

.matter-section {
    display: flex;
    align-items: center;   /* center text vertically */
    justify-content: flex-start;
    height: 100vh;
    background: url('../assets/images/innovation/why-matters.png') no-repeat right center;
    background-size: cover;
/*    padding: 0 60px;*/
}

.matter-text {
    width: 40%;
}

/* Background dark/blue overlay if needed */
.matter-overlay {
    width: 100%;
    height: 100%;
/*    background: linear-gradient(to right, #000000eb 40%, transparent 100%);*/
    display: flex;
    align-items: flex-start;
    padding-left: 60px; /* text spacing */
}

.matter-text {
    width: 40%;
    color: white;
}

.matter-text h2 {
    font-size: 52px;
    font-weight: 400;
    margin-bottom: 25px;
    color: #040C1F;
    font-family: 'Agdasima', sans-serif;
}

.matter-text p {
    font-size: 18px;
    line-height: 1.7;
/*    opacity: 0.9;*/
    color: #525252;
    font-family: 'Schibsted Grotesk', sans-serif;
}

/* Responsive */
@media(max-width: 992px){
   /* .matter-section{
        height: auto;
        background-position: center;
    }*/
    .matter-overlay{
/*        padding: 40px 20px;*/
padding-left: 0px;
    }
    .matter-text{
        width: 100%;
        text-align: left;
    }
    .matter-text h2{
        font-size: 38px;
    }
}


@media (max-width: 768px) {
    .matter-section {
        flex-direction: column;
        height: auto;
        padding: 20px;
        background: none;  /* remove desktop background image */
        text-align: left;
    }

    .matter-section::after {
        content: "";
        width: 100%;
        height: 300px; /* adjust for mobile */
        background: url('../assets/images/innovation/why-matters.png') no-repeat center;
        background-size: cover;
        display: block;
        border-radius: 0;
        margin-top: 20px;
    }

    .matter-text {
        width: 100%;
    }
}