/* Section Styling */
.section-padding {
    padding: clamp(32px, 20px + 4vw, 60px) 0;
    position: relative;
}

.section-header {
    margin-bottom: 60px;
    text-align: center;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.section-header .sub-title {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(6, 80, 143, 0.12);
    border: 1px solid rgba(6, 80, 143, 0.22);
}

.section-header h2 {
    font-size: 48px;
    margin-bottom: 16px;
    letter-spacing: -1px;
    line-height: 1.12;
}

.section-header h2 span {
    color: var(--primary);
}

.section-header p {
    color: #667085;
    max-width: 820px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.75;
}

@media (max-width: 991.98px) {
    .section-header h2 {
        font-size: 40px;
    }
}

@media (max-width: 575.98px) {
    .section-header h2 {
        font-size: 32px;
    }
}

/* 1. Hero Section — pure image slider, natural aspect ratio, never cropped.
   Each slide's height simply follows its image (width:100% / height:auto),
   and slick's adaptiveHeight option resizes the slider smoothly between
   slides of different proportions instead of forcing a crop to fit. */
.hero-section {
    position: relative;
    width: 100%;
    background: #071019;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
}

.hero-slide {
    width: 100%;
    line-height: 0;
}

.hero-slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Anti-FOUC guard: jQuery/Slick load at the bottom of the page and only
   call .slick() once every script above them has executed, so without
   this the browser paints all raw slides stacked on top of each other
   for a moment before Slick restructures the DOM into a real carousel.
   Hiding every slide but the first up front — then releasing that rule
   once Slick marks the container ".slick-initialized" — makes the very
   first paint already look like the finished carousel. */
.hero-slider .hero-slide {
    display: none;
}

.hero-slider .hero-slide:first-child {
    display: block;
}

.hero-slider.slick-initialized .hero-slide {
    display: block;
}

/* Serial slide indicators — small brand-colored dots, one per picture.
    Raised on desktop so the floating Trust Bar (which overlaps the hero's
    bottom edge) doesn't sit on top of them; see the 991.98px query below
    where the Trust Bar stops overlapping and the dots drop back down. */
.hero-slider .slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 96px;
    z-index: 3;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-slider .slick-dots li {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.hero-slider .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    color: transparent;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-slider .slick-dots li button:hover {
    background: rgba(255, 255, 255, 0.75);
}

.hero-slider .slick-dots li.slick-active button {
    width: 30px;
    border-radius: 6px;
    background: var(--primary);
}

@media (max-width: 991.98px) {
    /* Trust Bar no longer overlaps the hero below this breakpoint. */
    .hero-slider .slick-dots {
        bottom: 24px;
    }
}

/* 2. Trust & Credibility Bar */
.trust-bar {
    background: var(--white);
    padding: 40px 0;
    margin-top: -60px;
    position: relative;
    z-index: 10;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
    transition: transform 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-3px);
}

.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    font-size: 26px;
    color: var(--primary);
    background: rgba(6, 80, 143, 0.12);
    border: 1px solid rgba(6, 80, 143, 0.22);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.trust-item:hover .trust-icon {
    background: var(--primary);
    color: var(--white);
    transform: scale(1.08);
}

.trust-text h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.trust-text span {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

/* Columns stack (col-lg-4 collapses to full width) starting at 991.98px,
   so the "stacked" treatment — killing Bootstrap's .border-end vertical
   rule, adding horizontal dividers between rows, and left-aligning each
   icon+text row — needs to start there too. It previously only kicked in
   at 767.98px, leaving a stray vertical border on the right edge of each
   full-width row between 768px-991px. */
@media (max-width: 991.98px) {
    .trust-bar {
        margin-top: 10px;
        padding: 24px 0;
        border-radius: 14px;
    }

    .trust-bar .border-end {
        border-right: 0 !important;
    }

    .trust-bar .row>[class*="col-"] {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .trust-bar .row>[class*="col-"]:last-child {
        border-bottom: 0;
    }

    .trust-item {
        justify-content: flex-start;
        padding: 16px 18px;
        gap: 14px;
    }
}

@media (max-width: 767.98px) {
    .trust-bar {
        padding: 18px 0;
        margin-top: 10px;
    }

    .trust-item {
        padding: 14px 16px;
        gap: 12px;
    }
}

@media (max-width: 575.98px) {
    .trust-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .trust-text h4 {
        font-size: 17px;
    }

    .trust-text span {
        font-size: 12px;
    }
}

/* Enhanced Services Section */
.services-section-enhanced {
    position: relative;
    overflow: hidden;
}

.services-section-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(6, 80, 143, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.services-section-enhanced::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(6, 80, 143, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.services-grid-wrapper {
    background: var(--white);
    border-radius: 24px;
    padding: 50px 40px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(6, 80, 143, 0.1);
    position: relative;
    z-index: 1;
}

/* The card fills its column's full height (Bootstrap stretches columns
   in a row to match the tallest one by default), so every card in a row
   matches whichever one has the most content — no fixed/guessed height
   needed, and it still grows correctly if the copy changes later. */
.logo-card-service {
    background: var(--white);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(6, 80, 143, 0.15);
}

.logo-card-service:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 70px rgba(6, 80, 143, 0.25);
    border-color: var(--primary);
}

.logo-card-service .logo-media {
    position: relative;
    overflow: hidden;
    height: 240px;
}

.logo-card-service .logo-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.logo-card-service:hover .logo-media::after {
    opacity: 0.8;
}

.logo-card-service img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.logo-card-service:hover img {
    transform: scale(1.1);
}

.logo-card-service .logo-caption {
    padding: 24px 20px;
    background: var(--white);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-card-service .logo-caption h4 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--secondary);
}

.logo-card-service .logo-caption p {
    font-size: 14px;
    color: #667085;
    margin: 0;
    line-height: 1.6;
}

.logo-card-service:hover .logo-caption h4 {
    color: var(--primary);
}

/* Company Profile Section */
.company-profile-section {
    background: linear-gradient(135deg, var(--secondary) 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.company-profile-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}

.company-profile-wrapper {
    position: relative;
    z-index: 1;
}

.company-profile-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 60px 50px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.company-profile-card .sub-title {
    color: var(--primary);
    background: rgba(6, 80, 143, 0.15);
    border: 1px solid rgba(6, 80, 143, 0.3);
}

.company-profile-card h2 {
    color: var(--white);
    font-size: 42px;
    margin-bottom: 20px;
}

.company-profile-card h2 span {
    color: var(--primary);
}

.company-profile-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.company-profile-btn {
    background: linear-gradient(45deg, var(--primary), var(--primary-dark));
    color: var(--white) !important;
    border: none !important;
    border-radius: 50px;
    padding: 18px 50px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 40px rgba(6, 80, 143, 0.4);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
}

.company-profile-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 55px rgba(6, 80, 143, 0.55);
    color: var(--white) !important;
}

.company-profile-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.company-profile-btn:hover i {
    transform: translateX(5px);
}

/* Comprehensive Responsive Styles */
@media (max-width: 1199.98px) {
    .section-header h2 {
        font-size: 42px;
    }

    .company-profile-card h2 {
        font-size: 36px;
    }
}

@media (max-width: 991.98px) {
    .section-header h2 {
        font-size: 36px;
    }

    .section-header p {
        font-size: 15px;
    }

    .services-grid-wrapper {
        padding: 40px 30px;
    }

    .logo-card-service .logo-media {
        height: 220px;
    }

    .company-profile-card {
        padding: 50px 40px;
    }

    .company-profile-card h2 {
        font-size: 32px;
    }

    .company-profile-card p {
        font-size: 16px;
    }

}

@media (max-width: 767.98px) {
    .section-header {
        margin-bottom: 45px;
    }

    .section-header h2 {
        font-size: 30px;
        margin-bottom: 12px;
    }

    .section-header .sub-title {
        font-size: 12px;
        padding: 6px 12px;
    }

    .section-header p {
        font-size: 14px;
        line-height: 1.6;
    }

    .services-grid-wrapper {
        padding: 35px 20px;
    }

    .logo-card-service .logo-media {
        height: 210px;
    }

    .logo-card-service .logo-caption {
        padding: 18px 16px;
    }

    .logo-card-service .logo-caption h4 {
        font-size: 16px;
    }

    .logo-card-service .logo-caption p {
        font-size: 13px;
    }

    .company-profile-card {
        padding: 40px 25px;
        border-radius: 18px;
    }

    .company-profile-card h2 {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .company-profile-card p {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 28px;
    }

    .company-profile-btn {
        padding: 14px 35px;
        font-size: 14px;
        letter-spacing: 1px;
    }

    .ttm-btn {
        padding: 12px 30px;
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    .section-header {
        margin-bottom: 35px;
    }

    .section-header h2 {
        font-size: 26px;
    }

    .section-header p {
        font-size: 14px;
    }

    .services-grid-wrapper {
        padding: 30px 18px;
        border-radius: 18px;
    }

    .logo-card-service .logo-media {
        height: 200px;
    }

    .company-profile-card {
        padding: 35px 20px;
    }

    .company-profile-card h2 {
        font-size: 24px;
    }

    .company-profile-card p {
        font-size: 14px;
    }

    .company-profile-btn {
        padding: 12px 30px;
        font-size: 13px;
    }
}

@media (max-width: 479.98px) {
    .section-header h2 {
        font-size: 24px;
    }

    .logo-card-service .logo-media {
        height: 180px;
    }

    .company-profile-card {
        padding: 30px 18px;
    }

    .company-profile-card h2 {
        font-size: 22px;
    }

    .company-profile-btn {
        width: 100%;
        justify-content: center;
    }

    .ttm-btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .ttm-btn:last-child {
        margin-bottom: 0;
    }
}

/* 3. Why Choose Us */
.why-us-section {
    background-color: var(--secondary);
    color: var(--white);
    padding: 50px 0;
}

/* Above 991px the columns sit side by side and share the row's height
   (the row has no align-items override, so flexbox's default "stretch"
   makes both columns match whichever is taller). The image fills its
   entire column edge-to-edge (object-fit: cover) instead of being
   capped/centered, and since the two columns are stretched to the exact
   same height, the text column's content is always contained within
   the image's own top/bottom edges — guaranteed by the equal-height
   stretch, not by manual spacing. Below 992px the columns stack (image
   full width on top, text below) and the wrapper's height collapses
   back to the image's own natural, uncropped aspect ratio. */
.why-us-image-wrap {
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.4s ease;
}

.why-us-image-wrap:hover {
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}

.why-us-image {
    display: block;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    transition: transform 0.5s ease;
}

.why-us-image-wrap:hover .why-us-image {
    transform: scale(1.08);
}

/* Fluid sizing (clamp) instead of a few fixed breakpoints: the text
   column's height directly determines how much the image gets cropped
   (they're stretched to match — see the comment above), so text that
   resizes smoothly across every viewport width keeps the crop amount
   changing gradually too, instead of jumping at three fixed points.
   .why-text h4 previously had no font-size at all here, so above 767px
   it was silently inheriting the theme's global "h4 { font-size: 30px }"
   — nearly double the intended size — which is what made the text
   column (and therefore the crop) so much taller than it needed to be. */
.why-us-section h2 {
    font-size: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
    margin-bottom: clamp(20px, 12px + 2vw, 40px);
}

.why-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: clamp(18px, 12px + 1.5vw, 40px);
    transition: transform 0.3s ease;
}

/* Without this, the last feature's own bottom margin pushes the whole
   text block off-center against the image next to it (the row uses
   align-items: center). */
.why-feature:last-child {
    margin-bottom: 0;
}

.why-feature:hover {
    transform: translateX(10px);
}

.why-icon {
    min-width: clamp(42px, 32px + 2vw, 60px);
    height: clamp(42px, 32px + 2vw, 60px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 12px + 1vw, 24px);
    color: var(--primary);
    margin-right: clamp(12px, 8px + 1vw, 20px);
    flex-shrink: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.why-feature:hover .why-icon {
    background: var(--primary);
    color: var(--white);
}

.why-text h4 {
    color: var(--white);
    margin-bottom: 10px;
    font-size: clamp(15px, 13px + 0.6vw, 20px);
}

.why-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(13px, 12px + 0.4vw, 15px);
    line-height: 1.6;
}

/* The section previously had no responsive rules of its own at all — a
   duplicate .why-feature/.why-icon override existed inside the 575.98px
   query above, but it was declared before this section's base rules, so
   the later base rules always won regardless of screen size and the
   override never actually applied. This is the real, effective one. */
@media (max-width: 991.98px) {
    .why-us-section {
        padding: 40px 0;
    }

    /* Stacked below 992px: the wrapper drops its stretched height and
       the image reverts to its natural, uncropped aspect ratio, taking
       the full width of the screen. */
    .why-us-image-wrap {
        height: auto;
        border-radius: 12px;
    }

    .why-us-image {
        height: auto;
        object-fit: contain;
    }
}

@media (max-width: 767.98px) {
    .why-us-section {
        padding: 30px 0;
    }
}

@media (max-width: 575.98px) {
    .why-us-section {
        padding: 15px 0;
    }
}

/* 4. Process */
.process-line {
    position: absolute;
    top: 40%;
    left: 10%;
    width: 80%;
    height: 2px;
    border-top: 2px dashed #ddd;
    z-index: 1;
}

@media(max-width: 991px) {
    .process-line {
        display: none;
    }
}

.process-step {
    position: relative;
    z-index: 2;
    background: var(--white);
    padding: clamp(20px, 15px + 2vw, 30px);
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
    width: 100%;
    height: 100%;
}

.process-step:hover {
    transform: translateY(-15px);
}

/* These previously had no font-size of their own, so they silently
   inherited the theme's global h4/p defaults (h4: 30px/40px line-height)
   from main.css — oversized for a compact card in a 4-up row. */
.process-step h4 {
    font-size: clamp(16px, 13px + 1vw, 20px);
    margin-bottom: 10px;
}

.process-step p {
    font-size: clamp(13px, 12px + 0.4vw, 15px);
}

.step-num {
    width: clamp(34px, 28px + 2vw, 40px);
    height: clamp(34px, 28px + 2vw, 40px);
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: clamp(14px, 12px + 0.6vw, 16px);
    margin: 0 auto clamp(14px, 10px + 1vw, 20px);
    box-shadow: 0 5px 15px rgba(6, 80, 143, 0.3);
}

/* 5. Testimonials — a Slick carousel (same library as the hero slider).
   2 cards per view above 767px, 1 card at a time below it. Height is
   never fixed: .slick-track/.slick-slide are switched to flex so every
   slide visible in the current view stretches to match the tallest
   one's natural content height, the same equal-height technique used
   for the service/process cards elsewhere on this page. */
.testimonials-slider {
    margin: 0 -12px;
}

.testimonials-slider .slick-track {
    display: flex !important;
}

.testimonials-slider .slick-slide {
    height: auto !important;
    display: flex !important;
}

.testimonials-slider .slick-slide>div {
    display: flex;
    width: 100%;
}

.testimonial-slide {
    display: flex;
    width: 100%;
    padding: 0 12px 8px;
}

.testimonial-card {
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: clamp(22px, 16px + 2vw, 34px) clamp(18px, 14px + 1.6vw, 30px);
    border-radius: 18px !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.testimonial-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: rgba(6, 80, 143, 0.35);
    box-shadow: 0 18px 36px rgba(6, 80, 143, 0.16);
}

.testimonial-quote {
    font-size: 34px;
    color: rgba(6, 80, 143, 0.18);
    position: absolute;
    top: 14px;
    right: 18px;
    pointer-events: none;
}

.testimonial-stars {
    display: flex;
    gap: 4px;
    color: var(--primary);
    margin-bottom: 12px;
    font-size: 14px;
}

.testimonial-text {
    font-size: clamp(14px, 13px + 0.4vw, 16px);
    line-height: 1.8;
    color: #334155;
    margin-bottom: 18px;
}

.testimonial-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.testimonial-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 80, 143, 0.14);
    color: var(--primary-dark);
    font-weight: 800;
}

.testimonial-source {
    font-weight: 800;
    color: var(--secondary);
    line-height: 1.2;
}

.testimonial-role {
    color: #64748b;
    font-size: 13px;
}

.testimonials-slider .slick-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.testimonials-slider .slick-dots li {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.testimonials-slider .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(6, 80, 143, 0.2);
    color: transparent;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonials-slider .slick-dots li button:hover {
    background: rgba(6, 80, 143, 0.4);
}

.testimonials-slider .slick-dots li.slick-active button {
    width: 26px;
    border-radius: 6px;
    background: var(--primary);
}

/* 6. CTA Section */
.cta-section {
    background: linear-gradient(135deg, rgba(35, 35, 35, 0.88), rgba(6, 80, 143, 0.62)), url('');
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
    color: var(--white);
    padding: 100px 0;
}