/* ============================================================
   OGEN Homepage Sections — all redesigned section CSS lives here
   Add new sections below, grouped by section name.
   ============================================================ */

/* ============================================================
   SECTION: Vision — "Your Vision, Our Expertise"
   ============================================================ */

.ogen-vision-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: #27394d;
    padding: 52px 20px 72px;
}

.ogen-vision-inner {
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
    min-height: 700px;
}

.ogen-vision-section::before {
    content: "";
    position: absolute;
    right: 0;
    top: 30px;
    width: 220px;
    height: 220px;
    opacity: .18;
    pointer-events: none;
    background: repeating-linear-gradient(-22deg, transparent 0, transparent 12px, #b0bec5 13px, transparent 17px);
    transform: rotate(-15deg);
}

.ogen-vision-section::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 120px;
    width: 220px;
    height: 220px;
    opacity: .13;
    pointer-events: none;
    background: repeating-linear-gradient(-22deg, transparent 0, transparent 12px, #b0bec5 13px, transparent 17px);
    transform: rotate(-15deg);
}

/* Kicker */
.vision-kicker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 5px;
    color: #6b7c8d;
    text-transform: uppercase;
}

.vision-kicker i {
    display: block;
    width: 2.5px;
    height: 16px;
    background: #f56c23;
    transform: rotate(4deg);
    font-style: normal;
}

/* Heading */
.vision-heading-wrap {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.vision-heading-arrow {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-bottom: 6px;
}

.vision-heading-arrow svg {
    width: 32px;
    height: 44px;
    fill: none;
    stroke: #f56c23;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vision-heading-wrap h2 {
    margin: 0;
    font-size: clamp(36px, 4vw, 62px);
    line-height: 1.06;
    letter-spacing: -2.5px;
    font-weight: 800;
    color: #3c4858;
}

.heading-highlight {
    position: relative;
    color: #f56c23;
    display: inline-block;
}

.heading-highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18'%3E%3Cpath d='M2 14 Q75 2 150 10 Q225 18 298 6' stroke='%23f56c23' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% auto;
}

/* // sparks */
.heading-spark {
    position: absolute;
    top: 6px;
    display: flex;
    gap: 5px;
}

.heading-spark-left { left: -42px; }
.heading-spark-right { right: -42px; }

.heading-spark svg { width: 26px; height: 38px; }

.heading-spark svg line {
    stroke: #f56c23;
    stroke-width: 3.5;
    stroke-linecap: round;
}

/* Intro */
.vision-intro {
    max-width: 880px;
    margin: 44px auto 48px;
    text-align: center;
    font-size: 17px;
    line-height: 1.75;
    color: #506174;
}

/* Stats grid */
.vision-stats {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 860px;
    margin: 52px auto 0;
    display: flex;
    background: #3c4858;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(21,34,56,.30), 0 0 0 1px rgba(255,255,255,.06);
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
    text-align: center;
    gap: 0;
    border-right: 1px solid rgba(255,255,255,.07);
    border-bottom: none;
    position: relative;
    transition: background .2s;
}

.stat-item:hover { background: rgba(245,108,35,.07); }
.stat-item:last-child { border-right: none; }
.stat-item:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.07); }
.stat-item:nth-child(n + 4) { border-bottom: none; }

.stat-icon { display: none; }

.stat-number {
    font-size: 50px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
    color: #fff;
    margin-bottom: 10px;
}

.stat-suffix { color: #f56c23; font-size: 38px; font-weight: 900; }

.stat-label {
    font-size: 11px;
    color: rgba(255,255,255,.48);
    text-transform: uppercase;
    letter-spacing: .8px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

/* Left sketch */
.sketch { position: absolute; z-index: 2; }

.sketch-left { top: 0; left: -20px; width: 210px; }

.sketch-left::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -20px;
    width: 320px;
    height: 520px;
    background: radial-gradient(ellipse at 40% 40%, rgba(245, 108, 35, .18) 0%, rgba(255, 200, 140, .10) 42%, transparent 72%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.bulb-svg { width: 140px; height: 180px; display: block; margin: 0 0 0 30px; }

.bulb-body { fill: rgba(245, 108, 35, .07); stroke: #1e3044; stroke-width: 2.8; }
.bulb-coil { fill: none; stroke: #1e3044; stroke-width: 2.4; }
.bulb-base-line { stroke: #1e3044; stroke-width: 2.8; fill: none; stroke-linecap: round; }
.bulb-ray { stroke: #f56c23; stroke-width: 3; stroke-linecap: round; }

/* Ideas ring */
.ideas-ring { position: relative; width: 175px; margin: 6px auto 0; }

.ideas-arc-svg {
    position: absolute;
    top: -32px;
    left: -32px;
    width: calc(100% + 64px);
    height: calc(100% + 72px);
    pointer-events: none;
}

.arc-dashed { fill: none; stroke: #f56c23; stroke-width: 2.2; stroke-dasharray: 7 5; stroke-linecap: round; }
.arc-head { fill: none; stroke: #f56c23; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.sketch-text {
    font-family: "Kalam", "Comic Sans MS", "Bradley Hand", cursive;
    font-style: italic;
    color: #3c4858;
    font-size: 20px;
    line-height: 1.52;
    text-align: center;
    padding: 14px 10px 18px;
    position: relative;
    z-index: 1;
}

/* Right sketch */
.sketch-right { top: 62px; right: -10px; width: 185px; }

.hand-note {
    font-family: "Kalam", "Comic Sans MS", cursive;
    font-style: italic;
    color: #3c4858;
    font-size: 26px;
    line-height: 1.32;
    transform: rotate(-4deg);
    display: inline-block;
}

.hand-note-underline {
    display: block;
    width: 145px;
    height: 5px;
    background: #f56c23;
    margin-top: 10px;
    transform: rotate(-5deg);
    border-radius: 3px;
}

/* Vision responsive */
@media (max-width: 1200px) {
    .sketch-left, .sketch-right { opacity: .35; }
    .vision-stats { max-width: 100%; width: 100%; }
    .stat-item { padding: 28px 14px; }
}

@media (max-width: 900px) {
    .ogen-vision-section { padding: 48px 20px 60px; }
    .ogen-vision-inner { min-height: auto; }
    .vision-kicker { font-size: 10px; letter-spacing: 3px; }
    .vision-heading-wrap h2 { font-size: 40px; letter-spacing: -1.5px; }
    .vision-intro { font-size: 16px; margin-top: 32px; }
    .vision-stats { width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 12px; }
    .stat-item { border-right: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
    .stat-item:nth-child(3n) { border-right: none; }
    .stat-item:nth-last-child(-n+3) { border-bottom: none; }
    .sketch { display: none; }
}

@media (max-width: 560px) {
    .ogen-vision-section { padding: 38px 16px 44px; }
    .vision-kicker { flex-wrap: wrap; gap: 8px; }
    .vision-heading-wrap h2 { font-size: 30px; line-height: 1.1; letter-spacing: -1px; }
    .vision-heading-wrap h2 br { display: none; }
    .vision-heading-arrow { display: none; }
    .heading-spark { display: none; }
    .vision-intro { font-size: 15px; margin: 24px auto 30px; }
    .vision-stats { grid-template-columns: repeat(2, 1fr); border-radius: 10px; }
    .stat-item { padding: 22px 12px; }
    .stat-item:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.07); }
    .stat-item:nth-child(2n) { border-right: none; }
    .stat-item:nth-last-child(-n+2) { border-bottom: none; }
    .stat-number { font-size: 38px; }
    .stat-label { font-size: 10px; white-space: normal; }
    .heading-highlight::after { bottom: -8px; height: 8px; }
}

/* ============================================================
   SECTION: Ratings — "Ranked as The Best Website Designing Company"
   ============================================================ */

.ogen-ratings-section {
    position: relative;
    background: #fff;
    overflow: hidden;
    padding: 68px 20px 140px;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

.ogen-ratings-section::before {
    content: "";
    position: absolute;
    right: 0;
    top: -10px;
    width: 210px;
    height: 210px;
    background: repeating-linear-gradient(-22deg, transparent 0, transparent 12px, #b0bec5 13px, transparent 17px);
    opacity: .16;
    transform: rotate(-14deg);
    pointer-events: none;
}

.ogen-ratings-section::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 60px;
    width: 190px;
    height: 190px;
    background: repeating-linear-gradient(-22deg, transparent 0, transparent 12px, #b0bec5 13px, transparent 17px);
    opacity: .12;
    transform: rotate(-14deg);
    pointer-events: none;
}

.ogen-ratings-inner { position: relative; max-width: 1200px; margin: 0 auto; }

/* Kicker */
.ratings-kicker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
    color: #6b7c8d;
    text-transform: uppercase;
}

.kicker-pipe { display: block; width: 1.5px; height: 14px; background: #f56c23; font-style: normal; }

/* Heading */
.ratings-heading-wrap {
    position: relative;
    text-align: center;
    max-width: 960px;
    margin: 0 auto 52px;
}

.ratings-heading-wrap h2 {
    margin: 0;
    font-size: clamp(26px, 3vw, 44px);
    font-weight: 800;
    line-height: 1.18;
    color: #3c4858;
    letter-spacing: -1.2px;
}

.ratings-hl { color: #f56c23; }

/* // sparks */
.ratings-spark { position: absolute; top: 4px; }
.ratings-spark-left { left: -54px; }
.ratings-spark-right { right: -54px; }
.ratings-spark svg { width: 30px; height: 44px; }
.ratings-spark svg line { stroke: #f56c23; stroke-width: 3.5; stroke-linecap: round; }

/* Cards grid */
.ratings-cards-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    position: relative;
    z-index: 2;
}

.rating-card {
    background: #fff;
    border: 1.5px solid #e4e9ed;
    border-radius: 14px;
    padding: 26px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(39, 57, 77, .07);
    transition: box-shadow .25s, transform .25s;
}

.rating-card:hover { box-shadow: 0 10px 32px rgba(39, 57, 77, .13); transform: translateY(-3px); }

.rc-top { display: flex; align-items: center; gap: 16px; }

.rc-logo {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f7f9;
    display: grid;
    place-items: center;
}

/* Let existing sprite CSS control its own size and background-position */
.rc-logo .sprite-dline { display: block; }

.rc-info { flex: 1; min-width: 0; }

.rc-name { font-size: 17px; font-weight: 700; color: #3c4858; margin-bottom: 6px; white-space: nowrap; }

.rc-row { display: flex; align-items: center; gap: 8px; }

.rc-score { font-size: 22px; font-weight: 800; color: #3c4858; line-height: 1; }

.rc-stars { color: #f56c23; font-size: 14px; letter-spacing: 2px; line-height: 1; }

.rc-btn {
    display: block;
    text-align: center;
    border: 2px solid #f56c23;
    color: #f56c23;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    padding: 11px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .22s, color .22s;
    margin-top: auto;
}

.rc-btn:hover, .rc-btn:focus { background: #f56c23; color: #fff; text-decoration: none; }

/* Bottom decorations — inside the padded section so they don't overflow */
.rb-deco { position: absolute; bottom: 22px; }
.rb-deco-left { left: 0; }
.rb-deco-right { right: 0; display: flex; align-items: flex-end; gap: 6px; }

.rb-text {
    font-family: "Kalam", "Comic Sans MS", cursive;
    font-style: italic;
    color: #3c4858;
    font-size: 24px;
    line-height: 1.36;
    margin: 0;
}

.rb-underline {
    display: block;
    width: 148px;
    height: 5px;
    background: #f56c23;
    border-radius: 3px;
    margin-top: 9px;
    transform: rotate(-2deg);
}

.rb-airplane-svg { display: block; width: 128px; height: 114px; flex-shrink: 0; }

.rb-flight-path { fill: none; stroke: #f56c23; stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; }

/* Ratings responsive */
@media (max-width: 1100px) {
    .ratings-spark { display: none; }
    .ratings-heading-wrap { max-width: 820px; }
}

@media (max-width: 900px) {
    .ogen-ratings-section { padding: 52px 20px 56px; }
    .ratings-cards-wrap { grid-template-columns: repeat(2, 1fr); }
    .rb-deco { display: none; }
}

@media (max-width: 560px) {
    .ogen-ratings-section { padding: 40px 16px 44px; }
    .ratings-heading-wrap h2 { font-size: 24px; letter-spacing: -.5px; }
    .ratings-kicker { font-size: 10px; letter-spacing: 3px; gap: 10px; }
    .ratings-cards-wrap { grid-template-columns: 1fr; gap: 14px; }
    .rc-name { font-size: 16px; }
}

/* ============================================================
   SECTION: Trusted Clients — animations + vector layer only
   (Container width / layout / logos unchanged)
   ============================================================ */

/* Kicker */
.clts-kicker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
    color: #6b7c8d;
    text-transform: uppercase;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

/* Orange highlight on "Global Clients" */
.clts-hl { color: #f56c23; }

/* Heading wrapper: add relative for sparks */
.clts-heading-wrap { position: relative; }

/* // sparks flanking heading */
.clts-spark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.clts-spark-left { left: 0; }
.clts-spark-right { right: 0; }
.clts-spark svg {
    width: 28px;
    height: 40px;
}
.clts-spark svg line {
    stroke: #f56c23;
    stroke-width: 3.5;
    stroke-linecap: round;
}

/* Globe decoration – top-right corner of container */
.clts-globe-wrap {
    position: absolute;
    top: -10px;
    right: 0;
    opacity: .18;
    pointer-events: none;
    z-index: 0;
}
.clts-globe-svg {
    width: 110px;
    height: 110px;
    display: block;
}

/* ---- Staggered column fade-in on page load ---- */
@keyframes cltsColIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.ogen-clients-animated .col {
    animation: cltsColIn 0.55s ease-out both;
}
.ogen-clients-animated .col:nth-child(1) { animation-delay: 0.05s; }
.ogen-clients-animated .col:nth-child(2) { animation-delay: 0.12s; }
.ogen-clients-animated .col:nth-child(3) { animation-delay: 0.19s; }
.ogen-clients-animated .col:nth-child(4) { animation-delay: 0.26s; }
.ogen-clients-animated .col:nth-child(5) { animation-delay: 0.33s; }
.ogen-clients-animated .col:nth-child(6) { animation-delay: 0.40s; }
.ogen-clients-animated .col:nth-child(7) { animation-delay: 0.47s; }

/* ---- Heading entrance animation ---- */
@keyframes cltsHeadIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
.ogen-clients-animated .main-heading-box {
    animation: cltsHeadIn 0.5s ease-out both;
}

/* ---- Logo card hover: lift + colour pop ---- */
.ogen-clients-animated .image-width {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    border-radius: 8px;
}
.ogen-clients-animated .image-width:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(39, 57, 77, .12);
}
.ogen-clients-animated .image-width img {
    filter: grayscale(25%);
    transition: filter 0.22s ease;
}
.ogen-clients-animated .image-width:hover img {
    filter: grayscale(0%);
}

/* Category heading colour accent on hover */
.ogen-clients-animated .heading-clients-logos p {
    position: relative;
    display: inline-block;
    transition: color 0.2s;
}
.ogen-clients-animated .logo-divider:hover .heading-clients-logos p {
    color: #f56c23;
}
.ogen-clients-animated .heading-clients-logos p::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: #f56c23;
    border-radius: 2px;
    transition: width 0.25s ease;
}
.ogen-clients-animated .logo-divider:hover .heading-clients-logos p::after {
    width: 100%;
}

/* Responsive: hide decorations on small screens */
@media (max-width: 768px) {
    .clts-spark, .clts-globe-wrap { display: none; }
    .clts-kicker { font-size: 10px; letter-spacing: 3px; }
}

/* ============================================================
   SECTION: Company Statistics — animations + vector layer only
   ============================================================ */

/* Orange highlight on "Excellence" / "Success" */
.stats-hl { color: #f56c23; }

/* Trophy decoration — top-right corner */
.stats-deco-trophy {
    position: absolute;
    top: -12px;
    right: 0;
    width: 90px;
    opacity: .22;
    pointer-events: none;
}

/* // spark mark — top-left near heading */
.stats-spark {
    position: absolute;
    top: 18px;
    left: 0;
    pointer-events: none;
}
.stats-spark svg {
    width: 26px;
    height: 38px;
}
.stats-spark svg line {
    stroke: #f56c23;
    stroke-width: 3.5;
    stroke-linecap: round;
}

/* ---- Text block entrance ---- */
@keyframes statsFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.ogen-stats-animated .statistics-text {
    animation: statsFadeUp 0.6s ease-out both;
}

/* ---- Stat number pop-in with stagger ---- */
@keyframes statNumPop {
    from { opacity: 0; transform: scale(0.75); }
    to { opacity: 1; transform: scale(1); }
}

.ogen-stats-animated .statistics-ul li {
    animation: statNumPop 0.45s cubic-bezier(.34,1.56,.64,1) both;
}
.ogen-stats-animated .statistics-ul li:nth-child(1) { animation-delay: 0.10s; }
.ogen-stats-animated .statistics-ul li:nth-child(2) { animation-delay: 0.18s; }
.ogen-stats-animated .statistics-ul li:nth-child(3) { animation-delay: 0.26s; }
.ogen-stats-animated .statistics-ul li:nth-child(4) { animation-delay: 0.34s; }
.ogen-stats-animated .statistics-ul li:nth-child(5) { animation-delay: 0.42s; }
.ogen-stats-animated .statistics-ul li:nth-child(6) { animation-delay: 0.50s; }

/* Stat number hover glow */
.ogen-stats-animated .statistics_value {
    transition: color 0.2s;
    cursor: default;
}
.ogen-stats-animated .statistics-ul li:hover .statistics_value {
    color: #f56c23;
}

/* Responsive: hide decorations on mobile */
@media (max-width: 768px) {
    .stats-deco-trophy, .stats-spark { display: none; }
}

/* ============================================================
   SECTION 5 — Business Segments (.our-services)
   Sketch: lightbulb cluster + spark mark
   ============================================================ */

.seg-bulb-wrap {
    position: absolute;
    top: -14px;
    right: 0;
    width: 80px;
    opacity: .2;
    pointer-events: none;
    z-index: 0;
}

.seg-spark {
    position: absolute;
    top: 8px;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

/* Card entrance — slide up + fade */
@keyframes segCardIn {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

.ogen-segments-animated .services-box {
    animation: segCardIn 0.5s ease-out both;
}
.ogen-segments-animated .col-lg-3:nth-child(1) .services-box { animation-delay: 0.05s; }
.ogen-segments-animated .col-lg-3:nth-child(2) .services-box { animation-delay: 0.16s; }
.ogen-segments-animated .col-lg-3:nth-child(3) .services-box { animation-delay: 0.27s; }
.ogen-segments-animated .col-lg-3:nth-child(4) .services-box { animation-delay: 0.38s; }

/* Card hover lift */
.ogen-segments-animated .services-box {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ogen-segments-animated .services-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(30,48,68,.1);
}

@media (max-width: 768px) {
    .seg-bulb-wrap, .seg-spark { display: none; }
}

/* ============================================================
   SECTION 6 — Industries We Serve (.home-industries)
   Sketch: compass rose
   ============================================================ */

.ind-compass-wrap {
    position: absolute;
    top: -12px;
    right: 0;
    width: 88px;
    opacity: .18;
    pointer-events: none;
    z-index: 0;
}

/* Industry tile fade-in with stagger */
@keyframes indTileIn {
    from { opacity: 0; transform: scale(0.93); }
    to { opacity: 1; transform: scale(1); }
}

.ogen-industries-animated .industries-images .col {
    animation: indTileIn 0.45s ease-out both;
}
.ogen-industries-animated .industries-images .col:nth-child(1) { animation-delay: 0.04s; }
.ogen-industries-animated .industries-images .col:nth-child(2) { animation-delay: 0.09s; }
.ogen-industries-animated .industries-images .col:nth-child(3) { animation-delay: 0.14s; }
.ogen-industries-animated .industries-images .col:nth-child(4) { animation-delay: 0.19s; }
.ogen-industries-animated .industries-images .col:nth-child(5) { animation-delay: 0.24s; }
.ogen-industries-animated .industries-images .col:nth-child(6) { animation-delay: 0.29s; }
.ogen-industries-animated .industries-images .col:nth-child(7) { animation-delay: 0.34s; }
.ogen-industries-animated .industries-images .col:nth-child(8) { animation-delay: 0.39s; }
.ogen-industries-animated .industries-images .col:nth-child(9) { animation-delay: 0.44s; }
.ogen-industries-animated .industries-images .col:nth-child(10) { animation-delay: 0.49s; }
.ogen-industries-animated .industries-images .col:nth-child(11) { animation-delay: 0.54s; }

/* tile hover zoom */
.ogen-industries-animated .industries-images .col figure {
    overflow: hidden;
    border-radius: 6px;
}
.ogen-industries-animated .industries-images .col figure img {
    transition: transform 0.3s ease;
}
.ogen-industries-animated .industries-images .col:hover figure img {
    transform: scale(1.06);
}

@media (max-width: 768px) {
    .ind-compass-wrap { display: none; }
}

/* Portfolio item slide-in */

/* ============================================================
   SECTION 8 — Free Site Audit (#quality-div)
   Sketch: radar/scan pulse
   ============================================================ */

.audit-radar-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 80px;
    pointer-events: none;
    z-index: 0;
}

/* pulse animation on radar */
@keyframes radarPulse {
    0% { opacity: .55; transform: translateY(-50%) scale(1); }
    50% { opacity: .25; transform: translateY(-50%) scale(1.06); }
    100% { opacity: .55; transform: translateY(-50%) scale(1); }
}

.ogen-audit-animated .audit-radar-wrap {
    animation: radarPulse 2.8s ease-in-out infinite;
}

/* CTA row entrance */
@keyframes auditFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.ogen-audit-animated .complimentry-div {
    animation: auditFadeUp 0.6s ease-out both 0.1s;
}

@media (max-width: 768px) {
    .audit-radar-wrap { display: none; }
}

/* ============================================================
   SECTION 9 — Services Menu (.ogencm-services)
   Sketch: </> code brackets
   ============================================================ */

.svc-code-wrap {
    position: absolute;
    top: 10px;
    right: 0;
    width: 110px;
    pointer-events: none;
    z-index: 0;
    opacity: .22;
}

/* Section title entrance */
@keyframes svcTitleIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.ogen-svcmenu-animated .top-content .section-title {
    animation: svcTitleIn 0.65s ease-out both 0.05s;
}
.ogen-svcmenu-animated .top-content .overlay-text {
    animation: svcTitleIn 0.5s ease-out both;
}

/* Alternating service item entrance */
@keyframes svcItemIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.ogen-svcmenu-animated .ogenservice-item {
    animation: svcItemIn 0.55s ease-out both;
}
.ogen-svcmenu-animated .ogenservice-item:nth-child(1) { animation-delay: 0.1s; }
.ogen-svcmenu-animated .ogenservice-item:nth-child(2) { animation-delay: 0.2s; }
.ogen-svcmenu-animated .ogenservice-item:nth-child(3) { animation-delay: 0.3s; }
.ogen-svcmenu-animated .ogenservice-item:nth-child(4) { animation-delay: 0.4s; }

/* Service image hover lift */
.ogen-svcmenu-animated .service-image img {
    transition: transform 0.3s ease;
}
.ogen-svcmenu-animated .ogenservice-item:hover .service-image img {
    transform: translateY(-5px);
}

@media (max-width: 768px) {
    .svc-code-wrap { display: none; }
}

/* --- Animated underline on heading --- */

/* Heading slide in from left */

/* --- List items: slide from left + icon spring bounce --- */

/* --- Feature cards: wipe reveal from bottom with spring --- */

/* --- +60% bubble pulse --- */

/* --- Form slide up --- */

/* ============================================================
   SECTION 11 — Testimonials (.testimonial-home)
   Sketch: speech bubble + spark marks
   ============================================================ */

.testi-bubble-wrap {
    position: absolute;
    top: -12px;
    right: 0;
    width: 88px;
    opacity: .18;
    pointer-events: none;
    z-index: 0;
}

.testi-spark {
    position: absolute;
    top: 10px;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

@keyframes testiCardIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.ogen-testimonial-animated .testimonial-box .col-md-4 article {
    animation: testiCardIn 0.5s ease-out both;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ogen-testimonial-animated .testimonial-box .col-md-4:nth-child(1) article { animation-delay: 0.06s; }
.ogen-testimonial-animated .testimonial-box .col-md-4:nth-child(2) article { animation-delay: 0.18s; }
.ogen-testimonial-animated .testimonial-box .col-md-4:nth-child(3) article { animation-delay: 0.30s; }

.ogen-testimonial-animated .testimonial-box .col-md-4 article:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(30,48,68,.10);
}

@media (max-width: 768px) {
    .testi-bubble-wrap, .testi-spark { display: none; }
}

/* ============================================================
   SECTION 12 — FAQ (.faqsection)
   Sketch: question mark doodle
   ============================================================ */

.faq-qmark-wrap {
    position: absolute;
    top: -10px;
    right: 0;
    width: 58px;
    opacity: .18;
    pointer-events: none;
    z-index: 0;
}

@keyframes faqHeadIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.ogen-faq-animated .main-heading-box {
    animation: faqHeadIn 0.55s ease-out both;
}

/* FAQ accordion item stagger */
@keyframes faqItemIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

.ogen-faq-animated .accordion-content__title {
    animation: faqItemIn 0.45s ease-out both;
}
.ogen-faq-animated .accordion-content__title:nth-of-type(1) { animation-delay: 0.08s; }
.ogen-faq-animated .accordion-content__title:nth-of-type(2) { animation-delay: 0.18s; }
.ogen-faq-animated .accordion-content__title:nth-of-type(3) { animation-delay: 0.28s; }
.ogen-faq-animated .accordion-content__title:nth-of-type(4) { animation-delay: 0.38s; }

@media (max-width: 768px) {
    .faq-qmark-wrap { display: none; }
}

/* ============================================================
   SECTION — Footer (.fx-footer.ogen-footer-enhanced)
   Vector sketches: browser (web dev) · phone (app dev)
                    gear+nodes (software dev) · terminal (code)
   Background: circuit-board SVG pattern overlay
   ============================================================ */

/* Circuit board SVG tiled background overlay */
.ogen-footer-enhanced {
    position: relative;
    overflow: hidden;
}

.ogen-footer-enhanced::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg stroke='%23ffffff' stroke-width='1' fill='none'%3E%3Crect x='10' y='10' width='20' height='20' rx='2'/%3E%3Crect x='50' y='50' width='20' height='20' rx='2'/%3E%3Cline x1='20' y1='30' x2='20' y2='50'/%3E%3Cline x1='20' y1='50' x2='50' y2='50'/%3E%3Cline x1='60' y1='50' x2='60' y2='30'/%3E%3Cline x1='60' y1='30' x2='30' y2='30'/%3E%3Ccircle cx='20' cy='50' r='3' fill='%23ffffff'/%3E%3Ccircle cx='60' cy='30' r='3' fill='%23ffffff'/%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='50' cy='50' r='2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
    background-repeat: repeat;
}

/* ensure content sits above the panorama */
.ogen-footer-enhanced .container-fluid {
    position: relative;
    z-index: 2;
    isolation: isolate;
}
.ogen-footer-enhanced .fx-footer-wrap {
    position: relative;
    z-index: 2;
}

/* ---- Footer darker background ---- */
.ogen-footer-enhanced {
    background-color: #050d14 !important;
}

/* ---- Full-width tech panorama ---- */
.ftr-panorama {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.ftr-panorama svg {
    width: 100%;
    height: 100%;
    opacity: .10;
}

/* gear rotation is handled via SVG animateTransform inline */

/* ---- Footer link hover: colour only, no underline ---- */
.ogen-footer-enhanced .ogenfooter_menu li a {
    transition: color 0.2s ease;
}
.ogen-footer-enhanced .ogenfooter_menu li a:hover {
    color: #f56c23 !important;
}

/* ---- Footer columns fade-in on load ---- */
@keyframes ftrColIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.ogen-footer-enhanced .col-xs-6.col-lg-3 {
    animation: ftrColIn 0.55s ease-out both;
}
.ogen-footer-enhanced .col-xs-6.col-lg-3:nth-child(1) { animation-delay: 0.05s; }
.ogen-footer-enhanced .col-xs-6.col-lg-3:nth-child(2) { animation-delay: 0.15s; }
.ogen-footer-enhanced .col-xs-6.col-lg-3:nth-child(3) { animation-delay: 0.25s; }
.ogen-footer-enhanced .col-xs-6.col-lg-3:nth-child(4) { animation-delay: 0.35s; }

/* ---- Counter pulse ---- */
@keyframes ftrCountPop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
.ogen-footer-enhanced .card-value {
    animation: ftrCountPop 0.7s cubic-bezier(.34,1.56,.64,1) both 0.4s;
    display: inline-block;
}

/* ---- Hide on small screens ---- */
@media (max-width: 768px) {
    .ftr-deco { display: none; }
    .ogen-footer-enhanced::before { display: none; }
}

/* === SECTION 14 — FAQ Numbered Card Design === */

.homefaq.faqsection {
    background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
}

#faqs-accordion {
    counter-reset: faq-num;
}

/* Question card — position:relative so badge can be absolute */
.homefaq .accordion-content__title {
    counter-increment: faq-num;
    position: relative !important;
    padding-left: 88px !important;
    padding-right: 58px !important;
    border-radius: 12px !important;
    border: 1.5px solid #dde4f0 !important;
    background: #ffffff !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(30,48,68,0.05) !important;
    color: #3c4858 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.homefaq .accordion-content__title:hover {
    border-color: #f56c23 !important;
    box-shadow: 0 4px 18px rgba(245,108,35,0.12) !important;
}

/* Number badge — absolute, fills full left strip */
.homefaq .accordion-content__title::before {
    content: counter(faq-num, decimal-leading-zero) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 66px !important;
    background: #f56c23 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    font-family: monospace !important;
    letter-spacing: -0.5px !important;
    transition: background 0.2s ease !important;
}

/* +/− toggle — absolute on right */
.homefaq .accordion-content__title::after {
    content: "+" !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    color: #f56c23 !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

/* Active state */
.homefaq .accordion-content__title.active {
    border-color: #f56c23 !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom-color: transparent !important;
    margin-bottom: 0 !important;
    background: #fff9f4 !important;
    box-shadow: none !important;
}

.homefaq .accordion-content__title.active::before {
    background: #1e3044 !important;
}

.homefaq .accordion-content__title.active::after {
    content: "−" !important;
    color: #3c4858 !important;
    transform: translateY(-50%) !important;
}

/* Answer panel connected to open question */
.homefaq .accordion-content__title.active + .accordion-content {
    border: 1.5px solid #f56c23 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    background: #fffaf6 !important;
    margin-bottom: 10px !important;
}

.homefaq .accordion-content .accordion-content__inner {
    padding: 24px 28px 28px !important;
}

/* Answer typography */
.homefaq .accordion-content__inner p {
    font-size: 15px !important;
    color: #4a5568 !important;
    line-height: 1.8 !important;
    margin-bottom: 14px !important;
}
.homefaq .accordion-content__inner p b { color: #3c4858 !important; font-weight: 700 !important; }
.homefaq .accordion-content__inner a { color: #f56c23 !important; font-weight: 600 !important; text-decoration: none !important; }
.homefaq .accordion-content__inner a:hover { text-decoration: underline !important; }
.homefaq .accordion-content__inner ul { padding-left: 18px !important; margin-bottom: 14px !important; }
.homefaq .accordion-content__inner ul li { font-size: 15px !important; color: #4a5568 !important; line-height: 1.75 !important; margin-bottom: 6px !important; }

/* Mobile */
@media (max-width: 600px) {
    .homefaq .accordion-content__title { padding-left: 64px !important; font-size: 14px !important; }
    .homefaq .accordion-content__title::before { width: 48px !important; font-size: 16px !important; }
    .homefaq .accordion-content .accordion-content__inner { padding: 18px 16px 20px !important; }
}