/* ========================================
   DIVISION PAGES — Premium Stylesheet
   ======================================== */

/* ===== HERO ===== */
.div-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #060c1a;
}

.div-hero--consulting {
    background: linear-gradient(135deg, #060c1a 0%, #0a1628 50%, #0d1f3c 100%);
}

.div-hero--tech {
    background: linear-gradient(135deg, #060c1a 0%, #091220 50%, #0a1628 100%);
}

.div-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(0,114,188,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.div-hero--tech::before {
    background: radial-gradient(ellipse at 70% 50%, rgba(6,182,212,0.12) 0%, transparent 70%);
}

.div-hero-overlay {
    position: absolute;
    inset: 0;
    background: url('../images/services-hero.png') center center / cover no-repeat;
    opacity: 0.08;
}

.div-hero .container {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    padding-bottom: 80px;
    padding-left: 0;
}

.div-hero-content {
    max-width: 700px;
    margin-left: -40px;
}

.div-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,114,188,0.15);
    border: 1px solid rgba(0,114,188,0.35);
    border-radius: 50px;
    padding: 8px 20px 8px 8px;
    margin-bottom: 32px;
}

.div-badge--tech {
    background: rgba(6,182,212,0.12);
    border-color: rgba(6,182,212,0.3);
}

.div-num-badge {
    background: #0072BC;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 30px;
}

.div-badge--tech .div-num-badge {
    background: linear-gradient(135deg, #06b6d4, #0072BC);
}

.div-badge span:last-child {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #60a5fa;
}

.div-badge--tech span:last-child { color: #67e8f9; }

.div-hero-content h1 {
    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1px;
    white-space: nowrap;
}

.div-hero-accent {
    color: #0072BC;
    -webkit-text-stroke: 1px rgba(0,114,188,0.3);
}

.div-hero-accent--tech {
    color: #06b6d4;
    -webkit-text-stroke: 1px rgba(6,182,212,0.3);
}

.div-hero-content p {
    font-size: 18px;
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 560px;
}

.div-hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-div-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0072BC;
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 8px 30px rgba(0,114,188,0.4);
}

.btn-div-primary:hover {
    background: #005A9C;
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,114,188,0.5);
}

.btn-div-primary--tech {
    background: linear-gradient(135deg, #06b6d4, #0072BC);
    box-shadow: 0 8px 30px rgba(6,182,212,0.3);
}

.btn-div-primary--tech:hover {
    background: linear-gradient(135deg, #0891b2, #005A9C);
}

.btn-div-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: rgba(255,255,255,0.75);
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s;
}

.btn-div-outline:hover {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.div-hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 18px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ===== OVERVIEW STRIP ===== */
.div-overview {
    background: #f8fafc;
    border-bottom: 1px solid #eef1f5;
    padding: 30px 0;
}

.div-overview--dark {
    background: #0a1628;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.div-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.div-ov-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 30px;
    border-right: 1px solid #eef1f5;
}

.div-overview--dark .div-ov-item {
    border-right-color: rgba(255,255,255,0.07);
}

.div-ov-item:last-child { border-right: none; }

.div-ov-item > i {
    font-size: 28px;
    color: #0072BC;
    flex-shrink: 0;
    width: 44px;
    text-align: center;
}

.div-overview--dark .div-ov-item > i { color: #06b6d4; }

.div-ov-item div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.div-ov-item strong {
    font-size: 15px;
    font-weight: 700;
    color: #1a2332;
}

.div-overview--dark .div-ov-item strong { color: #fff; }

.div-ov-item span {
    font-size: 12px;
    color: #6c757d;
}

.div-overview--dark .div-ov-item span { color: rgba(255,255,255,0.45); }

/* ===== SERVICES BLOCKS ===== */
.div-services {
    padding: 100px 0;
    background: #fff;
}

.div-sec-header {
    text-align: center;
    margin-bottom: 80px;
}

.div-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #0072BC;
    background: rgba(0,114,188,0.08);
    border: 1px solid rgba(0,114,188,0.18);
    padding: 7px 20px;
    border-radius: 30px;
    margin-bottom: 20px;
}

.div-label--tech {
    color: #06b6d4;
    background: rgba(6,182,212,0.08);
    border-color: rgba(6,182,212,0.2);
}

.div-sec-header h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: #1a2332;
    margin-bottom: 16px;
}

.div-sec-header p {
    font-size: 17px;
    color: #6c757d;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

.div-srv-block {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 48px;
    align-items: flex-start;
    padding: 56px 0;
    border-bottom: 1px solid #f0f4f8;
}

.div-srv-block:last-child { border-bottom: none; }

.div-srv-block--alt {
    background: #fafbfd;
    margin: 0 -40px;
    padding: 56px 40px;
    border-radius: 20px;
    border-bottom: none;
    margin-bottom: 2px;
}

.div-srv-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

.div-srv-icon--blue {
    background: linear-gradient(135deg, rgba(0,114,188,0.12), rgba(0,114,188,0.06));
    color: #0072BC;
    border: 1px solid rgba(0,114,188,0.15);
}

.div-srv-icon--navy {
    background: linear-gradient(135deg, rgba(10,22,40,0.08), rgba(10,22,40,0.04));
    color: #1a2332;
    border: 1px solid rgba(26,35,50,0.1);
}

.div-srv-icon--tech {
    background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(6,182,212,0.06));
    color: #06b6d4;
    border: 1px solid rgba(6,182,212,0.2);
}

.div-srv-icon--tech2 {
    background: linear-gradient(135deg, rgba(0,114,188,0.12), rgba(6,182,212,0.06));
    color: #0072BC;
    border: 1px solid rgba(0,114,188,0.15);
}

.div-srv-num {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0072BC;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.div-srv-num--tech { color: #06b6d4; }

.div-srv-content h3 {
    font-size: 26px;
    font-weight: 800;
    color: #1a2332;
    margin-bottom: 16px;
    line-height: 1.3;
}

.div-srv-content p {
    font-size: 16px;
    color: #5a6474;
    line-height: 1.8;
    margin-bottom: 28px;
    max-width: 700px;
}

.div-srv-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    margin-bottom: 24px;
}

.div-srv-feat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #3d4e60;
    font-weight: 500;
}

.div-srv-feat i {
    color: #0072BC;
    font-size: 15px;
    margin-top: 1px;
    flex-shrink: 0;
}

.div-srv-feat--tech i { color: #06b6d4; }

.div-portfolio-chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.div-portfolio-chips span {
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
}

.div-portfolio-chips a {
    display: inline-block;
    background: #f0f4f8;
    color: #0072BC;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid rgba(0,114,188,0.15);
    transition: all 0.2s;
}

.div-portfolio-chips a:hover {
    background: #0072BC;
    color: #fff;
}

/* ===== HIGHLIGHT STRIP (Consulting) ===== */
.div-highlight {
    background: linear-gradient(135deg, #0072BC, #005A9C);
    padding: 60px 0;
}

.div-highlight-inner {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.div-highlight-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.div-highlight-text span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
}

.div-highlight-text h3 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.div-highlight-text p {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    max-width: 700px;
}

/* ===== TECH STACK ===== */
.div-tech-stack {
    background: #060c1a;
    padding: 80px 0;
}

.div-tech-stack .div-sec-header h2 { color: #fff; }
.div-tech-stack .div-sec-header p { color: rgba(255,255,255,0.5); }

.div-stack-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.div-stack-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 24px 12px;
    transition: all 0.3s;
}

.div-stack-item:hover {
    background: rgba(6,182,212,0.08);
    border-color: rgba(6,182,212,0.2);
    transform: translateY(-4px);
}

.div-stack-item i {
    font-size: 32px;
    color: #06b6d4;
}

.div-stack-item span {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
}

.stack-icon-text {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #06b6d4 !important;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1px;
    line-height: 1;
}

.stack-ts .stack-icon-text { color: #3178c6 !important; }
.stack-java .stack-icon-text { color: #f89820 !important; }
.stack-flutter .stack-icon-text { color: #54c5f8 !important; }

/* ===== RTL ===== */
html[dir="rtl"] .div-hero-content { text-align: right; }
html[dir="rtl"] .div-hero-btns { flex-direction: row-reverse; }
html[dir="rtl"] .div-srv-block { direction: rtl; }
html[dir="rtl"] .div-srv-content { text-align: right; }
html[dir="rtl"] .div-srv-features { direction: rtl; }
html[dir="rtl"] .div-srv-feat { flex-direction: row; }
html[dir="rtl"] .div-srv-feat i { margin-top: 2px; }
html[dir="rtl"] .div-highlight-inner { direction: rtl; }
html[dir="rtl"] .div-highlight-text { text-align: right; }
html[dir="rtl"] .div-portfolio-chips { flex-direction: row-reverse; }
html[dir="rtl"] .div-ov-item { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .div-overview-grid { direction: rtl; }
html[dir="rtl"] .div-badge { flex-direction: row-reverse; }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .div-overview-grid { grid-template-columns: repeat(2, 1fr); }
    .div-ov-item { border-bottom: 1px solid #eef1f5; }
    .div-overview--dark .div-ov-item { border-bottom-color: rgba(255,255,255,0.07); }
    .div-stack-grid { grid-template-columns: repeat(4, 1fr); }
    .div-srv-block { grid-template-columns: 70px 1fr; gap: 24px; }
    .div-srv-block--alt { margin: 0; padding: 40px 24px; }
    .div-srv-features { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .div-hero { min-height: 100svh; }
    .div-hero .container { padding-top: 90px; padding-bottom: 60px; overflow: hidden; }
    .div-hero-content {
        margin-left: 0 !important;
        max-width: 100%;
        padding: 0 4px;
    }
    .div-hero-content h1 {
        font-size: clamp(26px, 7vw, 36px);
        white-space: normal;
        word-break: break-word;
    }
    .div-hero-content p { font-size: 15px; max-width: 100%; }
    .div-badge { max-width: 100%; flex-wrap: nowrap; overflow: hidden; }
    .div-hero-btns { flex-wrap: wrap; gap: 12px; }
    .btn-div-primary, .btn-div-outline {
        padding: 14px 24px;
        font-size: 14px;
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
        min-width: 130px;
    }
    .div-overview-grid { grid-template-columns: 1fr; }
    .div-ov-item { border-right: none; border-bottom: 1px solid #eef1f5; padding: 18px 20px; }
    .div-overview--dark .div-ov-item { border-bottom-color: rgba(255,255,255,0.07); }
    .div-srv-block { grid-template-columns: 1fr; gap: 16px; padding: 40px 0; }
    .div-srv-block--alt { margin: 0; padding: 32px 20px; border-radius: 16px; }
    .div-srv-icon-wrap { width: 56px; height: 56px; font-size: 22px; border-radius: 14px; }
    .div-srv-content h3 { font-size: 20px; }
    .div-srv-content p { font-size: 14px; }
    .div-srv-feat { font-size: 13px; }
    .div-highlight { padding: 40px 0; }
    .div-highlight-inner { flex-direction: column; gap: 16px; }
    .div-highlight-text h3 { font-size: 20px; }
    .div-stack-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .div-stack-item { padding: 18px 8px; }
    .div-stack-item i { font-size: 26px; }
    .div-services { padding: 60px 0; }
    .div-sec-header { margin-bottom: 40px; }
}

@media (max-width: 480px) {
    .div-hero-content h1 { font-size: clamp(22px, 8vw, 28px); }
    .div-overview-grid { grid-template-columns: 1fr; }
    .div-stack-grid { grid-template-columns: repeat(2, 1fr); }
    .div-hero-btns { flex-direction: column; }
    .btn-div-primary, .btn-div-outline { width: 100%; max-width: 280px; }
}