/* common css */

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Spartan:wght@400;500;600;700;800&display=swap");

/* Icon Fonts */
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot');
    src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
         url('../fonts/icomoon.ttf') format('truetype'),
         url('../fonts/icomoon.woff') format('woff'),
         url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

:root{

    --primary:#07212D;

    --primary-dark:#003F5C;

    --primary-light:#024D66;

    --primary-accent:#003F5C;

    --brand-purple: #024F64;

    --brand-purple-light: #818cf8;

    --light:#F5F6F6;

    --text:#07212D;

    --white:#F5F6F6;

    --highlightcolor:#F16362;

    --gray:#024D66;

    --shadow:0 10px 25px rgba(7, 33, 45, 0.08);

    --shadow-soft:0 18px 50px rgba(7, 33, 45, 0.10);

    --gradient-primary:linear-gradient(135deg, #07212D 0%, #003F5C 50%, #024D66 100%);

    --gradient-accent:linear-gradient(135deg, #F16362 0%, #FEBF1C 100%);

    --accent-orange:#FEBF1C;

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Font Variables */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Spartan', sans-serif;
    --font-icomoon: 'icomoon';

}

*{

    margin: 0px;

    padding: 0px;

    box-sizing: border-box;

    font-family: var(--font-primary);

}

html{scroll-behavior: smooth;}

html,
body {
    overflow-x: hidden;
}

body::-webkit-scrollbar{width: 10px;}

body::-webkit-scrollbar-thumb{

    background: var(--primary);

    border-radius: 10px;

}

body{

    background: var(--light);

    color:var(--text);
    
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    padding-top: 114px;

}

/* Headings use Spartan for strong impact */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

/* Icon font for icomoon icons */
[class^="icon-"], [class*=" icon-"], i {
    font-family: var(--font-icomoon), sans-serif;
}

.container{

    width: 90%;

    max-width: 1200px;

    margin: auto;

}

/* Modern Header with Bootstrap */

.header-modern{

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);

    transition: all 0.3s ease;

    padding: 15px 0;

    z-index: 1000;

}

/* Dropdown Menu Styling */
.navbar .dropdown-menu {
    margin-top: 10px;
    border-radius: 12px;
    padding: 10px 0;
    min-width: 200px;
}

.navbar .dropdown-item {
    padding: 10px 20px;
    font-weight: 500;
    color: var(--primary-navy);
    transition: all 0.2s ease;
}

.navbar .dropdown-item:hover {
    background: var(--light-gray);
    color: var(--accent-orange);
    padding-left: 25px;
}

/* Accent Button */
.btn-accent {
    background: linear-gradient(135deg, var(--accent-orange), #e55d00);
    border: none;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 93, 0, 0.3);
    color: white;
}

.navbar{

    padding: 0;

}

.navbar-brand.logo{

    font-size: 24px;

    font-weight: 700;

    color: #07212D;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 8px;

}

.navbar-brand.logo:hover{

    color: #07212D;

}

.logo .bx{

    font-size: 28px;

    color: var(--brand-purple);

}

.navbar-nav{

    gap: 5px;

}

.nav-link{

    color: rgba(7, 33, 45, 0.7) !important;

    padding: 10px 18px !important;

    border-radius: 8px;

    transition: all 0.3s ease;

    font-size: 15px;

}

.nav-link:hover,

.nav-link.active{

    color: var(--brand-purple) !important;

    background: rgba(2, 79, 100, 0.08);

}

.nav-link.active{
    color: var(--brand-purple) !important;

}

/* Header Modern nav-link overrides - higher specificity */
.header-modern .nav-link{
    color: #FEBF1C !important;
}

.header-modern .nav-link:hover,
.header-modern .nav-link.active{
    color: #fff !important;
    background: transparent;
}

.nav-icon{

    color: #07212D;

    font-size: 20px;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

}

.nav-icon:hover{

    color: var(--brand-purple);

}



.navbar-toggler:focus{

    box-shadow: none;

}

.commonBtn{

    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);

    color: #fff;

    padding: 14px 32px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 14px;

    border: none;

    cursor: pointer;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    box-shadow: 0 8px 25px rgba(2, 79, 100, 0.35);

    text-decoration: none;

}

.commonBtn:hover{

    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(2, 79, 100, 0.35);

}

.btn-modern-primary {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    color: #fff;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 25px rgba(2, 79, 100, 0.35);
    text-decoration: none;
}
.btn-modern-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(2, 79, 100, 0.45);
    color: #fff;
}

/* Foundation Values Section */
.foundation-values {
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 50%, #f5f3ff 100%);
    position: relative;
}
.mission-vision-card {
    border-radius: 20px;
    border-left: 4px solid var(--brand-purple) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    body.services-page .tech-integration-bar {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    body.services-page .tech-card-wrapper {
        padding: 18px !important;
        border-radius: 18px;
    }
}
.mission-vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.03) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mission-vision-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(2, 79, 100, 0.15);
}
.mission-vision-card:hover::before {
    opacity: 1;
}
.mission-vision-card h4 {
    color: #07212D;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.mission-vision-card h4 i {
    color: var(--brand-purple);
    font-size: 24px;
}
.mission-vision-card p {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}
.value-item-box {
    background: #fff;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(2, 79, 100, 0.08);
    position: relative;
    overflow: hidden;
}
.value-item-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.value-item-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(2, 79, 100, 0.15);
}
.value-item-box:hover::after {
    transform: scaleX(1);
}
.value-icon-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.12) 0%, rgba(2, 79, 100, 0.06) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.4s ease;
}
.value-icon-circle i {
    font-size: 32px;
    color: var(--brand-purple);
    transition: all 0.4s ease;
}
.value-item-box:hover .value-icon-circle {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    transform: scale(1.1) rotate(5deg);
}
.value-item-box:hover .value-icon-circle i {
    color: #fff;
    transform: scale(1.1);
}
.value-item-box h5 {
    color: #07212D;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}
.value-item-box:hover h5 {
    color: var(--brand-purple);
}
.value-item-box p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* FAQ & CTA Section */
.faq-cta-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 50%, #f5f3ff 100%);
    position: relative;
}
.faq-cta-section .section-title {
    text-align: left;
    margin-bottom: 30px;
}
.faq-cta-section .subTitle {
    color: var(--brand-purple);
}
.faq-cta-section .heading {
    color: #07212D;
    font-size: 32px;
    font-weight: 700;
}
.accordion-item {
    border-radius: 16px !important;
    overflow: hidden;
    background: #fff;
    margin-bottom: 16px !important;
    transition: all 0.3s ease;
}
.accordion-item:hover {
    box-shadow: 0 10px 40px rgba(2, 79, 100, 0.12) !important;
}
.accordion-button {
    background: #fff;
    color: #07212D;
    font-size: 16px;
    font-weight: 600;
    padding: 20px 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}
.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.08) 0%, rgba(2, 79, 100, 0.04) 100%);
    color: var(--brand-purple);
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236366f1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform 0.3s ease;
}
.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}
.accordion-body {
    padding: 0 24px 20px;
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    background: #fff;
}
.cta-card {
    border-radius: 24px !important;
    position: relative;
    overflow: hidden;
}
.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.15) 0%, transparent 50%);
    pointer-events: none;
}
.cta-card h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}
.cta-card p {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
}
.cta-card ul li {
    font-size: 15px;
    padding: 6px 0;
    display: flex;
    align-items: center;
}
.cta-card ul li i {
    color: #FEBF1C;
    font-size: 20px;
}
.cta-card .btn-modern-primary {
    background: linear-gradient(135deg, #FEBF1C 0%, #F16362 100%);
    border: none;
    padding: 16px 32px;
    font-weight: 700;
}
.cta-card .btn-modern-primary:hover {
    background: linear-gradient(135deg, #F16362 0%, #FEBF1C 100%);
    transform: translateY(-3px);
}

/* Community Section */
.community-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 50%, #f5f3ff 100%);
    position: relative;
}
.community-section .section-title {
    text-align: left;
    margin-bottom: 20px;
}
.community-section .section-title .subTitle {
    color: var(--brand-purple);
}
.community-section .section-title .heading {
    color: #07212D;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
}
.community-section .section-desc {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .community-section {
        padding: 60px 0;
    }

    .community-section .section-title {
        text-align: center;
    }

    .community-section .section-title .heading {
        font-size: 28px;
    }

    .group-item {
        padding: 14px 16px;
    }

    .group-item:hover {
        transform: none;
    }

    .impact-card h3 {
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .community-section .section-title .heading {
        font-size: 24px;
    }
}
.group-item {
    background: #fff;
    padding: 16px 20px;
    border-radius: 16px;
    transition: all 0.3s ease;
    border: 1px solid rgba(2, 79, 100, 0.08);
}
.group-item:hover {
    transform: translateX(8px);
    box-shadow: 0 10px 30px rgba(2, 79, 100, 0.12);
    border-color: var(--brand-purple);
}
.group-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.12) 0%, rgba(2, 79, 100, 0.06) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.group-item:hover .group-icon {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
}
.group-icon i {
    font-size: 24px;
    color: var(--brand-purple);
    transition: color 0.3s ease;
}
.group-item:hover .group-icon i {
    color: #fff;
}
.group-item h6 {
    color: #07212D;
    font-size: 16px;
    font-weight: 700;
}
.group-item p {
    color: #666;
    font-size: 13px;
}
.women-empowerment-note {
    background: linear-gradient(135deg, rgba(241, 99, 98, 0.08) 0%, rgba(250, 165, 26, 0.05) 100%) !important;
    border-left: 5px solid #F16362 !important;
    border-radius: 16px;
}
.women-empowerment-note p {
    color: #07212D;
    font-size: 15px;
    font-style: italic;
    line-height: 1.7;
}
.women-empowerment-note i {
    color: #F16362;
    font-size: 20px;
}
.impact-card {
    border-radius: 20px !important;
    background: linear-gradient(135deg, #07212D 0%, #003F5C 100%) !important;
    position: relative;
    overflow: hidden;
}
.impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.1) 0%, transparent 50%);
    pointer-events: none;
}
.impact-card h4 {
    font-size: 20px;
    font-weight: 700;
}
.impact-card h3 {
    color: #FEBF1C;
    font-size: 32px;
    font-weight: 700;
}
.impact-card small {
    opacity: 0.8;
    font-size: 13px;
}
.impact-card hr {
    opacity: 0.2;
}
.management-highlight {
    background: #fff;
    border: 1px solid rgba(2, 79, 100, 0.1) !important;
    transition: all 0.3s ease;
}
.management-highlight:hover {
    box-shadow: 0 15px 40px rgba(2, 79, 100, 0.12);
    border-color: var(--brand-purple) !important;
}
.management-highlight h5 {
    color: #07212D;
    font-size: 18px;
    font-weight: 700;
}
.management-highlight h5 i {
    color: var(--brand-purple);
}
.management-highlight p {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}
.management-highlight strong {
    color: var(--brand-purple);
}

/* Gallery Section */
.gallery-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 50%, #f5f3ff 100%);
    position: relative;
}
.gallery-section .section-title .subTitle {
    color: var(--brand-purple);
}
.gallery-section .section-title .heading {
    color: #07212D;
    font-size: 36px;
    font-weight: 700;
}
.gallery-section .section-title .desc {
    color: #555;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}
.gallery-filters {
    gap: 12px;
}
@media (max-width: 768px) {
    .gallery-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        justify-content: flex-start !important;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .gallery-filters::-webkit-scrollbar {
        display: none;
    }
}
.filter-btn {
    background: #fff;
    color: #07212D;
    border: 2px solid rgba(2, 79, 100, 0.15);
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.filter-btn:hover {
    border-color: var(--brand-purple);
    color: var(--brand-purple);
}
.filter-btn.active {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    color: #fff;
    border-color: transparent;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(2, 79, 100, 0.35);
}
.gallery-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.gallery-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(2, 79, 100, 0.2);
}
.gallery-card:hover img {
    transform: scale(1.1);
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 33, 45, 0.9) 100%);
    display: flex;
    align-items: flex-end;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.gallery-card:hover .gallery-overlay {
    opacity: 1;
}
.overlay-text h5 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}
.overlay-text p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s;
}
.gallery-card:hover .overlay-text h5,
.gallery-card:hover .overlay-text p {
    transform: translateY(0);
}
.gallery-item {
    transition: all 0.4s ease;
}
.gallery-item.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    position: absolute;
}
.gallery-item.show {
    opacity: 1;
    transform: scale(1);
}

/* Testimonials Section */
.testimonials-partners {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f5f3ff 100%);
    position: relative;
}
.testimonials-partners .section-title .subTitle {
    color: var(--brand-purple);
}
.testimonials-partners .section-title .heading {
    color: #07212D;
    font-size: 36px;
    font-weight: 700;
}
.testimonial-card {
    border-radius: 20px;
    border: 1px solid rgba(2, 79, 100, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(2, 79, 100, 0.15) !important;
    border-color: rgba(2, 79, 100, 0.2);
}
.testimonial-card:hover::before {
    transform: scaleX(1);
}
.quote-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.12) 0%, rgba(2, 79, 100, 0.06) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.testimonial-card:hover .quote-icon {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
}
.quote-icon i {
    font-size: 24px;
    color: var(--brand-purple);
    transition: color 0.3s ease;
}
.testimonial-card:hover .quote-icon i {
    color: #fff;
}
.testimonial-text {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    font-style: italic;
}
.testimonial-author h6 {
    color: #07212D;
    font-size: 16px;
    font-weight: 700;
}
.testimonial-author small {
    color: #666;
    font-size: 13px;
}
.partners-logo-bar {
    border-color: rgba(2, 79, 100, 0.1) !important;
}
.partners-logo-bar h6 {
    color: #07212D;
    font-size: 12px;
    letter-spacing: 3px;
    opacity: 0.6;
}
.partner-logo {
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(2, 79, 100, 0.08);
}
.partner-logo:hover {
    background: #fff;
    box-shadow: 0 8px 25px rgba(2, 79, 100, 0.12);
    transform: translateY(-3px);
}
.partner-logo span {
    color: #07212D;
    font-size: 18px;
    transition: color 0.3s ease;
}
.partner-logo:hover span {
    color: var(--brand-purple);
}

/* News Section */
.news-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 50%, #f5f3ff 100%);
    position: relative;
}
.news-section .subTitle {
    color: var(--brand-purple);
}
.news-section .heading {
    color: #07212D;
    font-size: 36px;
    font-weight: 700;
}
.btn-modern-outline {
    background: transparent;
    color: var(--brand-purple);
    border: 2px solid var(--brand-purple);
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.btn-modern-outline:hover {
    background: var(--brand-purple);
    color: #fff;
    transform: translateX(5px);
}
.btn-modern-outline i {
    transition: transform 0.3s ease;
}
.btn-modern-outline:hover i {
    transform: translateX(3px);
}
.news-card {
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(2, 79, 100, 0.08) !important;
}
.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(2, 79, 100, 0.15) !important;
}
.news-img-wrapper {
    position: relative;
    overflow: hidden;
}
.news-img-wrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.news-card:hover .news-img-wrapper img {
    transform: scale(1.1);
}
.news-category {
    position: absolute;
    top: 16px;
    left: 16px;
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    color: #fff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}
.news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}
.news-meta i {
    color: var(--brand-purple);
    margin-right: 5px;
}
.news-card .card-title {
    color: #07212D;
    font-size: 18px;
    font-weight: 700;
    transition: color 0.3s ease;
}
.news-card:hover .card-title {
    color: var(--brand-purple);
}
.news-card .card-text {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}
.news-card .text-accent {
    color: var(--brand-purple) !important;
    transition: all 0.3s ease;
}
.news-card .text-accent:hover {
    color: var(--brand-purple-light) !important;
}
.news-card .text-accent i {
    transition: transform 0.3s ease;
}
.news-card .text-accent:hover i {
    transform: rotate(90deg);
}

/* Careers Section */
.careers-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 50%, #f5f3ff 100%);
    position: relative;
}
.careers-section .section-title {
    text-align: left;
    margin-bottom: 20px;
}
.careers-section .subTitle {
    color: var(--brand-purple);
}
.careers-section .heading {
    color: #07212D;
    font-size: 36px;
    font-weight: 700;
}
.careers-section .section-desc {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}
.careers-image-box {
    position: relative;
}
.careers-image-box img {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease;
}
.careers-image-box:hover img {
    transform: scale(1.02);
}
.experience-badge {
    position: absolute;
    bottom: -20px;
    right: 20px;
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    color: #fff;
    padding: 20px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(2, 79, 100, 0.4);
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.experience-badge .h2 {
    font-size: 28px;
    font-weight: 700;
}
.experience-badge .small {
    font-size: 13px;
    opacity: 0.9;
}
.career-benefits-grid .benefit-item {
    background: #fff;
    border: 1px solid rgba(2, 79, 100, 0.1) !important;
    border-radius: 16px !important;
    text-align: center;
    transition: all 0.3s ease;
}
.career-benefits-grid .benefit-item:hover {
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.08) 0%, rgba(2, 79, 100, 0.03) 100%);
    border-color: var(--brand-purple) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(2, 79, 100, 0.15);
}
.career-benefits-grid .benefit-item i {
    font-size: 28px;
    color: var(--brand-purple);
    transition: transform 0.3s ease;
}
.career-benefits-grid .benefit-item:hover i {
    transform: scale(1.2);
}
.career-benefits-grid .benefit-item h6 {
    color: #07212D;
    font-size: 15px;
    font-weight: 600;
}
.careers-section .mt-5.p-4 {
    background: linear-gradient(135deg, #07212D 0%, #003F5C 100%) !important;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}
.careers-section .mt-5.p-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.1) 0%, transparent 50%);
    pointer-events: none;
}
.careers-section .mt-5.p-4 h5 {
    font-size: 18px;
    font-weight: 700;
    position: relative;
}
.careers-section .mt-5.p-4 p {
    font-size: 14px;
    opacity: 0.85;
    position: relative;
}
.careers-section .mt-5.p-4 .btn-modern-primary {
    background: linear-gradient(135deg, #FEBF1C 0%, #F16362 100%);
    border: none;
    padding: 12px 28px;
    font-weight: 700;
    position: relative;
}
.careers-section .mt-5.p-4 .btn-modern-primary:hover {
    background: linear-gradient(135deg, #F16362 0%, #FEBF1C 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(250, 165, 26, 0.4);
}

@media (max-width: 768px) {
    .careers-section {
        padding: 60px 0;
    }

    .careers-section .heading {
        font-size: 28px;
    }

    .experience-badge {
        bottom: 12px;
        right: 12px;
    }

    .experience-badge .h2 {
        font-size: 22px;
    }

    .career-benefits-grid .benefit-item {
        padding: 12px !important;
    }

    .career-benefits-grid .benefit-item i {
        font-size: 22px;
    }

    .careers-section .mt-5.p-4 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .careers-section .heading {
        font-size: 24px;
    }
}

/* Policy Finder Section */
.policy-finder {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f5f3ff 100%);
    position: relative;
}
.policy-finder .subTitle {
    color: var(--brand-purple);
}
.policy-finder .heading {
    color: #07212D;
    font-size: 36px;
    font-weight: 700;
}
.policy-finder p {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}
.policy-toggle-btns {
    flex-wrap: wrap;
}
.btn-policy {
    background: #fff;
    color: #07212D;
    border: 2px solid rgba(2, 79, 100, 0.15);
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-policy:hover {
    border-color: var(--brand-purple);
    color: var(--brand-purple);
}
.btn-policy.active {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 25px rgba(2, 79, 100, 0.35);
}

@media (max-width: 768px) {
    .policy-toggle-btns {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding-bottom: 6px;
    }

    .policy-toggle-btns::-webkit-scrollbar {
        height: 0;
    }

    .policy-toggle-btns .btn-policy {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

#policy-result-card {
    border-radius: 20px !important;
    border-top: 5px solid var(--brand-purple) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
#policy-result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.03) 0%, transparent 50%);
    pointer-events: none;
}
#policy-result-card:hover {
    box-shadow: 0 20px 50px rgba(2, 79, 100, 0.15) !important;
}
#policy-result-card .text-navy {
    color: #07212D;
}
#policy-result-card .text-accent {
    color: var(--brand-purple);
}
#policy-result-card .bg-soft-red {
    background: linear-gradient(135deg, rgba(241, 99, 98, 0.15) 0%, rgba(250, 165, 26, 0.1) 100%) !important;
    color: #F16362;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 50px;
}
#policy-result-card .fw-800 {
    font-weight: 700;
}
#policy-result-card ul li {
    color: #555;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(2, 79, 100, 0.05);
}
#policy-result-card ul li:last-child {
    border-bottom: none;
}
#policy-result-card ul li i {
    color: #10b981;
    font-size: 18px;
}
#policy-result-card .bg-light {
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.05) 0%, rgba(2, 79, 100, 0.02) 100%) !important;
    border-radius: 12px;
}
#policy-result-card .bg-light .small {
    color: #666;
}
#policy-result-card .bg-light .h4 {
    color: var(--brand-purple);
    font-size: 18px;
}

/* Rapid Response Section */
.rapid-response {
    padding: 30px 0;
    background: linear-gradient(135deg, #F16362 0%, #FEBF1C 100%) !important;
    position: relative;
    overflow: hidden;
}
.rapid-response::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.rapid-response .text-white {
    position: relative;
}
.rapid-response h4 {
    font-size: 22px;
    font-weight: 700;
}
.rapid-response .small {
    font-size: 14px;
    opacity: 0.9;
}
.rapid-response .op-09 {
    opacity: 0.9;
}
.pulse-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
.pulse-icon i {
    color: #fff;
    font-size: 28px;
}
.btn-emergency {
    background: #fff;
    color: #F16362;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.btn-emergency:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    color: #F16362;
}
.btn-emergency .small {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    color: #666;
}
.btn-emergency .fw-800 {
    font-size: 20px;
    font-weight: 700;
    color: #07212D;
}

@media (max-width: 768px) {
    .rapid-response {
        padding: 22px 0;
    }

    .rapid-response h4 {
        font-size: 18px;
        line-height: 1.2;
    }

    .rapid-response .pulse-icon {
        width: 52px;
        height: 52px;
        margin-right: 0 !important;
        margin-bottom: 10px;
    }

    .rapid-response .pulse-icon i {
        font-size: 24px;
    }

    .rapid-response .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
    }

    .rapid-response .btn-emergency {
        display: block;
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        padding: 14px 18px;
    }

    .rapid-response .btn-emergency .fw-800 {
        font-size: 18px;
    }
}

/* Branch Locator Section */
.branch-locator {
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 50%, #f5f3ff 100%);
    position: relative;
}
.branch-locator .bg-navy {
    background: linear-gradient(135deg, #07212D 0%, #003F5C 100%);
}
.branch-locator .text-accent {
    color: var(--brand-purple);
}
.branch-locator .fw-800 {
    font-weight: 700;
}
.branch-locator h2 {
    font-size: 32px;
}
.location-box {
    border-radius: 12px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}
.location-box:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateX(5px);
}
.location-box h5 {
    font-size: 16px;
    font-weight: 700;
}
.location-box i {
    color: var(--brand-purple);
}
.location-box .small {
    font-size: 13px;
}
.location-box .op-08 {
    opacity: 0.8;
}
.location-box.border-accent {
    border-left-color: var(--brand-purple) !important;
}
.location-box.bg-opacity-10 {
    background: rgba(255, 255, 255, 0.1) !important;
}
.location-box.bg-opacity-05 {
    background: rgba(255, 255, 255, 0.05) !important;
}
.branch-locator .mt-4 .small {
    font-size: 13px;
    display: flex;
    align-items: center;
}
.branch-locator .mt-4 .small i {
    font-size: 18px;
}
.map-placeholder {
    background: linear-gradient(135deg, #e8e8e8 0%, #f0f0f0 50%, #e5e5e5 100%) !important;
    position: relative;
}
.map-placeholder i {
    color: #aaa;
    font-size: 80px;
}
.map-placeholder p {
    color: #888;
    font-size: 14px;
    margin-top: 10px;
}
.map-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(2, 79, 100, 0.3);
}
.branch-locator .shadow-lg {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
.branch-locator .rounded-4 {
    border-radius: 20px !important;
}

/* Social Feed Section */
.social-feed {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8faff 0%, #ffffff 50%, #f5f3ff 100%);
    position: relative;
}
.social-feed .subTitle {
    color: var(--brand-purple);
}
.social-feed .heading {
    color: #07212D;
    font-size: 36px;
    font-weight: 700;
}
.social-links-top {
    display: flex;
    gap: 10px;
}
.btn-social-outline {
    width: 45px;
    height: 45px;
    border: 2px solid rgba(2, 79, 100, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-purple);
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-social-outline:hover {
    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(2, 79, 100, 0.3);
}
.btn-social-outline i {
    font-size: 20px;
}
.social-tile {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}
.social-tile img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.social-tile:hover img {
    transform: scale(1.1);
}
.tile-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.8) 0%, rgba(2, 79, 100, 0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}
.social-tile:hover .tile-hover {
    opacity: 1;
}
.tile-hover i {
    font-size: 40px;
    color: #fff;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.social-tile:hover .tile-hover i {
    transform: scale(1);
}
.social-feed .text-muted {
    color: #888 !important;
    font-size: 14px;
}

/* Final CTA Section */
.final-cta {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(2, 79, 100, 0.1) 0%, transparent 50%);
    pointer-events: none;
}
.final-cta .fw-800 {
    font-weight: 700;
}
.final-cta .display-5 {
    font-size: 42px;
    line-height: 1.2;
}
.final-cta .lead {
    font-size: 18px;
    line-height: 1.6;
}
.final-cta .op-08 {
    opacity: 0.85;
}
.btn-modern-primary {
    background: linear-gradient(135deg, #FEBF1C 0%, #F16362 100%);
    color: #fff;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(250, 165, 26, 0.3);
}
.btn-modern-primary:hover {
    background: linear-gradient(135deg, #F16362 0%, #FEBF1C 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(250, 165, 26, 0.4);
    color: #fff;
}
.btn-modern-outline-white {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.btn-modern-outline-white:hover {
    background: #fff;
    color: #07212D;
    border-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}
.btn-modern-outline-white i {
    font-size: 20px;
}

/* Main Footer Section */
.main-footer {
    background: linear-gradient(135deg, #07212D 0%, #003F5C 100%);
    position: relative;
    overflow: hidden;
}
.main-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.main-footer .fw-800 {
    font-weight: 700;
}
.main-footer .text-accent {
    color: var(--brand-purple);
}
.main-footer .op-07 {
    opacity: 0.7;
}
.main-footer .op-05 {
    opacity: 0.5;
}
.footer-logo h3 {
    font-size: 28px;
    letter-spacing: 2px;
}
.footer-socials .social-icon {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}
.footer-socials .social-icon:hover {
    background: var(--brand-purple);
    border-color: var(--brand-purple);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(2, 79, 100, 0.3);
}
.footer-socials .social-icon i {
    font-size: 18px;
}
.footer-links li {
    margin-bottom: 12px;
}
.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-block;
}
.footer-links a:hover {
    color: var(--brand-purple);
    transform: translateX(5px);
}
.footer-contact li {
    margin-bottom: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.footer-contact i {
    color: var(--brand-purple);
    font-size: 18px;
    margin-top: 2px;
}
.footer-bottom {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.footer-bottom .developer-credit {
    color: var(--brand-purple);
    font-weight: 600;
}

/* Legacy header styles - kept for reference */

.header{

    position: sticky;

    top: 0;

    padding: 20px 0;

    z-index: 9999;

    background: var(--white);

    box-shadow: var(--shadow);

}

.nav{

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo{

    font-size: 22px;

    font-weight: 700;

}

.logo .bx{

    font-size: 30px;

    color: var(--highlightcolor);

    vertical-align: sub;

}

nav{

    display: flex;

    gap: 30px;

}

nav a{

    text-decoration: none;

    color: var(--text);

    font-weight: 500;

}

nav a.active{color: var(--primary);}

.hamburger{

    display: none;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

}

.hamburger span{

    width: 25px;

    height: 3px;

    background: var(--primary);

    display: block;

}

/* Top Contact Bar Modern */
.top-bar-modern {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1001;
}

.top-bar-modern.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.top-bar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
}

.status-indicator i {
    color: #024F64;
    font-size: 12px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-link {
    color: #024F64;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

.top-link:hover {
    opacity: 0.8;
    color: #024F64;
}

.separator {
    color: #ddd;
}

/* Header Modern */
.header-modern {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: none;
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    overflow-x: hidden;
    padding: 0;
    min-height: 70px;
    transition: top 0.3s ease;
}

.header-modern nav {
    position: relative;
    overflow-x: hidden;
    height: 100%;
    min-height: 70px;
}

.header-modern nav::after {
    content: '';
    position: absolute;
    top: 0;
    left: 35%;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, #024F64 0%, #013a4b 100%);
    clip-path: polygon(40px 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 0;
}

.header-modern .container {
    display: flex;
    align-items: center;
    max-width: 1320px;
    padding: 9px 15px;
    position: relative;
    z-index: 1;
}

.logo-text-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-main {
    font-size: 28px;
    font-weight: 700;
    color: #024F64;
    letter-spacing: 1px;
}

.logo-sub {
    font-size: 18px;
    font-weight: 600;
    color: #024F64;
}

.nav-container-blue {
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-left: auto;
    position: relative;
    z-index: 1;
    height: 100%;
}

.header-modern .navbar-nav {
    display: flex;
    align-items: center;
    width: auto;
    justify-content: flex-end;
    margin-right: 0;
    margin-left: auto;
    height: 100%;
}

.header-modern .nav-link {
    color: #FEBF1C !important;
    padding: 20px 18px !important;
    font-size: 16px;
    background: transparent !important;
    border-radius: 0;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.header-modern .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 4px;
    background: #fff;
    border-radius: 2px 2px 0 0;
}

.header-modern .nav-link:hover,
.header-modern .nav-link.active {
    color: #fff !important;
    opacity: 1;
}

.btn-appointment {
    background: #fff;
    color: #024F64;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-appointment:hover {
    background: #FEBF1C;
    color: #07212D;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 191, 28, 0.3);
}

.header-action {
    margin-left: 20px;
}

@media (max-width: 991px) {
    .header-modern {
        position: fixed !important;
        top: 0 !important;
        width: 100%;
        z-index: 1000;
    }

    .top-bar-modern {
        display: none;
    }
    
    .header-modern nav::after {
        display: none;
    }
    
    /* Override for mobile nav - handled by advanced mobile nav CSS */
    .nav-container-blue {
        background: transparent !important;
        clip-path: none !important;
        margin-left: 0 !important;
        flex-direction: column !important;
        padding: 0 !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Navbar toggler must be clickable */
    .navbar-toggler {
        z-index: 10002 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .navbar-toggler-icon {
        display: block;
    }
}

/* Ts'ireletso Support Mobile Styling - separate media query */
@media (max-width: 991px) {
    .header-modern .nav-item.d-lg-none {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
    
    .header-modern .nav-item.d-lg-none .nav-link {
        background: #fff;
        color: #024F64 !important;
        border-radius: 25px;
        margin-top: 5px;
        padding: 12px 20px !important;
        font-weight: 700;
        font-size: 15px;
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    
    .header-modern .nav-item.d-lg-none .nav-link:hover {
        background: #f0f0f0;
        transform: scale(1.02);
    }
    
    .header-modern .nav-item.d-lg-none .nav-link i {
        font-size: 18px;
        color: #024F64;
    }
    
    .header-action {
        margin-left: 0;
        margin-top: 15px;
        width: 100%;
        text-align: center;
    }
    
    .btn-appointment {
        display: inline-block;
        width: 100%;
    }
    
    /* Hero Mobile */
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero-wrapper {
        flex-direction: column;
    }
    
    .hero-left, .hero-right {
        width: 100%;
        text-align: center;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-search-bar {
        flex-direction: row;
        gap: 5px;
        background: #fff;
        padding: 5px;
        border-radius: 50px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        align-items: center;
        max-width: 100%;
        overflow: visible;
    }
    
    .hero-search-bar .search-item {
        width: auto;
        flex: 1;
        padding: 0 5px;
        min-width: 0;
    }

    .hero-search-bar .form-select {
        font-size: 11px;
        padding: 5px;
        white-space: nowrap;
    }
    
    .hero-search-bar button.search-btn-purple,
    .hero-btn-secondary {
        width: auto;
        padding: 8px 12px;
        font-size: 11px;
        border-radius: 40px;
        white-space: nowrap;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-stats-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 25px;
    }
    
    .stat-item {
        flex: 0 0 45%;
        max-width: 45%;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 8px;
        text-align: left;
        justify-content: flex-start;
    }

    .stat-item:last-child {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
    }

    .stat-icon-box {
        width: 35px;
        height: 35px;
        min-width: 35px;
        font-size: 16px;
    }

    .stat-text h4 {
        font-size: 8px;
        margin: 0;
        line-height: 1.1;
    }

    .stat-text h4 .counter {
        font-size: 9px;
    }
    
    .hero-images {
        display: none;
    }
    
    /* Logo Mobile */
    .logo-text-wrapper {
        text-align: left;
    }
    
    .logo-main {
        font-size: 20px;
    }
    
    .logo-sub {
        font-size: 14px;
    }
    
    .nav-logo {
        height: 65px;
        width: auto;
        max-height: 65px;
    }
    
    /* Container Mobile */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Section Titles Mobile */
    .section-title {
        font-size: 1.8rem;
    }
    
    /* Cards Mobile */
    .glass-card {
        position: relative !important;
        margin-bottom: 20px;
    }
    
    /* Footer Mobile */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    /* Buttons Mobile */
    .btn-appointment {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Hide decorative elements on mobile */
    .hero-dots,
    .hero-shape-1,
    .hero-shape-2,
    .hero-shape-3,
    .hero-shape-4 {
        display: none;
    }
}

@media (max-width: 576px) {
    .header-modern .container {
        padding: 8px 10px;
    }
    
    .logo-main {
        font-size: 18px;
    }
    
    .logo-sub {
        font-size: 12px;
    }
    
    .hero h1 {
        font-size: 1.6rem;
    }
    
    .hero p {
        font-size: 14px;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .btn-appointment {
        padding: 8px 15px;
        font-size: 13px;
    }
    
    .hero-badge {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .stat-item {
        padding: 10px;
    }
    
    .stat-text h4 {
        font-size: 14px;
    }
}



/* hero */

.hero{

    padding: 90px 0 80px;

    background: linear-gradient(135deg, #f8faff 0%, #ffffff 30%, #f5f3ff 70%, #fafbff 100%);

    min-height: auto;

    position: relative;

    overflow: hidden;

}

/* Trust Bar Section */

.trust-bar-section {

    padding: 60px 0;

    background: linear-gradient(180deg, #fafbff 0%, #ffffff 50%, #f8faff 100%);

    position: relative;

}

.hero::before{

    content: '';

    position: absolute;

    top: -20%;

    right: -15%;

    width: 700px;

    height: 700px;

    background: radial-gradient(circle, rgba(2, 79, 100, 0.08) 0%, rgba(2, 79, 100, 0.03) 40%, transparent 70%);

    border-radius: 50%;

    z-index: 0;

}

.hero::after{

    content: '';

    position: absolute;

    bottom: -30%;

    left: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(2, 79, 100, 0.05) 0%, transparent 60%);

    border-radius: 50%;

    z-index: 0;

}

/* Background decorative dots */

.hero-dots{

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background-image: radial-gradient(rgba(2, 79, 100, 0.08) 1px, transparent 1px);

    background-size: 40px 40px;

    z-index: 0;

    opacity: 0.5;

}

/* Background shapes */

.hero-shape-1{

    position: absolute;

    top: 15%;

    right: 5%;

    width: 20px;

    height: 20px;

    background: rgba(2, 79, 100, 0.15);

    border-radius: 5px;

    transform: rotate(45deg);

    z-index: 0;

    animation: floatShape 8s ease-in-out infinite;

}

.hero-shape-2{

    position: absolute;

    bottom: 25%;

    left: 8%;

    width: 15px;

    height: 15px;

    background: rgba(2, 79, 100, 0.12);

    border-radius: 50%;

    z-index: 0;

    animation: floatShape 6s ease-in-out infinite;

    animation-delay: -2s;

}

.hero-shape-3{

    position: absolute;

    top: 40%;

    left: 3%;

    width: 12px;

    height: 12px;

    border: 2px solid rgba(2, 79, 100, 0.2);

    border-radius: 3px;

    z-index: 0;

    animation: floatShape 7s ease-in-out infinite;

    animation-delay: -4s;

}

.hero-shape-4{

    position: absolute;

    bottom: 35%;

    right: 15%;

    width: 25px;

    height: 25px;

    background: rgba(2, 79, 100, 0.08);

    border-radius: 50%;

    z-index: 0;

    animation: floatShape 9s ease-in-out infinite;

    animation-delay: -1s;

}

@keyframes floatShape {

    0%, 100% { transform: translateY(0) rotate(0deg); }

    50% { transform: translateY(-20px) rotate(10deg); }

}

.hero-shape-1{

    animation: floatShape1 8s ease-in-out infinite;

}

@keyframes floatShape1 {

    0%, 100% { transform: translateY(0) rotate(45deg); }

    50% { transform: translateY(-15px) rotate(55deg); }

}

.hero-wrapper{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 80px;

    position: relative;

    z-index: 1;

}

.hero-left{

    flex: 1;

    max-width: 580px;

}

.hero-badge{

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(2, 79, 100, 0.1);

    color: var(--brand-purple);

    padding: 8px 16px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 20px;

}

.hero-badge i{

    font-size: 16px;

    color: var(--brand-purple);

}

.hero-left h1{

    font-size: 64px;

    line-height: 1.15;

    font-weight: 700;

    margin-bottom: 18px;

    color: #07212D;

    letter-spacing: -1.5px;

}

.hero-title-accent{

    color: var(--brand-purple);

    display: inline;

}

.hero-left p{

    color: #555;

    font-size: 15px;

    line-height: 1.7;

    max-width: 500px;

    margin-bottom: 25px;

}

.hero-btn-secondary {

    background: transparent;

    color: #07212D;

    padding: 12px 20px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 13px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    border: 2px solid rgba(7, 33, 45, 0.15);

    text-decoration: none;

    transition: all 0.3s ease;

    white-space: nowrap;

}

.hero-btn-secondary:hover {

    background: rgba(7, 33, 45, 0.05);

    border-color: rgba(7, 33, 45, 0.3);

    color: #07212D;

}

.hero-btn-secondary i {

    font-size: 14px;

}

.hero-btn-dark{

    background: #07212D;

    color: #fff;

    padding: 14px 28px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 14px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    border: none;

    cursor: pointer;

    transition: all 0.3s ease;

    margin-bottom: 25px;

    box-shadow: 0 8px 25px rgba(7, 33, 45, 0.2);

}

.hero-btn-dark:hover{

    background: #003F5C;

    transform: translateY(-2px);

    box-shadow: 0 12px 35px rgba(7, 33, 45, 0.3);

}

.hero-btn-dark i{

    font-size: 18px;

}

.hero-search-bar{

    display: flex;

    align-items: center;

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    padding: 10px;

    border-radius: 60px;

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);

    margin-bottom: 35px;

    gap: 5px;

    border: 1px solid rgba(255, 255, 255, 0.5);

}

.search-item{

    flex: 1;

    min-width: 0;

    padding: 0 12px;

    position: relative;

}

.search-item:nth-child(2){

    flex: 1.2;

    min-width: 150px;

}

.search-item:not(:last-child)::after{

    content: '';

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    height: 30px;

    width: 1px;

    background: rgba(0, 0, 0, 0.1);

}

.search-item select{

    width: 100%;

    font-size: 14px;

    color: #07212D;

    cursor: pointer;

}

.search-btn-purple{

    background: var(--brand-purple);

    color: #fff;

    border: none;

    padding: 14px 28px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

    transition: all 0.3s ease;

    white-space: nowrap;

    box-shadow: 0 8px 25px rgba(2, 79, 100, 0.35);

}

.search-btn-purple:hover{

    background: var(--brand-purple-light);

    transform: translateY(-2px);

    box-shadow: 0 12px 35px rgba(2, 79, 100, 0.45);

}

.search-btn-purple i{

    font-size: 16px;

}

.hero-stats-row{

    display: flex;

    gap: 40px;

    padding-top: 10px;

}

.stat-item{

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 0;

}

.stat-icon-box{

    width: 48px;

    height: 48px;

    background: linear-gradient(135deg, rgba(2, 79, 100, 0.15) 0%, rgba(2, 79, 100, 0.08) 100%);

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--brand-purple);

    font-size: 22px;

    transition: all 0.3s ease;

    flex-shrink: 0;

}

.stat-item:hover .stat-icon-box {

    background: var(--brand-purple);

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(2, 79, 100, 0.25);

}

.stat-text h4{

    margin: 0;

    font-size: 16px;

    font-weight: 700;

    color: #07212D;

    line-height: 1.3;

}

.stat-text p{

    margin: 0;

    font-size: 13px;

    color: #666;

    line-height: 1.4;

}

.hero-right{

    flex: 1;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}

.hero-images{

    position: relative;

    width: 100%;

    max-width: 480px;

}

.heroImage{

    width: 100%;

    max-width: 420px;

    height: auto;

    position: relative;

    z-index: 1;

}

.heroIcon2, .heroIcon3{

    display: none;

}

.glass-card {

    position: absolute;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 16px;

    padding: 16px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.1);

    z-index: 10;

}

.skills-card {

    top: 45%;

    left: -3%;

    width: 150px;

    animation: fadeInLeft 0.8s ease-out;

}

.coverage-card {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px !important;

}

.coverage-icon {

    width: 36px;

    height: 36px;

    background: linear-gradient(135deg, rgba(2, 79, 100, 0.15) 0%, rgba(2, 79, 100, 0.08) 100%);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.coverage-icon i {

    font-size: 18px;

    color: var(--brand-purple);

}

.coverage-content {

    flex: 1;

}

.coverage-title {

    font-weight: 700;

    font-size: 13px;

    color: #07212D;

    margin: 0 0 2px 0;

    line-height: 1.2;

}

.coverage-subtitle {

    font-size: 10px;

    color: #666;

    margin: 0;

    line-height: 1.2;

}

.assistance-card {

    top: 18%;

    right: -5%;

    width: 150px;

    animation: fadeInRight 0.8s ease-out;

}

.claims-card {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px !important;

}

.claims-icon {

    width: 36px;

    height: 36px;

    background: linear-gradient(135deg, rgba(2, 79, 100, 0.15) 0%, rgba(2, 79, 100, 0.08) 100%);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.claims-icon i {

    font-size: 18px;

    color: var(--brand-purple);

}

.claims-content {

    flex: 1;

}

.claims-title {

    font-weight: 700;

    font-size: 13px;

    color: #07212D;

    margin: 0 0 2px 0;

    line-height: 1.2;

}

.claims-subtitle {

    font-size: 10px;

    color: #666;

    margin: 0;

    line-height: 1.2;

}

.infrastructure-card {

    position: absolute;

    bottom: 15%;

    right: -5%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px !important;

    animation: fadeInRight 0.8s ease-out;

}

.infrastructure-icon {

    width: 36px;

    height: 36px;

    background: linear-gradient(135deg, rgba(2, 79, 100, 0.15) 0%, rgba(2, 79, 100, 0.08) 100%);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.infrastructure-icon i {

    font-size: 18px;

    color: var(--brand-purple);

}

.infrastructure-content {

    flex: 1;

}

.infrastructure-title {

    font-weight: 700;

    font-size: 13px;

    color: #07212D;

    margin: 0;

    line-height: 1.2;

}

@keyframes fadeInLeft {

    from {

        opacity: 0;

        transform: translateX(-30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes fadeInRight {

    from {

        opacity: 0;

        transform: translateX(30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateX(-50%) translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateX(-50%) translateY(0);

    }

}

.chart-bar-row {

    display: flex;

    align-items: flex-end;

    gap: 5px;

    height: 45px;

    margin-top: 10px;

}

.chart-bar {

    flex: 1;

    background: rgba(2, 79, 100, 0.15);

    border-radius: 3px;

    width: 6px;

}

.chart-bar.active {

    background: var(--brand-purple);

}

.pie-chart {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: conic-gradient(var(--brand-purple) 0% 75%, rgba(2, 79, 100, 0.1) 75% 100%);

    margin: 0 auto 8px;

}



/* Bootstrap Modal Styling */

.modal-content {

    border: none;

    border-radius: 20px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);

}

.modal-header {

    padding: 20px 24px 15px;

}

.modal-title {

    font-size: 22px;

    font-weight: 700;

    color: #07212D;

}

.modal-body {

    padding: 15px 24px 24px;

}

.form-label {

    font-weight: 500;

    color: #07212D;

    margin-bottom: 6px;

}

.form-control, .form-select {

    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 10px;

    padding: 12px 15px;

    font-size: 14px;

    transition: all 0.3s ease;

}

.form-control:focus, .form-select:focus {

    border-color: var(--brand-purple);

    box-shadow: 0 0 0 3px rgba(2, 79, 100, 0.15);

}

.btn-primary {

    background: var(--brand-purple);

    border: none;

    font-weight: 600;

    transition: all 0.3s ease;

}

.btn-primary:hover {

    background: var(--brand-purple-light);

    transform: translateY(-2px);

    box-shadow: 0 10px 30px rgba(2, 79, 100, 0.3);

}



/* Scroll to Top Button */

.btn-scroll-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: var(--brand-purple);

    color: #fff;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

    z-index: 999;

    box-shadow: 0 5px 20px rgba(2, 79, 100, 0.4);

}

.btn-scroll-top.visible {

    opacity: 1;

    visibility: visible;

}

.btn-scroll-top:hover {

    background: var(--brand-purple-light);

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(2, 79, 100, 0.5);

}



/* Toast Styling */

.toast {

    border-radius: 12px;

    overflow: hidden;

}

.toast-header {

    padding: 12px 16px;

}

.toast-body {

    padding: 12px 16px;

    font-size: 14px;

}



/* Navbar Scroll Effect */

.header-modern.scrolled {

    background: rgba(255, 255, 255, 0.98);

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    padding: 0;

    min-height: 60px;

}

.header-modern.scrolled nav {

    min-height: 60px;

}

.header-modern.scrolled nav::after {

    background: linear-gradient(90deg, #024F64 0%, #013a4b 100%);

    height: 100%;

}

.header-modern.scrolled .nav-container-blue {

    background: transparent;

}

.header-modern.scrolled .nav-link {

    padding: 15px 18px !important;

}



/* Card Hover Animations */

.categoriesCard {

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

.categoriesCard:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);

}



/* Glass Card Animation */

.glass-card {

    animation: float 6s ease-in-out infinite;

}

.assistance-card {

    animation-delay: -3s;

}

@keyframes float {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-10px); }

}



/* Chart Bar Animation */

.chart-bar {

    transition: height 0.5s ease;

}

.chart-bar.active {

    animation: grow 1s ease-out forwards;

}

@keyframes grow {

    from { height: 0; }

}



/* Pie Chart Animation */

.pie-chart {

    animation: rotate 20s linear infinite;

}

@keyframes rotate {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* Stat Item Hover */

.stat-item {

    transition: all 0.3s ease;

}

.stat-item:hover {

    transform: translateX(5px);

}

.stat-item:hover .stat-icon-box {

    background: var(--brand-purple);

    color: #fff;

}



/* Hero Badge Pulse */

.hero-badge i {

    animation: pulse 2s ease-in-out infinite;

}

@keyframes pulse {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.1); }

}



/* Button Ripple Effect */

.hero-btn-dark, .search-btn-purple, .commonBtn {

    position: relative;

    overflow: hidden;

}

.hero-btn-dark::after, .search-btn-purple::after, .commonBtn::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    background: rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    transition: width 0.6s, height 0.6s;

}

.hero-btn-dark:active::after, .search-btn-purple:active::after, .commonBtn:active::after {

    width: 300px;

    height: 300px;

}



/* About Section */

.about-section {

    padding: 80px 0;

    background: #fff;

}

.about-image {

    position: relative;

}

.about-image img {

    border-radius: 20px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

}

.experience-badge {

    position: absolute;

    bottom: 30px;

    right: -20px;

    background: var(--brand-purple);

    color: #fff;

    padding: 20px 25px;

    border-radius: 15px;

    text-align: center;

    box-shadow: 0 15px 40px rgba(2, 79, 100, 0.3);

}

.experience-badge .years {

    display: block;

    font-size: 36px;

    font-weight: 700;

    line-height: 1;

}

.experience-badge .text {

    font-size: 12px;

    font-weight: 500;

}

.about-content .subTitle {

    color: var(--brand-purple);

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.about-content .hero-left h1{

    font-size: 48px;

    font-weight: 700;

    color: #07212D;

    line-height: 1.2;

    margin: 15px 0 20px;

}

.hero-left p{

    color: #555;

    font-size: 16px;

    line-height: 1.7;

    margin-bottom: 30px;

    max-width: 500px;

}

.features-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.feature-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

}

.feature-icon {

    width: 40px;

    height: 40px;

    background: rgba(2, 79, 100, 0.1);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--brand-purple);

    font-size: 20px;

    flex-shrink: 0;

}

.feature-text h4 {

    font-size: 16px;

    font-weight: 700;

    color: #07212D;

    margin: 0 0 5px;

}

.feature-text p {

    font-size: 13px;

    color: #666;

    margin: 0;

}



/* Why Choose Us Section */

.why-choose-section {

    padding: 80px 0;

    background: linear-gradient(135deg, #f8faff 0%, #f5f3ff 100%);

}

.feature-card {

    background: #fff;

    padding: 40px 30px;

    border-radius: 20px;

    text-align: center;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);

    transition: all 0.3s ease;

    height: 100%;

}

.feature-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 50px rgba(2, 79, 100, 0.15);

}

.feature-icon-box {

    width: 80px;

    height: 80px;

    background: rgba(2, 79, 100, 0.1);

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    font-size: 36px;

    color: var(--brand-purple);

    transition: all 0.3s ease;

}

.feature-card:hover .feature-icon-box {

    background: var(--brand-purple);

    color: #fff;

}

.feature-card h3 {

    font-size: 20px;

    font-weight: 700;

    color: #07212D;

    margin-bottom: 15px;

}

.feature-card p {

    font-size: 14px;

    color: #666;

    line-height: 1.7;

}



/* Testimonials Section */

.testimonials-section {

    padding: 80px 0;

    background: #fff;

}

.testimonial-card {

    background: #fff;

    padding: 30px;

    border-radius: 20px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

    transition: all 0.3s ease;

    height: 100%;

}

.testimonial-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);

}

.rating {

    margin-bottom: 15px;

}

.rating i {

    color: #FEBF1C;

    font-size: 18px;

}

.testimonial-text {

    font-size: 15px;

    color: #555;

    line-height: 1.7;

    font-style: italic;

    margin-bottom: 20px;

}

.testimonial-author {

    display: flex;

    align-items: center;

    gap: 15px;

}

.testimonial-author img {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    object-fit: cover;

}

.author-info h5 {

    font-size: 16px;

    font-weight: 700;

    color: #07212D;

    margin: 0 0 3px;

}

.author-info span {

    font-size: 13px;

    color: #888;

}



/* Newsletter Section */

.subscribe-wrapper {

    background: linear-gradient(135deg, var(--brand-purple) 0%, #4f46e5 100%);

    padding: 60px 40px;

    border-radius: 20px;

    text-align: center;

    margin: 60px auto;

    max-width: 900px;

    box-shadow: 0 20px 50px rgba(2, 79, 100, 0.3);

}

.subscribe-wrapper h2 {

    color: #fff;

    font-size: 32px;

    font-weight: 700;

    margin-bottom: 10px;

}

.subscribe-wrapper p {

    color: rgba(255, 255, 255, 0.8);

    font-size: 15px;

    margin-bottom: 30px;

}

.subscribe-form {

    display: flex;

    gap: 15px;

    justify-content: center;

    flex-wrap: wrap;

}

.subscribe-form input {

    padding: 15px 25px;

    border-radius: 50px;

    border: none;

    font-size: 15px;

    width: 350px;

    max-width: 100%;

    outline: none;

}

.subscribe-form button {

    padding: 15px 35px;

    border-radius: 50px;

    border: none;

    background: #07212D;

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

}

.subscribe-form button:hover {

    background: #003F5C;

    transform: translateY(-2px);

}



/* Blog Section */

.blogSection {

    padding: 80px 0;

    background: linear-gradient(135deg, #f8faff 0%, #fff 100%);

}

.blog-card {

    background: #fff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

    transition: all 0.3s ease;

    height: 100%;

}

.blog-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);

}

.blog-card img {

    width: 100%;

    height: 200px;

    object-fit: cover;

}

.blog-card .meta {

    display: flex;

    gap: 15px;

    padding: 15px 20px 0;

}

.blog-card .meta span {

    font-size: 12px;

    color: var(--brand-purple);

    font-weight: 600;

}

.blog-card .meta span:last-child {

    color: #888;

    font-weight: 400;

}

.blog-card h3 {

    font-size: 18px;

    font-weight: 700;

    color: #07212D;

    padding: 10px 20px;

    line-height: 1.4;

}

.blog-card p {

    font-size: 14px;

    color: #666;

    padding: 0 20px 15px;

    line-height: 1.6;

}

.blog-card button {

    margin: 0 20px 20px;

}



.stats{

    display: flex;

    gap: 20px;

}

.card{

    background: var(--white);

    padding: 25px;

    border-radius: 15px;

    text-align: center;

    box-shadow: var(--shadow);

    width: 190px;

}

.card img{

    width: 70px;

    background: var(--primary);

    padding: 10px;

    border-radius: 5px;

    margin-bottom: 10px;

}

.card h3{

    font-size: 26px;

    margin-bottom: 5px;

    font-weight: 900;

}

.card p{margin-bottom: 0px;}

.hero-right{

    flex: 1;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}

.hero-image{

    padding-top: 70px;

    flex: 1;

    min-width: 300px;

    text-align: center;

    position: relative;

}

.hero-image img{

    max-width: 100%;

    height: auto;

    margin-bottom: -45px;

}

.heroImage{

    position: relative;

    z-index: 9;

    max-width: 520px;

}

.heroIcon1,

.heroIcon2,

.heroIcon3{

    position: absolute;

    z-index: 999;

}

.heroIcon1{

    left: 50px;

    top: 100px;

    animation: slideDown 1s ease-in-out infinite alternate;

}

.heroIcon2{

    right: 0;

    bottom: 50px;

    animation: slideRigh1 1s ease-in-out infinite alternate;

}

.heroIcon3{

    left: 0;

    bottom: 0;

    animation: slideDown1 1s ease-in-out infinite alternate;

}

@keyframes slideDown{

    from{top: 100px;}

    to{top: 120px;}

}

@keyframes slideDown1{

    from{bottom: 0px;}

    to{bottom: 20px;}

}

@keyframes slideRigh1{

    from{right: 0px}

    to{right: 20px;}

}

/* categories section */

.categories{

    padding: 120px 20px;

}

.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;

    margin-top: 50px;

}

.service-card {

    background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);

    border-radius: 24px;

    padding: 36px 30px;

    box-shadow: 0 4px 20px rgba(2, 79, 100, 0.08), 0 0 0 1px rgba(2, 79, 100, 0.05);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}

.service-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);

    opacity: 0;

    transition: opacity 0.3s ease;

}

.service-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 20px 60px rgba(2, 79, 100, 0.15), 0 0 0 1px rgba(2, 79, 100, 0.1);

}

.service-card:hover::before {

    opacity: 1;

}

.service-card-icon {

    width: 64px;

    height: 64px;

    background: linear-gradient(135deg, rgba(2, 79, 100, 0.12) 0%, rgba(2, 79, 100, 0.06) 100%);

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    transition: all 0.3s ease;

}

.service-card:hover .service-card-icon {

    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);

    transform: scale(1.05);

}

.service-card-icon i {

    font-size: 30px;

    color: var(--brand-purple);

    transition: color 0.3s ease;

}

.service-card:hover .service-card-icon i {

    color: #fff;

}

.service-card-title {

    font-size: 22px;

    font-weight: 700;

    color: #07212D;

    margin-bottom: 18px;

    letter-spacing: -0.3px;

}

.service-card-list {

    list-style: none;

    padding: 0;

    margin: 0 0 24px 0;

}

.service-card-list li {

    font-size: 14px;

    color: #666;

    padding: 8px 0;

    padding-left: 24px;

    position: relative;

    line-height: 1.5;

    transition: color 0.3s ease;

}

.service-card:hover .service-card-list li {

    color: #555;

}

.service-card-list li::before {

    content: '';

    position: absolute;

    left: 0;

    top: 14px;

    width: 8px;

    height: 8px;

    background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%);

    border-radius: 50%;

    transition: transform 0.3s ease;

}

.service-card:hover .service-card-list li::before {

    transform: scale(1.2);

}

.service-card-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--brand-purple);

    font-weight: 600;

    font-size: 14px;

    text-decoration: none;

    transition: all 0.3s ease;

    padding: 8px 0;

}

.service-card-btn:hover {

    gap: 12px;

    color: var(--brand-purple-light);

}

.service-card-btn i {

    font-size: 16px;

    transition: transform 0.3s ease;

}

.service-card-btn:hover i {

    transform: translateX(4px);

}

.services-trust-row {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 60px;

    margin-top: 70px;

    padding: 28px 50px;

    background: linear-gradient(135deg, rgba(2, 79, 100, 0.06) 0%, rgba(2, 79, 100, 0.02) 100%);

    border-radius: 20px;

    border: 1px solid rgba(2, 79, 100, 0.08);

}

.trust-item {

    display: flex;

    align-items: center;

    gap: 12px;

    transition: transform 0.3s ease;

}

.trust-item:hover {

    transform: translateY(-2px);

}

/* Trust Bar Section */
.trust-bar-section {
    position: relative;
    z-index: 10;
}

.trust-bar-wrapper {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    gap: 20px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 200px;
}

.trust-item i {
    font-size: 24px;
    color: var(--brand-purple);
}

.trust-item span {
    font-size: 15px;
    font-weight: 600;
    color: #07212D;
}

/* Trust Icon */
.trust-icon {
    font-size: 2.5rem;
    color: #6f42c1;
    background: #f8f0ff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.trust-icon i {
    font-size: 28px;
    color: #6f42c1;
}

/* Trust Text */
.trust-text {
    display: flex;
    flex-direction: column;
}

.trust-text strong {
    display: block;
    font-size: 1.1rem;
    color: #333;
}

.trust-text span {
    font-size: 0.9rem;
    color: #777;
    font-weight: 400;
}

/* Scroll Animation Logic */
.hidden-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Animation Delays */
.delay-0 { transition-delay: 0.1s; }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.4s; }

.section-title{

    text-align: center;

    margin-bottom: 60px;

}

.subTitle{

    color: var(--highlightcolor);

    background: var(--white);

    padding: 7px 15px;

    font-size: 18px;

    border-radius: 5px;

}

.heading{

    font-size: 48px;

    margin: 10px 0;

    font-weight: 700;

}

.desc{

   max-width: 600px;

   margin: auto;

   color: var(--gray);

   font-weight: 400;

   line-height: 1.6;

   margin-bottom: 40px; 

}

.card-wrapper{

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

}

.categoriesCard{

    flex: 1 1 calc(25% - 30px);

    background: var(--white);

    border-radius: 20px;

    padding: 35px;

    transition: 0.3s;

}

.categoriesCard:hover{

    transform: translateY(-5px);

    box-shadow: var(--shadow);

}

.purple:hover{background: rgba(2, 77, 102, 0.10);}

.orange:hover{background: rgba(250, 165, 26, 0.12);}

.blue:hover{background: rgba(0, 63, 92, 0.10);}

.green:hover{background: rgba(7, 33, 45, 0.06);}

.icon img{

    width: 70px;

    margin-bottom: 20px;    

}



.categoriesCard .icon i.service-icon{

    font-size: 28px;

    color: var(--primary-accent);

}

.categoriesCard.purple .icon i.service-icon{color: var(--primary-light);}

.categoriesCard.orange .icon i.service-icon{color: var(--accent-orange);}

.categoriesCard.blue .icon i.service-icon{color: var(--primary-dark);}

.categoriesCard.green .icon i.service-icon{color: var(--highlightcolor);}

.categoriesCard h3{

    font-size: 22px;

    margin-bottom: 10px;

}

.categoriesCard p{

    color: var(--gray);

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 15px;

}

.categoriesCard a{

    color: var(--highlightcolor);

    text-decoration: none;

    font-weight: 500;

}

/* Video section */

.videoSection{

    padding: 120px 20px;

    text-align: center;

    position: relative;

}

.video-area{

    position: relative;

    display: flex;

    justify-content: center;

    margin-top: 20px;

}

.video-frame{

    background: var(--white);

    padding: 12px;

    border-radius: 18px;

    box-shadow: var(--shadow);

}

.video-frame img{

    width: 850px;

    max-width: 100%;

    border-radius: 14px;

    display: block;

}

.small-video{

    position: absolute;

    left: 86px;

    bottom: 60px;

    background: var(--white);

    padding: 8px;

    border-radius: 12px;

    box-shadow: var(--shadow);

}

.small-video img{

    width: 200px;

    border-radius: 10px;

}

.call{

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    background: var(--highlightcolor);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    font-size: 23px;

}

.call .bx{transform: rotate(137deg);}

.features{

    display: flex;

    justify-content: center;

    gap: 25px;

    margin-top: 45px;

    flex-wrap: wrap;

}

.feature{

    background: var(--white);

    padding: 15px;

    border-radius: 12px;

    box-shadow: var(--shadow);

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 275px;

    font-weight: 700;

}

.featureIcon{

    width: 55px;

    height: 55px;

    border-radius: 10%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

}

.featureRed{background: rgba(241, 99, 98, 0.14); color: var(--highlightcolor);}

.featurePurple{background: rgba(0, 63, 92, 0.10); color: var(--primary-dark);}

.featureGreen{background: rgba(2, 77, 102, 0.10); color: var(--primary-light);}

/* courses section */

.courses{

    padding: 120px 20px;

    text-align: center;

    background: url('../images/back.jpg');

}

.course-wrapper{

    display: flex;

    gap: 30px;

    flex-wrap: wrap;

    justify-content: center;

}

.course-card{

    flex: 1 1 calc(33.33% - 30px);

    background: var(--white);

    border-radius: 18px;

    padding: 18px;

    border: 1px solid rgba(7, 33, 45, 0.12);

    display: flex;

    flex-direction: column;

}

.course-img{

    position: relative;

    border-radius: 15px;

}

.course-img img{

    width: 100%;

    display: block;

}

.price{

    position: absolute;

    top: -20px;

    right: 20px;

    background: var(--highlightcolor);

    color: var(--white);

    width: 70px;

    height: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    font-weight: bold;

}

.meta{

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 15px 0;

    font-size: 14px;

}

.tag{

    background: rgba(250, 165, 26, 0.16);

    padding: 5px 12px;

    border-radius: 15px;

    color: var(--primary);

}

.rating{

    color: var(--accent-orange);

    font-size: 20px;

}

.course-title{

    font-size: 18px;

    margin-bottom: 15px;

    text-align: left;

}

.instructor{

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;

}

.teacher{

    display: flex;

    align-items: center;

    gap: 10px;

}

.teacher img{

    width: 35px;

    height: 35px;

    border-radius: 50%;

}

.bottom{

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: 1px solid rgba(7, 33, 45, 0.12);

    padding-top: 15px;

    font-size: 14px;

    color: var(--gray);

}

.lessons span{

    color: var(--highlightcolor);

    margin-right: 5px;

}

.lessons .bx{

    font-size: 25px;

    vertical-align: middle;

    height: 27px;

}

.clockIcon{

    font-size: 25px;

    height: 28px;

    vertical-align: middle;

}

/* banner section */

.banner{

    padding: 120px 20px;

}

.banner-wrapper{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    flex-wrap: wrap;

    background: rgba(0, 63, 92, 0.06);

    padding: 0px 50px;

    border-radius: 10px;

}

.banner-left{flex: 1;}

.banner-right{

    flex: 1;

    position: relative;

    display: flex;

    justify-content: center;

}

.dots{

    position: absolute;

    top: 40px;

    left: 120px;

    width: 120px;

    height: 120px;

    background: radial-gradient(var(--primary) 2px, transparent 2px);

    background-size: 12px 12px;

}

.bannerImage{

    max-width: 420px;

    width: 100%;

    margin-left: 210px;

    padding: 50px 0px;

}

/* team section   */

.teamSection{

    padding: 0px 20px 120px 0px;

}

.team{

    display: flex;

    gap: 25px;

    justify-content: center;

    flex-wrap: wrap;

}

.teamCard{

    width: 260px;

    background: var(--white);

    padding: 14px;

    border-radius: 18px;

}

.teamCard img{

    width: 100%;

    border-radius: 14px;

    display: block;

}

.info{

    margin-top: 12px;

    text-align: center;

    padding: 18px 10px;

    border-radius: 14px;

}

.info h3{

    font-size: 18px;

    margin-bottom: 6px;

}

.info p{

    color: var(--primary);

    font-size: 14px;

}

/* newsletter section */

.subscribe-wrapper{

    max-width: 1200px;

    margin: auto;

    padding: 70px 20px;

    background: var(--primary);

    border-radius: 14px;

    position: relative;

    text-align: center;

}

.subscribe-wrapper h2{

    color: var(--light);

    font-size: 34px;

    line-height: 1.4;

    margin-bottom: 10px;

}

.subscribe-wrapper p{

    color: rgba(245, 246, 246, 0.75);

    font-size: 14px;

    margin-bottom: 25px;

}

.subscribe-form{

    display: flex;

    justify-content: center;

    align-items: center;

    max-width: 420px;

    margin: auto;

    background: var(--primary-dark);

    border-radius: 8px;

    overflow: hidden;

}

.subscribe-form input{

    flex: 1;

    padding: 14px;

    border: none;

    outline: none;

    background: transparent;

    color: var(--white);

}

.subscribe-form input::placeholder{

    color: rgba(245, 246, 246, 0.65);

}

.subscribe-form button{

    background: var(--primary);

    border: none;

    padding: 14px 24px;

    color: var(--white);

    cursor: pointer;

}

.avatar{

    position: absolute;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    overflow: hidden;

    border: 3px solid var(--white);

}

.avatar img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.a1{top: 20px; left: 40px;}

.a2{top: 90px; left: 120px;}

.a3{bottom: 30px; left: 60px;}

.a4{top: 25px; right: 40px;}

.a5{top: 110px; right: 120px;}

.a6{bottom: 30px; right: 60px;}

/* Blog section */

.blogSection{

    padding: 120px 20px;

}

.blog-wrapper{

    display: flex;

    gap: 30px;

    flex-wrap: wrap;

    justify-content: center;

}

.blog-card{

    background: var(--white);

    border-radius: 18px;

    width: 350px;

    padding: 10px;

    box-shadow: var(--shadow);

}

.blog-card img{

    width: 100%;

    border-radius: 14px;

    margin-bottom: 15px;

}

.meta{

    display: flex;

    gap: 20px;

    font-size: 13px;

    color: var(--highlightcolor);

    margin-bottom: 10px;

}

.blog-card h3{

    font-size: 20px;

    margin-bottom: 10px;

}

/* footer */

footer{

    background: url('../images/back1.png'), var(--white);

    padding: 60px 20px 20px;

    position: relative;

}

.footer{

    background: #07212D;

    padding: 60px 0 30px;

    color: #fff;

}

.footer-content{

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 40px;

    margin-bottom: 40px;

}

.navbar-brand.logo {

    display: flex;

    align-items: center;

    gap: 10px;

}

.nav-logo {

    height: 80px;

    width: auto;

    transition: all 0.3s ease;

}

.nav-logo:hover {

    transform: scale(1.02);

}

.logo-text {

    font-size: 24px;

    font-weight: 700;

    color: #07212D;

    letter-spacing: -0.5px;

}

.footer-brand .logo{

    font-size: 28px;

    font-weight: 700;

    color: #fff;

    margin-bottom: 15px;

}

.footer-brand .logo i{

    color: var(--brand-purple);

    margin-right: 8px;

}

.footer-brand p{

    color: rgba(255,255,255,0.7);

    font-size: 14px;

    line-height: 1.6;

}

.footer-links h4,

.footer-contact h4,

.footer-social h4{

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 20px;

    color: #fff;

}

.footer-links a{

    display: block;

    color: rgba(255,255,255,0.7);

    text-decoration: none;

    margin-bottom: 12px;

    font-size: 14px;

    transition: color 0.3s ease;

}

.footer-links a:hover{

    color: var(--brand-purple);

}

.footer-contact p{

    color: rgba(255,255,255,0.7);

    font-size: 14px;

    margin-bottom: 12px;

}

.footer-contact i{

    color: var(--brand-purple);

    margin-right: 8px;

}

.social-icons{

    display: flex;

    gap: 15px;

}

.social-icons a{

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 20px;

    transition: all 0.3s ease;

}

.social-icons a:hover{

    background: var(--brand-purple);

    transform: translateY(-3px);

}

.footer-bottom{

    border-top: 1px solid rgba(255,255,255,0.1);

    padding-top: 20px;

    text-align: center;

}

.footer-bottom p{

    color: rgba(255,255,255,0.5);

    font-size: 14px;

    margin: 0;

}

.footer-grid{

    display: flex;

    gap: 50px;

    flex-wrap: wrap;

    justify-content: space-between;

}

.footer-about{

    flex: 1;

    max-width: 250px;

}

.subscribe{

    display: flex;

    margin-bottom: 20px;

}

.subscribe input{

    flex: 1;

    padding: 12px;

    border: 1px solid rgba(7, 33, 45, 0.25);

    border-right: none;

    background: transparent;

    color: var(--white);

    border-radius: 30px 0 0 30px;

}

.subscribe button{

    padding: 12px 25px;

    border: none;

    background: var(--primary);

    color: var(--white);

    border-radius: 0 30px 30px 0;

    cursor: pointer;

}

.social{

    display: flex;

    gap: 12px;

}

.social a{

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--white);

    text-decoration: none;

    font-size: 20px;

}

.footer-links{

    flex: 1;

    min-width: 180px;

}

.footer-links h3{

    margin-bottom: 18px;

    font-size: 20px;

}

.footer-links ul{

    list-style: none;

}

.footer-links li{

    margin-bottom: 12px;

}

.footer-links a{

    text-decoration: none;

    color: rgba(7, 33, 45, 0.65);

    font-size: 14px;

}

.footer-bottom{

    border-top: 1px solid rgba(7, 33, 45, 0.12);

    margin-top: 40px;

    padding-top: 15px;

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    font-size: 14px;

    color: rgba(7, 33, 45, 0.65);

}

.footer-scroll{

    position: absolute;

    background: var(--primary);

    font-size: 40px;

    width: 54px;

    text-align: center;

    height: 50px;

    border-radius: 11px;

    color: var(--white);

    bottom: 23px;

    right: 42px;

}

#scrollTop .bx{

    color: var(--white);

}



/* Responsive adjustments for Bootstrap navbar */

@media (max-width: 991px){

    .navbar-collapse{

        background: var(--white);

        padding: 20px;

        border-radius: 15px;

        margin-top: 15px;

        box-shadow: var(--shadow);

    }

    .navbar-nav{

        gap: 5px;

    }

    .nav-link{

        padding: 12px 15px !important;

    }

    .nav-icon{

        display: none;

    }

    .commonBtn{

        width: 100%;

        margin-top: 10px;

    }

}



/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablets (768px and below) */
@media (max-width: 768px) {
    /* Hero Section */
    .hero {
        padding: 80px 0 60px;
    }

    .hero-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .hero-left h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    .hero-left p {
        font-size: 15px;
    }

    .hero-right {
        display: none;
    }

    .hero-stats-row {
        display: none;
    }

    .hero-search-bar {
        flex-direction: row !important;
        gap: 5px !important;
        padding: 5px !important;
    }

    .hero-search-bar .search-item {
        width: auto !important;
        flex: 1 !important;
    }

    .hero-search-bar button,
    .hero-btn-secondary {
        width: auto !important;
        padding: 8px 12px !important;
    }

    .hero-stats-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .stat-item {
        flex: 0 0 45% !important;
        max-width: 45% !important;
        padding: 8px !important;
        justify-content: flex-start !important;
    }

    .stat-item:last-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    /* Trust Bar */
    .trust-bar-section {
        margin-top: 20px !important;
        padding: 0 10px;
    }

    #quick-trust {
        margin-top: 20px !important;
        display: none !important;
    }

    .trust-bar-wrapper {
        flex-direction: column;
        padding: 15px;
        gap: 16px;
        border-radius: 15px;
    }

    .trust-item {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: auto;
        justify-content: flex-start;
        padding: 8px 15px;
        border-bottom: none;
        background: transparent;
        border: none;
        border-radius: 0;
        height: 50px;
    }

    .trust-text {
        flex: 1;
        min-width: 0;
    }

    .trust-icon {
        width: 40px;
        height: 40px;
    }

    .trust-icon i {
        font-size: 1.2rem;
        padding: 8px;
    }

    .trust-text strong {
        font-size: 0.9rem;
    }

    .trust-text span {
        font-size: 0.75rem;
    }

    /* About Section */
    .about-section {
        padding: 40px 0 !important;
    }

    .about-image-wrapper {
        margin-bottom: 30px;
    }

    .floating-stats-card {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 20px;
        display: inline-flex;
    }

    .location-badge {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 15px;
        display: inline-flex;
    }

    /* Section Titles */
    .section-title {
        font-size: 1.75rem;
        text-align: center;
    }

    .section-tagline {
        text-align: center;
    }

    /* Cards */
    .card-wrapper {
        justify-content: center;
    }

    .categoriesCard {
        flex: 1 1 calc(50% - 20px);
    }

    /* Footer */
    .footer-grid {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
}

/* Small Phones (576px and below) */
@media (max-width: 576px) {
    /* Hero Section */
    .hero {
        padding: 70px 0 50px;
    }

    .hero-left h1 {
        font-size: 26px;
    }

    .hero-left p {
        font-size: 14px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 8px 14px;
    }

    .hero-stats-row {
        display: none;
    }

    .trust-bar-section {
        margin-top: 15px !important;
        padding: 0 10px;
    }

    #quick-trust {
        margin-top: 15px !important;
        display: none !important;
    }

    .trust-bar-wrapper {
        padding: 15px;
        border-radius: 15px;
        gap: 14px;
    }

    .trust-item {
        padding: 8px 12px;
        background: transparent;
        border: none;
        border-radius: 0;
        height: 50px;
    }

    .trust-text {
        flex: 1;
        min-width: 0;
    }

    .trust-icon {
        width: 38px;
        height: 38px;
    }

    .trust-icon i {
        font-size: 18px;
    }

    .trust-text strong {
        font-size: 0.85rem;
    }

    .trust-text span {
        font-size: 0.7rem;
    }

    /* Section Titles */
    .section-title {
        font-size: 1.4rem;
    }

    .section-desc {
        font-size: 14px;
    }

    /* Cards */
    .categoriesCard {
        flex: 1 1 100%;
        margin-bottom: 15px;
    }

    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Gallery */
    .gallery-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* News Cards */
    .news-card {
        margin-bottom: 20px;
    }

    /* Team Cards */
    .teamCard {
        width: 100%;
    }

    /* Blog Cards */
    .blog-card {
        width: 100%;
    }

    /* Footer */
    .footer-links {
        flex-direction: column;
        gap: 8px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    /* Buttons */
    .btn-modern-primary,
    .commonBtn,
    .search-btn-purple {
        padding: 12px 20px;
        font-size: 14px;
    }

    /* Modal Adjustments */
    .modal-dialog {
        margin: 10px;
    }
}

/* ========================================
   SERVICES GRID SECTION
   ======================================== */
.services-grid-section {
    background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
    position: relative;
}

/* --- Modern Service Grid Styling --- */
.modern-card {
    background: #ffffff;
    padding: 2.5rem 2rem;
    border-radius: 24px;
    border: 1px solid rgba(7, 33, 45, 0.05);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d; /* Required for JS 3D Tilt */
}

/* Orange gradient glow on hover */
.modern-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle at center, rgba(250, 165, 26, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.modern-card:hover {
    border-color: var(--accent-orange);
    box-shadow: 0 20px 40px rgba(7, 33, 45, 0.12);
}

.modern-card:hover::before {
    opacity: 1;
}

/* 3D Icon Wrapper */
.service-icon-wrapper {
    width: 65px;
    height: 65px;
    background: var(--primary);
    color: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: all 0.4s ease;
    transform: translateZ(30px); /* Pops the icon out */
}

.modern-card:hover .service-icon-wrapper {
    background: var(--accent-orange);
    transform: translateZ(50px) rotate(-10deg);
    box-shadow: 0 10px 20px rgba(250, 165, 26, 0.3);
}

.modern-card h5 {
    transform: translateZ(20px);
    transition: color 0.3s ease;
}

/* Animated Underline Link */
.service-link-modern {
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.service-link-modern i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.modern-card:hover .service-link-modern i {
    transform: translateX(5px);
}

.modern-card:hover .service-link-modern {
    color: var(--primary);
}

/* Legacy Service Card Styles (for backward compatibility) */
.service-card {
    transition: var(--transition-smooth);
    border-bottom: 4px solid transparent !important;
    border-radius: 20px !important;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow) !important;
    border-bottom-color: var(--accent-orange) !important;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: rgba(2, 79, 100, 0.1);
    color: var(--brand-purple);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: var(--transition-smooth);
}

.service-card:hover .service-icon {
    background: var(--accent-orange);
    color: white;
    transform: scale(1.05);
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s ease;
    color: var(--brand-purple) !important;
}

.service-card:hover .service-link {
    gap: 10px;
    color: var(--accent-orange) !important;
}

@media (max-width: 768px) {
    .services-grid-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .services-grid-section .section-title {
        margin-bottom: 2rem !important;
    }

    .services-grid-section .modern-card {
        padding: 1.5rem 1.25rem;
        border-radius: 18px;
    }

    .services-grid-section .service-icon-wrapper {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        font-size: 1.5rem;
        margin-bottom: 1rem !important;
    }

    .services-grid-section .modern-card h5 {
        font-size: 1.05rem;
        line-height: 1.3;
    }
}

@media (max-width: 576px) {
    .services-grid-section .modern-card {
        padding: 1.25rem 1rem;
    }
}

/* ========================================
   NEWS CARDS SECTION
   ======================================== */
/* --- News Card Styles --- */
.news-card {
    transition: var(--transition-smooth);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px !important;
    overflow: hidden;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-soft) !important;
}

.news-card img {
    transition: transform 0.5s ease;
}

.news-card:hover img {
    transform: scale(1.05);
}

.news-img-wrapper {
    overflow: hidden;
    position: relative;
}

.news-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--brand-purple);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ========================================
   MODAL STYLING
   ======================================== */
/* --- Modal Input Focus States --- */
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    box-shadow: none !important;
    border: 1px solid var(--accent-orange) !important;
}

.modal-content .form-control,
.modal-content .form-select {
    border: 1px solid rgba(0,0,0,0.1);
    transition: var(--transition-smooth);
}

.modal-content .form-control:focus,
.modal-content .form-select:focus {
    border-color: var(--brand-purple) !important;
    box-shadow: 0 0 0 3px rgba(2, 79, 100, 0.15) !important;
}

/* Modal Header Gradient */
.modal-header {
    border-radius: 20px 20px 0 0 !important;
}

/* Scroll to Top Button Visibility */
#scrollTopBtn.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

#scrollTopBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(2, 79, 100, 0.4);
}

/* ========================================
   ABOUT SECTION ENHANCEMENTS
   ======================================== */
/* About Section Base */
.about-section {
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    position: relative;
    overflow: hidden;
}

/* Section Tagline */
.section-tagline {
    color: var(--accent-orange);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    display: block;
}

/* About Image Wrapper */
.about-image-wrapper {
    position: relative;
    padding-right: 30px;
    padding-bottom: 30px;
}

/* Main About Image */
.main-about-img {
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(7, 33, 45, 0.15);
    transition: transform 0.5s ease;
}

.main-about-img:hover {
    transform: scale(1.02);
}

/* Floating Stats Card */
.floating-stats-card {
    position: absolute;
    bottom: 0;
    right: 0;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-left: 5px solid var(--accent-orange);
    width: 220px;
    z-index: 10;
}

.stat-inner {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-inner i {
    font-size: 2.5rem;
    color: var(--primary);
}

.stat-number {
    font-weight: 700;
    margin-bottom: 0;
    color: var(--primary);
    font-size: 1.8rem;
}

/* Location Badge */
.location-badge {
    position: absolute;
    top: 20px;
    left: -15px;
    background: var(--primary);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 10;
}

.location-badge i {
    color: var(--accent-orange);
}

/* About Content Box */
.about-content-box {
    padding-top: 10px;
}

.about-content-box .section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary);
}

/* Feature Items */
.about-features-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about-feat-item {
    display: flex;
    align-items: flex-start;
}

.feat-icon {
    width: 45px;
    height: 45px;
    background: rgba(250, 165, 26, 0.1);
    color: var(--accent-orange);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.about-feat-item:hover .feat-icon {
    background: var(--accent-orange);
    color: white;
    transform: scale(1.05);
}

.feat-info h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

/* Text Accent */
.text-accent {
    color: var(--accent-orange) !important;
}

/* About Section Responsive */
@media (max-width: 991px) {
    .about-image-wrapper {
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    
    .floating-stats-card {
        position: absolute;
        bottom: -10px;
        right: 0;
        width: auto;
        max-width: none;
        padding: 16px;
        border-radius: 14px;
        width: 200px;
    }
    
    .location-badge {
        position: absolute;
        top: 20px;
        left: -10px;
        font-size: 0.82rem;
        padding: 8px 16px;
    }
    
    .about-content-box {
        padding-left: 0 !important;
    }
    
    .about-content-box .section-title {
        font-size: 1.8rem;
    }

    .stat-inner i {
        font-size: 2.1rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }
}

/* ========================================
   TRUST BAR SECTION
   ======================================== */
/* Trust Bar Section */
.trust-bar-section {
    position: relative;
    z-index: 10;
    margin-top: -60px;
}

.trust-bar-wrapper {
    background: #ffffff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 30px;
    border-radius: 20px;
    border-bottom: 4px solid var(--accent-orange);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    border-right: 1px solid #eee;
    transition: transform 0.3s ease;
}

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

.trust-icon {
    width: 50px;
    height: 50px;
    background: rgba(250, 165, 26, 0.1);
    color: var(--accent-orange);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.trust-item:hover .trust-icon {
    background: var(--accent-orange);
    color: white;
}

.trust-text strong {
    display: block;
    color: var(--primary);
    font-size: 1.05rem;
    line-height: 1.2;
}

.trust-text span {
    color: #6c757d;
    font-size: 0.85rem;
}

/* Trust Bar Responsive */
@media (max-width: 992px) {
    .trust-bar-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .trust-item {
        border-right: none;
    }
}

@media (max-width: 576px) {
    .trust-bar-section {
        margin-top: -40px;
    }
    .trust-bar-wrapper {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .trust-item {
        padding: 10px 0;
    }
}

/* ========================================
   PARTNERS LOGO SLIDER - FULL COLOR
   ======================================== */
.partners-label {
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: var(--primary);
    opacity: 0.7;
}

/* Container fade mask */
.logo-slider {
    overflow: hidden;
    padding: 20px 0;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Smooth loop animation */
.logo-track {
    display: flex;
    width: calc(320px * 8); 
    animation: scroll 25s linear infinite;
    align-items: center;
}

/* Ensure the slide container centers everything perfectly */
.slide {
    width: 320px; /* Increased from 280px to prevent logos from crowding */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.partner-name {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary);
    opacity: 0.4;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.slide:hover .partner-name {
    opacity: 1;
    color: var(--accent-orange);
    transform: scale(1.05);
}

/* Scroll Animation */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-320px * 4)); }
}

/* Pause on hover for accessibility */
.logo-slider:hover .logo-track {
    animation-play-state: paused;
}

/* --- Partner Logo Scale Fix --- */
.partner-logo-img {
    max-width: 160px;
    max-height: 70px; /* Increased from 60px to allow more vertical space */
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}

/* Specific fix for the horizontal LRA logo */
.partner-logo-img.lra-fix {
    max-width: 220px; /* Allows the horizontal logo to expand its width */
    transform: scale(1.15); /* Slightly boosts the overall size */
}

/* Specific fix for the SLB logo */
.partner-logo-img.slb-fix {
    max-width: 200px;
    transform: scale(1.2); /* Boosts size to match other logos */
}

/* Hover state for images - shadow pop effect */
.slide:hover .partner-logo-img {
    transform: translateY(-5px) scale(1.05);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

/* Keep LRA fix scale on hover */
.slide:hover .partner-logo-img.lra-fix {
    transform: translateY(-5px) scale(1.2);
}

/* Keep SLB fix scale on hover */
.slide:hover .partner-logo-img.slb-fix {
    transform: translateY(-5px) scale(1.25);
}

/* ========================================
   ABOUT PAGE SPECIFIC STYLES
   ======================================== */

/* Letter Spacing Utilities */
.ls-2 { letter-spacing: 2px; }
.ls-3 { letter-spacing: 3px; }

/* Z-Index Utility */
.z-index-2 { z-index: 2; }

/* --- Hero Section Styles --- */
.about-hero-section {
    min-height: 50vh;
    background: url('../images/heritage-bg.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
    padding-top: 100px; /* Offset for sticky navbar */
}

@media (max-width: 768px) {
    body.about-page .about-hero-section {
        min-height: 42vh;
        padding-top: 84px;
    }

    body.about-page .about-hero-section .hero-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.about-page .about-hero-section h1 {
        font-size: 2rem;
        line-height: 1.15;
    }

    body.about-page .scroll-indicator {
        bottom: 16px;
    }
}

@media (max-width: 576px) {
    body.about-page .about-hero-section {
        min-height: 38vh;
    }

    body.about-page .about-hero-section h1 {
        font-size: 1.75rem;
    }
}

/* Dark Gradient Overlay for readability */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(7, 33, 45, 0.85) 0%, 
        rgba(7, 33, 45, 0.6) 100%
    );
    z-index: 1;
}

/* Bold Title & Gradient */
.text-gradient {
    background: linear-gradient(to right, #ffffff, var(--accent-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass-morphism Breadcrumbs */
.glass-breadcrumb {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-breadcrumb .breadcrumb-item a {
    color: var(--accent-orange);
    text-decoration: none;
    transition: opacity 0.3s;
}

.glass-breadcrumb .breadcrumb-item a:hover {
    opacity: 0.8;
}

.glass-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
    content: "→";
}

/* Animated Scroll Mouse */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.mouse {
    width: 25px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    position: relative;
}

.mouse::before {
    content: '';
    width: 4px;
    height: 8px;
    background: var(--accent-orange);
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(15px); }
}

/* About Hero Section */
.about-hero {
    background: linear-gradient(rgba(7, 33, 45, 0.9), rgba(7, 33, 45, 0.9)), url('../images/pattern-bg.png');
    background-size: cover;
    background-position: center;
}

/* Stat Badge on Story Image */
.stat-badge {
    min-width: 140px;
    transform: translateY(20px);
}

.stat-badge.bg-accent {
    background: var(--accent-orange) !important;
}

/* --- Story Split Styles --- */
.story-image-wrapper {
    position: relative;
    padding: 20px;
}

@media (max-width: 768px) {
    body.about-page .story-split-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    body.about-page .story-split-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.about-page .story-image-wrapper {
        padding: 0;
    }

    body.about-page .story-image-wrapper:hover .main-story-img {
        transform: none;
    }

    body.about-page .story-split-section .section-title {
        font-size: 1.6rem;
        line-height: 1.2;
    }

    body.about-page .story-split-section p.lead {
        font-size: 1rem;
    }
}

.main-image-container {
    position: relative;
    z-index: 1;
}

.main-story-img {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.story-image-wrapper:hover .main-story-img {
    transform: scale(1.02);
}

/* Floating Achievement Badge */
.achievement-card {
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 240px;
    border-left: 5px solid var(--accent-orange);
    z-index: 2;
}

.bg-accent-light {
    background: rgba(250, 165, 26, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stat Items in Story Section */
.story-split-section .stat-item h3 {
    font-size: 2rem;
    color: var(--primary-navy);
}

.ls-1 { letter-spacing: 1px; }

/* Shadow XL Utility */
.shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

@media (max-width: 991px) {
    .achievement-card {
        position: relative;
        bottom: 0;
        right: 0;
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 991px) {
    body.about-page .achievement-card {
        position: absolute;
        bottom: -20px;
        right: 0;
        width: 220px;
        margin-top: 0;
        padding: 16px !important;
        border-left-width: 4px;
    }

    body.about-page .achievement-card h6 {
        font-size: 0.95rem;
    }

    body.about-page .achievement-card small {
        font-size: 0.8rem;
    }

    body.about-page .bg-accent-light {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 576px) {
    body.about-page .achievement-card {
        bottom: -14px;
        width: 200px;
        padding: 14px !important;
    }

    body.about-page .achievement-card h6 {
        font-size: 0.9rem;
    }

    body.about-page .achievement-card small {
        font-size: 0.78rem;
    }
}

/* --- Floating Stats Bar Styles --- */
.stats-bar-wrapper {
    position: relative;
    z-index: 10;
    margin-top: -60px;
    margin-bottom: 40px;
}

.stats-floating-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 50px 20px;
    position: relative;
    margin-top: -80px;
    z-index: 5;
    border: 1px solid rgba(7, 33, 45, 0.1);
    box-shadow: 0 20px 60px rgba(7, 33, 45, 0.1);
}

.stat-card {
    text-align: center;
    color: #07212d;
    padding: 20px;
}

.stat-card i {
    color: #faa51a;
    font-size: 1.8rem;
    margin-bottom: 15px;
    display: block;
}

.num-block {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
    color: #07212d;
}

.plus {
    color: #faa51a;
    margin-left: 2px;
}

.stat-card p {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #07212d;
    opacity: 0.7;
    margin: 0;
}

/* Vertical Dividers for Desktop */
@media (min-width: 992px) {
    .stat-card:not(:last-child) {
        border-right: 1px solid rgba(7, 33, 45, 0.1);
    }
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .stats-bar-wrapper { margin-top: -40px; }
    .stats-floating-card { margin-top: -60px; padding: 30px 15px; }
    .num-block { font-size: 2rem; }
    .stat-card { padding: 15px; }
}

@media (max-width: 768px) {
    body.about-page .about-story-stats-row {
        row-gap: 18px;
        justify-content: center;
        text-align: center;
    }

    body.about-page .about-stats-bar-wrapper .stats-floating-card .row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    body.about-page .about-stats-bar-wrapper .stats-floating-card .stat-card {
        flex: 0 0 calc(50% - 7px);
        max-width: calc(50% - 7px);
        padding: 16px;
    }
}

@media (max-width: 576px) {
    body.about-page .about-story-stats-row {
        row-gap: 18px;
    }

    body.about-page .about-story-stats-row .col-6 {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.about-page .about-stats-bar-wrapper .stats-floating-card {
        padding: 22px 14px;
    }

    body.about-page .about-stats-bar-wrapper .stats-floating-card .row {
        gap: 12px;
    }

    body.about-page .about-stats-bar-wrapper .stats-floating-card .stat-card {
        padding: 14px;
    }
}

/* Value Cards */
.value-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.value-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-orange);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
}

/* --- Mission & Vision Styles --- */
.mission-vision-section {
    background-color: #f8f9fa;
    overflow: hidden;
}

.mission-vision-section.is-flat {
    background-color: transparent;
}

.mission-vision-section.is-flat .mission-bg-accent {
    display: none;
}

.mission-vision-section.is-flat .mission-vision-flat-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.mission-vision-section.is-flat .mission-vision-flat-item {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    body.about-page .mission-vision-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    body.about-page .mission-vision-flat-header .display-5 {
        font-size: 1.75rem;
    }

    body.about-page .mission-vision-section.is-flat .mission-vision-flat-wrap {
        gap: 20px;
    }
}

@media (min-width: 992px) {
    .mission-vision-section.is-flat .mission-vision-flat-wrap {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
        justify-content: center;
    }

    .mission-vision-section.is-flat .mission-vision-flat-item {
        flex: 1 1 0;
        max-width: 520px;
    }
}

/* The "Why" Background Accent */
.mission-bg-accent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(250, 165, 26, 0.08) 0%, transparent 70%);
    z-index: 1;
    animation: pulseGlow 8s infinite alternate;
}

.purpose-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 50px 40px;
    border-radius: 30px;
    text-align: center;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(7, 33, 45, 0.03);
}

.purpose-card:hover {
    transform: translateY(-10px);
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(7, 33, 45, 0.08);
    border-color: var(--accent-orange);
}

.purpose-icon {
    width: 70px;
    height: 70px;
    background: var(--primary-navy);
    color: var(--accent-orange);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 25px;
    transform: rotate(-10deg);
    transition: transform 0.4s ease;
}

.purpose-card:hover .purpose-icon {
    transform: rotate(0deg) scale(1.1);
}

@keyframes pulseGlow {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* --- Final CTA Styles --- */
.about-cta-section {
    background: #f8f9fa;
    padding-bottom: 100px !important;
}

@media (max-width: 768px) {
    body.about-page .about-cta-section {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    body.about-page .cta-glass-card {
        border-radius: 22px;
    }
}

@media (max-width: 576px) {
    body.about-page .cta-glass-card {
        border-radius: 18px;
    }
}

.cta-glass-card {
    background: linear-gradient(135deg, #07212d 0%, #0a3142 100%);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(7, 33, 45, 0.2);
}

/* Decorative Background Element */
.cta-glass-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(250, 165, 26, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Accent Glow Button */
.btn-accent-glow {
    background-color: var(--accent-orange);
    color: #07212d;
    border: none;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 0 rgba(250, 165, 26, 0.4);
    animation: pulseOrange 2s infinite;
}

.btn-accent-glow:hover {
    transform: translateY(-3px);
    background-color: #e59415;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Pulse Animation */
@keyframes pulseOrange {
    0% { box-shadow: 0 0 0 0 rgba(250, 165, 26, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(250, 165, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 165, 26, 0); }
}

/* --- Footer Styling --- */
.main-footer {
    background-color: #07212d; /* Primary Navy */
    color: #ffffff;
    font-size: 0.95rem;
}

.footer-desc {
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 25px;
}

.footer-title {
    color: #faa51a; /* Accent Orange */
    font-weight: 700;
    margin-bottom: 25px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #ffffff;
    opacity: 0.7;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    opacity: 1;
    color: #faa51a;
    padding-left: 5px;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.footer-contact i {
    color: #faa51a;
    font-size: 1.2rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s;
}

.social-links a:hover {
    background: #faa51a;
    transform: translateY(-3px);
}

.footer-bottom {
    border-color: rgba(255, 255, 255, 0.1) !important;
    font-size: 0.85rem;
    opacity: 0.6;
}

/* Increase readability of footer text */
.footer-links li, .footer-contact li {
    font-size: 1rem;
    margin-bottom: 12px;
}

/* Fix social icon sizing */
.social-links a i {
    font-size: 1.2rem;
}

/* Improve the look of the LRA/Regulation section */
.footer-title + p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* RSL logo with white text/color for dark background */
.regulated-logo {
    max-width: 150px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
    padding: 10px;
    margin: 10px 0;
}

/* Footer logo styling - keep original colors for visibility */
.footer-logo img {
    height: 60px;
    width: auto;
}

/* Make the copyright more visible */
.footer-bottom p {
    font-size: 0.85rem;
    opacity: 0.8;
    letter-spacing: 0.5px;
}

/* Hover effect for location line */
.footer-contact li:last-child:hover {
    color: #faa51a;
    cursor: default;
}

/* --- Footer Section Styles --- */
.footer-section {
    background: linear-gradient(135deg, #07212d 0%, #0a2f3f 100%);
    padding: 60px 0 30px;
    position: relative;
}

.footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #faa51a, #07212d, #faa51a);
}

.footer-section .footer-title {
    color: #faa51a;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.footer-section .footer-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-section .footer-links a:hover {
    color: #faa51a;
    transform: translateX(5px);
}

.footer-section .footer-contact li {
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-section .footer-contact i {
    color: #faa51a;
    font-size: 1.1rem;
}

.footer-section .social-btn {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-section .social-btn:hover {
    background: #faa51a;
    border-color: #faa51a;
    color: #07212d;
    transform: translateY(-3px);
}

.footer-section .regulated-logo {
    max-width: 120px;
    opacity: 0.9;
    filter: brightness(0) invert(1);
    height: auto;
}

.footer-section .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 30px;
    padding-top: 20px;
}

.footer-section .footer-desc {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* --- Services Page Styles --- */
/* --- Services Hero Styles --- */
.services-hero {
    position: relative;
    min-height: 50vh;
    background: url('../images/services-bg.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
    padding-top: 120px;
}

@media (max-width: 768px) {
    body.services-page .services-hero {
        min-height: 42vh;
        padding-top: 90px;
        background-attachment: scroll;
    }

    body.services-page .services-hero h1 {
        font-size: 2.1rem;
        line-height: 1.15;
    }

    body.services-page .services-hero p.lead {
        font-size: 1rem;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 576px) {
    body.services-page .services-hero {
        min-height: 38vh;
    }

    body.services-page .services-hero h1 {
        font-size: 1.9rem;
    }
}

/* Deep Navy Serenity Overlay */
.hero-serenity-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(7, 33, 45, 0.85) 0%, 
        rgba(7, 33, 45, 0.65) 100%
    );
    z-index: 1;
}

/* Glassmorphism Breadcrumb */
.glass-nav {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.glass-nav .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3);
    content: "|";
    padding: 0 10px;
}

.glass-nav .breadcrumb-item.active {
    color: #ffffff;
    opacity: 1;
    font-weight: 600;
}

/* Subtle Text Shadows for Stability */
.services-hero h1 {
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    letter-spacing: -1px;
    font-weight: 700;
}

.services-hero p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    opacity: 1;
    color: #ffffff;
}

/* --- Text Visibility Fixes --- */
/* Improve Navbar Link Contrast - exclude header-modern */
.navbar-nav:not(.header-modern .navbar-nav) .nav-link {
    color: #07212d !important;
}

/* Support button thicker border */
.btn-outline-primary {
    border-width: 2px;
}

/* --- Service Intro Styles --- */
.service-intro-section {
    background-color: #ffffff;
}

@media (max-width: 768px) {
    body.services-page .service-intro-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    body.services-page .intro-text-box .display-5 {
        font-size: 1.75rem;
    }

    body.services-page .intro-text-box blockquote {
        font-size: 1rem;
    }

    body.services-page .precision-card {
        padding: 18px !important;
    }

    body.services-page .precision-icon {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }
}

.intro-text-box blockquote {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--primary);
}

.precision-card {
    border-top: 5px solid var(--accent-orange) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.precision-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(7, 33, 45, 0.1) !important;
}

.precision-icon {
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: var(--accent-orange);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.precision-list i {
    flex-shrink: 0;
    margin-top: 3px;
}

.ls-2 { letter-spacing: 2px; }

/* --- Core Four Service Grid Styles --- */
.core-services-grid {
    background-color: #fcfcfc;
}

@media (max-width: 768px) {
    body.services-page .core-services-grid {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    body.services-page .service-interactive-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    body.services-page .service-interactive-card:hover {
        transform: none;
    }

    body.services-page .card-icon-wrapper {
        width: 56px;
        height: 56px;
        font-size: 1.6rem;
        margin-bottom: 16px;
    }

    body.services-page .service-interactive-card h4 {
        font-size: 1.1rem;
    }

    body.services-page .service-interactive-card p {
        font-size: 0.92rem;
        margin-bottom: 18px;
    }
}

.service-interactive-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(7, 33, 45, 0.05);
    text-align: center;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.card-icon-wrapper {
    width: 70px;
    height: 70px;
    background: #f8f9fa;
    color: #07212d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 25px;
    transition: 0.3s;
}

.service-interactive-card h4 {
    color: #07212d;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.service-interactive-card p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 25px;
}

.service-interactive-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(7, 33, 45, 0.08);
    border-color: #faa51a;
}

.service-interactive-card:hover .card-icon-wrapper {
    background: #07212d;
    color: #faa51a;
}

.service-link {
    color: #faa51a;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.service-link:hover {
    color: #07212d;
}

/* --- Masonry Gallery Styles --- */
.btn-filter {
    border: 2px solid #eee;
    color: #07212d;
    font-weight: 600;
    padding: 8px 25px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-filter.active, .btn-filter:hover {
    background-color: #faa51a;
    border-color: #faa51a;
    color: #fff;
}

.gallery-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.gallery-card img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%;
}

.gallery-card .gallery-overlay {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(7, 33, 45, 0.8), transparent);
    transition: all 0.4s ease;
    opacity: 0;
}

.gallery-card:hover img {
    transform: scale(1.05);
}

.gallery-card:hover .gallery-overlay {
    bottom: 0;
    opacity: 1;
}

.masonry-grid .gallery-item {
    margin-bottom: 1rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* --- Tech Integration Styles --- */
.tech-card-wrapper {
    background: #04161e;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.border-end-lg {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.tech-logo-box {
    width: 60px;
    height: 60px;
    background: #ffffff;
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.data-stream-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(250, 165, 26, 0.03) 50%, 
        transparent 100%);
    z-index: 1;
    animation: streamFlow 6s linear infinite;
    pointer-events: none;
}

@keyframes streamFlow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}

.logo-pulse {
    animation: pulseBorder 2s ease-out;
}

@keyframes pulseBorder {
    0% { box-shadow: 0 0 0 0 rgba(250, 165, 26, 0.7); }
    100% { box-shadow: 0 0 0 15px rgba(250, 165, 26, 0); }
}

@media (max-width: 991px) {
    .border-end-lg { border-right: none; }
}

/* --- Custom Accordion Styles --- */
.custom-accordion .accordion-button {
    background-color: #ffffff;
    color: #07212d;
    font-size: 1.1rem;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    body.services-page .claims-faq-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    body.services-page .custom-accordion .accordion-button {
        font-size: 1rem;
    }

    body.services-page .step-number {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
}

.custom-accordion .accordion-button:not(.collapsed) {
    background-color: #ffffff;
    color: #faa51a;
}

.step-number {
    width: 35px;
    height: 35px;
    background: #f8f9fa;
    color: #07212d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: 0.3s;
}

.accordion-button:not(.collapsed) .step-number {
    background: #faa51a;
    color: #fff;
}

.custom-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2307212d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* --- Emergency Contact Button Styles --- */
.emergency-contact-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(7, 33, 45, 0.08);
    border-left: 4px solid #faa51a;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.emergency-contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(250, 165, 26, 0.2);
    border-left-color: #07212d;
}

.emergency-contact-btn .phone-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #07212d 0%, #0a2d3d 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #faa51a;
    font-size: 1.75rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.emergency-contact-btn:hover .phone-icon {
    background: linear-gradient(135deg, #faa51a 0%, #f59e0b 100%);
    color: #07212d;
    transform: scale(1.1);
}

.emergency-contact-btn .contact-info {
    flex: 1;
}

.emergency-contact-btn .contact-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6c757d;
    margin-bottom: 4px;
}

.emergency-contact-btn .phone-number {
    font-size: 1.35rem;
    font-weight: 700;
    color: #07212d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.emergency-contact-btn:hover .phone-number {
    color: #faa51a;
}

.emergency-contact-btn .pulse-ring {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #faa51a;
    animation: phonePulse 2s ease-out infinite;
    pointer-events: none;
}

@keyframes phonePulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.emergency-contact-btn .ripple-effect {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(250, 165, 26, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: rippleAnimation 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleAnimation {
    to {
        transform: translate(-50%, -50%) scale(15);
        opacity: 0;
    }
}

/* --- Funeral Plans Styling --- */
.plan-card {
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(7, 33, 45, 0.1) !important;
}

.plan-card.featured {
    transform: scale(1.05);
    z-index: 2;
    background-color: #07212d !important;
}

.plan-card.featured:hover {
    transform: scale(1.05) translateY(-5px);
}

@media (max-width: 768px) {
    .policy-finder {
        padding: 60px 0;
    }

    .policy-finder .heading {
        font-size: 28px;
    }

    .plan-card,
    .plan-card:hover {
        transform: none !important;
    }

    .plan-card.featured,
    .plan-card.featured:hover {
        transform: none !important;
    }

    .price-tag .amount {
        font-size: 2.25rem;
    }

    .price-tag .currency,
    .price-tag .period {
        font-size: 1rem;
    }

    .popular-badge {
        top: 12px;
        left: 12px;
        transform: none;
    }
}

@media (max-width: 576px) {
    .policy-finder .heading {
        font-size: 24px;
    }
}

.price-tag .amount {
    font-size: 3rem;
    font-weight: 700;
    color: #07212d;
}

.plan-card.featured .price-tag .amount {
    color: #ffffff;
}

.price-tag .currency, .price-tag .period {
    font-size: 1.2rem;
    opacity: 0.8;
}

.plan-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #faa51a;
    color: #fff;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.btn-accent {
    background-color: #faa51a;
    color: white;
    border: none;
}

.btn-accent:hover {
    background-color: #e59416;
    color: white;
}

/* --- Claims Page Styles --- */
/* --- Urgent Hero Styles --- */
.urgent-hero {
    position: relative;
    min-height: auto;
    background: #07212d;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0 50px;
    overflow: hidden;
}

@media (max-width: 768px) {
    body.claims-page .urgent-hero {
        padding: 28px 0 34px;
    }

    body.claims-page .urgent-hero .hero-inner {
        margin-top: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    body.claims-page .urgent-hero h1 {
        font-size: 1.6rem;
        line-height: 1.15;
    }

    body.claims-page .urgent-hero p.lead {
        font-size: 1rem;
        margin-bottom: 1rem !important;
    }

    body.claims-page .search-bar-wrapper {
        max-width: 100% !important;
    }

    body.claims-page .search-bar-wrapper form {
        width: 100%;
    }
}

@media (max-width: 576px) {
    body.claims-page .urgent-hero h1 {
        font-size: 1.45rem;
    }
}

.hero-serenity-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg, 
        rgba(7, 33, 45, 0.95) 0%, 
        rgba(7, 33, 45, 0.80) 100%
    );
    z-index: 1;
}

.z-index-2 { z-index: 2; }

/* Sharp Typography */
.urgent-hero h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 0.5rem !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    letter-spacing: -1px;
    position: relative;
}

.urgent-hero p.lead {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 500;
    font-size: 1.05rem;
    margin-bottom: 1.5rem !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Large Accent Button */
.btn-accent-lg {
    background-color: #faa51a;
    color: #07212d;
    border: none;
    font-size: 1.1rem;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(250, 165, 26, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulseOrange 2s infinite;
}

.btn-accent-lg:hover {
    transform: translateY(-3px);
    background-color: #e59416;
    color: #fff;
    box-shadow: 0 10px 25px rgba(250, 165, 26, 0.5);
}

/* Search Bar Customization */
.search-bar-wrapper {
    margin-top: 1.5rem !important;
}

.search-bar-wrapper .form-control {
    height: 45px;
    font-size: 1rem;
}

.search-bar-wrapper .form-control:focus {
    box-shadow: none;
}

.search-bar-wrapper .form-control::placeholder {
    color: #4a5568 !important;
}

.search-bar-wrapper .btn-primary {
    background-color: #07212d;
    border: none;
}

.search-bar-wrapper .btn-primary:hover {
    background-color: #04161e;
}

/* Pulse Animation Definition */
@keyframes pulseOrange {
    0% { box-shadow: 0 0 0 0 rgba(250, 165, 26, 0.6); }
    70% { box-shadow: 0 0 0 15px rgba(250, 165, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 165, 26, 0); }
}

/* --- High-Visibility Text Fixes --- */

/* 1. Deepen Hero Overlays for better contrast */
.hero-serenity-overlay {
    background: linear-gradient(
        to bottom, 
        rgba(7, 33, 45, 0.92) 0%,
        rgba(7, 33, 45, 0.75) 100%
    ) !important;
}

/* 2. Sharpen Hero Typography */
.services-hero h1, .urgent-hero h1 {
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    font-weight: 700 !important;
    color: #ffffff !important;
}

.services-hero p, .urgent-hero p {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    opacity: 1 !important;
    color: #ffffff !important;
    font-weight: 500;
}

/* 3. Fix Search Bar Input Clarity */
.search-bar-wrapper input::placeholder {
    color: #4a5568 !important;
    opacity: 1;
}

.search-bar-wrapper input {
    color: #07212d !important;
    font-weight: 600;
}

/* 4. Glass Nav for breadcrumb pills */
.glass-nav {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* --- 3-Step Workflow Styles --- */
.workflow-container {
    padding: 20px 0;
}

@media (max-width: 768px) {
    body.claims-page .claims-workflow .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.claims-page .claims-workflow .display-5 {
        font-size: 1.75rem;
    }
}

/* The Base Line */
.workflow-line {
    position: absolute;
    top: 45px;
    left: 10%;
    width: 80%;
    height: 3px;
    background-color: #e2e8f0;
    z-index: 0;
}

/* The Animated Fill Line */
.workflow-line-fill {
    position: absolute;
    top: 45px;
    left: 10%;
    width: 0%;
    height: 3px;
    background-color: #faa51a;
    z-index: 1;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.step-icon-box {
    width: 90px;
    height: 90px;
    background: #ffffff;
    border: 3px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #07212d;
    position: relative;
    transition: all 0.5s ease;
    background-clip: padding-box;
}

/* Step Number Badge */
.step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background: #07212d;
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* Active State Triggered by JS */
.workflow-step.is-active .step-icon-box {
    border-color: #faa51a;
    color: #faa51a;
    box-shadow: 0 10px 25px rgba(250, 165, 26, 0.2) !important;
}
.workflow-step.is-active .step-number {
    background: #faa51a;
}

/* Mobile Responsiveness: Switch to Vertical Timeline */
@media (max-width: 767px) {
    .workflow-line, .workflow-line-fill {
        display: none;
    }
    .workflow-step {
        margin-bottom: 3rem;
        position: relative;
    }
    .workflow-step:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -3rem;
        left: 50%;
        transform: translateX(-50%);
        width: 3px;
        height: 2.5rem;
        background-color: #faa51a;
        opacity: 0.3;
    }
}

/* --- Interactive Checklist Styles --- */
.checklist-toggle {
    border: 1px solid #e2e8f0;
}

.btn-toggle {
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 25px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.3s ease;
}

.btn-toggle.active {
    background-color: #07212d !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(7, 33, 45, 0.2);
}

.checklist-card {
    background: #fff;
    border-left: 4px solid #faa51a;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.checklist-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.check-icon {
    width: 25px;
    height: 25px;
    background: #f0fff4;
    color: #22c55e;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

#checklistContainer {
    transition: opacity 0.3s ease;
}

/* --- Visibility Fixes --- */

/* Fix for the bottom download banner */
.bg-primary-custom {
    background-color: #07212d !important;
    border-radius: 15px;
    padding: 25px;
}

.bg-primary-custom h5, 
.bg-primary-custom p {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Ensure PDF icon is visible */
.bg-primary-custom .bxs-file-pdf {
    color: #07212d !important;
    font-size: 2.5rem !important;
}

@media (max-width: 768px) {
    .document-checklist .row.align-items-center.mb-5 {
        row-gap: 16px;
        text-align: center;
    }

    .document-checklist .text-lg-end {
        text-align: center !important;
    }

    .document-checklist .checklist-toggle {
        width: 100%;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-wrap: nowrap;
    }

    .document-checklist .checklist-toggle .btn-toggle {
        flex: 1 1 50%;
        padding: 10px 12px;
        white-space: nowrap;
    }

    .document-checklist .bg-primary-custom {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .document-checklist .bg-primary-custom a.btn {
        margin-left: 0 !important;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    body.claims-page .document-checklist {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 576px) {
    .document-checklist .checklist-toggle {
        max-width: 100%;
    }

    .document-checklist .btn-toggle {
        font-size: 0.85rem;
    }
}

/* --- Contact Page Styles --- */
/* --- Urgent Header Styles --- */
.bg-navy { background-color: #07212d !important; }
.text-accent { color: #faa51a !important; }
.bg-accent { background-color: #faa51a !important; }
.border-accent { border: 2px solid #faa51a !important; }

/* Header Wrapper - Fixed stacking */
.header-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
}

.header-wrapper .top-bar {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}

.header-wrapper .navbar {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 70px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Logo Sizing */
.navbar-brand img {
    height: 80px;
    width: auto;
}

/* Active Link Highlight - exclude header-modern */
.header-modern .nav-link.active {
    background-color: transparent;
    border-radius: 0;
    color: #fff !important;
}

.nav-link.active:not(.header-modern .nav-link) {
    background-color: rgba(250, 165, 26, 0.15);
    border-radius: 8px;
    color: #07212d !important;
}

/* Push content below fixed header */
.urgent-contact-header {
    /* margin-top: 110px; Top bar (40px) + Navbar (70px) */
    padding-top: 80px;
    min-height: 400px;
    display: flex;
    align-items: center;
}

/* Background Decoration */
.header-bg-accent {
    position: absolute;
    top: -10%;
    right: -5%;
    width: 40%;
    height: 120%;
    background: linear-gradient(135deg, rgba(250, 165, 26, 0.1) 0%, rgba(7, 33, 45, 0) 100%);
    transform: skewX(-15deg);
    z-index: 1;
}

.hotline-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

.hotline-card:hover {
    transform: translateY(-5px);
}

/* Status Pulse Animation */
.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: statusPulse 1.5s infinite;
}

@keyframes statusPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

.ultra-small { font-size: 0.65rem; }
.ls-1 { letter-spacing: 1px; }
.fw-extrabold { font-weight: 900; }
.z-index-2 { z-index: 2; }
.bg-white-10 { background: rgba(255, 255, 255, 0.1); }
.border-white-20 { border-color: rgba(255, 255, 255, 0.2) !important; }

.contact-urgent-hero {
    background: linear-gradient(135deg, #07212d 0%, #0a2f3f 50%, #07212d 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.contact-urgent-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.contact-urgent-hero .display-4 {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pulse-btn {
    animation: pulseButton 2s infinite;
}

@keyframes pulseButton {
    0% { box-shadow: 0 0 0 0 rgba(250, 165, 26, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(250, 165, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 165, 26, 0); }
}

.bg-accent-orange {
    background-color: #FEBF1C !important;
}

.text-navy {
    color: #07212d !important;
}

.text-accent-orange {
    color: #FEBF1C !important;
}

.bg-navy {
    background-color: #07212d !important;
}

.btn-whatsapp {
    background-color: #25d366 !important;
    color: #fff !important;
    font-weight: 600;
    border: none;
}

.btn-whatsapp:hover {
    background-color: #128c7e !important;
    color: #fff !important;
}

.btn-outline-navy {
    color: #07212d !important;
    border: 2px solid #07212d !important;
    background: transparent;
    font-weight: 600;
}

.btn-outline-navy:hover {
    background-color: #07212d !important;
    color: #fff !important;
}

.btn-accent {
    background-color: #faa51a !important;
    color: #07212d !important;
    font-weight: 700;
    border: none;
}

.btn-accent:hover {
    background-color: #e59415 !important;
    color: #fff !important;
}

/* Branch Cards */
.branch-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.branch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(7, 33, 45, 0.15) !important;
}

.branch-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contact Form Section */
.contact-form-section {
    background-color: #f8f9fa;
}

@media (max-width: 768px) {
    body.contact-page .urgent-contact-header {
        margin-top: 0 !important;
    }

    body.contact-page .urgent-contact-header .container {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    body.contact-page .urgent-contact-header h1 {
        font-size: 2rem;
        line-height: 1.15;
    }

    body.contact-page .hotline-card {
        padding: 18px !important;
    }

    body.contact-page .hotline-card a.display-6 {
        font-size: 1.5rem;
    }

    body.contact-page .branch-hubs {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    body.contact-page .branch-hubs .mb-5 {
        margin-bottom: 2rem !important;
    }

    body.contact-page .branch-header {
        padding: 16px !important;
    }

    body.contact-page .branch-body {
        padding: 16px !important;
    }

    body.contact-page .branch-card:hover {
        transform: none;
    }

    body.contact-page .contact-form-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 576px) {
    body.contact-page .urgent-contact-header h1 {
        font-size: 1.7rem;
    }
}

.integration-trust {
    border-top: 3px solid #faa51a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-urgent-hero {
        padding: 60px 0;
    }
    
    .contact-urgent-hero .display-4 {
        font-size: 2rem;
    }
    
    .pulse-btn {
        animation: none;
    }
}

/* Fix for the toggle buttons */
.btn-toggle {
    color: #4a5568 !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc;
}

.btn-toggle.active {
    background-color: #07212d !important;
    color: #ffffff !important;
    border: none !important;
}

/* Hero Text Visibility */
.services-hero h1 {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    font-weight: 700;
}

.services-hero p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Make the breadcrumb pill more distinct */
.breadcrumb-pill {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Systems Bar text visibility */
.systems-bar p {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.6;
}

/* --- Live Tracking Card Styles --- */
.bg-navy { background-color: #07212d !important; }
.bg-white-10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.placeholder-white-50::placeholder { color: rgba(255, 255, 255, 0.5); }

.tracking-card {
    transition: all 0.4s ease;
    min-height: 380px;
}

@media (max-width: 768px) {
    body.claims-page .live-tracking {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    body.claims-page .tracking-card {
        min-height: auto;
        padding: 18px !important;
    }

    body.claims-page #trackingInitial .btn-accent {
        width: 100%;
    }
}

/* Timeline Styling */
.status-timeline {
    position: relative;
    padding-left: 35px;
}

.status-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.status-item {
    position: relative;
    padding-bottom: 30px;
}

.status-dot {
    position: absolute;
    left: -35px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid #07212d;
    z-index: 2;
}

/* Active and Completed States */
.status-item.completed .status-dot { background: #22c55e; }
.status-item.active .status-dot { 
    background: #faa51a; 
    box-shadow: 0 0 15px rgba(250, 165, 26, 0.6);
}

.status-item.active .status-content p { color: #faa51a; }

/* --- Branch Locator Styles --- */
.text-accent { color: #faa51a !important; }
.bg-accent { background-color: #faa51a !important; }
.text-navy { color: #07212d !important; }

.branch-card {
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.branch-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(7, 33, 45, 0.1) !important;
}

.branch-header {
    border-bottom: 4px solid #faa51a;
}

.btn-outline-primary {
    color: #07212d;
    border-color: #07212d;
}

.btn-outline-primary:hover {
    background-color: #07212d;
    color: #fff;
    border-color: #07212d;
}

.ls-2 { letter-spacing: 2px; }

/* --- Digital Assistant Styles --- */
.digital-assistant-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

/* Floating Action Button */
.fab-trigger {
    width: 65px;
    height: 65px;
    background-color: #faa51a;
    border: none;
    border-radius: 50%;
    color: #07212d;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fab-trigger:hover {
    transform: scale(1.1) rotate(5deg);
}

.notification-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 14px;
    height: 14px;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 50%;
}

/* Chat Panel */
.chat-panel {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transform-origin: bottom right;
    transition: all 0.3s ease;
}

.status-indicator {
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 5px #22c55e;
}

.btn-whatsapp {
    background-color: #25d366;
    color: #fff;
    font-weight: 600;
}

.btn-whatsapp:hover {
    background-color: #128c7e;
    color: #fff;
}

.btn-outline-navy {
    border: 2px solid #07212d;
    color: #07212d;
    font-weight: 600;
}

.btn-outline-navy:hover {
    background-color: #07212d;
    color: #fff;
}

.ultra-small { font-size: 0.7rem; }

.claims-hero {
    background-color: #07212d;
    padding-top: 120px;
}

.claims-search-card {
    border: 1px solid rgba(7, 33, 45, 0.1);
}

.claims-search-card .form-control:focus {
    border-color: #faa51a;
    box-shadow: 0 0 0 0.2rem rgba(250, 165, 26, 0.15);
}

/* Step Cards */
.step-card {
    position: relative;
    transition: all 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(7, 33, 45, 0.1) !important;
}

.step-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-number-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 28px;
    height: 28px;
    background: #faa51a;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.steps-connector {
    position: relative;
    margin-top: -80px;
    margin-bottom: 40px;
    height: 40px;
}

.connector-line {
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #faa51a, #faa51a, transparent);
    opacity: 0.3;
}

/* Document Checklist */
.checklist-accordion .accordion-button {
    background-color: #ffffff;
    color: #07212d;
    font-size: 1rem;
    box-shadow: none !important;
}

.checklist-accordion .accordion-button:not(.collapsed) {
    background-color: #ffffff;
    color: #faa51a;
}

.checklist li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

/* Tracking Section */
.tracking-preview-card {
    border: 1px solid rgba(7, 33, 45, 0.1);
}

.tracking-demo {
    background: #f8f9fa;
}

.progress-bar.bg-accent {
    background-color: #faa51a !important;
}

.bg-accent-subtle {
    background-color: rgba(250, 165, 26, 0.1);
}

/* Branch Cards */
.branch-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.branch-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(7, 33, 45, 0.1) !important;
}

.branch-icon {
    flex-shrink: 0;
}

/* Digital Assistant */
.assistant-visual {
    padding: 20px;
}

.chat-bubble {
    max-width: 320px;
    margin: 0 auto;
}

.chat-bubble .avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-options .badge {
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-options .badge:hover {
    background: #faa51a !important;
    color: white !important;
}

/* Service Cards */
.service-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.service-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(7, 33, 45, 0.15);
    border-color: var(--accent-orange);
}

.service-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-navy);
    color: var(--accent-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.service-card:hover .service-icon {
    background: var(--accent-orange);
    color: var(--primary-navy);
    transform: scale(1.1);
}

.service-card h4 {
    color: var(--primary-navy);
    margin-bottom: 15px;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.service-features li {
    padding: 8px 0;
    color: #666;
    font-size: 0.9rem;
}

.service-features li i {
    color: var(--accent-orange);
    margin-right: 10px;
}

.btn-service-link {
    background: transparent;
    border: 2px solid var(--primary-navy);
    color: var(--primary-navy);
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-service-link:hover {
    background: var(--primary-navy);
    color: white;
}

/* Gallery Masonry */
.gallery-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 33, 45, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay span {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Tech Integration Section */
.tech-integration {
    background: white;
}

.tech-features {
    list-style: none;
    padding: 0;
}

.tech-features li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

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

.tech-features i {
    font-size: 1.5rem;
}

.tech-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tech-badge {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.tech-badge:hover {
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.tech-badge img {
    max-width: 120px;
    max-height: 60px;
    object-fit: contain;
}

/* FAQ Accordion */
.faq-accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.faq-accordion .accordion-button {
    background: white;
    font-weight: 600;
    color: var(--primary-navy);
    padding: 20px 25px;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--primary-navy);
    color: white;
}

.faq-accordion .accordion-button::after {
    background-size: 1rem;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.faq-accordion .accordion-body {
    background: white;
    padding: 20px 25px;
    line-height: 1.8;
}

/* Floating Call Button (Mobile) */
.floating-call-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--accent-orange);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 5px 20px rgba(250, 165, 26, 0.4);
    z-index: 999;
    transition: all 0.3s ease;
    text-decoration: none;
}

.floating-call-btn:hover {
    transform: scale(1.1);
    color: white;
    background: #e59415;
}

@media (min-width: 992px) {
    .floating-call-btn {
        display: none;
    }
}

/* Mission & Vision Boxes */
.mission-box,
.vision-box {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Leader Card */
.leader-card {
    transition: all 0.3s ease;
}

.leader-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
}

/* Avatar Placeholder */
.avatar-placeholder {
    background: linear-gradient(135deg, var(--primary-navy), #0a1f2a) !important;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--accent-orange), #e55d00);
}

/* Stats Bar */
.stats-bar .nav-logo {
    height: 80px;
    width: auto;
    transition: all 0.3s ease;
}

.stats-bar .stat-item {
    transition: all 0.3s ease;
}

.stats-bar .stat-item:hover {
    transform: scale(1.05);
}

/* Text Colors */
.text-primary {
    color: var(--primary-navy) !important;
}

.text-accent {
    color: var(--accent-orange) !important;
}

.bg-primary {
    background-color: var(--primary-navy) !important;
}

.bg-accent {
    background-color: var(--accent-orange) !important;
}

.bg-light {
    background-color: var(--light-gray) !important;
}

/* ========================================
   Styles moved from index
   ======================================== */

/* Trust Bar Container */
.trust-bar-section {
    position: relative;
    margin-top: -40px;
    z-index: 10;
    padding: 0 15px;
}

.trust-bar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 25px 40px;
    gap: 20px;
}

/* Individual Trust Items */
.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1 1 200px;
}

.trust-icon i {
    font-size: 2rem;
    color: #6a1b9a;
    background: rgba(106, 27, 154, 0.1);
    padding: 12px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.trust-item:hover .trust-icon i {
    transform: scale(1.1);
}

.trust-text {
    display: flex;
    flex-direction: column;
}

.trust-text strong {
    font-size: 1.05rem;
    color: #333;
    font-weight: 700;
}

.trust-text span {
    font-size: 0.85rem;
    color: #666;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .trust-bar-section {
        margin-top: 20px;
    }
    .trust-bar-wrapper {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
}

/* --- Scroll Animation Classes --- */
.hidden-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.show-fade {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays for a cascading effect */
.delay-0 { transition-delay: 0s; }
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }

:root {
    --accent-purple: var(--primary);
    --text-dark: #2d3436;
}

.about-section { overflow: hidden; padding: 80px 0; }

.about-image-wrapper {
    position: relative;
    padding: 20px;
}

.main-about-img {
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: transform 0.5s ease;
}

/* Floating Stats Card */
.floating-stats-card {
    position: absolute;
    bottom: -10px;
    right: 0;
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    min-width: 220px;
}

.stat-inner { display: flex; align-items: center; gap: 15px; }
.stat-inner i { font-size: 2.5rem; color: var(--primary); }
.stat-number { font-size: 1.8rem; font-weight: 700; margin: 0; color: var(--text-dark); }
.stat-inner p { margin: 0; font-size: 0.9rem; color: #666; }

.location-badge {
    position: absolute;
    top: 40px;
    left: -10px;
    background: var(--primary);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 20px rgba(2, 79, 100, 0.25);
}

/* Content Styles */
.section-tagline { color: var(--primary); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem; }
.section-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 20px; color: var(--text-dark); }
.text-accent { color: var(--primary); }
.section-desc { color: #636e72; font-weight: 400; line-height: 1.8; margin-bottom: 20px; }

.about-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.about-feat-item { display: flex; gap: 12px; }
.feat-icon { color: var(--primary); font-size: 1.4rem; }
.feat-info h5 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.feat-info p { font-size: 0.85rem; color: #7f8c8d; line-height: 1.4; }

/* Animation Reveal Classes */
.reveal-fade-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease-out; }
.reveal-fade-right { opacity: 0; transform: translateX(50px); transition: all 0.8s ease-out; }
.active-reveal { opacity: 1; transform: translateX(0); }

@media (max-width: 991px) {
    .about-features-grid { grid-template-columns: 1fr; }
    .floating-stats-card { min-width: 200px; padding: 18px; border-radius: 18px; }
    .stat-inner i { font-size: 2.2rem; }
    .stat-number { font-size: 1.6rem; }
    .stat-inner p { font-size: 0.85rem; }
    .location-badge { font-size: 0.85rem; padding: 8px 16px; }
}

@media (max-width: 576px) {
    .about-section { padding: 60px 0; }
    .location-badge { font-size: 0.8rem; padding: 8px 14px; top: 20px; left: -6px; }
    .floating-stats-card { padding: 14px; min-width: 180px; border-radius: 16px; }
    .stat-inner { gap: 12px; }
    .stat-inner i { font-size: 2rem; }
    .stat-number { font-size: 1.4rem; }
    .stat-inner p { font-size: 0.8rem; }
}

/* ========================================
   Mobile Sidebar Navigation (Mobile Only)
   ======================================== */

/* Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    z-index: 9999999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mobile Sidebar */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 85%;
    height: 100vh;
    background: linear-gradient(180deg, #024F64 0%, #013a4b 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    z-index: 10000000;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}

.mobile-sidebar.active {
    transform: translateX(0);
}

/* Sidebar Header */
.mobile-sidebar .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-sidebar .sidebar-logo-img {
    max-height: 50px;
    width: auto;
}

.mobile-sidebar .sidebar-close-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 24px;
}

.mobile-sidebar .sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Sidebar Navigation Links */
.mobile-sidebar .sidebar-nav-links {
    list-style: none;
    padding: 20px;
    margin: 0;
    flex-grow: 1;
}

.mobile-sidebar .sidebar-nav-links li {
    margin-bottom: 5px;
}

.mobile-sidebar .sidebar-nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    display: block;
    padding: 15px 20px;
    border-radius: 10px;
    transition: all 0.2s;
}

.mobile-sidebar .sidebar-nav-links a:hover,
.mobile-sidebar .sidebar-nav-links a.active {
    background: rgba(254, 191, 28, 0.2);
    color: #FEBF1C;
}

/* Sidebar Footer */
.mobile-sidebar .sidebar-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-sidebar .sidebar-contact {
    margin-bottom: 15px;
}

.mobile-sidebar .sidebar-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 500;
    transition: color 0.2s;
}

.mobile-sidebar .sidebar-contact a:hover {
    color: #FEBF1C;
}

.mobile-sidebar .sidebar-contact i {
    font-size: 18px;
    color: #FEBF1C;
}

.mobile-sidebar .sidebar-social {
    display: flex;
    gap: 12px;
}

.mobile-sidebar .sidebar-social a {
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.mobile-sidebar .sidebar-social a:hover {
    background: #FEBF1C;
    color: #024F64;
}

/* Hide on desktop - show only on mobile */
@media (min-width: 992px) {
    .sidebar-overlay,
    .mobile-sidebar {
        display: none !important;
    }
}