/* ===== Base & Tokens ===== */
:root {
    --oneta-yellow: #F1DB17;
    /* accent */
    --oneta-yellow-200: #ffe06d;
    /* lighter accent for borders */
    --dark-1: #000;
    /* header bg */
    --dark-2: #111319;
    /* nav bg */
    --dark-3: #0b0b0b;
    /* deep footers */
    --muted: #6c757d;
    --light-blue: #eaf3ff;
    /* section 1 background */
    --light-blue-2: #e6f0ff;
    /* alt background */
    --black: #000;
    --white: #fff;
}

html,
body {
    height: 100%
}

body {
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    color: #1b1b1b;
    background: #fff;
}

.money-green {
    color: #E6F0FA;
}

.oneta-yellow {
    color: var(--oneta-yellow);
}

/* ===== Header ===== */
.topbar {
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.navbar-brand img {
    display: block
}


.bg-dark-2 {
    background: var(--dark-2)
}

.nav-primary .nav {
    background-color: var(--black);
}

.nav-primary .nav-link {
    color: var(--white);
    padding: .35rem .75rem;
    border-radius: .25rem;
}

.nav-primary .nav-link:hover {
    color: var(--oneta-yellow);
}

.nav-primary .dropdown-menu {
    background: var(--black);
}

.nav-primary .dropdown-menu .dropdown-item {
    color: var(--white);
}

.nav-primary .dropdown-menu .dropdown-item:hover {
    background: var(--oneta-yellow);
    color: var(--black);
}

/* FULL-SCREEN OFFCANVAS */
.offcanvas-full {
  width: 100vw !important;
  max-width: 100% !important;
  height: 100vh;
  background: #000;
  color: #fff;
}

/* body scroll inside, header fixed at top */
.offcanvas-full .offcanvas-body {
  height: calc(100vh - 56px);    /* header ~56px high */
  overflow-y: auto;
}

/* INNER LAYOUT: two columns */
.offcanvas-inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(420px, 2fr);
  gap: 3rem;
}

/* LEFT MENU */
.offcanvas-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.offcanvas-nav {
  display: flex;
  align-items: center;            /* vertical centre like reference */
  height: 100%;
}

.offcanvas-link {
  display: block;
  font-size: 1.625rem;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
  margin-bottom: 1rem;
}

.offcanvas-link:hover {
  color: #f0c300;                 /* your yellow accent */
}

/* RIGHT MEDIA COLUMN */
.offcanvas-media-col {
  height: 100%;
  overflow-y: auto;               /* only media side scrolls when tall */
}

/* Masonry-ish grid */
.offcanvas-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Tiles */
.media-tile {
  position: relative;
  border-radius: .6rem;
  overflow: hidden;
  height: 140px;
}

.media-tile-tall {
  height: 260px;
}

.media-tile-wide {
  grid-column: 1 / -1;            /* span both columns */
  height: 220px;
}

.media-tile img,
.media-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* RESPONSIVE – on small screens show just the menu like the site */
@media (max-width: 991.98px) {
  .offcanvas-inner {
    grid-template-columns: 1fr;   /* stack */
  }
  .offcanvas-media-col {
    display: none;                /* hide media column on narrow view */
  }
  .offcanvas-full .offcanvas-body {
    height: auto;
  }
}


/* ===== Hero ===== */
.hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .15) 100%)
}

.hero .container-xl {
    padding-top: 3rem;
    padding-bottom: 3.25rem
}

.text-white-75 {
    color: rgba(255, 255, 255, .85) !important
}

.btn-oneta {
    border: none;
    background: var(--oneta-yellow);
    color: #000;
    border: none;
    font-weight: 600;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25)
}

.btn-oneta:hover {
    background: var(--black);
    color: var(--oneta-yellow);
}

/* ===== Sections ===== */
.section-title {
    font-weight: 600
}

.section-light {
    background: #E6F0FA;
    padding: 1.25rem 0
}

.value-card {
    background: #fff;
    border-radius: .35rem;
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 1rem .9rem;
    box-shadow: 0 .25rem .65rem rgba(0, 0, 0, .04);
    width: 100%;
    height: 100%;
}

.icon-round {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    background: #000;
    color: var(--oneta-yellow);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.icon-round img {
    max-width: 100%;
    height: auto;
}

.value-total {
    background: #000;
    color: #fff;
    border-radius: .35rem;
    padding: 1.25rem 1.15rem;
    box-shadow: 0 .25rem .65rem rgba(0, 0, 0, .08);
    width: 100%;
    height: 100%;
}

.value-total .text-oneta {
    color: var(--oneta-yellow);
    font-weight: 600
}

/* Pricing cards */
.pricing-header {
    background: var(--black);
    color: var(--white);
}

.pricing-header>div:first-of-type {
    color: var(--oneta-yellow);
}

.section-light .border {
    background-color: var(--black);
}

/* Ribbon banner with yellow edges */
.ribbon-banner {
    padding: 2.75rem 0;
}

/* outer card with yellow glow – NOT lines */
.banner-card {
    position: relative;
    border-radius: .6rem;
    overflow: hidden;

    /* subtle yellow halo + drop shadow */
    box-shadow:
        0 0 0 0 rgba(0,0,0,0),
        0 0 0 3px rgba(240,195,0,.9),      /* yellow outline/glow */
        0 10px 24px rgba(0,0,0,.25);       /* soft drop shadow */
}

.banner-img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: .6rem;
}

/* light darkening, not as strong as the founder banner */
.banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
}

/* center text + button in the middle of the image */
.banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    z-index: 1;
}

.banner-title {
    color: #fff;
    font-weight: 600;
    font-size: 2.25rem;
}

/* button with yellow circular icon on the left */
.banner-btn {
    background: #fff;
    color: #000;
    border: none;
    padding: .55rem 1.8rem .55rem 1.3rem;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.banner-btn:hover{
    background: var(--black);
    color: var(--white);
}

.banner-btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--oneta-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #000;
}

/* small tweaks for smaller screens */
@media (max-width: 768px) {
    .banner-title {
        font-size: 1.7rem;
    }
    .banner-content {
        padding: 0 1.25rem;
    }
}


/* Testimonials */
.testimonials {
    background: #0d0b0b;
    padding: 1.25rem 0;
    position: relative
}

.testimonials .carousel {
    min-height: 300px;
}

.testimonials .carousel,
.testimonials .carousel-inner,
.testimonials .carousel-item {
    min-height: 300px;
}

.testimonials .carousel-item.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-content {
    max-width: 750px;
    margin: 0 auto;
}

.testimonial-content blockquote {
    line-height: 1.6;
}

.ts-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--oneta-yellow);
    display: grid;
    place-items: center;
    z-index: 2;
}

.ts-arrow.left {
    left: 10px
}

.ts-arrow.right {
    right: 10px
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    object-fit: cover
}

.offer-banner {
    padding: 2.75rem 0;
}


.offer-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px var(--oneta-yellow);
}

.offer-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.offer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, .15) 68%, rgba(0, 0, 0, .0) 100%);
}

.offer-body {
    position: absolute;
    inset: auto 1.25rem auto 1.25rem;
    left: 2rem;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
}

.offer-icon {
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    align-items: center;
    justify-content: center;
}

.offer-icon i {
    font-size: 64px;
    line-height: 1;
    color: #fff;
}

.offer-title {
    color: #fff;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.15;
}

.offer-copy {
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
}

.btn-offer {
    height: 48px;
    display: inline-flex;
    align-items: center;
    border: none;
}

.btn-offer:hover {
    color: var(--white);
    background: var(--black);
}

@media (max-width: 991.98px) {
    .offer-body {
        left: 1.25rem;
        right: 1.25rem;
    }

    .offer-icon {
        width: 68px;
        height: 68px;
    }

    .offer-icon i {
        font-size: 52px;
    }

    .offer-title {
        font-size: 1.85rem;
    }

    .btn-offer {
        width: 100%;
        justify-content: center;
        margin-top: .75rem;
    }
}



/* Partners row */
.partners {
    padding: 2.5rem 0;
    background: #fff
}

.partners img {
    max-height: 64px;
    width: auto;
    opacity: .9;
    filter: grayscale(5%);
    transition: opacity .2s
}

.partners img:hover {
    opacity: 1
}

/* Footer */
.site-footer {
    background: var(--dark-1);
    color: #cfd3d9
}

.footer-top {
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.footer-top a:hover {
    opacity: 1;
    text-decoration: underline
}

.footer-top .socials a {
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-top .socials .facebook {
    background: #3b5998;
}

.footer-top .socials .instagram {
    background: #262626;
}

.footer-top .socials .linkedin {
    background: #0077B5;
}

.footer-mid {
    padding: 2rem 0;
    background: #fff
}

.footer-mid img {
    max-width: 100%;
    height: auto;
}

.footer-bottom {
    padding: 1.25rem 0;
    background: var(--dark-1);
}

/* Utilities */
.text-oneta {
    color: var(--oneta-yellow)
}

/* ===== Plan comparison table ===== */

.plan-compare-wrapper {
    max-width: 980px;
    margin: 0 auto;
}

.plan-compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
    font-size: 0.9rem;
}

.plan-compare-table thead th {
    padding: 0.375rem 0.625rem 0.375rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
    font-size: 1.625rem;
    font-weight: 500;
}

.plan-service-col {
    width: 32%;
    min-width: 180px;
}

.plan-col-heading {
    font-weight: 500;
    font-size: 1.625rem;
    color: #111827;
}

.plan-col-sub {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
}

/* body cells */

.plan-compare-table tbody td {
    padding: 0.375rem 1rem 0.375rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.plan-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.plan-service-title {
    font-weight: 500;
    color: #111827;
}

.plan-service-caption {
    font-size: 0.8rem;
}

/* checkmarks */

.plan-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    color: #16a34a;
    font-size: 2rem;
}

.plan-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    color: red;
    font-size: 2rem;
}


/* note row */

.plan-note-row td {
    padding-top: 1.2rem;
    padding-bottom: 1.3rem;
}

.plan-note {
    display: block;
    font-size: 0.875rem;
}

/* small devices: rely on horizontal scroll via .table-responsive,
   just tighten padding a bit */

@media (max-width: 767.98px) {
    .plan-compare-table thead th,
    .plan-compare-table tbody td {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .plan-compare-table {
        font-size: 0.85rem;
    }
}