/* ==========================
   GLOBAL RESET
========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #f8f9fa;
    color: #222;
    line-height: 1.6;

    /* Sticky footer base */
    display: flex;
    flex-direction: column;
}

/* ==========================
   LAYOUT
========================== */
main {
    flex: 1;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

 /* ==========================
   HEADER
========================== */
.site-header {
    color: #0b1f44;
    margin: 0;
    padding: 8px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 74px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    align-items: center;
    gap: 0;
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(11, 31, 68, .12);
    /* box-shadow: 0 2px 5px 0 ; */
}



.logo-icon {
    margin-right: 2rem;
    display: flex;
    align-items: center;
}

.logo-icon a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo {
    height: 50px; /* Adjust based on your preference */
    width: auto;
    max-width: 150px; /* Prevents image from being too wide */
    object-fit: contain;
}

.nav-left {
    display: flex;
    gap: 1.5rem;
}

.nav-left a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-left a:hover {
    color: #ffffff;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column;
        padding: 1rem;
    }
    
    .logo-icon {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .site-logo {
        height: 40px; /* Slightly smaller on mobile */
    }
    
    .nav-left {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}



.nav-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.nav-left a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
}

.nav-left a:hover {
    text-decoration: underline;
}

.nav-right {
    gap: 1.5rem;
    display: flex;
    align-items: center;
}

.nav-right a {
    color: red;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.nav-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}

.nav-right a {
    display: inline-block;
    padding: 6px 14px;
    background-color: #0b1f44;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.3s ease;
    font-weight: 500;
    text-shadow: none;
    white-space: nowrap;
}

.nav-right a:hover {
    background-color: #0b1f44;
    color: #ffffff;
}

.nav-right a.active {
    background-color: #0b1f44;
    color: #ffffff;
}

.header-icon {
    width: 92px;
    height: 58px;
    max-width: 100%;
    border-radius: 0;
    object-fit: contain;
}

.header-icon:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column;
        padding: 15px;
        gap: 4px;
    }
    
    .nav-left {
        justify-content: center;
        width: 100%;
    }
    
    .header-icon {
        width: 44px;
        height: 44px;
    }
}

/* FAQ PAGE */
.faq-page {
    padding: 60px 20px 40px;
    background: #0b1f44;
    color: #e9eff6;
}

.faq-hero {
    text-align: center;
    margin: 0 auto 30px;
    max-width: 900px;
}

.faq-hero h1 {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
}

.faq-hero p {
    color: #c9d6f0;
    font-size: 16px;
}

.faq-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.faq-column {
    background: #dce5f2;
    border-radius: 22px;
    padding: 24px 20px;
    box-shadow: none;
}

.faq-section-heading h2 {
    color: #0f2453;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 16px;
}

.faq-links-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-link-card {
    background: #fff;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 3px 10px rgba(15, 36, 83, 0.08);
    border: 1px solid #edf2f7;
}

.faq-link-card summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: #0f2453;
}

.faq-link-card summary::-webkit-details-marker {
    display: none;
}

.faq-link-card summary a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.faq-answer {
    margin-top: 10px;
    color: #24324a;
    font-size: 14px;
    line-height: 1.7;
}

@media (max-width: 991px) {
    .faq-sections-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .faq-page {
        padding-top: 40px;
    }

    .faq-hero h1 {
        font-size: 28px;
    }
}

/* Shared section header pattern used across pages */
.section-header {
    text-align: center;
    margin: 0 auto 32px;
    padding: 0 0 0;
}

.section-header .section-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
}

.section-header .section-title span {
    color: #0a58ca;
}

.section-header .heading-line {
    width: 90px;
    height: 4px;
    background: #0a58ca;
    margin: 12px auto 20px;
    border-radius: 2px;
}

.section-header .section-subtitle {
    color: #555;
    font-size: 16px;
    margin-bottom: 0;
}

.about-section .section-header .section-title,
.contact-section .section-header .section-title {
    color: #e9eff6;
}

.about-section .section-header .section-subtitle,
.contact-section .section-header .section-subtitle {
    color: #c9d6f0;
}

.marquee-buttons {
    margin-top: 12px;
}
/* ==========================
   careers section
========================== 
.jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.job-card {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    border: 1px solid #e3e3e3;
    transition: box-shadow 0.2s ease;
}

.job-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.job-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.job-company {
    color: #555;
    font-size: 14px;
    margin-bottom: 5px;
}

.job-location {
    font-size: 13px;
    color: #777;
    margin-bottom: 10px;
}

.job-description {
    font-size: 14px;
    color: #333;
}

.jobs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    justify-items: center;
}

.jobs-grid .job-card:nth-child(5) { grid-column: 2; }
.jobs-grid .job-card:nth-child(6) { grid-column: 3; }
.jobs-grid .job-card:nth-child(7) { grid-column: 4; }
@media (max-width: 768px) {
    .pyramid-grid {
        grid-template-columns: 1fr;
    }

    .pyramid-grid .top {
        grid-column: auto;
    }
}
/* ==========================
   Careers Section – Pyramid Layout
========================== */

.jobs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 30px;
    justify-items: center;
}

/* Center bottom row (pyramid pattern) */
.jobs .job-card:nth-child(5) { grid-column: 2; }
.jobs .job-card:nth-child(6) { grid-column: 3; }
.jobs .job-card:nth-child(7) { grid-column: 4; }

/* Job card styling */
.job-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    border: 1px solid #e3e3e3;
    width: 100%;
    max-width: 280px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.job-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.job-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.job-description {
    font-size: 14px;
    color: #555;
}

/* ==========================
   Responsive (clean override)
========================== */

@media (max-width: 992px) {
    .jobs {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reset manual grid placement */
    .jobs .job-card:nth-child(5),
    .jobs .job-card:nth-child(6),
    .jobs .job-card:nth-child(7) {
        grid-column: auto;
    }
}

@media (max-width: 576px) {
    .jobs {
        grid-template-columns: 1fr;
    }
}






/* ==========================
   BUTTONS
========================== */
.btn {
    display: inline-block;
    padding: 8px 14px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
}

.btn:hover {
    background: #1d4ed8;
}

/* ==========================
   SERVICES
========================== */
.service-card {
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid #e3e3e3;
}

/* Page title utility: center headings across pages */
.page-title {
        text-align: center;
        font-size: 28px;
        margin: 10px 0 18px;
        font-weight: 700;
        color: #0b2540;
}

/* Services section improvements: equal height cards, clean layout */
.services .row > [class*="col-"] { display:flex; }
.services .icon-box { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px; border-radius:10px; background:#fff; border:1px solid #eef2f6; box-shadow:0 8px 20px rgba(11,37,64,0.04); }
.services .icon-box h4.title { margin-top:12px; font-size:18px; color:#06203a; }
.services .icon-box .description { color:#556; font-size:14px; margin-top:8px; line-height:1.45; }
.services .icon-box .img-fluid { width:100%; height:120px; object-fit:cover; border-radius:8px; }
.services .icon-box a { color:inherit; text-decoration:none }

/* Make service cards equal height on smaller screens too */
@media(max-width: 991px){
    .services .row > [class*="col-"]{ display:block }
    .services .icon-box{ align-items:flex-start; text-align:left }
}

/* ==========================
   FOOTER
========================== */
.footer {
    background: #111;
    color: #ccc;
    padding: 14px 0;
    margin-top: auto;
    width: 100%;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    flex-wrap: nowrap;
}

.footer-branding { text-align: center; }
.footer-branding p { margin: 0; font-size: 13px; }
.footer-logo { max-width: 140px; max-height: 42px; object-fit: contain; margin: 0 auto 6px; }

.footer-links-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    flex-wrap: nowrap;
}

.footer-about,
.footer-faq-links,
.footer-social {
    min-width: 0;
}
.footer-about { grid-column: 1 / -1; text-align: center; }
.footer-social { width: 100%; text-align: center; }
.footer-nav-column, .footer-social { text-align: center; }
.footer-nav-column a { justify-content: center; }
.footer-social h3 { margin-bottom: 10px; }
.social-links { display: flex; justify-content: center; gap: 18px; }
.social-links a { margin: 0; }
.footer-copyright { width: 100%; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; color: #fff; font-size: 13px; }

.footer-nav-column { min-width: 150px; }
.footer-nav-column h3 { color: #fff; font-size: 16px; margin: 0 0 10px; }
.footer-nav-column a { display: inline-flex; min-height: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); border-radius: 999px; justify-content: center; font-size: 14px; font-weight: 500; }

.footer-nav-column {
    text-align: center;
}

.footer-nav-column h3 {
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 2px solid #2563eb;
    width: fit-content;
    margin: 0 auto 12px;
}

.footer-nav-column nav,
.footer-nav-column {
    align-content: start;
}

.footer-nav-column a {
    margin: 0 3px 6px;
}

/* Keep all five Explore links together in one centered row. */
.footer-links-grid .footer-faq-links[aria-label="Explore links"] {
    grid-column: auto;
    white-space: nowrap;
    overflow: visible;
}

.footer-links-grid .footer-faq-links[aria-label="Explore links"] a {
    display: inline-flex;
}

/* Legal follows the same centered single-row button layout as Explore. */
.footer-links-grid .footer-faq-links[aria-label="Legal links"] {
    grid-column: auto;
    white-space: nowrap;
    overflow: visible;
}

.footer-links-grid .footer-faq-links[aria-label="Legal links"] a {
    display: inline-flex;
}

.footer-brand {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.footer-note {
    font-size: 14px;
    line-height: 1.7;
    color: #b9c1cc;
}

.footer-faq-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-faq-links a:hover {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.45);
    color: #fff;
}

.footer-social h3 {
    color: #fff;
    margin-bottom: 14px;
    font-size: 18px;
    text-align: center;
    white-space: nowrap;
}

.social-links a {
    margin-left: 15px;
}

.footer-social .social-links {
    flex-wrap: nowrap;
    white-space: nowrap;
}

@media (min-width: 769px) {
    .footer-nav-column a {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 13px;
    }

    .social-links {
        gap: 10px;
    }
}

.social-links svg {
    width: 22px;
    height: 22px;
    fill: #ccc;
    transition: fill 0.2s ease;
}

.social-links a:hover svg {
    fill: #2563eb;
}

@media (max-width: 768px) {
    .footer-container {
        padding: 0 16px;
    }

    .footer-links-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
    .footer-nav-column { min-width: 0; }

    .social-links a {
        margin: 0;
    }
}

@media (max-width: 520px) {
    .footer-links-grid { grid-template-columns: 1fr; }
    .footer-about { grid-column: auto; }
}

/* Consistent page heading treatment */
main h1, main h2, main h3,
.legal-page h1, .legal-page h2, .legal-page h3 {
    text-align: center;
    color: #173b67;
    font-weight: 700;
}

main h1, main h2, main h3,
.legal-page h1, .legal-page h2, .legal-page h3 {
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 8px;
    border-bottom: 3px solid #2563eb;
}

.footer-nav-column a {
    white-space: nowrap;
}


/* /* ==========================
   Cookie Banner
========================== */
/* #cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85); /* semi-transparent dark overlay */
    /* color: #fff;
    padding: 20px 30px;
    z-index: 9999;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

#cookie-banner p {
    margin: 0;
    font-size: 14px;
    max-width: 70%;
}

#cookie-banner a {
    color: #1da1f2;
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#cookie-banner button {
    padding: 8px 18px;
    border: none;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
} */

/* #cookie-banner button.accept {
    background-color: #0a2540; /* dark blue */
    /* color: #fff;
}

#cookie-banner button.accept:hover {
    background-color: #061a2a;
}

#cookie-banner button.decline {
    background-color: #fff;
    color: #0a2540;
}

#cookie-banner button.decline:hover {
    background-color: #e6e6e6;
}

@media(max-width: 768px){
    #cookie-banner p {
        max-width: 100%;
        font-size: 13px;
        margin-bottom: 10px;
    }

    .cookie-buttons {
        width: 100%;
        justify-content: flex-start;
    }
} */ 
 #cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.9);
    color: #fff;
    padding: 20px;
    z-index: 9999;
}

.cookie-buttons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

#cookie-banner button {
    padding: 8px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.accept {
    background: #0a2540;
    color: #fff;
}

.manage {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.cookie-options-box {
    display: none;
    background: #fff;
    color: #000;
    padding: 15px;
    margin-top: 15px;
    border-radius: 6px;
    max-width: 400px;
}

.save-btn {
    background: #0a2540;
    color: #fff;
}

.cookie-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-modal-content {
    background: #ffffff;
    width: 500px;
    max-width: 90%;
    padding: 25px;
    border-radius: 8px;
    position: relative;
    color: #000000;   /* 🔥 IMPORTANT FIX */
}

.cookie-modal-content h2 {
    margin-top: 0;
    color: #000;  /* Ensure heading visible */
}

.close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 22px;
    cursor: pointer;
    color: #000;
}


/* ==========================
   Hero Section (background + text overlay)
========================== */
/* .hero-slide {
    height: 550px;
    width: 1600px;
    background-size: cover;
    background-position: center;
    position: relative;
    
} */


.hero-slide {
    position: relative; 
    height: 550px;              /* Full screen height */
    width: 100%;                /* Full screen width */
    background-size:cover ;     /* Image fully covers */
    background-position: center center;  /* Center the image/focus on faces */
    background-repeat: no-repeat;
    background-attachment: fixed;  /* Fix the background image */
    margin-top: 0;              /* Reset any margin */
}

/* Add top padding to body to account for fixed header */
body {
    padding-top: 0;
}

/* Hero carousel container fix */
#heroCarousel {
    margin-top: 70px;  /* Add margin to push hero below fixed header */
    width: 100%;
    max-width: 100%;
}

/* Stable carousel layout even while Bootstrap CSS is loading or cached. */
#heroCarousel .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#heroCarousel .carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    backface-visibility: hidden;
}

#heroCarousel .carousel-item.active {
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,31,68,.78), rgba(37,99,235,.42), rgba(0,0,0,.48));
    display: flex;
    align-items: center;
    justify-content: center;

}

.company-intro {
    position: relative;
    padding: 110px 24px 48px;
    text-align: center;
    color: #fff;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #101827;
}

.company-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    display: none;
}

.company-intro > * {
    position: relative;
    z-index: 1;
}

.hero-text {
    text-align: center;
    color: #fff;
    max-width: 800px;
    padding: 0 20px;
}

.home-hero {
    position: relative;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: url('/images/herosection.jpg') center/cover no-repeat;
}

.home-hero-static {
    background-image: url('/images/experience.jpg');
}

.home-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(7, 20, 45, .82), rgba(15, 79, 145, .5), rgba(0, 0, 0, .5));
}

.home-hero .hero-text {
    position: relative;
    z-index: 1;
}

.home-carousel { width: 100%; position: relative; }
.home-carousel .carousel-indicators { z-index: 3; bottom: 22px; }
.home-carousel .carousel-indicators button { width: 34px; height: 4px; border: 0; border-radius: 4px; }

.site-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 1200; }
.site-whatsapp a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: #25d366; color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.site-whatsapp a:hover { background: #1ebe5d; color: #fff; }
.site-whatsapp i { font-size: 20px; }

/* The shared layout owns the WhatsApp button; hide legacy page-specific copies. */
.header-whatsapp,
.page-whatsapp { display: none !important; }

.legal-page { max-width: 1080px; margin: 110px auto 70px; padding: 0 20px; }
.legal-hero { padding: 54px 24px 42px; border-radius: 22px; text-align: center; color: #fff; background: linear-gradient(135deg, #0b1f44, #155dcc); box-shadow: 0 14px 30px rgba(11,31,68,.16); }
.legal-eyebrow { display: block; margin-bottom: 10px; color: #bae6fd; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.legal-hero h1 { display: block; margin: 0 auto 12px; padding: 0; color: #fff; border: 0; background: transparent; }
.legal-hero p { margin: 0; color: #dbeafe; }
.legal-content { margin: 24px auto 0; padding: 32px; border: 1px solid #dbe3ef; border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(11,31,68,.07); line-height: 1.8; }
.legal-meta { padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; color: #64748b; }
.legal-content h2, .legal-content h3 { display: block; margin: 26px 0 10px; padding: 0 0 6px; color: #0b1f44; text-align: left; border-bottom: 2px solid #2563eb; background: transparent; }
.legal-content p { color: #475569; }
.legal-content a { color: #155dcc; font-weight: 600; }

.company-identity { padding: 110px 20px 50px; background: #f1f6fc; }
.company-identity-inner { max-width: 900px; margin: 0 auto; padding: 34px; text-align: center; background: #fff; border: 1px solid #d9e2ef; border-radius: 18px; box-shadow: 0 10px 26px rgba(11,31,68,.07); }
.company-identity-eyebrow { margin: 0 0 8px; color: #155dcc; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.company-identity-inner h1 { display: block; margin: 0 auto 8px; padding: 0; color: #0b1f44; border: 0; background: transparent; }
.company-identity-inner h2 { display: block; margin: 0 auto 18px; padding: 0; color: #155dcc; border: 0; background: transparent; font-size: 22px; }
.company-identity-inner p { color: #475569; }
.company-contact-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-bottom: 24px; padding: 16px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; }
.company-contact-details span { color: #dbeafe; }
.footer-legal-identity { grid-column: 1 / -1; width: 100%; margin: 0; text-align: center; color: #b9c1cc; font-size: 13px; }

@media (max-width: 600px) {
    .legal-content { padding: 22px 18px; }
    .site-whatsapp { right: 14px; bottom: 14px; }
    .site-whatsapp span { display: none; }
}

.hero-text h1 {
    font-size: 42px;
    font-weight: 700;
}

.hero-text p {
    font-size: 20px;
    margin: 15px 0;
}

.hero-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #0a2540;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.hero-btn:hover {
    background: #061a2a;
}

/* Mobile */
@media (max-width: 768px) {
    .hero-slide {
        height: 100vh;
    }
    .hero-text h1 {
        font-size: 26px;
    }
    .hero-text p {
        font-size: 16px;
    }
}


/* ===== Layout ===== */
.about-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ===== Card Styling ===== */
.about-card,
.box-container {
    flex: 1;
    max-width: 420px; /* increased width for About/Why boxes */
    background: #e9eff6;
    
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.about-card:hover,
.box-container:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0, 123, 255, 0.25);
}

/* ===== Headings ===== */

.about-card {
    margin: 100 auto;
}
.about-row {
    display: flex;
    justify-content: center;
}
.about-card h3 {
    width: 200%;
    text-align: center;
}

/* ===== Blue Divider ===== */
.blue-line {
    width: 70px;
    height: 4px;
    margin: 0 auto 20px;
    border-radius: 4px;
    background-color: #00a6ff;
}

/* ===== Text ===== */
.about-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    width: 412px;
}

/* ===== Expertise List ===== */
.expert-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 320px;
}

.expert-list li {
    background: #f5f8fc;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #0b1f44;
    border-left: 4px solid #0b1f44;
}

.why-box {
    flex: 1;
    min-width: 360px; /* give more space to Why boxes */
    margin: 20px;
    height: 400px;
    width: 200px;
    padding: 40px 30px;
    background: #e9eff6;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
#why-box1{
    background: #e9eff6;
    flex: 1;
    min-width: 300px;
    margin: 20px;
    height: 800px;
    width: 400px;
    padding: 40px 30px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Title */
.why-box h3 {
    text-align: center;
    font-size: 28px;
    color: #000;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Blue underline */
.underline {
    width: 100%;
    height: 4px;
    background: #1ea7fd;
    border-radius: 2px;
    text-align: center;
    margin-bottom: 40px;
}

/* Why Choose Us Section Heading - Centered with underline */
.about-box h3 {
    text-align: center;
    font-size: 28px;
    color: #0b1f44;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Underline for Why Choose Us heading */
.about-box h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #1ea7fd;
    margin: 12px auto 0;
    border-radius: 2px;
}

/* Check icon and heading centering in cards */
.why-item h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.why-item h4::before {
    /* content: '✓'; */
    font-size: 18px;
    color: #1ea7fd;
    font-weight: bold;
}
/* Grid layout - 2-1-2 pattern */
.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 40px;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* Individual item */
.why-item {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.why-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.why-item h4 {
    font-size: 20px;
    font-weight: 700;
    color: #0b1f44;
    margin-bottom: 12px;
    text-align: center;
}

.why-item p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
    text-align: center;
}

/* Center the middle item (item 3) */
.why-item:nth-child(3) {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 450px;
    margin: 0 auto;
    background: linear-gradient(135deg, #ffffff, #f0f7ff);
    border: 2px solid #0b1f44;
}

.why-item:nth-child(3) h4,
.why-item:nth-child(3) p {
    text-align: center;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
        padding: 20px 15px;
    }

    .why-item:nth-child(3) {
        grid-column: auto;
        text-align: left;
        max-width: 100%;
        margin: 0;
    }

    .why-item:nth-child(3) h4,
    .why-item:nth-child(3) p {
        text-align: left;
    }

    .why-item {
        padding: 25px 20px;
    }
    
    .why-item h4 {
        font-size: 18px;
    }
}


/* ===== Responsive (Bootstrap-style) ===== */
@media (max-width: 992px) {
    .about-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .about-row {
        flex-direction: column;
        align-items: center;
    }

    .about-card,
    .box-container {
        max-width: 100%;
        height: 400px;
        
    }
}
.small-card {
    width: auto;
    max-width: 460px;
}

.about-card {
    width: 100%;
}
.about-row {
    align-items: flex-start;
}

.about-card,
.box-container {
    padding: 18px 20px;
}

.about-card p {
    width: 100%;
    line-height: 1.5;
}

/* ===== About Page Background ===== */

.about-page {
    min-height: 100vh;
    background-color: #0b1f44;
    padding: 60px 60px;
}
/*=====About page title=====*/
.about-title {
    color: #e9eff6;
    font-size: 32px;
    font-weight: 600;
}




/* ===== Services Section ===== */
.services {
    /* padding:  10px; */
    background-color: #f8f9fa;
}

/* Heading */
.services h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #0b1f44;
    margin-bottom: 10px;
}

.services h2 span {
    position: relative;
}

/* Underline */
.services .line {
    width: 80px;
    height: 4px;
    background-color: #0b1f44;
    margin: 0 auto 40px;
    border-radius: 2px;
}

/* Grid
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
} */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* FORCE 3 PER ROW */
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}
  

/* Card */
.service-card {
    background: #e9eff6;
    border-radius: 12px;
    padding: 30px 25px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

/* Icon */
.service-card i {
    font-size: 36px;
    color: #0b1f44;
    margin-bottom: 15px;
}

/* Card title */
.service-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #0b1f44;
    margin-bottom: 12px;
}

/* Description */
.service-description p {
    font-size: 14.5px;
    color: #555;
    line-height: 1.6;
}
/* ===== Skills Section ===== */
.skills-section {
    padding: 70px 20px;
}

.dark-section {
    background: linear-gradient(rgba(11, 31, 68, .9), rgba(11, 31, 68, .9)), url('/images/experience.jpg') center/cover no-repeat;
    color: #e9eff6;
}

/* Heading */
.skills-heading h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
}

.skills-heading .skills-desc {
    text-align: center;
    color: #e9eff6;
    margin: -25px auto 35px;
    white-space: nowrap;
    font-size: clamp(14px, 2vw, 22px);
}

.skills-heading h2 span {
    color: #e9eff6;
}

/* Layout */
.skills-container {
    display: flex;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Left Section */
.skills-left {
    flex: 1;
}

.skills-desc {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

.skills-services {
    font-size: 14.5px;
    color: #d1d5db;
    line-height: 1.7;
    margin-bottom: 30px;
}

.skills-graph-container img {
    width: 100%;
    max-width: 414px;
    height: auto;
}

/* Right Section */
.skills-right {
    flex: 1;
}

/* Skill Row */
.skill-row {
    margin-bottom: 25px;
}

.skill-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.skill-no {
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    color: #4fd1c5;
}

.skill-name {
    font-size: 16px;
    font-weight: 600;
}

/* Skill Bar */
.skill-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
}

.skill-fill {
    height: 100%;
    background-color: #4fd1c5;
    border-radius: 6px;
}

/* Responsive */
@media (max-width: 900px) {
    .skills-container {
        flex-direction: column;
    }
}
/* ===== Portfolio Section ===== */
/* ===== Headings ===== */




.portfolio{
    min-height: 100vh;
    background-color: #e9eff6;
    padding: 60px 0;
    
    text-align: center;
    
}





.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 0 40px;
}

/* .portfolio-link {
    text-decoration: none;
} */

.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    height: 180px;
    width: 200px;

    display: flex;
    justify-content: center;   /* center horizontally */
    align-items: center;       /* center vertically */
  
}

.portfolio-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;   /* keeps image proper */
}
/* Overlay */
.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: px;
    background: linear-gradient(to top, rgba(237, 106, 228, 0.7), transparent);
    color: #0f172a;
    transform: translateY(100%);
    transition: 0.4s ease;
}
/* Portfolio Filter Buttons Center */
.portfolio-filter {
    display: flex;
    justify-content: center;   /* centers horizontally */
    align-items: center;
    flex-wrap: nowrap;
    gap: 15px;                 /* space between buttons */
    margin: 30px 0 40px 0;     /* spacing below heading */
}

.portfolio { scroll-margin-top: 90px; }

/* Portfolio Page Filter Button Style */
.portfolio-filter .filter-btn {
    padding: 8px 20px;
    border-radius: 25px;
    border: 1px solid #0f172a;
    background: #0f172a;
    color: #e9eff6;
    width: 115px;        /* same width */
    height: 45px; 
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Portfolio Page Filter Button Hover Effect */
.portfolio-filter .filter-btn:hover {
    background-color: #0f172a;
    color: #e9eff6;
}

/* Portfolio Page Filter Active Button */
.portfolio-filter .filter-btn.active {
    background-color: #0f172a;
    color: #e9eff6;
}


/* Hover Effect */
.portfolio-item:hover img {
    transform: scale(1.01);
}

.portfolio-item:hover .portfolio-overlay {
    transform: translateY(0);
}
@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== Stats Section ===== */
.stats-section {
    padding: 70px 20px;
    background-color: #0b1f44;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
}

/* Stat Box */
.stat-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 35px 20px;
    border-radius: 14px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}

/* Icon */
.stat-box i {
    font-size: 36px;
    color: #4fd1c5;
    margin-bottom: 12px;
}

/* Counter */
.stat-box h2 {
    font-size: 36px;
    font-weight: 700;
    color: #e9eff6;
    margin-bottom: 6px;
}

/* Text */
.stat-box p {
    font-size: 15px;
    color: #d1d5db;
    font-weight: 500;
}
/* ===== Team Section ===== */
/*backgroung and padding*/
.team-section {
    padding: 60px 20px;
    background: #eef3f8;
}

.team-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 50px;
}

.team-container {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.team-card {
    background: #fff;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-8px);
}

.team-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.team-info {
    background: #1c2a3a;
    color: #fff;
    padding: 20px;
    text-align: center;
    min-height: 230px;
}

.team-info h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #7dd3fc, #c4b5fd, #f9a8d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.team-info h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #d9e2ef;
}

.team-info p {
    font-size: 14px;
    line-height: 1.6;
    color: #cfd8e3;
}

/* Responsive */
@media (max-width: 768px) {
    .team-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .team-card {
        width: 100%;
        max-width: 320px;
    }
}

    
/* ===== Plans Section ===== */
.plans-dark {
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(11,31,68,.94), rgba(23,37,84,.9), rgba(49,46,129,.88)), url('/images/company-growth.png') center/cover no-repeat;
    color: #e9eff6;
}

/* Title */
.plans-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
    color: #ffffff;
}

.plans-dark .plan-header h3,
.plans-dark .plan-card h3 {
    display: block;
    color: #ffffff;
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Grid */
.plans-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* Card */
.plan-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
}

/* Featured (Gold) */
.plan-card.featured {
    background: rgba(255, 255, 255, 0.05);
    transform: none;
}

/* Header */
.plan-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.price {
    font-size: 26px;
    font-weight: 700;
    margin-top: 10px;
}

.price span {
    font-size: 14px;
    font-weight: 400;
}

/* List */
.plan-card ul {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.plan-card ul li {
    padding: 10px 0;
    font-size: 14.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.plan-card ul li.alt {
    color: #4fd1c5;
}

/* Button */
.plan-contact-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #4fd1c5;
    color: #0b1f44;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.plan-contact-btn:hover {
    background-color: #e9eff6;
    color: #0b1f44;
}

/* Responsive */
@media (max-width: 768px) {
    .plan-card.featured {
        transform: none;
    }
}
/* ===== Chairman Section ===== */
/* ===== Chairman Section ===== */
.chairman-section {
    background: #e9eff6;
    padding: 70px 0;
    color: #e9eff6;
}

/* Heading */
.chairman-heading h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 10px;
    color: #0b1f44;
}

/* Container Layout */
.chairman-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    max-width: 1100px;
    margin: auto;
    padding: 20px;
}

/* Text Section */
.chairman-text {
    flex: 1;
}

/* Paragraph Styling */
.chairman-text p {
    font-size: 15px;
    line-height: 1.6;   /* 🔥 reduced line gap */
    margin-bottom: 18px;
    color: #0b1f44;
}

/* List Styling */
.positions {
    padding-left: 20px;
    margin-bottom: 20px;
}

.positions li {
    margin-bottom: 8px;  /* 🔥 smaller spacing between lines */
    font-size: 14px;
    line-height: 1.5;
    color: #0b1f44;
}

/* Image Section */
.chairman-image {
    flex: 0.8;
    text-align: center;
}

.chairman-image img {
    width: 100%;
    max-width: 280px;
    border-radius: 10px;
}

/* Name */
.chairman-name {
    margin-top: 12px;
    font-weight: 600;
    font-size: 16px;
    color: #0b1f44;
}

/*====Latest post section====*/
/* ===== Latest Posts Section ===== */
.latest-posts {
    padding: 80px 20px;
    background: #0b1f44;
    
    text-align: center;
}

.latest-posts .section-title {
    font-size: 34px;
    font-weight: 700;
    color: #e9eff6;
    margin-bottom: 10px;
}


.latest-posts .section-title span {
    color: #e9eff6;
}

.latest-posts .divider {
    width: 90px;
    height: 4px;
    background: #0a58ca;
    margin: 12px auto 40px;
    border-radius: 3px;
}

.posts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: auto;
}

.post-card {
    background: #e9eff6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease;
    text-align: left;
}

.post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.post-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.post-card h3 {
    font-size: 20px;
    margin: 18px 18px 10px;
    color: #222;
}

.post-text {
    font-size: 14px;
    color: #555;
    margin: 0 18px 12px;
    line-height: 1.6;
}

.read-more {
    display: inline-block;
    margin: 0 18px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #0a58ca;
    text-decoration: none;
}

.read-more:hover {
    color: #084298;
}

.d-none {
    display: none;
}
.view-more-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Services View More - increased margin to prevent touching WhatsApp button */
/* .services-view-more {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 80px; /* Increased from 30px to 80px to create more space from WhatsApp button */


.view-more-btn {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    margin-top: 5px;
    margin-bottom: 20px; 
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
}

.view-more-btn:hover {
    background-color: #0056b3;
}

/* Modified Read More / Read Less button */
.read-toggle-btn {
    display: inline-block;           /* behave like a button */
    background-color: #007bff;       /* blue background */
    color: white;                    /* white text */
    border: 2px solid #007bff;      /* blue border to create a box */
    padding: 8px 16px;               /* more padding for a better box look */
    cursor: pointer;                 /* pointer on hover */
    border-radius: 6px;              /* rounded corners */
    font-weight: 600;                /* bold text */
    text-align: center;              /* center text */
    transition: all 0.3s ease;      /* smooth hover transition */
}

.read-toggle-btn:hover {
    background-color: white;         /* invert colors on hover */
    color: #007bff;                  /* text becomes blue */
    border-color: #007bff;           /* keep border blue */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* subtle shadow for depth */
}


/* ===== Careers Section ===== */
.careers {
    padding: 80px 20px;
    background: #e9eff6;
    text-align: center;
}

.careers .section-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
}

.careers .section-title span {
    color: #0a58ca;
}

.careers .divider {
    width: 90px;
    height: 4px;
    background: #0a58ca;
    margin: 12px auto 20px;
    border-radius: 2px;
}

.positions-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 50px;
}

.job-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: auto;
}

.job-card {
    background: #f8f9fa;
    padding: 35px 25px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease;
}

.job-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

.job-icon {
    font-size: 42px;
    color: #0a58ca;
    margin-bottom: 15px;
}

.job-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #222;
}

.job-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

.apply-btn {
    display: inline-block;
    padding: 10px 22px;
    background: #0a58ca;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 25px;
    text-decoration: none;
    transition: 0.3s ease;
}

.apply-btn:hover {
    background: #084298;
}

/*=====contact section=====*/
.contact-section {
    padding: 80px 20px;
    background: #0b1f44;
}

.contact-heading {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    background: #0b1f44;
    color: #e9eff6;
}

.heading-line {
    width: 80px;
    height: 4px;
    background: #e9eff6;
    margin: 12px auto 40px;
    border-radius: 2px;
}

/* Layout */
.contact-container {
    max-width: 1000px;
    margin: auto;
}

.contact-top-row {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

/* Left */
.contact-left {
    flex: 1;
    min-width: 280px;
}

.info-block {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    padding: 18px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    height: 145px;
}

.info-block i {
    font-size: 22px;
    color: #0a58ca;
    margin-top: 5px;
}

.info-block h4 {
    font-size: 16px;
    margin-bottom: 6px;
    color: #222;
}

.info-block p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* Right */
.contact-right {
    flex: 1;
    min-width: 280px;
    height: 480px;
    background: #fff;
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.1);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.contact-form textarea {
    resize: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #0a58ca;
    outline: none;
}

.contact-form button {
    width: 100%;
    padding: 12px;
    background: #0a58ca;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form button:hover {
    background: #084298;
}

/* Map */
.contact-map iframe {
    width: 100%;
    height: 400px;
}

.contact-map {
    margin-top: 20px;
}

.contact-map-wrap {
    position: relative;
}

.contact-map-address-overlay {
    position: absolute;
    inset: 20px auto auto 20px;
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    max-width: min(320px, calc(100% - 40px));
    padding: 14px 16px;
    background: rgba(11, 31, 68, 0.9);
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.contact-map-address-overlay h4 {
    font-size: 18px;
    margin: 0;
}

.contact-map-address-overlay p {
    margin: 0;
    font-size: 14px;
    color: #d8e4f5;
}

.contact-map-address-overlay:hover {
    background: rgba(11, 31, 68, 1);
}

.contact-card {
    width: 100%;
}

.contact-form-card {
    align-self: stretch;
}

.contact-response {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
}

.contact-response-success {
    color: #087f5b;
    background: #d3f9d8;
}

.contact-response-error {
    color: #c92a2a;
    background: #ffe3e3;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-top-row {
        flex-direction: column;
    }

    .contact-right {
        height: auto;
    }

    .contact-map-address-overlay {
        inset: 12px 12px auto 12px;
        max-width: calc(100% - 24px);
    }
}

/* ===== Overseas Jobs ===== */
.overseas-page {
    padding: 40px 20px 80px;
}

.overseas-page .section-title {
    text-align: center;
    margin: 0 auto 12px;
    color: #0b1f44;
}

.overseas-page .positions-subtitle {
    text-align: center;
    margin-bottom: 34px;
}

.overseas-application-card {
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px;
    background: #fff;
    border: 1px solid #d9e2ef;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(11, 31, 68, .09);
    box-sizing: border-box;
}

.overseas-page .overseas-form,
.overseas-page .overseas-form * {
    box-sizing: border-box;
}

.overseas-page .overseas-form {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.application-section {
    margin: 0 0 22px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.application-section legend {
    width: auto;
    padding: 0 10px;
    color: #155dcc;
    font-size: 18px;
    font-weight: 800;
}

.application-checklist {
    margin: 0 0 20px;
    padding: 16px;
    border-radius: 10px;
    background: #eef5ff;
    border: 1px solid #cfe0fb;
}

.application-checklist h4 {
    margin: 0 0 12px;
    color: #0b1f44;
    text-align: center;
}

.application-checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}

.application-checklist-grid div { display: flex; flex-direction: column; gap: 3px; }
.application-checklist-grid strong { color: #155dcc; font-size: 14px; }
.application-checklist-grid span { color: #475569; font-size: 13px; line-height: 1.45; }

.application-section > textarea { margin-bottom: 0; }

.overseas-application-card > h3 {
    text-align: center;
    color: #0b1f44;
    margin: 0 0 18px;
}

.application-summary {
    display: flex;
    justify-content: center;
    gap: 42px;
    margin-bottom: 18px;
    color: #4b5563;
}

.application-summary > div { text-align: center; }
.summary-label { display: block; font-size: 13px; color: #6b7280; }
.application-summary strong { color: #155dcc; }
.form-intro { text-align: center; color: #5b6472; margin-bottom: 24px; }

.overseas-form-grid,
.document-upload-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.document-upload-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.application-documents {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.application-documents label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    color: #334155;
    font-size: 14px;
}

.application-documents small { color: #64748b; }
.required-mark { color: #dc2626; }
.optional-mark { color: #64748b; font-weight: 400; }

.document-upload-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.document-upload-list label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 14px;
}

/* Keep the document labels clean; hide the browser's empty-file text. */
.document-upload-list input[type="file"],
.application-documents input[type="file"] {
    font-size: 0;
    color: transparent;
}

.document-upload-list input[type="file"]::file-selector-button,
.application-documents input[type="file"]::file-selector-button {
    margin-right: 8px;
    padding: 7px 12px;
    border: 1px solid #b8c7dc;
    border-radius: 6px;
    background: #eef5ff;
    color: #155dcc;
    font-size: 13px;
    cursor: pointer;
}

.overseas-form input:not([type="file"]),
.overseas-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    color: #1f2937;
    background: #fff;
}

.document-upload-grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    color: #334155;
    font-size: 14px;
}

.overseas-form textarea {
    min-height: 130px;
    resize: vertical;
    margin-bottom: 20px;
}

.overseas-form .apply-btn {
    display: block;
    margin: 0 auto;
}

@media (max-width: 760px) {
    .overseas-application-card { padding: 20px 16px; }
    .overseas-form-grid,
    .document-upload-grid,
    .document-upload-grid-3,
    .application-documents { grid-template-columns: 1fr; }
    .application-summary { flex-direction: column; gap: 8px; }
}

.overseas-hero {
    margin-bottom: 25px;
}

.overseas-hero-copy .section-header {
    padding-top: 0;
}

.country-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 40px;
}

.country-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #d9e2ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(11, 31, 68, 0.06);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.country-card:hover,
.country-card[aria-expanded="true"] {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(11, 31, 68, 0.12);
}

.country-image-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
}

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

.country-name {
    font-weight: 700;
    color: #0b1f44;
}

.country-jobs {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(11, 31, 68, 0.08);
}

.country-jobs.is-open {
    display: block;
}

.country-jobs-header {
    text-align: center;
    margin-bottom: 24px;
}

.country-jobs-header h3 {
    font-size: 26px;
    margin-bottom: 8px;
    color: #0b1f44;
}

.country-jobs-header p {
    color: #5b6472;
}

.country-job-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.overseas-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.overseas-info-card {
    background: #fff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(11, 31, 68, 0.08);
}

.overseas-info-card h3 {
    font-size: 22px;
    margin-bottom: 16px;
    color: #0b1f44;
}

.overseas-info-card ul {
    padding-left: 20px;
    color: #4b5563;
    line-height: 1.8;
}

.overseas-documents-card { grid-column: auto; }
.document-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.document-list-grid h4 { margin: 0 0 6px; color: #155dcc; font-size: 16px; }
.document-list-grid ul { margin: 0; }

@media (max-width: 760px) {
    .document-list-grid { grid-template-columns: 1fr; }
    .application-checklist-grid,
    .document-upload-list { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .country-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .country-card-grid,
    .overseas-grid {
        grid-template-columns: 1fr;
    }
}
.marquee-title {
    text-align: center;
    margin-bottom: 30px;
}

.marquee-title h1 {
    font-size: 38px;
    font-weight: 700;
    color: #0b1f44;
    letter-spacing: 0.5px;
}

/* Optional highlight effect */
.marquee-title h1 span {
    color: #ff6b00;
}

/* Responsive */
@media (max-width: 600px) {
    .marquee-title h1 {
        font-size: 28px;
    }
}
.marquee-buttons {
    text-align: center;
    margin: 12px 0 0;
}

.filter-btn {
    padding: 10px 18px;
    margin: 6px;
    border: 1px solid #0b1f44;
    background-color: #0b1f44;
    color: #e9eff6;
    font-size: 14px;
    font-weight: 600;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background-color: #0b1f44;
    color: #e9eff6;
}

.filter-btn.active {
    background-color: #0b1f44;
    color: #e9eff6;
    border-color: #0b1f44;
}

/* Responsive */
@media (max-width: 600px) {
    .filter-btn {
        font-size: 13px;
        padding: 8px 14px;
    }
}
/* Marquee container */
.marquee-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 20px 10px;
}

/* Product card */
.m-card {
    background: #0d0d0d;
    width: 200px;
    min-width: 200px;
    border-radius: 14px;
    padding: 14px;
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.m-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Discount tag */
.m-discount-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff3b3b;
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
}

/* Logo area */
.m-logo-area {
    text-align: center;
    margin: 15px 0;
}

.m-logo-area img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

/* Card body */
.m-card-body h4 {
    font-size: 15px;
    text-align: center;
    margin-bottom: 6px;
}

/* Price row */
.m-price-row {
    text-align: center;
    margin-bottom: 6px;
}

.m-price {
    font-size: 16px;
    font-weight: 700;
    color: #00ffcc;
    margin-right: 6px;
}

.m-original-price {
    font-size: 12px;
    text-decoration: line-through;
    color: #888;
}

/* Meta info */
.m-meta {
    font-size: 11px;
    color: #bbb;
    text-align: center;
}

.m-status {
    font-size: 11px;
    color: #00ff66;
    text-align: center;
}

/* Action button */
.m-action-btn {
    margin-top: 10px;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.m-action-btn:hover {
    background: linear-gradient(135deg, #ff5722, #ff9800);
}
.brain-icon {
  font-size: 40px;
  color: #0a58ca;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brain-icon.animate {
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(10, 88, 202, 0.6);
}
.filter-btn.active {
    background: #0a58ca;
    color: #fff;
}

.work-item {
    transition: all 0.3s ease;
}

/* Ensure service/job icons stay centered and consistent */
.service-card i,
.job-icon,
.icon {
    display: block;
    margin: 0 auto 14px;
    font-size: 36px;
    line-height: 1;
}

/* Feature product images */
.m-card img,
.m-logo-area img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    display: block;
}

/* Read More button styling */
.read-more {
    cursor: pointer;
    color: #0a58ca;
    text-decoration: none;
    display: inline-block;
    margin: 0 15px 20px;
}

.post-card.expanded .post-text {
    max-height: 500px;
}

/* Slightly reduce skills container and box sizes */
.skills-container {
    display: flex;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Ensure portfolio overlay titles are centered */
.portfolio-overlay h3 {
    text-align: center;
}
/*whatsapp floating button*/

.whatsapp-float {
  animation: pulse 2s infinite;
}
.header-whatsapp {
          position: fixed;
          bottom: 30px;
          right: 30px;
    	  width: 180px;
          padding: 10px 15px;
          background-color: #25D366;
          color: #fff;
          text-align: center;
          z-index: 999; /* Ensure the WhatsApp icon is on top of other elements */
          border-radius: 50px; /* Make the WhatsApp icon capsule-like */
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow to the icon */
      }
      .header-whatsapp a {
          color: #fff;
          text-decoration: none;
      }
      .header-whatsapp i {
          font-size: 24px;
          line-height: 30px; /* To vertically center the icon */
          margin-right: 5px;
      }

.page-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

.page-whatsapp a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.page-whatsapp i {
    font-size: 22px;
}

@media (max-width: 768px) {
    .page-whatsapp {
        bottom: 16px;
        right: 16px;
    }
}
      .navigation-menu {
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .navigation-menu li {
          text-align: center;
      }
      .navigation-menu li a {
          display: block;
          text-align: center;
      }

/* ===== MARQUEE/CAROUSEL STYLES ===== */

/* Main container */
.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    background: transparent;
}

/* Fade edges effect (optional - creates smooth fade at ends) */
.marquee-container.with-fade::before,
.marquee-container.with-fade::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.marquee-container.with-fade::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}

.marquee-container.with-fade::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}

/* Dark background fade edges */
.dark-bg.marquee-container.with-fade::before {
    background: linear-gradient(to right, #1a1a1a, transparent);
}

.dark-bg.marquee-container.with-fade::after {
    background: linear-gradient(to left, #1a1a1a, transparent);
}

/* Purple gradient fade (for featured sections) */
.purple-bg.marquee-container.with-fade::before {
    background: linear-gradient(to right, #667eea, transparent);
}

.purple-bg.marquee-container.with-fade::after {
    background: linear-gradient(to left, #764ba2, transparent);
}

/* The moving track */
.marquee-track {
    display: flex;
    gap: 20px;
    width: fit-content;
    animation: marquee-scroll 30s linear infinite;
}

/* Pause animation on hover */
.marquee-track:hover {
    animation-play-state: paused;
}

/* Keyframes for continuous horizontal scroll */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 10px)); /* Moves half the width (since we duplicated products) */
    }
}

/* Slow motion variant */
.marquee-slow {
    animation: marquee-scroll 40s linear infinite;
}

/* Fast motion variant */
.marquee-fast {
    animation: marquee-scroll 20s linear infinite;
}

/* Reverse direction */
.marquee-reverse {
    animation: marquee-scroll-reverse 30s linear infinite;
}

@keyframes marquee-scroll-reverse {
    0% {
        transform: translateX(calc(-50% - 10px));
    }
    100% {
        transform: translateX(0);
    }
}

/* Product Card Styles */
.product-card {
    flex: 0 0 280px;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.discount-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4757;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 5;
}

.product-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 15px;
    padding: 10px;
}

.product-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-info h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.current-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #28a745;
}

.original-price {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #666;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.duration {
    background: #e3f2fd;
    padding: 3px 12px;
    border-radius: 20px;
    color: #1976d2;
    font-weight: 500;
}

.category {
    background: #f3e5f5;
    padding: 3px 12px;
    border-radius: 20px;
    color: #7b1fa2;
    font-weight: 500;
}

/* Section title styles */
.section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
}

.section-title.light {
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

/* Filter buttons */
.filter-btn.active-filter {
    background-color: #0b1f44;
    color: white;

    border-color: #0b1f44;
}
    
.filter-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    background: #0b1f44;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.filter-btn:hover {
    background: #0f172a;
    color: white;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: #0f172a;
    color: white;
}

/* Sort dropdown */
.sort-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.sort-select {
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 30px;
    outline: none;
    cursor: pointer;
    background: white;
    font-weight: 500;
}

/* Responsive styles */
@media (max-width: 768px) {
    .product-card {
        flex: 0 0 240px;
        padding: 15px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .marquee-container.with-fade::before,
    .marquee-container.with-fade::after {
        width: 50px;
    }
    
    .filter-btn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
    
    .product-logo {
        width: 60px;
        height: 60px;
    }
    
    .current-price {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .product-card {
        flex: 0 0 200px;
    }
    
    .filter-container {
        gap: 10px;
    }
    
    .filter-btn {
        padding: 6px 15px;
        font-size: 0.8rem;
    }
}

/* ==========================
   LOADING SPINNER
========================== */
.loading-spinner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* =========================================================
   BUY NOW POPUP MODAL
========================================================= */

/* Dark overlay background */
.popup-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark background overlay */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(3px); /* Optional: adds blur effect */
}

/* Popup container */
.popup-box {
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    animation: popupScale 0.3s ease-in-out;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Popup animation */
@keyframes popupScale {
    from { 
        transform: scale(0.8); 
        opacity: 0;
    }
    to { 
        transform: scale(1); 
        opacity: 1;
    }
}

/* Close button (×) */
.popup-close {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    font-size: 28px;
    color: #999;
    line-height: 1;
    transition: color 0.3s ease;
    background: none;
    border: none;
    padding: 5px;
}

.popup-close:hover {
    color: #333;
}

/* Product title in popup */
.popup-product-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    margin-top: 10px;
    line-height: 1.3;
}

/* Product price in popup */
.popup-product-price {
    font-size: 28px;
    font-weight: 700;
    color: #28a745;
    margin-bottom: 25px;
}

.popup-product-price .currency {
    font-size: 18px;
    font-weight: 500;
}

/* Call Now button */
  .popup-call-btn {
    display: inline-block;
    width: 100%;
    max-width: 250px;
    margin-top: 10px;
    padding: 14px 30px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
} 

.popup-call-btn:hover {
    background: linear-gradient(135deg, #20c997, #28a745);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
} 

.popup-call-btn i {
    margin-right: 8px;
} 

/* Popup buttons container */
.popup-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* General popup button styles */
 .popup-btn {
    display: inline-block;
    width: 100%;
    max-width: 250px;
    padding: 14px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
} 

.popup-btn i {
    margin-right: 8px;
} 

/* WhatsApp button */
.popup-whatsapp-btn {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.popup-whatsapp-btn:hover {
    background: linear-gradient(135deg, #128C7E, #25D366);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* PhonePe button */
.popup-phonepe-btn {
    background: linear-gradient(135deg, #5f259f, #6739b7);
    color: white;
    box-shadow: 0 4px 15px rgba(95, 37, 159, 0.3);
}

.popup-phonepe-btn:hover {
    background: linear-gradient(135deg, #6739b7, #5f259f);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(95, 37, 159, 0.4);
}
/* =========================================================
   CHECKOUT PAGE STYLES
========================================================= */

.checkout-container {
    max-width: 700px;
    margin: 50px auto;
    padding: 30px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-radius: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.checkout-container h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.checkout-product {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.checkout-product img {
    max-width: 120px;
    margin-right: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.checkout-product h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.checkout-product p {
    margin: 5px 0;
    color: #555;
}

.checkout-product del {
    color: #999;
    margin-left: 10px;
}

.checkout-container form {
    margin-top: 20px;
}

.checkout-container .mb-3 {
    margin-bottom: 15px;
}

.checkout-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444;
}

.checkout-container input,
.checkout-container textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.checkout-container input:focus,
.checkout-container textarea:focus {
    outline: none;
    border-color: #28a745;
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
}

.checkout-container textarea {
    min-height: 80px;
    resize: vertical;
}

.checkout-container button.btn-success {
    background-color: #28a745;
    border: none;
    color: #fff;
    padding: 14px 20px;
    font-size: 1.1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-container button.btn-success:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 600px) {
    .checkout-product {
        flex-direction: column;
        align-items: flex-start;
    }

    .checkout-product img {
        margin-bottom: 15px;
    }
}

/* Update call button to fit in container */
.popup-call-btn {
    display: inline-block;
    width: 100%;
    max-width: 250px;
    margin-top: 0;
    padding: 14px 30px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

/* Popup footer note */
.popup-footer {
    margin-top: 20px;
    font-size: 13px;
    color: #888;
}

/* Responsive adjustments for mobile */
@media (max-width: 480px) {
    .popup-box {
        padding: 25px 20px;
        width: 90%;
        margin: 0 15px;
    }
    
    .popup-product-title {
        font-size: 18px;
    }
    
    .popup-product-price {
        font-size: 24px;
    }
    
    .popup-call-btn {
        padding: 12px 25px;
        font-size: 15px;
    }
}

/* =========================================================
   3-COLUMN CHECKOUT PAGE STYLES
========================================================= */

.checkout-wrapper {
    max-width: 1400px;
    margin: 30px auto;
    padding: 20px;
}

.checkout-title {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 2rem;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 25px;
    align-items: start;
}

/* Common Card Styles */
.checkout-left, .checkout-middle, .checkout-right {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.checkout-left h3, .checkout-middle h3, .checkout-right h3 {
    color: #0b1f44;
    margin-bottom: 20px;
    font-size: 1.3rem;
    border-bottom: 2px solid #0b1f44;
    padding-bottom: 10px;
}

/* Left Column - Product */
.product-card {
    text-align: center;
}

.product-image {
    max-width: 100%;
    width: 200px;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 2px solid #eee;
}

.product-card h2 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 15px;
}

.product-card .price {
    font-size: 1.5rem;
    color: #28a745;
    font-weight: 700;
    margin-bottom: 10px;
}

.product-card .original-price {
    color: #999;
    text-decoration: line-through;
    margin-bottom: 10px;
}

.product-card .duration {
    background: #e3f2fd;
    padding: 8px 15px;
    border-radius: 20px;
    display: inline-block;
    color: #1976d2;
    font-weight: 500;
}

/* Middle Column - Form */
.form-card {
    background: #fff;
}

.checkout-grid .mb-3 {
    margin-bottom: 18px;
}

.checkout-grid label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #444;
    font-size: 0.95rem;
}

.checkout-grid .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.checkout-grid .form-control:focus {
    outline: none;
    border-color: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.2);
}

.checkout-grid textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

.btn-pay {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #5f259f, #6739b7);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-pay:hover {
    background: linear-gradient(135deg, #6739b7, #5f259f);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(95, 37, 159, 0.3);
}

/* Right Column - PhonePe Details */
.phonepe-card {
    text-align: center;
}

.phonepe-logo {
    margin-bottom: 20px;
}

.phonepe-logo img {
    width: 150px;
    height: auto;
}

.payment-info {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.phonepe-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
}

.phonepe-features li {
    padding: 8px 0;
    font-size: 0.9rem;
    color: #444;
    border-bottom: 1px solid #eee;
}

.phonepe-features li:last-child {
    border-bottom: none;
}

.order-summary {
    background: #f0f8ff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.order-summary h4 {
    color: #0b1f44;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95rem;
    color: #555;
}

.summary-row .total-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #28a745;
}

.phonepe-support {
    font-size: 0.85rem;
    color: #888;
}

.phonepe-support a {
    color: #5f259f;
    text-decoration: none;
}

.phonepe-support a:hover {
    text-decoration: underline;
}

/* Responsive - Tablet */
@media (max-width: 992px) {
    .checkout-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .checkout-right {
        grid-column: span 2;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }
    
    .checkout-right {
        grid-column: span 1;
    }
    
    .checkout-wrapper {
        margin: 15px auto;
        padding: 15px;
    }
    
    .checkout-title {
        font-size: 1.5rem;
    }
    
    .product-image {
        width: 150px;
    }
}

/* ===== Products Section ===== */
.products-section {
    padding: 80px 20px;
    background: #f8f9fa;
}

.products-section .section-title {
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    color: #0b1f44;
    margin-bottom: 10px;
}

.products-section .section-subtitle {
    text-align: center;
    color: maroon;
    font-size: 18px;
    margin-bottom: 50px;
}

/* Product Card - Box Type */
.product-box {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 50px;
}

.product-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Product Image */
.product-box-image {
    position: relative;
    overflow: hidden;
}

.product-box-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-box:hover .product-box-image img {
    transform: scale(1.05);
}

/* Product Content */
.product-box-content {
    padding: 30px;
}

.product-box-content h4 {
    color: maroon;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.product-box-content p {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 20px;
}

/* Product Buttons */
.product-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.product-btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.product-btn-demo {
    background: #0b1f44;
    color: #fff;
}

.product-btn-demo:hover {
    background: #0b1f44;
}

.product-btn-url {
    background: #28a745;
    color: #fff;
}

.product-btn-url:hover {
    background: #1e7e34;
}

.product-btn-features {
    background: #ffc107;
    color: #333;
}

.product-btn-features:hover {
    background: #e0a800;
}

/* Feature Table */
.features-table-container {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.features-table-container.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.features-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.features-table th {
    background: #0b1f44;
    color: #fff;
    padding: 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.features-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.features-table td:first-child {
    border-right: 1px solid #eee;
}

.features-table td:nth-child(2) {
    border-right: 1px solid #eee;
}

.features-table ul {
    margin: 0;
    padding-left: 20px;
}

.features-table li {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.5;
}

.features-table tr:last-child td {
    border-bottom: none;
}

/* Responsive */
@media (max-width: 768px) {
    .products-section .section-title {
        font-size: 28px;
    }
    
    .product-box-content {
        padding: 20px;
    }
    
    .product-box-content h4 {
        font-size: 20px;
    }
    
    .product-buttons {
        flex-direction: column;
    }
    
    .product-btn {
        width: 100%;
        text-align: center;
    }
    
    .features-table {
        font-size: 12px;
    }
    
    .features-table th,
    .features-table td {
        padding: 10px 5px;
    }
    
    .features-table ul {
        padding-left: 15px;
    }
    
    .features-table li {
        font-size: 11px;
    }
}


/* ===== ABOUT SECTION ===== */
.about-section {
    padding: 60px 20px 40px;
    background: #0b1f44;
}

/* Section Heading */
 .section-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    color: #e9eff6;
}

.heading-line {
    width: 80px;
    height: 4px;
    background: #e9eff6;
    margin: 12px auto 20px;
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color: #c9d6f0;
    margin-bottom: 50px;
    font-size: 16px;
}

.about-section .section-header {
    padding-top: 0;
    margin-bottom: 28px;
}

.about-section-header-tight {
    margin-bottom: 28px;
}

.about-section .section-header .section-title {
    color: #e9eff6;
}

.about-section .section-header .section-subtitle {
    color: #c9d6f0;
}

/* Container */
.container {
    max-width: 1100px;
    margin: auto;
}

/* Layout */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 12px;
    align-items: start;
    width: 100%;
    margin-top: 4px;
}

.about-content .about-box {
    min-width: 0;
}

.about-box-full {
    grid-column: 1 / -1;
}

/* Bootstrap Grid Layout for About Section */
.row.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem));
    margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem));
}

.row.g-4.justify-content-center {
    justify-content: center;
}

/* Add gap between columns in about section */
.row.g-4 > [class*="col-"] {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) / 2);
    margin-bottom: var(--bs-gutter-y, 1.5rem);
}

/* Equal width for all about boxes */
.row.g-4 > .col-lg-4,
.row.g-4 > .col-md-6 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

@media (max-width: 991px) {
    .row.g-4 > .col-lg-4,
    .row.g-4 > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* About Boxes with Bootstrap Grid */
.about-box {
    background: #dce5f2;
    padding: 20px 18px;
    border-radius: 22px;
    box-shadow: none;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.about-box:hover {
    transform: translateY(-4px);
}

/* Box Headings */
.about-box h3 {
    font-size: 24px;
    margin-bottom: 8px;
    color: #0f2453;
    text-align: center;
    font-weight: 800;
}

.about-box h3::after {
    content: '';
    display: block;
    width: 70px;
    height: 3px;
    background: #2d9bf0;
    margin: 12px auto 0;
    border-radius: 2px;
}

/* Paragraph Styling */
.about-box p {
    color: #24324a;
    line-height: 1.65;
    font-size: 13px;
    text-align: center;
}

.about-box-who p {
    text-align: left;
    margin-bottom: 8px;
}

.who-we-are-media {
    width: 100%;
    margin: 6px 0 12px;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 1 / 0.82;
}

.who-we-are-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-box-notice {
    background: #dce5f2;
}

.about-box-notice p {
    text-align: left;
}

.why-grid {
    align-items: stretch;
    row-gap: 12px;
    column-gap: 12px;
}

.why-grid > [class*="col-"] {
    display: flex;
}

.why-grid .why-item {
    width: 100%;
    min-height: 100%;
    padding: 16px 14px;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(15, 36, 83, 0.08);
}

.why-grid .why-item h4 {
    margin-bottom: 6px;
    color: #0f2453;
    font-size: 16px;
    text-align: center;
    font-weight: 800;
}

.why-grid .why-item p {
    margin: 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.55;
}

.why-item-center {
    max-width: 100%;
    margin: 0;
}

.company-highlight {
    color: #0b1f44;
    background: #fff2a8;
    padding: 0 6px;
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
    box-decoration-break: clone;
}

.expertise-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.expertise-stack .expertise-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px 12px;
    box-shadow: 0 3px 10px rgba(15, 36, 83, 0.08);
}

.expertise-stack .expertise-item i {
    font-size: 24px;
    color: #0f2453;
    flex: 0 0 auto;
}

.expertise-stack .expertise-item h4 {
    margin: 0;
    color: #0f2453;
    font-size: 12.5px;
    font-weight: 800;
    text-align: left;
}

.expertise-stack .expertise-item h4::after {
    display: none;
}

/* Box Headings */
.about-box h3 {
    font-size: 22px;
    margin-bottom: 8px;
    color: #0b1f44;
}

.underline {
    width: 50px;
    height: 3px;
    background: #0b1f44;
    margin-bottom: 15px;
    border-radius: 2px;
}

/* Paragraph Styling */
.about-box p {
    color: #555;
    line-height: 1.6;
    font-size: 15px;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.feature-item h4 {
    font-size: 16px;
    margin-bottom: 6px;
    color: #0b1f44;
}

.feature-item p {
    font-size: 14px;
    color: #666;
}

/* Expertise List */
.expertise-list {
    list-style: none;
    padding: 0;
}

.expertise-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    color: #444;
}

.expertise-list li:last-child {
    border-bottom: none;
}

/* Expertise Grid - 2 Columns */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

.expertise-grid li {
    padding: 12px 15px;
    background: #f5f8fc;
    border-radius: 8px;
    border-left: 4px solid #0b1f44;
    text-align: left;
}

/* Adjust expertise box height */
.expertise-box {
    min-height: 350px;
    min-width: 500px;
}

/* Responsive */
@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
    }

    .why-item-center {
        max-width: 100%;
    }
}

/* Shared page spacing and box treatment.
   The header is fixed, so page content needs a predictable starting offset. */
main {
    padding-top: 88px;
    width: 100%;
}

html {
    scroll-padding-top: 88px;
}

#heroCarousel {
    margin-top: 0;
}

/* Keep the service boxes consistent with the primary about-box design. */
.service-card,
.services .icon-box {
    background: #dce5f2;
    border: 0;
    border-radius: 22px;
    box-shadow: none;
    padding: 20px 18px;
}

.service-card {
    max-width: 1100px;
    margin: 0 auto 18px;
}

.service-card h3,
.services .icon-box h4.title {
    color: #0f2453;
    font-weight: 800;
}

.service-card p,
.services .icon-box .description {
    color: #24324a;
}

.section-header,
.page-title {
    margin-top: 0;
}

@media (max-width: 768px) {
    main {
        padding-top: 138px;
    }

    .site-header {
        min-height: 0;
    }

    .header-icon {
        width: 84px;
        height: 44px;
    }

    .nav-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .nav-right a {
        padding: 5px 10px;
    }

    html {
        scroll-padding-top: 138px;
    }
}