:root{
  --o2b-bg: #EEF2FF;          /* light lavender background */
  --o2b-text: #0F172A;        /* dark heading */
  --o2b-muted: #475569;       /* paragraph */
  --o2b-blue: #2563EB;        /* primary button */
  --o2b-blue-100: #DCE8FF;    /* pill bg */
  --o2b-blue-200: #BFD6FF;    /* pill border */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: "Inter", sans-serif;
  color: var(--o2b-text);
}

/* SECTION */
.o2b-hero{
  background: var(--o2b-bg);
  padding: 56px 0;
}

/* container width like screenshot (wide, but not full) */
.o2b-hero-container{
  max-width: 1140px;
}

/* LEFT */
.o2b-left{
  padding-right: 18px;
}

.o2b-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background:linear-gradient(135deg,#0066FF1A,#7C3AED1A);
  border: 1px solid var(--o2b-blue-200);
  color: var(--o2b-blue);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  margin-bottom: 18px;
}

.o2b-pill-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--o2b-blue);
}

.o2b-title{
  font-weight: 800;
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
}

.o2b-subtitle{
  max-width: 520px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--o2b-muted);
  margin: 0 0 22px 0;
}

/* CTA buttons */
.o2b-cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.o2b-btn-primary{
  background: var(--o2b-blue);
  color: #fff !important;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid var(--o2b-blue);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}
.o2b-btn-primary:hover{
  filter: brightness(0.95);
}

.o2b-btn-outline{
  background: #fff;
  color: var(--o2b-blue) !important;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid rgba(37, 99, 235, 0.35);
}
.o2b-btn-outline:hover{
  background: rgba(37, 99, 235, 0.06);
}

/* RIGHT IMAGE CARD */
.o2b-right{
  display: flex;
  justify-content: flex-end;
}

.o2b-image-card{
  width: 100%;
  max-width: 540px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 5px 20px rgba(2, 6, 23, 0.5);
}

.o2b-image{
  width: 100%;
  height: 290px;
  object-fit: cover;
  display: block;
}

/* RESPONSIVE (matches screenshot mobile intent) */
@media (max-width: 991.98px){
  .o2b-hero{ padding: 36px 0; }

  .o2b-left{
    padding-right: 15px;
    margin-bottom: 22px;
  }

  .o2b-title{
    font-size: 38px;
  }

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

  .o2b-image-card{
    max-width: 680px;
  }

  .o2b-image{
    height: 260px;
  }
}

@media (max-width: 575.98px){
  .o2b-title{ font-size: 32px; }
  .o2b-subtitle{ font-size: 15px; }
  .o2b-image{ height: 220px; }

  .o2b-btn-primary,
  .o2b-btn-outline{
    width: auto;
    padding: 10px 14px;
  }
}


/* ================================================= */

.o2b-benefits{
  background: #ffffff;
  padding: 56px 0 44px;
  font-family: "Inter", sans-serif;
}

.o2b-benefits-head{
  margin-bottom: 34px;
}

.o2b-benefits-title{
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  color: #0F172A;
  max-width: 700px;
  margin: 0 auto  10px auto;
  font-family: "Manrope", sans-serif;
}

.o2b-benefits-subtitle{
  max-width: 840px;
  margin: 10px auto  0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: #64748B;
}

/* grid spacing */
.o2b-benefits-grid{
  margin-top: 12px;
}

/* card base */
.o2b-card{
  border-radius: 12px;
  background: #F6F7FF;           /* soft lavender-grey like screenshot */
  border: 1px solid #EEF0F7;
  padding: 20px;
  height: 100%;
}

/* active (first card) */
.o2b-card:hover{
  background: linear-gradient(135deg,#EDE3FF,#AAF0FD);           /* light blue highlight */
  border-color: rgba(37, 99, 235, 0.0);
}

/* icon box */
.o2b-card-icon{
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #0000001A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563EB;
  margin-bottom: 12px;
  box-shadow:  0 2px 2px #0000001A;
}

/* title & text */
.o2b-card-title{
  font-size: 19px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 8px 0;
  line-height: 1.35;
  font-family: "Manrope", sans-serif;
}

.o2b-card-text{
  font-size: 15px;
  line-height: 1.6;
  color: #4A5565;
  margin: 0;
}

/* on active card: keep readable like screenshot */
.o2b-card--active .o2b-card-text{
  color: rgba(15, 23, 42, 0.65);
}

/* responsive like screenshot */
@media (max-width: 991.98px){
  .o2b-benefits{ padding: 44px 0 52px; }
  .o2b-benefits-title{ font-size: 26px; }
}
@media (max-width: 575.98px){
  .o2b-benefits-title{ font-size: 22px; }
  .o2b-benefits-subtitle{ font-size: 12px; }
}
/* =============================================== */

/* ===== Culture Section ===== */
.o2b-culture{
  background: #ffffff;
  padding: 30px 0;
  font-family: "Inter", sans-serif;
}

.o2b-culture-left{
  padding-right: 30px;
}

.o2b-culture-title{
  font-size: 36px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px;
   font-family: "Manrope", sans-serif;
}

.o2b-culture-subtitle{
  font-size: 17px;
  line-height: 1.6;
  color: #4A5565;
  max-width: 520px;
  margin-bottom: 20px;
}

/* List */
.o2b-culture-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.o2b-culture-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.o2b-culture-list .dot{
  width: 8px;
  height: 8px;
  background: #2563EB;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}

.o2b-culture-list h6{
  font-size: 16px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 2px;
}

.o2b-culture-list p{
  font-size: 15px;
  color: #4A5565;
  line-height: 1.6;
  margin: 0;
}

/* Image card */
.o2b-culture-right{
  display: flex;
  justify-content: flex-end;
}

.o2b-culture-image-card{
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.12);
}

.o2b-culture-image-card img{
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 991.98px){
  .o2b-culture{
    padding: 44px 0;
  }

  .o2b-culture-left{
    padding-right: 15px;
    margin-bottom: 24px;
  }

  .o2b-culture-right{
    justify-content: center;
  }

  .o2b-culture-image-card img{
    height: 260px;
  }
}

@media (max-width: 575.98px){
  .o2b-culture-title{
    font-size: 22px;
  }
  .o2b-culture-subtitle{
    font-size: 13px;
  }
}
/* ======================================================= */
/* ===== Open Positions Section ===== */
.o2b-jobs{
    padding: 30px 0px;
}

.o2b-jobs-head{
  margin-bottom: 22px;
}

.o2b-jobs-title{
  font-size: 36px;
  font-weight: 700;
  color: #101828;
  margin: 0;
  font-family: "Manrope", sans-serif;
}

.o2b-jobs-subtitle{
  font-size: 18px;
  color: #4A5565;
  letter-spacing: 0px;
  margin: 6px 0 0;
}

/* Job Card Container */
.o2b-job-card{
  border: 1px solid #EEF0F7;
  background: #ffffff;
  border-radius: 10px;
  padding: 18px;
  margin-top: 18px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
}

/* ===== FIXED TOP ROW (title + pill) ===== */
.o2b-job-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;                 /* ✅ spacing between title and pill */
  margin-bottom: 6px;
}

.o2b-job-role{
  font-size: 22px;
  font-weight: 800;
  color: #101828;
  margin: 0;
  line-height: 1.3;          /* ✅ better vertical alignment */
  padding-right: 10px;       /* ✅ prevents pill touching title */
}

.o2b-exp-pill{
  font-size: 12px;
  font-weight: 700;
  color: #0066FF;
  background: #0066FF1A;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #D8E7FF;
  white-space: nowrap;       /* ✅ keeps pill on one line */
  flex-shrink: 0;            /* ✅ prevents squish */
  margin-top: 2px;
}

/* Left Column */
.o2b-job-left{
  padding-right: 10px !important;
}

/* Meta row */
.o2b-job-meta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 400;
  color: #4A5565;
  margin-bottom: 10px;
}

.o2b-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Description */
.o2b-job-desc{
  font-size: 14px;
  color: #4A5565;
  margin: 0 0 10px;
  line-height: 1.6;
}

/* Requirements */
.o2b-req-title{
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px;
  font-family: "Manrope", sans-serif;
}

.o2b-req-list{
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  color: #4A5565;
  line-height: 1.7;
}

/* ===== RIGHT COLUMN (spacing fixed) ===== */
.o2b-job-right{
  padding-left: 28px;        /* ✅ bigger visual gap */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Salary Box */
.o2b-salary-box{
  border-radius: 10px;
  background: #F6F7FF;
  border: 1px solid #EEF0F7;
  padding: 20px;
  margin-bottom: 12px;
  width: 100%;               /* ✅ fills right column */
}

.o2b-job-card:hover .o2b-salary-box{
  background: linear-gradient(135deg,#EDE3FF,#AAF0FD);
  border-color: rgba(37, 99, 235, 0.0);
}

.o2b-salary-label{
  font-size: 12px;
  color: #4A5565;
  margin-bottom: 4px;
}

.o2b-salary-value{
  font-size: 20px;
  font-weight: 800;
  color: #101828;
  margin-bottom: 3px;
}

.o2b-salary-note{
  font-size: 12px;
  color: #4A5565;
}

/* Apply Button */
.o2b-apply-btn{
  background: #0066FF;
  border: 1px solid #0066FF;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}
.o2b-apply-btn:hover{
  filter: brightness(0.95);
}

/* Responsive */
@media (max-width: 991.98px){
  .o2b-job-left{ padding-right: 0; }
  .o2b-job-right{
    padding-left: 0;
    margin-top: 18px;
  }
}
/* ===================================================== */

/* ===== Our Hiring Process ===== */
.o2b-hiring{
  background: #ffffff;
  padding: 56px 0 34px;
  font-family: "Manrope", sans-serif;
}

.o2b-hiring-head{
  margin-bottom: 26px;
}

.o2b-hiring-title{
  font-size: 36px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 6px 0;
}

.o2b-hiring-subtitle{
  font-size: 18px;
  color: #4A5565;
  margin: 0;
}

/* Steps */
.o2b-step{
  padding: 8px 10px;
}

.o2b-step-circle{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}

.step-blue{ background: #0066FF; }
.step-teal{ background: #06B6D4; }
.step-purple{ background: #7C3AED; }
.step-orange{ background: #FF8A5B; }

.o2b-step-title{
  font-size: 16px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 6px 0;
}

.o2b-step-desc{
  font-size: 14px;
  font-weight: 400;
  color: #4A5565;
  line-height: 1.55;
  margin: 0;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Gradient CTA Band ===== */
.o2b-cta-band{
  padding: 58px 0;
  background: linear-gradient(180deg, #0066FF 0%, #6D28D9 100%);
  font-family: "Manrope", sans-serif;
}

.o2b-cta-title{
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.o2b-cta-subtitle{
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 18px 0;
  font-family: "Inter", sans-serif;
}

.o2b-cta-btn{
  background: #ffffff;
  color: #0066FF !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}
.o2b-cta-btn:hover{
  background-color: #e5e5e5;
}

/* Responsive */
@media (max-width: 575.98px){
  .o2b-hiring-title{ font-size: 26px; }
  .o2b-cta-title{ font-size: 22px; }
}